HTML简介

html是一个标签语言，html内容是由一个个标签堆叠出来了的语言

<!-- 声明当前文档的类型 html5类型 -->
<!DOCTYPE html>
<!-- 当前html页面的语言 -->
<html lang="zh-CN">
<!-- head标签是网页的头部标签，一般情况下给搜索引擎看的，用户不关注该内容 -->
<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">
    <title>Document</title>
</head>
<!-- body标签是网页的身体部分，用户看的到内容写在body标签中 -->
<body>
    <h1>php中文网</h1>
    <h2>20期第二天上课</h2>
</body>
</html>

HTML的组成

html由3部分组成

html标签
css 样式语言声明html的样式
javascipt 脚本语言网页的交互是由js完成的。
注意：
css对位置不敏感，可以卸载网页的head和body标签中的任意位置。
javascipt则对位置非常敏感，一般写在</body>标签的前面。

Emmet语法

Emmet语法简介

什么是Emmet语法？Emmet语法有什么有？emmet语法可以帮助前端开发者快速生成html代码。有id选择器，层级关系。重复生成，文字内容，序号排列等快速生成html代码的语法，详情见下面：

    <!-- 快速生成html结构 -->
     html:5+tab 或  !+tab 
    <!-- 快速生成DIV标签div+tab -->
    <div></div>
    <!-- 快速生成DIV标签带clsaa元素 .test+tab -->
    <div class="test"></div>
    <!-- 快速生成DIV标签中有id属性 #test+tab  -->
    <div id="test"></div>
    <!-- 生成div标签带id属性和文字内容#test{你好} -->
    <div id="test">你好</div>
    <!-- 快速生成DIV标签带clsaa元素 id属性 文字内容 .test#nameid{你好}  -->
    <div class="test" id="nameid">你好</div>
    <!-- 父子关系如下 -->
    <div>
        <li></li>
    </div>
    <!-- emmet语法快速生成 >表示 如div>li -->
    <div>
        <li></li>
    </div>
    <!-- 兄弟关系如下 -->
    <div></div>
    <li></li>
    <!-- emmet语法快速生成 +表示 如div+li -->
    <div></div>
    <li></li>
    <!-- emmet快速在div中生成5个li标签并lin标签中有文字 如.name>li{你好}*5 -->
    <div class="name">
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
    </div>
   <!-- emmet快速在div中生成5个li标签并lin标签中有文字，文字按1-5顺序排列 如.name>li{你好$}*5 -->
   <div class="name">
    <li>你好1</li>
    <li>你好2</li>
    <li>你好3</li>
    <li>你好4</li>
    <li>你好5</li>
   </div>
    <!-- emmet快速在div中生成5个li标签并lin标签中有文字，文字按5-9顺序排列 如.name>li{你好$@5}*4 -->
   <div class="name">
    <li>你好5</li>
    <li>你好6</li>
    <li>你好7</li>
    <li>你好8</li>
   </div>
   <!-- emmet快速在div中生成5个li标签并lin标签中有文字，文字按9-5顺序排列 如.name>li{你好$@-5}*5 -->
   <div class="name">
    <li>你好9</li>
    <li>你好8</li>
    <li>你好7</li>
    <li>你好6</li>
    <li>你好5</li>
   </div>
   <!-- emmet快速生成一个代码段，包括父子*3+兄弟*5 .name>(ul>li*3>a{你好})+span*5-->
   <div class="name">
    <ul>
        <li><a href="">你好</a></li>
        <li><a href="">你好</a></li>
        <li><a href="">你好</a></li>
    </ul>
    <span>
    </span>
    <span>
    </span>
    <span>
    </span>
    <span>
    </span>
    <span>
    </span>
</div>
   </div>

总结：
在使用emmet语法时注意事项：一段代码中带父子和兄弟关系的在父子关系需要用（）包裹起来否则就会出现一下情况 .name>ul>li3>a{你好}+span5

<div class="name">
    <ul>
        <li><a href="">你好</a><span></span><span></span><span></span><span></span><span></span></li>
        <li><a href="">你好</a><span></span><span></span><span></span><span></span><span></span></li>
        <li><a href="">你好</a><span></span><span></span><span></span><span></span><span></span></li>
    </ul>
   </div>

由此可见兄弟关系会在父子关系中出现在包裹后关系比较明确 .name>(ul>li3>a{你好})+span5

    <div class="name">
    <ul>
        <li><a href="">你好</a></li>
        <li><a href="">你好</a></li>
        <li><a href="">你好</a></li>
    </ul>
    <span></span><span></span><span></span><span></span><span></span></div>

HTML简介和Emmet语法和使用案例

HTML简介

HTML的组成

Emmet语法

Emmet语法简介

相关文章