简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML文档解析/markdown语法介绍/emmet语法介绍
Blogger Information
Blog 43
fans 4
comment 0
visits 18985
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文档解析/markdown语法介绍/emmet语法介绍
汇享科技
Original
591 people have browsed it

HTML文档结构详解

  1. <!-- 声明文档类型是HTML -->
  2. <!DOCTYPE html>
  3. <!-- 根元素/根标签且一个页面只存在一个 -->
  4. <html lang="en">
  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>初学第二章：HTML文档解析/markdown语法介绍/emmet语法介绍</title>
  11.     </head>
  12.     <!-- 主体标签：此部分是用户可以在浏览器看到的地方，用标签进行包裹例如<h1>博客</h1> -->
  13.     <body></body>
  14. </html>

HTML三大部分

  • html代码块：模块/结构 标签组成
  • css样式：主要是用户自定义样式和默认样式组成
  • js脚本：通常是一些用户交互例如弹窗

    HTML文档解析步骤

  • html文档解析是从上往下执行html代码和css样式没有固定位置，js对有dom操作的交互需要放在规范位置通常是</body>标签上方
  • 如果js代码放在body标签前面,恰好js代码中有dom操作对指定标签进行操作，将会在控制台报错例如：
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.       <meta charset="UTF-8" />
    5.       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.       <title>初学第二章：HTML文档解析/markdown语法介绍/emmet语法介绍</title>
    8.       <script>
    9.           /*将h1标签文字颜色更改为蓝色*/
    10.           document.querySelector("h1").style.color = blue;
    11.       </script>
    12.   </head>
    13.   <body>
    14.       <h1>初学第二章：HTML文档解析/markdown语法介绍/emmet语法介绍</h1>
    15.   </body>
    16. </html>

    报错：l52j9596.png

  • js某些操作会中断浏览器文档解析，完成当前操作才会继续向下解析例如以下代码
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.       <meta charset="UTF-8" />
    5.       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.       <title>初学第二章：HTML文档解析/markdown语法介绍/emmet语法介绍</title>
    8.       <script>
    9.         /*弹窗点击确定后才会将H1标签显示*/
    10.           alert(111);
    11.       </script>
    12.   </head>
    13.   <body>
    14.       <h1>初学第二章：HTML文档解析/markdown语法介绍/emmet语法介绍</h1>
    15.   </body>
    16. </html>

    markdown常用语法介绍

    1.标题语法

    1. # 一级标题 
    2. ## 二级标题 
    3. ### 三级标题 
    4. #### 四级标题
    5. ##### 五级标题 
    6. ###### 六级标题

    注意标题语法最多建议使用三层不建议使用到5 6层

    2.代码块

    代码块语法：
    单行代码：两个反引号中间填写代码没有高亮提示单行代码
    lte a ＝ 10;
    多行代码三个反引号+对应的代码语言名称：
    中间为代码结构

  1. $a ＝ 1;
  2. $b ＝ $a;
  3. $c ＝ $a + $b; 
  4. echo$c;

3.有序列表/无序列表

有序列表：用数字1+小数点+空格后面跟内容

  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
    无序列表：通常使用减号+空格后面跟内容
  • 无序列表1
  • 无序列表2
  • 无序列表2

    4.表格

    表格的构造类似于画图
    表格的表头与表体需要用|+-分割 而每列需要使用|隔开
名字 年龄 性别 爱好
小刘 18 男 PHP
小花 17 女 java
小王 19 男 go

5.图片插入

图片插入使用一个感叹号+一对中阔号+一个小括号表示
l52jyhv8.png

emmet 语法介绍

emmet 语法是编辑器内置的一个语法插件,该语法帮助开发者快速完成代码编写提高编写效率

1.快速生成 HTML 文档代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10. <!-- 在vscode当中输入html:5或者一个英文状态下的感叹号!按下TAB键即可自动生成如下代码 -->
  11. </body>
  12. </html>

2.如何快速创建一个盒子模型/层级关系>+号讲解

  1.         <div class="box">box</div>
  2.         <!-- div.box{box} 输入代码按下TAB会快速生成如上效果的盒子 当然默认的标签是div 可以简化成.box{box} -->

