简洁版HTML常用元素合集

最新推荐文章于 2025-03-18 16:34:30 发布

皎月喵

最新推荐文章于 2025-03-18 16:34:30 发布

阅读量726

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/qq_44797984/article/details/112789105

版权

本文详细介绍了HTML5中的关键元素，包括文档类型定义、模板元素、文本元素、逻辑样式元素、列表元素、结构元素、锚元素、表格元素、表单元素、视觉和多媒体元素、引用元素以及注释的使用，是快速理解和应用HTML5元素的实用参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.文档类型定义（DTD）

HTML5的DTD如下：

<!DOCTYPE html>

2.模板元素

元素名	用法	重要批注
html	指明该文档是HTML格式	可使用lang属性规定文档的语言代码,"en"表示英语,"zh"表示中文
head	头部元素,包含title,meta以及对脚本和样式的引用等	这部分的许多特性并不直接显示在页面上
title	配置浏览器窗口标题栏显示的文本	-
meta	描述网页的特性	空元素,可使用charset属性指定字符集
body	主体元素,包含网页的实体部分	-

补充：meta标签的常见用途

使用charset属性指定字符集<meta charset="utf-8">
用作视窗meta标签缩放页面<meta name="viewport" content="width=device-width,initail-scale=1.0">

用模板元素可以搭建一个最简单的网页：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<title>This is my first web page</title>
</head>
<body>
	Hello world!
</body>
</html>

3.文本有关元素

这些元素可以组合起来用于简单地显示文本内容

元素名	用法	重要批注
h1~h6	标题元素，h1元素字体最大，h6元素字体最小	默认为块级元素
p	段落元素，显示文本的段落	默认为块级元素
br	换行元素	-
blockquote	块引用元素，显示被引用的文本块	左右两边均有缩进，默认为块级元素

4.逻辑样式元素

指出某个容器标签内文本的含义，为行内元素(这部分了解即可；加粗和斜体元素未列出，它们的功能通常用设置css的方法来替代)

元素名	用法	重要批注
abbr	指明文本为缩写	可使用title属性配置全名
cite	指明文本为引用	斜体显示
code	指明为程序代码的示例	固定空格的字体
dfn	指明某个单词或术语的定义	斜体显示
kbd	指明需要用户输入的文本	固定空格的字体
samp	指明为程序示例输出	固定空格的字体
sub	下标	-
sup	上标	-
var	指定并显示变量或程序的输出	斜体显示

5.列表元素

列表是块级元素
三种列表：有序列表，无序列表，描述列表

元素名	用法	重要批注
ul	无序列表	列表项目符号类型用css配置
ol	有序列表	可使用type属性指定列表排序符号，start属性确定起始值，reversed属性设置属性值为reversed配置降序
li	有序列表和无序列表的列表项	-
dl	描述列表	-
dt	描述列表的描述对象	-
dd	描述列表的描述内容	-

补充：
1.有序列表的类型属性

属性值	符号
1	数字
A	大写字母
a	小写字母
I	罗马数字

2.三种列表的基本结构
无序列表：

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

有序列表：

<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

描述列表：

<dl>
	<dt></dt>
	<dd></dd>
	<dt></dt>
	<dd></dd>
</dl>

6.结构元素

将网页进行分区，便于结构化配置网页

元素名	用法	重要批注
div	很重要的分区元素	默认为块级元素
span	-	默认为行内元素
header	页眉元素	默认为块级元素
nav	导航链接元素	默认为块级元素
main	主体元素	默认为块级元素
footer	页脚元素	默认为块级元素
section	节元素	默认为块级元素
article	文章元素	默认为块级元素
aside	侧栏元素	默认为块级元素
time	时间元素	展现日期或时间，可使用datetime属性设置格式

一个简单的结构元素使用模板：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<title>Document</title>
</head>
<body>
	<div>
		<header></header>
		<nav></nav>
		<aside></aside>
		<main>
			<section></section>
			<article></article>
		</main>
		<footer></footer>
	</div>
</body>
</html>

7.锚元素

定义超链接实现各种跳转，行内元素

