一、标题标签
为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题,即
至
。
1
2
3
4
5
6
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
1 2 3 4 5 6 | <h1>我是一级标题</h1> <h2>我是二级标题</h2> <h3>我是三级标题</h3> <h4>我是四级标题</h4> <h5>我是五级标题</h5> <h6>我是六级标题</h6> |
单词 head 的缩写,意为头部、标题。
标签语义:作为标题使用,并且依据重要性递减。
特点:
- 加了标题的文字会变的加粗,字号也会依次变大。
- 一个标题独占一行。
二、段落标签
在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在 HTML 标签中,
标签用于定义段落,它可以将整个网页分为若干个段落。
1 | <p> 我是一个段落标签 </p> |
单词 paragraph [?p?r?gr?f] 的缩写,意为段落。
标签语义:可以把 HTML 文档分割为若干段落。
特点:
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落和段落之间保有空隙。
三、换行标签(单标签)
在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签
。
1 | <br /> |
单词 break 的缩写,意为打断、换行。
标签语义:强制换行。
特点:
- 是个单标签。
- 标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
四、文本格式化标签
在网页中,有时需要为文字设置粗体、 斜体 或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示。
1 2 3 4 5 6 7 8 | <strong>加粗</strong> <b>加粗</b> <em>倾斜</em> <i>倾斜</i> <del>删除线</del> <s>删除线</s> <ins>下划线</ins> <u>下划线</u> |
标签 | 语义 | 说明 |
---|---|---|
加粗 | 更推荐,语义更强烈 | |
倾斜 | 更推荐,语义更强烈 | |
删除线 | 更推荐,语义更强烈 | |
下划线 | 更推荐,语义更强烈 | |
加粗 | 不推荐 | |
倾斜 | 不推荐 | |
删除线 | 不推荐 | |
下划线 | 不推荐 |
标签语义:突出重要性, 比普通文字更重要。
五、盒子标签
1 2 | <div>大盒子</div> <span>小盒子</span> |
div 是 division 的缩写,表示分割、分区。span 意为跨度、跨距。
特点:
-
标签用来布局,但是现在一行只能放一个。
- 标签用来布局,一行上可以多个 。
六、图像标签(单标签)
在 HTML 标签中, 标签用于定义 HTML 页面中的图像。
1
2
3<img src="URL,用于指定图像路径"
alt="替换文本,图像不能出现时显示的文字"
title="提示文本,鼠标放到图像上时显示的文字" />单词 image 的缩写,意为图像。
src 是标签的必须属性,它用于指定图像文件的路径和文件名。
所谓属性:简单理解就是属于这个图像标签的特性。七、超链接标签
在 HTML 标签中, 标签用于定义超链接,作用是从一个页面链接到另一个页面。
1
2
3
4<a href="URL,用于指定链接目标的地址"
target="用于指定链接页面的打开方式,_self为默认值,_blank为在新窗口中打开">
文本或图像
</a>单词 anchor [???k?(r)] 的缩写,意为:锚。
链接分类:
- 外部链接: 例如 < a href="https://www.baidu.com "> 百度。
- 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,
如 < a href="index.html"> 首页 。 - 空链接: 如果当时没有确定链接目标时,< a href="#"> 首页 。
- 下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
- 网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。
- 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置。
在链接文本的 href 属性中,设置属性值为 #名字 的形式,
如 第2集
找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,
如第2集介绍
八、表格标签
表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。
特别是后台展示数据的时候,能够熟练运用表格就显得很重要。
一个清爽简约的表格能够把繁杂的数据表现得很有条理。
表格不是用来布局页面的,而是用来展示数据的。1.表格基本语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>表头1对应的数据1</td>
<td>表头2对应的数据1</td>
</tr>
<tr>
<td>表头1对应的数据2</td>
<td>表头2对应的数据2</td>
</tr>
</table>表头1 表头2 表头1对应的数据1 表头2对应的数据1 表头1对应的数据2 表头2对应的数据2 1)
是用于定义表格的标签。
2)标签用于定义表格中的行,必须嵌套在
标签中。
3)用于定义表格中的单元格,必须嵌套在
标签中。
4)字母 td 指表格数据(table data),即数据单元格的内容。一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示。
标签表示 HTML 表格的表头部分(table head 的缩写)。 标签 表格的主体区域。这样可以更好的分清表格结构。表头单元格也是单元格, 常用于表格第一行, 突出重要性, 表头单元格里面的文字会加粗居中显示。
2.表格结构标签
因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部和表格主体两大部分。
标签 表格的头部区域、
在表格标签中,分别用:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>表头1对应的数据1</td>
<td>表头2对应的数据1</td>
</tr>
<tr>
<td>表头1对应的数据2</td>
<td>表头2对应的数据2</td>
</tr>
</tbody>
</table>1)
:用于定义表格的头部。
内部必须拥有标签。 一般是位于第一行。
2):用于定义表格的主体,主要用于放数据本体 。
3)以上标签都是放在标签中。
3.合并单元格
合并单元格方式:
跨行合并:rowspan="合并单元格的个数"
跨列合并:colspan="合并单元格的个数"
目标单元格:(写合并代码)
跨行:最上侧单元格为目标单元格,写合并代码
跨列:最左侧单元格为目标单元格,写合并代码
跨行跨列
合并单元格三步曲:
1)先确定是跨行还是跨列合并。
2)找到目标单元格,写上合并方式 = 合并的单元格数量。
比如:。
3)删除多余的单元格。九、列表标签
表格是用来显示数据的,那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。
根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表。1.无序列表
- 标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用
- 标签定义。
1
2
3
4
5<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>无序列表
1)无序列表的各个列表项之间没有顺序级别之分,是并列的。
2)中只能嵌套
- 与
- 标签来定义列表项。
1
2
3
4
5<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>有序列表
1)
中只能嵌套
- 与
- (定义项目/名字)和
- (描述每一个项目/名字)一起使用。
1
2
3
4
5
6<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
</dl>自定义列表
1)
里面只能包含
- 和
- 。
2) - 和
- 个数没有限制,经常是一个
- 对应多个
- 。
十、表单标签
使用表单目的是为了收集用户信息。
在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时就需要表单。
表单域是一个包含表单元素的区域。
在 HTML 标签中,
,直接在
标签中输入其他标签或者文字的做法是不被允许的。
3.)之间相当于一个容器,可以容纳所有元素。
4.)无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。2.有序列表
有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。
在 HTML 标签中,- 标签用于定义有序列表,列表排序以数字来显示,并且使用
,直接在
标签中输入其他标签或者文字的做法是不被允许的。
2)之间相当于一个容器,可以容纳所有元素。
3)有序列表会带有自己样式属性,但在实际使用时,我们会使用 CSS 来设置。3.自定义列表
自定义列表的使用场景:
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
在 HTML 标签中,- 标签用于定义描述列表(或定义列表),该标签会与