一.标签分类

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# string数组转int数组（转载）

    C# string数组转int数组   用法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //字符串数组(源数组) string[] sNums = new[] {"1 ...

  2. Java学习笔记之——线程的生命周期、线程同步

    一． 线程的生命周期 新建(new Thrad):创建线程后,可以设置各个属性值,即启动前 设置 就绪(Runnable):已经启动,等待CPU调动 运行(Running):正在被CPU调度 阻塞(B ...

  3. 灵活使用 console 让 js 调试更简单

    摘要: 玩转console. 原文:灵活使用 console 让 js 调试更简单 作者:前端小智 Fundebug经授权转载,版权归原作者所有. Web 开发最常用的就是 console.log , ...

  4. 通过ADB查看当前Activity

    cmd命令中输入:adb shell dumpsys activity activities 在一连串的输出中找到Runing activities com.android.settings是包名. ...

  5. PM真的不是PM

    上周写了一篇<PM意识2.0>,前同事老A留言给我说:“PM已死!”一句话勾起很多回忆啊~当年,我们在一家内资IT公司,我是质量总监,他是研发总监,带四五个PM.老A负责所有项目的计划和监 ...

  6. linux快捷进入长目录的方法

    快捷命令   :alias chaoyang ='cd /usr/lib/uu/hh/lib' 1.将上述设置写到家目录的.bashrc文件中(~/.bashrc) 2.然后source ./bash ...

  7. Spark资源调度和任务调度

    一.资源调度&任务调度 1.启动集群后,Worker节点会周期性的[心跳]向Master节点汇报资源情况,Master掌握集群资源情况. 2.当Spark提交一个Application后,根据 ...

  8. Python XML解析之ElementTree

    参考网址: http://www.runoob.com/python/python-xml.html https://docs.python.org/2/library/xml.etree.eleme ...

  9. Python__装饰器练习题

    一:编写函数,(函数执行的时间是随机的) import time def timmer(func): def wrapper(*args,**kwargs): start= time.time() f ...

  10. jQuery中 对标签元素操作（2）

    一.属性操作 1.获取属性和设置属性 例如下jQuery代码: var $para=$("p");           //获取<p>节点 var p_txt=$par ...