一.标签分类

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

常用的块状元素:

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

常用的行内元素:

<a> <span> <br> <i> <em> <strong> <label>

常用的行内块级元素:

<img> <input>

块级元素特点:display:block

　　1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.自己独占一行.

　　2.元素的高度,宽度,行高,顶边距和底边距都可以设置

　　3.元素的宽度在不设置的情况下,默认是本身父容器的的宽度.

行内元素(内联元素)的特点:display:inline

　　1.和其他元素在同一行上

　　2.元素的高度,宽度,顶边距和底边距都不可以设置

　　3.元素的宽度就是它包含的文字或者图片的宽度,不可改变

行内块级元素:display:inline-block

　　1.和其他元素都在一行上

　　2.元素的高度,宽度,行高,顶边距和底边距都可以设置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>标签分类</title>

</head>

<body>

    <div class="wapper">

        <!--块状元素: <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> -->

        <div class="left">

            我的学校

            <div>我的区域

                <div style="width:500px;height:100px">我的爱好

                </div>

                <ul>

                    <li>

                        <h2>抽烟</h2>

                    </li>

                    <li>

                        <ol>

                            <li>喝酒</li>

                            <li>烫头</li>

                        </ol>

                    </li>

                </ul>

            </div>

        </div>

        <div class="right">

            <!-- 行内元素:<a> <span> <br> <i> <em> <strong> <label> -->

                <a href="#">顶部</a>

                <a href="https://www.baidu.com" target="_blank">百度</a>

        </div>

        <div class="inline-block">

            <!-- img input -->

            <img src="./homesmall.png" alt="加载失败时显示我" title="浏览时显示我">

            <!-- <img src="./homesmall2.png" alt="加载失败时显示我" title="浏览时显示我"> -->

            用户名:

            <input type="text" name="user" style="width:100px;height:50px">

        </div>

    </div>

</body>

</html>

例子

二.嵌套规则

　　1.块元素可以包含内联(行内)元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：

<div><div></div><h1></h1><p><p></div> ✔️

<a href=”#”><span></span></a> ✔️

<span><div></div></span> ❌

　　2.块级元素不能放在p标签里面，例如:

<p><ol><li></li></ol></p> ❌

<p><div></div></p> ❌

　　3.有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：　　

h1、h2、h3、h4、h5、h6、p

　　4.li元素可以嵌入ul，ol，div等标签

<ul>

        <li>

            <ul>

                <li>

                    <div>

                    </div>

                </li>

                <li>

                    <ol>

                        <li></li>

                        <li></li>

                        <li></li>

                        <li></li>

                    </ol>

                </li>

            </ul>

        </li>

    </ul>

Unit 3.标签的分类和嵌套规则的更多相关文章

  1. HTML标签嵌套规则

    摘要:  最近在整理项目时发现有些同事写的页面代码嵌套的太多,而且有些嵌套不对,比如<a><div>内容</div></a>.虽然功能实现了,但是对于浏 ...

  2. 常见的HTML标签的嵌套规则

    众所周知,HTML标签有两类: 块级元素div.h1~h6.address.blockquote.center.dir.dl.dt.dd.fieldset.form.hr.isindex.menu.n ...

  3. web@HTML常用标签分类，标签嵌套规则

    一.html标签又叫做html元素,它分为块级元素和内联元素(也可以叫做行内元素),都是html规范中的概念.1.块级元素块级元素是指本身属性为display:block;的元素.因为它自身的特点,我 ...

  4. HTML5标签嵌套规则

    × 目录 [1]分类 [2]子元素 [3]总结 前面的话 在html5中,<a>元素的子元素可以是块级元素,这在以前是被认为不符合规则的.本文将详细介绍html5的标签嵌套规则 分类 ht ...

  5. XHTML标签的嵌套规则分析

    在 XHTML 的语言里,我们都知道:ul 标签包含着 li.dl 标签包含着 dt 和 dd——这些固定标签的嵌套规则十分明确.但是,还有许多标签是独立的,它们没有被捆绑在一起,比如 h1.div. ...

  6. HTML标签的嵌套规则

    我在平时在写html文档的时候,发现不太清楚标签之间的嵌套规则,经常是想到什么标签就用那些,后来发现有些标签嵌套却是错误的.通过网上找资料,了解了html标签的嵌套规则. 一.HTML 标签包括 块级 ...

  7. XHTML标签的嵌套规则--很基础很重要

    XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...

  8. html标签的嵌套规则分析

    1.a标签最好不要嵌套块级元素,可以嵌套内联元素,但是不能嵌套a标签和input之类的标签.能嵌套的标签像,等等. 2.ul和ol的子元素不能是别的元素只能是li,不能是别的比如div等,但是li中可 ...

  9. 5.html基础标签:块级+行级元素+特殊字符+嵌套规则

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. C#调用Oracle的存储过程时，连接字符串需要配置PLSQLRSet=1

    C#调用Oracle的存储过程时, 如果有个SYS_REFCURSOR的Output参数存储时, web.config文件中的连接字符串需要配置PLSQLRSet=1, 否则可能会报这个错:参数个数或 ...

  2. 从零开始学安全(三十一)●kali 输入 msfconsole 启动报错

    解决方法: 实际上是因为没安装就开启了msf,用下面三个命令就解决了 sudo apt-get updatesudo apt-get install metasploit-frameworkmsfco ...

  3. C# 合并Excel工作表

    文档合并.拆分是实现文档管理的一种有效方式.在工作中,我们可能会遇到需要将多个文档合并的情况,那如何来实现呢,本文将进一步介绍.关于拆分Excel工作表,可参见这篇文章——C#如何拆分EXCEL工作表 ...

  4. 【SpringBoot】拦截器使用@Autowired注入接口为null解决方法

    最近使用SpringBoot的自定义拦截器,在拦截器中注入了一个DAO,准备下面作相应操作,拦截器代码: public class TokenInterceptor implements Handle ...

  5. BOM—浏览器对象模型（Browser Object Model）

     1,javascript   组成部分: 1.ECMAscript(核心标准):    定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM  : 浏览器对象模型(Browser ...

  6. Vue的使用

    mvc model view controller mvvm m=>model v=>view 双向数据绑定 数据在视图呈现:在表单里用v-model,在表单外用{{}},也可以用v-te ...

  7. 博弈论进阶之SG函数

    SG函数 个人理解:SG函数是人们在研究博弈论的道路上迈出的重要一步,它把许多杂乱无章的博弈游戏通过某种规则结合在了一起,使得一类普遍的博弈问题得到了解决. 从SG函数开始,我们不再是单纯的同过找规律 ...

  8. 【代码笔记】Web-CSS-CSS样式列表(url)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. iOS ----------NSDate 、CFAbsoluteTimeGetCurrent、CACurrentMediaTime 的区别

    框架层: NSDate 属于Foundation CFAbsoluteTimeGetCurrent() 属于 CoreFoundatio CACurrentMediaTime() 属于 QuartzC ...

  10. 微信小程序（七）文章详情页面动态显示

    文章详情页面动态显示(即点击某个文章就跳转到相应文章的详情页): 思路:在文章列表页面添加catchtop事件,在js文件中获取文章的index,并用wx.navigateTo中的 url拼接详情页的 ...