HTML 常见标签

标签语义

学习标签是有技巧的，重点是记住每个标签的语义。

简单理解就是指标签的含义，即这个标签是用来干嘛的。

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。

HTML提供了6个等级的网页标题，即 <h1> - <h6>。

单词 head 的缩写，意为头部、标题。

标签语义︰作为标题使用，并且依据重要性递减。

特点:

1. 加了标题的文字会加粗，字号也会依次变大。

2. 一个标题独占一行。

段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。

在HTML标签中，<p> 标签用于定义段落，它可以将整个网页分为若干个段落。

单词 paragraph 的缩写，意为段落。

标签语义∶可以把HTML文档分割为若干段落。

特点:

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

换行标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端然后才自动换行。

如果希望某段文本强制换行显示，就需要使用换行标签 <br />。

单词 break 的缩写，意为打断、换行。

标签语义∶强制换行。

特点：

1. <br />是个单标签。

2. <br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

文本格式化标签

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

<div> 和 <span> 标签

<div> 和 <span> 是没有语义的，它就是一个盒子，用来装内容的。

div是division的缩写，表示分割、分区。

span意为跨度、跨距。

特点：

1. <div> 标签用来布局，但是现在一行只能放一个 <div> 。大盒子

2. <span> 标签用来布局，一行上可以多 个<span> 。小盒子

图像标签

HTML标签zhong，<img> 标签用于定义HTML页面中的图像

<img src="图像URL" />

单词 image 的缩写，意为图像。

src是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名。

所谓属性：简单理解就是属于这个图像标签的特性。

图像标签的其他属性∶

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

图像标签属性注意点∶

1. 图像标签可以拥有多个属性，必须写在标签名的后面。
2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3. 属性采取键值对的格式，即key="value"的格式，属性=“属性值”。