一.标签分类

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. [Linux] memache打印所有的key

    1.在使用memcache的时候 , 经常需要查看下里面存储的值 , 前提是要先知道key是啥,memcache没有redis的keys命令 2.下面两个命令的结合,可以查看到key stats it ...

  2. C# 定时器-System.Timers.Timer

    using Newtonsoft.Json; using Rafy; using Rafy.Domain; using System; using System.Collections.Generic ...

  3. Android注解神器 ButterKnife框架

    前言: 本人是一个只有几个月工作经验的码小渣.这是我写的第一篇博客,如有不足之处还请大家不要介意,还请大佬可以指出问题. 在这几个月的实战开发中自己也遇到了很多问题,真的是举步艰难啊!!! 在实战开发 ...

  4. [20190415]11g下那些latch是共享的.txt

    [20190415]11g下那些latch是共享的.txt http://andreynikolaev.wordpress.com/2010/11/23/shared-latches-by-oracl ...

  5. 基于JavaMail的Java邮件发送：简单邮件发送

    使用Java应用程序发送 E-mail 十分简单,但是首先你应该在你的机器上安装 JavaMail API 和Java Activation Framework (JAF) . 您可以从 Java 网 ...

  6. WinServer-FTP搭建

    FTP服务器(File Transfer Protocol Server)是在互联网上提供文件存储和访问服务的计算机,它们依照FTP协议提供服务. FTP是File Transfer Protocol ...

  7. TinScrapy-简化的Scrapy原码-查看爬虫的执行流程

    学习了自定义的TinyScrapy框架,整理出以下定注释的代码 from twisted.web.client import getPage,defer from twisted.internet i ...

  8. C# 反射的例子

    通过字符串变量访问控件 string t = "textbox1"; TextBox tb = (TextBox)this.GetType().GetField(t, System ...

  9. 统计numpy数组中最频繁出现的值

    arr = np.array([[1,2,100,4,5,6],[1,1,100,3,5,5],[2,2,4,4,6,6]]) 方法一: count = np.bincount(arr[:,2]) # ...

  10. Go语言学习笔记-函数部分（三）

    函数部分 函数基本组成:关键字func.函数名.参数列表.返回值.函数体.返回语句 例子: func Add(int a, int b) (return int, err error){ ....函数 ...