3.如何快速生成一个列表

我想生成如图所示列表用 emmet 语法怎么操作
l52kbctx.png

  1.         <ul>
  2.             <li class="item"><a href="">a</a></li>
  3.             <li class="item"><a href="">a</a></li>
  4.             <li class="item"><a href="">a</a></li>
  5.             <li class="item"><a href="">a</a></li>
  6.         </ul>
  7.         <!-- ul>li.item*4>a{a}按下TAB键即可自动生成如如上代码 -->

4.$ @符号的讲解

$：数字递增从1开始增加 @：可以指定$索引从任意数字递增
$@-5:表示从几倒数到5 例如：
l52kkf79.png

  1.         <!-- ul>li.item*4>a{a$@}按下TAB键即可自动生成如如下代码 -->
  2.         <ul>
  3.             <li class="item"><a href="">a5</a></li>
  4.             <li class="item"><a href="">a6</a></li>
  5.             <li class="item"><a href="">a7</a></li>
  6.             <li class="item"><a href="">a8</a></li>
  7.         </ul>

5.如何快速生成一个表格

表格通常由table标签里面由thead和tbody标签组成 thead内部通常有tr th组成 tbody内部通常是tr td组成

  • th:表头单元格,表格中的文字将以粗体显示，在表格中也可以不用此标签，th标签必须放在tr标签内
  • tr: 表示行，一组行标签里面可以放td th 标签
  • td: 表示列，td标签必须放在tr标签内
    l52l6q0j.png
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.       <meta charset="UTF-8" />
    5.       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.       <title>Document</title>
    8.       <style>
    9.           table {
    10.               border-collapse: collapse;
    11.           }
    12.           table td,
    13.           table th {
    14.               border: 1px solid blue;
    15.           }
    16.       </style>
    17.   </head>
    18.   <body>
    19.       <!-- 快速生成一个表格 -->
    20.       <!-- table>caption{课程表}+(thead>tr>th{星期$}*7)+(tbody>tr*6>td{html}*7) -->
    21.       <table>
    22.           <caption>
    23.               课程表
    24.           </caption>
    25.           <thead>
    26.               <tr>
    27.                   <th>星期1</th>
    28.                   <th>星期2</th>
    29.                   <th>星期3</th>
    30.                   <th>星期4</th>
    31.                   <th>星期5</th>
    32.                   <th>星期6</th>
    33.                   <th>星期7</th>
    34.               </tr>
    35.           </thead>
    36.           <tbody>
    37.               <tr>
    38.                   <td>html</td>
    39.                   <td>html</td>
    40.                   <td>html</td>
    41.                   <td>html</td>
    42.                   <td>html</td>
    43.                   <td>html</td>
    44.                   <td>html</td>
    45.               </tr>
    46.               <tr>
    47.                   <td>html</td>
    48.                   <td>html</td>
    49.                   <td>html</td>
    50.                   <td>html</td>
    51.                   <td>html</td>
    52.                   <td>html</td>
    53.                   <td>html</td>
    54.               </tr>
    55.               <tr>
    56.                   <td>html</td>
    57.                   <td>html</td>
    58.                   <td>html</td>
    59.                   <td>html</td>
    60.                   <td>html</td>
    61.                   <td>html</td>
    62.                   <td>html</td>
    63.               </tr>
    64.               <tr>
    65.                   <td>html</td>
    66.                   <td>html</td>
    67.                   <td>html</td>
    68.                   <td>html</td>
    69.                   <td>html</td>
    70.                   <td>html</td>
    71.                   <td>html</td>
    72.               </tr>
    73.               <tr>
    74.                   <td>html</td>
    75.                   <td>html</td>
    76.                   <td>html</td>
    77.                   <td>html</td>
    78.                   <td>html</td>
    79.                   <td>html</td>
    80.                   <td>html</td>
    81.               </tr>
    82.           </tbody>
    83.       </table>
    84.   </body>
    85. </html>
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！