前端的修行之路-html

最新推荐文章于 2025-11-24 16:38:26 发布

原创最新推荐文章于 2025-11-24 16:38:26 发布 · 423 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5

前端专栏收录该内容

5 篇文章

订阅专栏

html

meta标签

<meta>标签（单标签），提供有关页面的元信息，位于文档的头部，不包含任何内容。它的属性定义了与文档相关联的名称/值对。

<meta name="description" content="">  <!-- 网页描述文字 -->
<meta name="keywords" content="">  <!-- 网页关键文字 -->
<meta name="renderer" content="webkit">  <!-- 浏览器默认内核的指定 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="3" url="">  <!-- 让页面过一定时间，自动转到另一个站点 -->
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00">  <!-- 在规定的时间内,网页访问缓存 -->

link标签

<link>标签（单标签），定义文档与外部资源的关系。

<link rel="stylesheet" href="./css/bootstrap.css">  <!-- 链接样式表 -->
<link rel="icon" type="image/x-icon" href="./img/logo.ico">  <!-- 链接网页图标 -->
<link rel="dns-prefetch" href="xx.com">  <!-- 提前做dns查询 -->

段落标签

<h1>~<h6>标签（双标签），定义标题的标签。<h1>标签定义最大的标题，<h6>标签定义最小的标题。
<p>标签（双标签），定义段落的标签。

文本修饰标签

<strong>标签（双标签），表示强调，会对文本进行加粗。
<b>标签（双标签），对文本进行加粗。根据html5规范，在没有其他合适标签更合适时，才应该把b标签作为最后的选项。
<em>标签（双标签），表示强调，会对文本进行斜体。
<i>标签（双标签），对文本进行斜体。
<sub>标签（双标签），定义下标文本。在数学等式、科学符号和化学公式中都非常有用。
<sup>标签（双标签），定义上标文本。在向文档添加脚注以及表示方程式中的指数值时非常有用。
<del>标签（双标签），定义文档中已被删除的文本。
<ins>标签（双标签），定义已经被插入文档中的文本。

文本修饰标签

<br>标签（单标签），插入换行符。
<hr>标签（单标签），创建一条水平线。
<kbd>标签（双标签），定义键盘文本。

引用标签

<blockquote>标签（双标签），引用大段的段落解释。
<q>标签（双标签），引用小段的短语解释。
<abbr>标签（双标签），缩写或首字母缩略词。常与title属性一起使用，显示简称/缩写的完整本。
<address>标签（双标签），引用文档地址信息。通常连同其他信息被包含在<footer>标签中。它不应该用于描述通讯地址，除非它是联系信息的一部分。
<cite>标签（双标签），引用著作的标题。

图片标签

<img>标签（单标签），向网页中嵌入一幅图像。

属性值描述
alt（必须） text 图片的替代文本
src（必须） url 显示图片的url
height px/% 设置图片的高度
width px/% 设置图片的宽度

属性	值	描述
alt（必须）	text	图片的替代文本
src（必须）	url	显示图片的url
height	px/%	设置图片的高度
width	px/%	设置图片的宽度

链接标签

<a>标签（双标签），定义超链接。

属性	值	描述
href（必须）	url	链接指向的页面的url
target	_self/_blank	如何打开链接文档
rel	text	当前文档与被链接文档之间的关系
download	filename	被下载的超链接目标
media	media_query	被链接文档是何种设备优化
type	MIME type	被链接文档的MIME类型

<base>标签（单标签），为页面上的所有链接规定默认地址或默认目标。一般写在<head>标签里。

列表标签

<ul>标签（双标签），定义无序列表。常与<li>一起使用。
<ol>标签（双标签），定义有序列表。常与<li>标签一起使用。
<dl>标签（双标签），定义定义列表。
<dt>标签（双标签），定义专业术语或名词。
<dd>标签（双标签），对名词进行解释和描述。

表格标签

<table>标签（双标签），定义html表格，是表格的最外层容器。

属性	值	描述
align	left、center、right	水平对齐方式
valign	left、center、right	垂直对齐方式
cellpadding	px/%	单元格沿与其内容之间的空白
cellspacing	px/%	单元格之间的空白
border	px	表格的边框

<caption>标签（双标签），定义表格标题。
<tr>标签（双标签），定义html表格中的行。
<th>标签（双标签），定义表格内的表头单元格，可选的属性有rowspan和colspan。
<td>标签（双标签），定义html表格中的标准单元格。
<thead>标签（双标签），定义表格的表头。表格的语义化标签。
<tbody>标签（双标签），定义表格的正文。表格的语义化标签。
<tfoot>标签（双标签），定义表格的页脚。表格的语义化标签。

表单标签

<form>标签（双标签），定义html表单，是表单的最外层容器。

属性	值	描述
action（必须）	url	当提交表单时向何处发送表单数据
method（必须）	get/post	发送表单数据的http方法
autocomplete	on/off	是否启用表单的自动完成
enctype		在发送表单数据之前如何对其进行编码
target	_self/_blank	如何打开action url

<fieldset>标签（双标签），将表单内元素进行分组。<legend>标签为<fieldset>标签定义标题。
<input>标签（双标签），用于搜集用户信息，根据不同的type属性值，展示不同的控件。

