# 这是我之前博客写的，第一次写，写得很烂。

# HTML 标签上

1. 标题标签
2. 段落和换行标签
3. 标题标签
4. <div> 和 <span> 标签
5. 图像标签
6. 超链接标签

# HTML 标签下

# 表格

7. 表格的基本用法
8. 表头单元格标签
9. 表格属性
10. 表头结构标签
11. 合并单元格

# 标题标签

# 一级标题

# 二级标题

# 三级标题

# 四级标题

# 五级标题

# 六级标题

` 标签语义：作为标题使用，并且根据重要性递减。特点: 1. 加了标题的文字会变粗，自豪会变大。 2. 一个标题独占一行。 3. 随着标题的级数降低字号也在降低。

# 段落和换行标签

# 段落标签

<p></p>

一个段落标签
标签语义：可以将 HTML 文档分成好几个段落。
特点：

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。
# 换行标签

<br />

标签语义：将某段文本强制换行。

# 文本格式化标签

语义	标签	说明
加粗	`<strong></strong>` 或者 `<b></b>`	建议使用 strong 语义更强烈
斜体	`<em></em>` 或者 `<i></i>`	建议使用前者，理由同上
删除线	`<del></del>` 或者 `<s></s>`	建议如上
下划线	`<ins></ins>` 或者 `<u><.u>`	同上

# div 和 span 标签

<div>头部</div>
<span>小盒子<span>

这两个标签是没有语义的，它们是一个盒子，用来装内容，div 标签是大盒子，span 标签是小盒子
特点:

<div></div>

用来布局，但是一行只能放一个，相当于一个大盒子。

<span></span>

用来布局，一行可以放多个，相当于一个小盒子。

# 图像标签和路径

图像标签

属性	属性值	说明
src	图片路径	必须具备的属性
alt	文本	替换文本。图像不能显示的文字
title	文本	提示文本。鼠标放在图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

注意点：
①图像标签可以拥有多个属性，必须写在标签名的后面。
②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③属性采取键值对的格式，即 key = “value” 的格式，属性 = “属性值”。
举个🌰：

这是效果
在鼠标放到图片上时会出现” 萌王” 两个字就是 title 的效果。
路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。在这里就是说，图片相对于 HTML 页面的位置。

相对路径分类	符号	说明
同一级路径		图片文件位于 HTML 文件同一级，可直接引用。
下一级路径	/	图片位于 HTML 文件的下一级
上一级路径	../	图像文件位于 HTML 文件上一级，引用的时候要先回到上一级。

# 超链接标签

语法格式

<a href="跳转目标" target="目标窗口的弹出方式" rel="noopener">文本或图像</a>

属性	作用
href	用于指定链接目标的 url 地址，这个是必须要的属性，当标签应用 href 属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self 为默认值，在本窗口打开，_blank 为在新窗口打开

举个🌰：
代码：

<a href="http:///www.baidu.com" target="_blank" rel="noopener"> 百度</a>

这是效果：
百度

链接分类：
①外部链接：例如上面那个🌰。
②内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。就是同一个文件里面的 html 文件，你直接把链接换成 html 文件的名字就好了。
③空链接：如果当时没有确定链接目标时，可以这样写：
<a href="#"> 文本或图像</a>
🌰效果：这是空的链接
④下载链接：如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
<a href="xxx.zip"> 文本或图像</a>
🌰效果：下载 (这里面的压缩文件我瞎打的，点不开的)
⑤网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
<a href="一个链接"> 文本图像表格等</a>
🌰效果：不太好做，自己测试。
⑥锚点链接：当我们点击时，可以快速定位到页面中的某个位置。
i. 在链接文本的 href 属性中，设置属性值为 #名字的形式，如

<a href= "#1">第一个</a>

ii. 这时在目标位置的标签应该为

<h3 id="1">第一个的位置</h3>

这里不一定要用标题标签。
我前面的目录就用了锚点链接，点击的话就能到达目标位置。

# 表格的基本用法

效果：

姓名	性别	年龄
xxx	男	100

代码：

	<table>
	<tr>
	<th>姓名</th>
	<th>性别</th>
	<th>年龄</th>
	</tr>
	<tr>
	<td>xxx</td>
	<td>男</td>
	<td>100</td>
	</tr>
	</table>

th 和 td 的区别：th 标签代表 HTML 表格的表头部分，th 一般用于第一列，能加粗跟居中。
如果把上面的 th 改成 td 的话就成这样：

姓名	性别	年龄
xxx	男	100

# 表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1 或 “”	规定表格单元是否拥有边框，默认为””, 表示没有边框.
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认为 1 像素。
cellspacing	像素值	规定单元格之间的空白，默认为 2 像素
width	像素值或百分比	规定表格的宽度

# 表格结构标签

定义表格的头部:

<thead></thead>

内部必须拥有下面这个标签，一般位于第一行。

<tr></tr>

用于定义表格的主体，主要用于放数据本体：

<tbody></tbody>

以上标签都是下面这个标签里

<table></table>

# 合并单元格

跨行合并:rowspan="合并单元格的个数"。在最上侧单元格的地方写这个这个代码。如：

<td rowspan="2"></td>

合并完记得删除多余的单元格。

跨列合并:colspan=” 合并的单元个数”，与跨行合并差不多，只不过是以最左侧单元格为目标单元格。

前端