HTML基础标签合集

HTML基础标签合集

一、排版标签

标签名称	标签写法	特点/解释	备注
标题	<h1></h1>	1~6级标题，重要程度依次递减；文字加粗，独占一行
段落	<p></p>	段落间存在间隙，独占一行
换行	<br>	单标签，让文字强制换行
水平线	<hr>	单标签，在页面中显示一条水平线

二、语义标签

标签名称	标签写法	特点/解释	备注
加粗	<b></b> 或者 <strong></strong>	文字加粗；例：文字	<strong>强调语境更强
下划线	<u></u> 或者 <ins></ins>	文字下划线；例：文字	<ins>强调语境更强
倾斜	<i></i> 或者 <em></em>	文字倾斜；例：文字	<em>强调语境更强
删除	<s></s> 或者 <del></del>	文字删除；例：文字	<del>强调语境更强

三、媒体标签

标签名称	标签写法	特点/解释	备注
图片	<img>	单标签，src表示文件路径或，alt表示文件加载失败时的显示文字，title显示文件标题，width和heigth表示图片宽度和高度	title属性不仅图片标签可用，其他标签也能使用
音频	<autio>	单标签，src表示音频路径，controls表示显示播放控件，autoplay表示自动播放（部分浏览器不支持，比如谷歌），loop表示循环播放	支持mp3、Wav、Ogg格式的音频
视频	<video>	单标签，src表示视频路径，controls表示显示播放控件，autoplay表示自动播放（谷歌浏览器上需要配合muted属性来实现静音播放），loop表示循环播放	支持mp4、WebM、Ogg格式的视频
超链接	<a></a>	双标签，内部可以包裹内容；href表示超链接内容，target属性默认值为_slef，表示在当前页面跳转，可以设置_blank，表示在新窗口中跳转

四、列表标签

标签名称	标签写法	特点/解释	备注
无序列表	<ul><li></li></ul>	ul只有一个，li有多个
有序列表	<ol><li></li></ol>	ol只有一个，li有多个
自定义列表	<dl><dt><dd></dd><dt></dl>	dl只有一个，dt表示列表头，dd表示具体内容（多个）

五、表格标签

标签名称	标签写法	特点/解释	备注
表格	<table><tr><td></td></tr></table>	嵌套关系：table>tr>td，td为具体表格内容；属性：border边框大小，width表格宽度，height表格高度	th为表格头或者第一行；caption为表格标题；rowspan合并行，colspan和并列

六、表单标签

标签名称	标签写法	特点/解释	备注
表格	<from action=“”></from>	表单基本语法，action为提交地址
input	<input type=“”>	type属性值：1，text为文本框；2，password为密码框；3，radio为单选框；4，checkbox为多选框；5，file为文件选择；6，submit为提交按钮；7，reset为重置按钮；8，button为普通按钮，默认无功能之后配合js使用	1，placeholder文本框的提示信息（占位符）；2，radio：name属性一样表示只能选中一个；3，checked表示默认选择；4，multiple表示上传多个文件
button	<button type=“”></button>	1，submit为提交按钮；2，reset为重置按钮；3，button为普通按钮，默认无功能之后配合js使用	双标签
select	<select><option></option></select>	option表示下拉的每一项；selected表示默认选中的值	双标签
textarea	<textarea cols=“” rows=“”></textarea>	cols表示文本域可见宽度，rows表示文本域可见行数	双标签，实际开发使用css设置大小
label	<label><input type=“”></label>或者<input type=“” id=nan><label for=“nan”></label>	使用方法2种：1，直接用label把input包裹起来，2，写在对应的input标签后，并且input的id和label的for值要一致

七、语义化标签

标签名称	标签写法	特点/解释	备注
div	<div></div>	无语义化，一行只显示一个div（独占一行）
span	<span></sapn>	无语义化，一行可显示多个span
header	<header></header>	有语义化，表示网页头部	显示特点和div一致
nav	<nav></nav>	有语义化，表示网页导航	显示特点和div一致
footer	<footer></footer>	有语义化，表示网页底部	显示特点和div一致
aside	<aside></aside>	有语义化，表示网页侧边栏	显示特点和div一致
section	<section></section>	有语义化，表示网页区块	显示特点和div一致
article	<article></article>	有语义化，表示网页文章	显示特点和div一致

八、字符实体

显示结果	描述	实体名称
	空格	 
<	大于号	&lt;
>	小于号	&gt;
&	和号	&amp;
"	引号	&quot;
’	撇号	&apos;（IE不支持）
¢	分（cent）	&cent;
£	镑（pound）	&pound;
¥	元（yen）	&yen;
€	欧元（euro）	&euro;
§	小节	&sect;
©	版权（copyright）	&copy;