一.标签分类

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. HAProxy负载均衡技术

    软件负载均衡一般通过两种方式来实现:基于操作系统的软负载实现和基于第三方应用的软负载实现.LVS就是基于Linux操作系统实现的一种软负载,HAProxy就是开源的并且基于第三应用实现的软负载. HA ...

  2. C# 创建邮件合并模板并合并文本、图片

    对于Word中的邮件合并功能,用户可以将邮件合并后的结果文档保存并打印,也可以通过邮件的形式发送,在很多场合需要使用到此功能.那对于编程人员,我们也可以在C#语言环境中通过代码的形式来实现.根据需要先 ...

  3. PHP 中的Trait

    概述 在PHP中有一种代码复用的技术, 因为单继承的问题, 有些公共方法无法在父类中写出, 而 Trait可以应对这种情况, 它可以定义一些复用的方法, 然后在你需要使用的类中将其引入即可. 刚开始的 ...

  4. vue + elementUi + upLoadIamge组件 上传文件到阿里云oss

    <template> <div class="upLoadIamge"> <el-upload action="https://jsonpl ...

  5. 后台返回excel文件流，js下载

    /** 下载excel */ downloadExcel(data: Blob): void { var blob = new Blob([data], { type: 'application/vn ...

  6. XSS 漏洞介绍

    概念: XSS 攻击:跨站脚本攻击 (Cross Site Scripting),为不和层叠样式表 (Cascading Style Sheets, CSS) 的缩写混淆.故将跨站脚本攻击缩写为 XS ...

  7. IEC104协议规约解析

    一.四遥信息体基地址范围 104调度规约有1997年和2002年两个版本,在流程上没有什么变化,02版只是在97版上扩展了遥测.遥信等信息体基体址,区别如下: 类别 1997版基地址 2002版基地址 ...

  8. Easyui datagrid 实现表格记录拖拽

    datagrid 实现表格记录拖拽 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 jquery-easyui-datagrid-dnd 下载地址: http ...

  9. Android ContenObserver 监听联系人数据变化

    一.知识介绍 1.ContentProvider是内容提供者 ContentResolver是内容解决者(对内容提供的数据进行操作) ContentObserver是内容观察者(观察内容提供者提供的数 ...

  10. sql左外连接和右外连接的区别例子转摘

    sql左外连接和右外连接的区别   两个表:A(id,name)数据:(1,张三)(2,李四)(3,王五)B(id,name)数据:(1,学生)(2,老师)(4,校长) 左连接结果:select A. ...