一.标签分类

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. Php中的goto用法

    我们先举个简单示例: <?php goto LABEL; //这个标签自定义 echo '乔峰'; LABEL: echo '鸠摩智'; 以上例程会输出:鸠摩智 解释:goto 操作符可以用来跳 ...

  2. zepto和jQuery on事件委托在苹果手机上的”坑“

    移动端用zepto做的页面,突然发现on绑定的click事件并没有触发,代码如下: <ul> <li class="a">1111111aaaaaaasss ...

  3. excel 函数1

    1 函数的相对引用和绝对引用 1.1绝对引用,相对引用和混合引用 按住F4键可以相互切换 1.2 if and or函数 案例图片 =IF(C7>30000,"大商家",&q ...

  4. Error: No PostCSS Config found in... 报错 踩坑记

    项目在本地运行不报错,上传到 GitHub 之后,再 clone 到本地,执行: npm install 安装完成之后再执行: npm run dev 这时报错 Error: No PostCSS C ...

  5. 浅谈"n个球"和"m个盒子"之间的乱伦关系

    无视标题,从我做起 update in 2018.10.1: 补充了"至多为1的四中情况" 这玩意儿的官方名字应该是叫"Twelvefold way",共用12 ...

  6. 自定义一个全屏的AlertDialog。

    ........... final MyDialog dialog = new MyDialog(this); LayoutInflater inflater = getLayoutInflater( ...

  7. 记阿里云SLB后配置Nginx反向代理百度地图API的坑

    需求: 百度的原始请求:https://api.map.baidu.com/place/v2/suggestion?query=s&region=sc&city_limit=true& ...

  8. Word Count作业

    Word Count作业 一.个人Gitee地址:https://gitee.com/Changyu-Guo 二.项目简介 该项目主要是模拟Linux上面的wc命令,基本要求如下: 命令格式: wc. ...

  9. Python面试笔记二

    一.算法 1.归并排序 2.快速排序 3.算法复杂度 4.哈希表数据结构 二.数据库 1.设计一个用户关注系统的数据库表 1.设计一个用户关注系统的数据库表,写三个相关的SQL语句两张表,一张user ...

  10. 使用mybatis操作AS400数据库

    先简单说一下怎么使用[jt400.jar]连接AS400上的DB2数据库. ※ jt400.jar资源,如果有安装AS400客户端的话,参考IBM官网 ※ http://www-01.ibm.com/ ...