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. ```php
    2. $a ＝ 1;
    3. $b ＝ $a;
    4. $c ＝ $a + $b; 
    5. 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 文档代码块

    ```html

    <!-- 在vscode当中输入html:5或者一个英文状态下的感叹号!按下TAB键即可自动生成如下代码 -->

    <!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">
    <title>Document</title>
    </head>

    <body>

</body>
</html>

  1. ## 2.如何快速创建一个盒子模型/层级关系>+号讲解
  2. ```html
  3.         <div class="box">box</div>
  4.         <!-- 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}*8) -->
    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>

更多相关文章

  1. 如何获取Android源码
  2. Android(安卓)Studio 学习 - HelloWorld
  3. 如何获取Android源码
  4. Android应用程序进程启动过程的源代码分析
  5. android studio NDK-JNI调用
  6. Android(安卓)Studio项目结构和Gradle应用
  7. 【Android每周专题】Android中的逆向工程
  8. Android自定制Toast显示外观
  9. android语音识别方法示例代码

随机推荐

  1. Activity去除标题栏和状态栏
  2. Android设置Settings实现：PreferenceActiv
  3. Android使用gradle生成maven库，上传githu
  4. Android之开发常用颜色
  5. 像写Flutter一样开发Android原生应用
  6. Android 中文API （67） —— BluetoothClass
  7. 使用ImageView 加上 Edittext做出自定义
  8. android和PC（Python）通过USB（adb模式）基于Soc
  9. Android 中文API （68） —— BluetoothClass
  10. Android(安卓)驱动之旅 第五章： 在Android