属性	值	描述
type（必须）	button/file/hidden/password/reset/submit/text等	input元素的类型
checked	checked	加载时被选中
disabled	disabled	加载时禁用此元素
height	px/%	input字段的高度
width	px/%	input字段的宽度
list	datalist-id	引用包含输入字段的预定义选项的datalist
max	number/date	输入字段的最大值
min	number/date	输入字段的最小值
maxlength	number	输入字段中的字符的最大长度
multiple	multiple	允许一个以上的值
name	field_name	input元素的名称
pattern	regexp_pattern	输入字段的值的模式或格式
placeholder	text	帮助用户填写输入字段的提示
readonly	readonly	输入字段为只读
required	required	指示输入字段的值是必需的
size	number_of_char	定义输入字段的宽度
step	number	输入字的合法数字间隔
value	value	input元素的值

<select>标签（双标签），创建单选或多选的下拉菜单，常与<option>标签连用。

属性	值	描述
autofocus	autofocus	在页面加载后文本区域自动获得焦点
disabled	disabled	禁用下拉列表
multiple	multiple	可选择多个选项
name	name	下拉列表的名称
required	required	文本区域是必填的
size	number	下拉列表中可见选项的数目

<optgroup>标签（双标签），定义下拉菜单的选项。可选用label和disabled属性配合。
<textarea>标签（双标签），定义多行的文本输入控件。

属性	值	描述
rows（必须）	number	文本区内的可见行数
cols（必须）	number	文本区内的可见宽度
autofocus	autofocus	在页面加载后文本区域自动获得焦点
disabled	disabled	禁用该文本控件
maxlength	number	规定文本区域的最大字符数
name	name	文本区的名称
placeholder	text	描述文本区域预期值的简短提示
readonly	readonly	文本区为只读
required	required	文本区域是必填的
wrap	hard/soft	当在表单中提交时，文本区域中的文本如何换行

<label>标签（双标签），input 元素定义标注。它的for 属性应当与相关元素的 id 属性相同。

框架标签

<iframe>标签（双标签），创建包含另外一个文档的内联框架（即行内框架）。

属性	值	描述
frameborder（必须）	1/0	是否显示框架周围的边框
src（必须）	url	在 iframe 中显示的文档的 url
height	px/%	iframe的高度
width	px/%	定义 iframe 的宽度
marginheight	px	定义 iframe 的顶部和底部的边距
marginwidth	px	定义 iframe 的左侧和右侧的边距
name	name	规定iframe的名称
scrolling	yes/no/auto	是否在 iframe 中显示滚动条
longdesc	px/%	iframe 的较长描述

代码标签

<pre>标签（双标签），定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用<code>标签。虽然<code>标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。

图像映射标签

<map>标签（双标签），定义一个客户端图像映射。图像映射指带有可点击区域的一幅图像。<area>标签永远嵌套在<map>标签内部。<area>标签可定义图像映射中的区域。常与name属性连用。

属性	值	描述
alt（必须）	text	定义此区域的替换文本
coords（必须）	坐标值	可点击区域的坐标
href（必须）	url	此区域的目标url
shape（必须））	default/rect/circ/poly	区域的形状

多媒体标签

<embed>标签（双标签），定义嵌入的内容，比如flash动画、插件等。属于html5的新标签。

属性	值	描述
src（必须）	url	嵌入内容的url
type（必须）	type	定义嵌入内容的类型
height	px	设置嵌入内容的高度
width	px	设置嵌入内容的宽度

<object>标签（双标签），定义嵌入的对象，比如flash动画、插件等。需要配合<param>标签一起完成。

属性	值	描述
data（必须）	url	引用对象数据的url
type（必须）	MIME_type	被规定在data属性中指定的文件中出现的数据的MIME类型

<audio>标签（双标签），嵌入音频文件，比如音乐或其他音频流。属于html5的新标签。

属性	值	描述
src（必须）	url	播放的音频的url
autoplay	autoplay	音频在就绪后马上播放
controls	controls	显示控件按钮
loop	loop	每当音频结束时重新开始播放
muted	muted	静音
preload	preload	音频在页面加载时进行加载，并预备播放

<video>标签（双标签），嵌入视频文件，比如电影片段或其他视频流。属于html5的新标签。

属性	值	描述
src（必须）	url	播放的视频的url
height	px	设置视频播放器的高度
width	px	设置视频播放器的宽度
autoplay	autoplay	视频在就绪后马上播放
controls	controls	显示控件按钮
loop	loop	每当视频结束时重新开始播放
muted	muted	静音
preload	preload	视频在页面加载时进行加载，并预备播放
poster	url	视频下载时显示的图像

html5语义化标签

<header>标签（双标签），定义文档的页眉。
<main>标签（双标签），定义文档的主要内容。不兼容IE浏览器。
<footer>标签（双标签），定义文档或节的页脚。通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
<hgroup>标签（双****标签），对网页或区段（section）的标题进行组合。
<nav>标签（双标签），定义导航链接的部分。
<article>标签（双标签），定义独立的自包含内容。
<aside>标签（双标签），定义辅助信息的内容。
<section>标签（双标签），定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。
<figure>标签（双标签），定义独立的流内容。
<figcaption>标签（双标签），定义<figure>标签的标题。
<datalist>标签（双标签），定义选项列表。常与<option>标签配合使用，用value属性定义input的值。使用<input>标签的list属性来绑定datalist。
<details>标签（双标签），用于描述文档或文档某个部分的细节。常与<summary>标签配合使用，为details定义标题。使用open属性可以让details可见。只兼容Chrome和Safari浏览器。
<progress>标签（双标签），定义进度条。

属性	值	描述
max	number	任务一共需要多少工作
value	number	已经完成多少任务

<meter>标签（双标签），度量给定范围内的数据。不兼容IE浏览器。

属性	值	描述
value（必须）	number	度量的当前值
min	number	范围的最小值
max	number	范围的最大值
high	number	被视作高的值的范围
low	number	被视作低的值的范围
optimum	number	度量的优化值