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

目录

HTML常用标签

标题标签

段落标签

换行标签

文本格式化标签

标签和标签

图像标签

路径

相对路径

绝对路径

超链接标签

外部链接

内部链接

空链接

下载链接

网页元素超链接

锚点链接

注释

特殊字符

 表格标签

表格属性

表格结构标签

合并单元格

 

---

HTML常用标签

标题标签

有<h1>-<h6> 一共六个等级

语义：作为标题使用，按照重要性递减

特点：单行显示

段落标签

<p>我是一个段落</p>

<p>我是一个段落</p>

特点：

1. 文本在一个段落中会随着浏览器窗口的大小自动换行

2. 段落和段落之间会有一定的间隔

换行标签

单标签<br/>

语义：强制换行

文本格式化标签

语义：突出重要性

语义	标签	描述
加粗	<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来设置。

注意：

1. 属性要放在标签名的后面

2. 属性之间没有前后次序，中间以空格分开

3. 属性采取键值对的格式，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>

锚点链接

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

实现：

1. 链接文本的href属性的属性值为”#名字“

2. 目标位置标签除添加id属性，属性值为”名字“

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

注释

<!--注释内容-->

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

特殊字符

特殊字符	描述	字符的代码
	空格符	 
<	小于号	&lt;(less than)
>	大于号	&gt;(greater than)
&	和号	&amp;
￥	人民币	&yen;
©	版权	&copy;
®	注册商标	&reg;
°	摄氏度	&deg;
±	正负号	&plusmn;

 表格标签

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

<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>标签：定义表格的主体

合并单元格

方式：

1. 跨行合并：rowspan="合并单元格个数"

2. 跨列合并：colspan="合并单元格个数"

 

目标单元格：

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

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

步骤：

1. 首先确定是跨行合并还是跨列合并

2. 找到目标单元格，填写row（col）span="合并单元格数目"

3. 删除多余的单元格

<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>