一、本文章食用须知

软件准备：IDE代码编辑器，如：VScode、Sublime Text等
VScode 链接
Sublime Text 链接
本文章适用于没学过HTML语言的，或者刚接触不久想更加了解的人群。

二、HTML的发明者

Tim Berners-Lee（提姆·柏內茲-李）1955年6月8日-至今。
详情请看维基百科 链接
李爵士做了些什么事情：

  1. 编写了第一个浏览器
  2. 编写了第一个服务器
  3. 使用自己编写的浏览器访问自己编写的服务器
  4. 发明了WWW，以及HTML、HTTP、URL

做这些事情为了什么：让每个人输入网址就能看到网页

三、HTML起手代码

如果你安装的是VScode，只需要在VScode里面创建html后缀名的文件，输入 ! 然后按TAB键即可自动生成下列内容：

  1. <!DOCTYPE html>    <!-- 声明是html5文本类型 -->
  2. <html lang="en">    <!-- 使用的语言：en是英语 zh-CN是中文 -->
  3. <head>    <!-- 头部标签开始 --> 
  4.     <meta charset="UTF-8" />    <!-- 编码格式 -->
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 防止缩放 -->
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" /><!-- 检查是否IE浏览器，自动调至最新 -->
  7.     <title>Document</title>    <!-- 网站的标题 -->
  8. </head>    <!-- 头部标签结束 -->
  9. <body>    <!-- body标签开始，页面的代码基本上都写在里面-->
  10.     内容
  11.     ...
  12. </body>
  13. </html>

如果你是别的编辑器，或者没有这个插件，请手动输入上面内容。

四、常用的章节标签

1、标题标签


  1. <h1></h1>
  2. <h2></h2>
  3. <h3></h3>
  4. <h4></h4>
  5. <h5></h5>
  6. <h6></h6>


2、章节标签


  1. <section></section>


3、文章标签


  1. <article></article>


4、段落标签


  1. <p></p>

5、头部标签


  1. <header></header>


6、脚部标签


  1. <footer></footer>

7、主要内容标签


  1. <main></main>


8、旁支标签


  1. <aside></aside>

以上都是一些比较常用的章节标签。

五、全局属性

class、contenteditable、hidden、id、style、tabindex、title等。

六、常用的内容标签

1、有序标签


  1. <ol>
  2.   <li></li>
  3.   <li></li>
  4.   <li></li>
  5.   ...
  6. </ol>

2、无序标签

  1. <ul>
  2.     <li></li>
  3.     <li></li>
  4.     <li></li>
  5.     ...
  6. </ul>


3、无序带描述标签

  1. <dl>
  2.     <dt></dt>
  3.     <dd></dd>
  4.     <dd></dd>
  5.     <dt></dt>
  6.     <dd></dd>
  7.     <dd></dd>
  8.     ...
  9. </dl>

4、链接标签

  1. <a href=""></a>

5、代码标注标签

  1. <code></code>


6、脚部标签

  1. <footer></footer>

7、水平分割线标签

  1. <hr>


8、换行标签

  1. <br>

以上都是一些比较常用的内容标签。