元素名	用法	重要批注
a	锚元素	使用href属性确定跳转位置，标签对之间的元素以超链接形式显示在网页上；使用target属性设置超链接的打开方式

补充：
1.href的属性值

属性值	含义
完整的网页url	绝对超链接，跳转到其他网站上时使用
文件名或文件夹+文件名	相对超链接，访问自己网站内部网页（有一套跳转规则）
#+id名称	跳转到本页对应id名称的标签（区段标识符）上
mailto:+电子邮件地址	自动打开访问者浏览器中的默认电子邮件应用，并填写好邮件接收者地址

2.target的属性值

属性值	含义
_blank	在新窗口中打开被链接文档
_self	默认，在相同框架中打开被链接文档
_top	在整个窗口中打开被链接文档

3.相对超链接的跳转规则

链接位于相同目录下的文件:href="xxx.html"
链接当前目录下的某个子文件夹内的文件:href="xxx/xxx.html"
链接当前页面所在文件夹的上一级文件夹:href="../xxx.html"
链接两个同级文件夹之间的子文件:href="../xxx/xxxhtml"

8.表格元素

元素名	用法	重要批注
table	表格元素，定义表格	-
th	表头元素	使用colspan控制跨列数，使用rowspan属性控制跨行数，使用id属性标识
tr	表格行元素	-
td	表格数据元素	使用colspan控制跨列数，使用rowspan属性控制跨行数，使用headers属性关联表头
caption	表格标题元素	-
thead	表格表头结构元素	-
tbody	表格主体结构元素	-
tfoot	表格脚注结构元素	-

一个简单的表格模板：

<table>
	<caption></caption>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tfoot>
</table>

9.表单元素

元素名	用法	重要批注
form	表单元素	表单不能嵌套，用method属性设置发送数据的方法，用action属性设置当表单提交时表单信息发送的位置
input	输入元素	用type属性指定表单控件类型
textarea	配置滚动文本框	-
select	选择元素	一般将size设置为1配置为下拉列表
option	选项元素，配置select表单控件中的可选项目	-
button	按钮元素	使用type属性配置按钮的类型，submit为提交按钮，reset配置成重置按钮，button配置成普通按钮
label	标签元素，将文本描述和表单控件关联起来	用for属性和表单控件id属性值关联
fieldset	把成组的元素包围起来	-
legend	为fieldset分组提供文字描述	-

补充：input元素的type属性值

属性值	含义
text	文本框
submit	提交按钮
reset	重置按钮
checkbox	多选框
radio	单选按钮，同组单选按钮name属性相同
hidden	隐藏输入控件
password	密码框
email	电子邮件地址输入
url	URL输入控件
tel	电话号码输入控件
search	搜索字段输入控件
text	当后面跟随datalist元素并且list属性值与其id关联时，成为数据列表表单控件
range	滑块表单控件
number	微调器
date/datetime/time/month	日历表单控件
color	拾色器表单控件

10.视觉和多媒体有关元素

元素名	用法	重要批注
hr	分隔线元素	-
img	图像元素	-
figure	容纳一个自包含的内容单位	块级元素
figcaption	设置图片的说明文字	块级元素
meter	在已知范围内显示带数值的可视化尺度	-
progress	进度元素	-
map	图像映射元素	name和id属性值必须相同，imp元素的usemap属性值为map元素的id属性值
area	map元素中的区域元素	href属性值为链接的地址，shape属性设置映射形状，coords属性设置坐标
audio	音频元素	-
video	视频元素	-
source	源元素	-
canvas	画布元素，动态图片容器	-

11.引用有关元素

元素名	用法	重要批注
iframe	内联框架元素，在自己网页文档内显示其他网页内容	使用src属性配置显示的网页，使用height和width设置元素的尺寸
script	一般用于添加js代码	使用type属性设置代码片类型，js一般为text/javascript，使用src属性设置链接的外部js文件
style	添加css代码片	使用type属性设置类型，一般属性值为text/css
link	链接元素，将外部样式表文件与网页关联起来	rel属性值为stylesheet，href属性值为css文件名，type属性值为text/css，使用media属性配置多媒体查询