前端学习03——HTML常用标签（2）（pink老师笔记）

语义	标签	描述
加粗	`<strong></strong>`或者`<b></b>`	推荐使用`<strong></strong>`
倾斜	`<em></em>`或者`<i></i>`	推荐使用`<em></em>`,语义更强烈
删除线	`<del></del>`或者`<s></s>`	推荐使用`<del></del>`
下划线	`<ins></ins>`或者`<u></u>`	推荐使用`<ins></ins>`

`<div>`标签和`<span>`标签

没有语义，只是盒子，用来布局

div(divison):分割、分区（竖向）——大盒子

span:跨度、跨距（横向）——小盒子

图像标签

<img scr="图像URL" alt="替换文本" title="提示文本"/>

scr是图像标签的必须属性。

属性	属性值	说明
scr	图片路径	必须属性
alt	文本	替换文本，图像无法显示时显示该文本
title	文本	提示文本，鼠标放到图片上提示的文本
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框大小

宽度和高度一般修改其中的一个，图片会等比缩放。

border一般通过css来设置。

注意：

属性要放在标签名的后面
属性之间没有前后次序，中间以空格分开
属性采取键值对的格式，key="value"

路径

文件不能随便乱放，需要用文件夹来管理，以便快速查找

目录文件夹：存放了我们所需要的素材

VScode可以打开目录文件夹，也可以直接把文件夹拖拽到VScode中。

相对路径

引用文件相对于html文件的位置

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件的同一级,如，`<img scr="img.jpg"/>`
下一级路径	/	图像文件位于HTML文件的下一级,如，`<img scr="images/img.jpg"/>`
上一级路径	../	图像文件位于HTML文件的上一级，如，`<img scr="../img1.jpg"/>`

绝对路径

通常是从盘符开始的路径

如:D:\web\img\logo.jpg或者完整的网络地址“http://www.itcast.cn/images/logo.jpg”

通常不使用绝对路径

注意：相对路径“/” 绝对路径“\”

超链接标签

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

属性	作用
href	用于指定链接目标的URL地址
target	用于指定链接页面的打开方式，_self(默认值):当前页面跳转；_blank:在新的窗口打开。

链接分类

外部链接

http://XXXXXXX

内部链接

在目录文件夹中的两个html网站跳转，网站内部页面之间的相互链接，href的值只要写名字即可。

空链接

在网站开发前期,href的值为“#”

<a href="#">未开发的页面</a>

下载链接

如果href里面是一个文件（.exe）或者压缩包(.zip或.rar)，会下载这个文件

网页元素超链接

网页中的各种网页元素：文本、图像、视频、音频、表格等都可以添加超链接。

例：给图片添加超链接

<a href="#"><img src="1.jpg" alt="图片"></a>

锚点链接

点击链接时，可以快速定位到页面中的某个位置

实现：

链接文本的href属性的属性值为”#名字“
目标位置标签除添加id属性，属性值为”名字“

<a href="#跳转部位">重点内容</a>
<h4 id="跳转部位">重点内容：。。。。。。。。此处省略一万字</h4>

注释

<!--注释内容-->

在VScode中，ctrl+/就可以添加注释。

特殊字符

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`(less than)
>	大于号	`>`(greater than)
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`

表格标签

作用：为了更好的显示数据

<table>标签：定义整个表格主体

<tr>标签：定义表格的一行

<td>标签：定义表格的一个单元格

<th>标签：表头单元格标签，区别于<td>，其中的文字会加粗居中显示，起显示突出作用。

<table>
	<thead>
        <tr>
			<th>表头单元格标签</th>
			...
        </tr>
        ...
	</thead>
	<tbody>
		<tr>
			<td>单元格标签<td>
			...
		</tr>
		...
	</tbody>
</table>

表格属性

通常是通过CSS样式定义，现在只是了解。

属性	属性值	描述
align	left、center、right	描述表格在页面中的位置（对齐方式）
border	"1"或""(默认值为“”)	描述表格单元是否有边框
cellpadding	像素值	规定单元的边沿到其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认为2像素（通常设置成0）
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度

表格结构标签

为了更好的表示表格的语义，将表格分为表格头部和表格主体

<thead>标签：一般是表格的第一行（表头）

<tbody>标签：定义表格的主体

合并单元格

方式：

跨行合并：rowspan="合并单元格个数"
跨列合并：colspan="合并单元格个数"

目标单元格：

跨行：最上侧的单元格为目标单元格，写合并属性
跨列：最左侧的单元格为目标单元格，写合并属性

步骤：

首先确定是跨行合并还是跨列合并
找到目标单元格，填写row（col）span="合并单元格数目"
删除多余的单元格

<table border="1" align="center" width="500" height="249" cellspacing="0">
     <tr>
         <td></td>
         <td colspan="2"></td><!-- 跨列合并 -->
         <!-- <td></td>   跨列合并删除的单元格-->
     </tr>
     <tr>
         <td rowspan="2"></td><!--跨行合并-->
         <td></td>
         <td></td>
     </tr>
     <tr>
         <!-- <td></td>   跨行合并删除的单元格-->
         <td></td>
         <td></td>
     </tr>
 </table>