标签

基本标签

注释

注释标签不会出现在浏览器中，是为了让我们自己和同事间看代码更清楚
（我比较讨厌的两种人：1. 叫我写注释的人 2. 给我看的代码没有注释的人）
使用：

  1. <!-- 注释文本，该文本不出现在浏览器中 -->

<!DOCTYPE> 声明

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令

文档

告知浏览器，在此标签内部的为一个html文档

文档头部

标签用于定义文档头部。 中的元素可以引用脚本、指示浏览器在哪里找到样式表等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

文档标题

文档标题

文档主体

标签包含各种元素，如文本、表格、图片、表单等

使用：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>文档标题</title>
  5.   </head>
  6.   <body>
  7.       <!-- 这就是前端,恭喜你们入门了！ -->
  8.   </body>
  9. </html>

文本标签


断行

段落

加粗

加粗

设置字体、颜色、大小等

删除线样式

斜体

斜体

超链接

可定义标题

可定义标题

使用：

标签 使用方法 作用 效果

你好！
我很好！		 让文本强制换行 你好！
我很好！

段落一

段落二

 段落标签 段落一
段落二
加粗 加粗标签 加粗
加粗
color=”#FF0000”
size=”12”
>
设置字体		 设置字体、颜色、大小等 设置字体
删除线 删除线样式 删除线
斜体 斜体标签 斜体
斜体
超链接 超链接、锚点标签 超链接

最大标题

 可定义标题

最大标题

| |

|

最小标题

| | 最小标题 |

常用标签

块级标签

可以把文档分割为独立的、不同的部分，且每个块级元素都是独立的一行
也可以使用 class 或 id 应用额外的样式
注意：id是唯一的，class类名是可以重复使用的
使用：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>web</title>
  5.   </head>
  6.   <body>
  7.     <div id='root'>这是第一个块级元素</div>
  8.     <div class='class'>这是第二个块级元素</div>
  9.     <div class='class'>这是第三个块级元素</div>
  10.     <div class='class'>
  11.         <p>这是第四个带有p标签的块级元素</p>
  12.     </div>
  13.   </body>
  14. </html>

行内元素

可以配合div进行格式多样化
基本使用：

  1. <div>
  2.   <span> 我是第一行！</span>  
  3.     <span>俺也一样！</span>  
  4. </div>

HTML - 图2 插入图片标签

向网页中引入一幅图像。
基本使用：

  1. <img src="图片地址"  alt="未加载时显示的文字" />

按钮

定义一个按钮
基本使用：

  1. <button type="button">Click</button>

表单

输入框, 输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等
基本使用：

  1. <form action="需要传输的地址">
  2.   文本1:<br />
  3.   <input type="text" name="text1" value="内容1" />
  4.   <br />
  5.   文本2:<br />
  6.   <input type="text" name="text2" value="内容2" />
  7.   <br />
  8.   <input type="submit" value="Submit" />
  9. </form>

输入框

输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等
基本使用：

  1. <input type="text" name="fname" />

有序列表

有序号的列表
基本使用：

  1. <ol>
  2.   <li>有序</li>
  3.     <li>有序</li>
  4.   <li>有序</li>
  5. </ol>

有序列表

无序号的列表
基本使用：

  1. <ul>
  2.   <li>无序</li>
  3.     <li>无序</li>
  4.   <li>无序</li>
  5. </ul>

表格

定义表格行
定义表头
定义表格单元
基本使用：

  1. <table border="1">
  2.   <tr>
  3.     <th>表头1</th>
  4.     <th>表头2</th>
  5.   </tr>
  6.   <tr>
  7.     <td>单元格1</td>
  8.     <td>单元格2</td>
  9.   </tr>
  10. </table>

ES6新增标签

头部区域

主题区域

侧边区域

底部区域

导航

基本使用：

  1. <header> 
  2.     <nav>
  3.         <ul> 
  4.             <li>导航1</li>
  5.             <li>导航2</li>
  6.             <li>导航3</li>
  7.         </ul>
  8.     </nav>
  9. </header>
  10. <div>
  11.         <section>主题区域</section>
  12.         <aside>侧边栏</aside>
  13. </div>
  14. <footer>底部区</footer>

媒介内容

标题

小号字体

基本使用：

  1. <figure>
  2.     <figcaption>标题</figcaption>
  3.     <p>内容</p>
  4.       <small>小号内容</small>    
  5. </figure>

进度条

基本使用：

  1. <progress id="jindu" max="100" value="0"></progress>

更多 … …

更多的ES6及之后新增的标签可以去查阅资料，如: w3school 、 菜鸟教程 等