简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML简介和Emmet语法和使用案例
Blogger Information
Blog 14
fans 2
comment 1
visits 7993
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML简介和Emmet语法和使用案例
梦想
Original
379 people have browsed it

HTML简介

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

  1. <!-- 声明当前文档的类型 html5类型 -->
  2. <!DOCTYPE html>
  3. <!-- 当前html页面的语言 -->
  4. <html lang="zh-CN">
  5. <!-- head标签是网页的头部标签，一般情况下给搜索引擎看的，用户不关注该内容 -->
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>Document</title>
  11. </head>
  12. <!-- body标签是网页的身体部分，用户看的到内容写在body标签中 -->
  13. <body>
  14.     <h1>php中文网</h1>
  15.     <h2>20期第二天上课</h2>
  16. </body>
  17. </html>

HTML的组成

html由3部分组成

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

Emmet语法

Emmet语法简介

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

  1.     <!-- 快速生成html结构 -->
  2.      html:5+tab 或  !+tab 
  3.     <!-- 快速生成DIV标签div+tab -->
  4.     <div></div>
  5.     <!-- 快速生成DIV标签带clsaa元素 .test+tab -->
  6.     <div class="test"></div>
  7.     <!-- 快速生成DIV标签中有id属性 #test+tab  -->
  8.     <div id="test"></div>
  9.     <!-- 生成div标签带id属性和文字内容#test{你好} -->
  10.     <div id="test">你好</div>
  11.     <!-- 快速生成DIV标签带clsaa元素 id属性 文字内容 .test#nameid{你好}  -->
  12.     <div class="test" id="nameid">你好</div>
  13.     <!-- 父子关系如下 -->
  14.     <div>
  15.         <li></li>
  16.     </div>
  17.     <!-- emmet语法快速生成 >表示 如div>li -->
  18.     <div>
  19.         <li></li>
  20.     </div>
  21.     <!-- 兄弟关系如下 -->
  22.     <div></div>
  23.     <li></li>
  24.     <!-- emmet语法快速生成 +表示 如div+li -->
  25.     <div></div>
  26.     <li></li>
  27.     <!-- emmet快速在div中生成5个li标签并lin标签中有文字 如.name>li{你好}*5 -->
  28.     <div class="name">
  29.         <li>你好</li>
  30.         <li>你好</li>
  31.         <li>你好</li>
  32.         <li>你好</li>
  33.         <li>你好</li>
  34.     </div>
  35.    <!-- emmet快速在div中生成5个li标签并lin标签中有文字，文字按1-5顺序排列 如.name>li{你好$}*5 -->
  36.    <div class="name">
  37.     <li>你好1</li>
  38.     <li>你好2</li>
  39.     <li>你好3</li>
  40.     <li>你好4</li>
  41.     <li>你好5</li>
  42.    </div>
  43.     <!-- emmet快速在div中生成5个li标签并lin标签中有文字，文字按5-9顺序排列 如.name>li{你好$@5}*4 -->
  44.    <div class="name">
  45.     <li>你好5</li>
  46.     <li>你好6</li>
  47.     <li>你好7</li>
  48.     <li>你好8</li>
  49.    </div>
  50.    <!-- emmet快速在div中生成5个li标签并lin标签中有文字，文字按9-5顺序排列 如.name>li{你好$@-5}*5 -->
  51.    <div class="name">
  52.     <li>你好9</li>
  53.     <li>你好8</li>
  54.     <li>你好7</li>
  55.     <li>你好6</li>
  56.     <li>你好5</li>
  57.    </div>
  58.    <!-- emmet快速生成一个代码段，包括父子*3+兄弟*5 .name>(ul>li*3>a{你好})+span*5-->
  59.    <div class="name">
  60.     <ul>
  61.         <li><a href="">你好</a></li>
  62.         <li><a href="">你好</a></li>
  63.         <li><a href="">你好</a></li>
  64.     </ul>
  65.     <span>
  67.     </span>
  68.     <span>
  70.     </span>
  71.     <span>
  73.     </span>
  74.     <span>
  76.     </span>
  77.     <span>
  79.     </span>
  80. </div>
  81.    </div>

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

  1. <div class="name">
  2.     <ul>
  3.         <li><a href="">你好</a><span></span><span></span><span></span><span></span><span></span></li>
  4.         <li><a href="">你好</a><span></span><span></span><span></span><span></span><span></span></li>
  5.         <li><a href="">你好</a><span></span><span></span><span></span><span></span><span></span></li>
  6.     </ul>
  7.    </div>

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

  1.     <div class="name">
  2.     <ul>
  3.         <li><a href="">你好</a></li>
  4.         <li><a href="">你好</a></li>
  5.         <li><a href="">你好</a></li>
  6.     </ul>
  7.     <span></span><span></span><span></span><span></span><span></span></div>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！