前端三叉乾——HTML（超文本标记语言）

前言

以下是根据对菜鸟教程HTML和MDN官网的内容进行总结。还有常用的标签介绍

HTML简介

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

HTML标签基本分类

HTML中的标签从闭合的角度可以分为闭合标签和空标签。而HTML中大部分标签都是闭合标签，其他少数为空标签，常见的空标签有input、 img 、 area 、 base 、 link 等。

HTML中对标签另一种分类方式，是根据标签在文档中的位置特性进行分类的，它将元素分为三类：块级元素，行内元素，行级块元素（也称块级行元素）。

1. 块级元素（block）
   　　特点：（1）可以设置宽高、内、外边距；
   　　 （2）独占一行（即前后均有换行）；
   　　 （3）块级元素如果不设置宽度和高度，则宽度默认为父级元素的宽度。高度则根据内容大小自动填充。
   　　 常见的块级元素： div、p、h1、h2…hn，ol、ul、dl、li、form、table

2. 行级元素(inline)
   特点： （1）不可设置宽高、上下内、外边距。（左右内、外边距设置有效）
   （2）其宽度和高度由其内容自动填充。
   （2）其他行级元素共处一行 ；
   常见的行级元素：a、span、i、lable等

3. 行内块元素（inline-block）
   特点：（1）可以设置宽高、内外边距；
   （2）可以与其他行内元素、内联元素共处一行；
   常见的内联元素：input、img

4. 元素之间的转化
   可以在行内样式或css样式中改变元素的display将三种元素进行转换。
   display:block；(将元素变为块级元素)
   display:inline； (将元素变为行级元素)
   display：inline-block；（将元素变为行级块元素）

文本标签

acronym标签：HTML5不再支持。 定义只取首字母的缩写。
abbr标签：定义一个缩写。
address标签：定义文档作者或拥有者的联系信息。
b标签：定义粗体文本。
bdi标签：允许您设置一段文本，使其脱离其父元素的文本方向设置。（HTML5新增）
bdo标签：定义文本的方向。
big标签：HTML5不再支持。 定义大号文本。
blockquote标签：定义块引用。
center标签：HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。
cite标签：定义引用(citation)。
code标签：定义计算机代码文本。
del标签：定义被删除文本。
dfn标签：定义定义项目。
em标签：定义强调文本。
font标签：HTML5不再支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色
i标签：定义斜体文本。
ins标签：定义被插入文本。
kbd标签：定义键盘文本。
mark标签：定义带有记号的文本。（HTML5新增）
meter标签：定义度量衡。仅用于已知最大和最小值的度量。（HTML5新增）
pre标签：定义预格式文本
progress标签：定义运行中的任务进度（进程）。（HTML5新增）
q标签：定义短的引用。
rp标签：定义不支持 ruby 元素的浏览器所显示的内容。（HTML5新增）
rt标签：定义字符（中文注音或字符）的解释或发音。（HTML5新增）
ruby标签：定义 ruby 注释（中文注音或字符）。（HTML5新增）
s标签：定义加删除线的文本。
samp标签：定义计算机代码样本。
small标签：定义小号文本。
strike标签：HTML5不再支持。 HTML 4.01 已废弃。 定义加删除线的文本。
strong标签：定义语气更为强烈的强调文本。
sub标签：定义下标文本。
sup标签：定义上标文本。
time标签：定义一个日期/时间（HTML5新增）
tt标签：HTML5不再支持。 定义打字机文本。
u标签：定义下划线文本。
var标签：定义文本的变量部分。
wbr标签：规定在文本中的何处适合添加换行符。（HTML5新增）

表单标签

标签	描述
form	定义一个 HTML 表单，用于用户输入。
inper	定义一个输入控件。
textarea	定义多行的文本输入控件。
button	定义按钮。
select	定义选择列表（下拉列表）。
optgroup	定义选择列表中相关选项的组合。
option	定义选择列表中的选项。
label	定义 input 元素的标注。
fieldset	定义围绕表单中元素的边框。
legend	定义 fieldset 元素的标题。
datalist	规定了 input 元素可能的选项列表。（HTML5新增）
keygen	规定用于表单的密钥对生成器字段。（HTML5新增）
output	定义一个计算的结果。（HTML5新增）

input标签属性

以下是input常用的属性

input属性	值	描述
accept	audio/* video/* image/* MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type=“file”)
alt	text	定义图像输入的替代文本。 (只针对type=“image”)
type	button、checkbox、color、date、datetime、datetime-local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url、week	type 属性规定要显示的 input元素的类型。
value	text	指定 input元素 value 的值。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”)
name	text	name 属性规定 input元素的名称。
maxlength	number	属性规定 input 元素中允许的最大字符数。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 input元素。 (只针对 type=“checkbox” 或者 type=“radio”)
disabled	disabled	disabled 属性规定应该禁用的 input元素。
readonly	readonly	readonly 属性规定输入字段是只读的。
size	number	size 属性规定以字符数计的 input元素的可见宽度。

表格标签

标签	描述
table	定义一个表格
caption	定义表格标题。
th	定义表格中的表头单元格。
tr	定义表格中的行。
td	定义表格中的单元。
thead	定义表格中的表头内容。
tbody	定义表格中的主体内容。
tfoot	定义表格中的表注内容（脚注）。
col	定义表格中一个或多个列的属性值。
colgroup	定义表格中供格式化的列组。

图像标签

标签	描述
img	定义图像。
map	定义图像映射。
area	定义图像地图内部的区域。
canvas	通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。（HTML新增）
figcaption	定义一个 caption for a element（HTML新增）
figure	figure 标签用于对元素进行组合。（HTML新增）

列表标签

标签	描述
ul	定义一个无序列表
ol	定义一个有序列表
li	定义一个列表项
dir	HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。
dl	定义一个定义列表
dt	定义一个定义定义列表中的项目。
dd	定义定义列表中项目的描述。
menu	定义菜单列表。
command	定义用户可能调用的命令（比如单选按钮、复选框或按钮）。（HTML新增）

链接标签

标签	描述
a	定义一个链接
link	定义文档与外部资源的关系。
main	定义文档的主体部分。
nav	定义导航链接（HTML新增）