阿离王带你零基础学习前端

# 标签嵌套规则

一般来说，有以下几点规则：

# 页面 html标签、head标签、body标签只能写一个

写多个会自动合并，不写虽然也会自动生成，但是大家还是保持良好书写习惯比较好，统一规范

追求规范写法，对整齐（嵌套就缩进），写的代码优雅，像诗一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<head>
    <title>html嵌套规则</title>
</head>
<body>
    我是页面正文内容
    <body>
        我是body内容
    </body>
</body>
</html>

<html>
    <body>
        这个html里面的内容不显示
    </body>
</html>

# 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素

<!-- 写法正确 -->
<div>
    <span>我是文本标签</span>
</div>

<!-- 写法错误 -->
<span>
    <div>我是容器标签</div>
</span>

 <!-- 正确写法 -->
<span>
    <i>我是斜体标签</i>
</span>

# 块级元素不能放在<p>标签里面

<!-- 错误写法 -->
<p>
    <div>我是容器标签</div>
</p>

<!-- 正确写法 -->
<p>我是一段文字</p>
<div>
    <p>我是一段文字</p>
</div>

# li元素可以嵌入各种标签

<ul>
    <li>我是ul, li无序列表</li>
    <li>
        <div>我是容器标签</div>
    </li>
    <li>
        <p>我是段落标签</p>
    </li>
    <li>
        <a href="http://www.baidu.com">我是超链接 百度一下</a>
    </li>
    <li>
        <ol>
            <li>我是ol li 有序列表</li>
            <li>
                <input type="text" placeholder="请输入" />
            </li>
            <li>
                <input type="file" />
            </li>
        </ol>
    </li>
</ul>
更新时间: 2021年8月30日星期一晚上9点32分

← html学习成果测试 →