一、标签

1.1标题标签

标题（Heading）是通过 <h1> - <h6>标签进行定义的。<h1>定义最大的标题 <h6>定义最小的标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

生成h1~h6快捷键：h$*6

1.2段落、换行、水平线标签

水平线属性：

1. color：设置水平线的颜色
2. width：设置水平线的宽度
3. size：设置水平线的高度
4. align：设置水平线的对齐方式（默认居中），可取值left|right

1.3图片标签

<img src="" alt="" title="" width="" height="">

注意事项

<img>是单标签，不需要进行闭合操作。

属性：

1. src：路径（图片地址与名字）
2. alt：规定图像的替代文本
3. width：规定图像的宽度
4. height：规定图像的高度
5. title：鼠标悬停在图片上给予提示

1.3.1图片路径详解

绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

<img src="E:\webcode\1.jpg">

相对路径

两者相对关系，两者在同⼀路径下可以直接访问

1. 子级关系: /
   
2. 父级关系: ../
   
3. 同级关系: ./（可以省略）
   

网络路径

具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png

1.4超文本连接标签

HTML使用标签 <a>来设置超文本链接，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档。

<a href="url">链接文本</a>

默认情况下，链接将以，以下形式出现在浏览器中：

1. 一个未访问过的链接显示为蓝色字体并带有下划线。
   
2. 访问过的链接显示为紫色并带有下划线。
   
3. 点击链接时，链接显示为红色并带有下划线。
   

1.5文本标签

常用的文本标签

特别提示

常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇

1.6列表标签

1.6.1有序列表标签

有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol> 标签。每个列表项始于 <li>标签。

<ol>
  <li>Java</li>
  <li>web</li>
</ol>

type属性

<ol>的属性type 拥有的选项

1. 1 表示列表项目用数字标号（1,2,3...）
2. a 表示列表项目用小写字母标号（a,b,c...）
3. A 表示列表项目用大写字母标号（A,B,C...）
4. i 表示列表项目用小写罗马数字标号（i,ii,iii...）
5. I 表示列表项目用大写罗马数字标号（I,II,III...）

1.6.2无序列表标签

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表始于 <ul> 标签。每个列表项始于<li> 标签。

<ul>
    <li>java</li>
    <li>web</li>
</ul>

type属性

<ul>的属性type 拥有的选项

• disc 默认实心圆
• circle 空心圆
• square 小方块
• none 不显示

常见应用场景

1. 无序的列表效果
2. 导航效果

快捷键

快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修改）

1.7表格标签

表格在数据展示方面非常简单，并且表现优秀

表格标签

表格：<table>

行：<tr>

单元格(列)：<td>

<table border="2px" width="200px" heigth="200">
    <tr>
        <td>java</td>
        <td>web</td>
    </tr>
    <tr>
        <td>spring</td>
        <td>linux</td>
    </tr>
</table>

快捷键

快速生成表格结构：table>tr*2>td{单元格}

表格属性

1. border：设置表格的边框
2. width：设置表格的宽度
3. height：设置表格的高度