HTML5元素

222 阅读8分钟

一、基础

head:文档相关的配置信息

title:文档的标题,显示在浏览器的标题栏或标签页上

base:文档中包含的所有相对URL的根URL

link:外部资源链接元素(CSS,站点图标)

style:文档的样式信息

script:文档可执行JavaScript

meta:head中不能由其他标签引入的元素()

noscript:JavaScript不受支持或者当前在浏览器中关闭了JavaScript,被执行时的替代内容

二、文本处理

pre:预定义格式文本。文本会按照原文件中的编排,空白符(比如空格和换行符)都会显示出来

q(quotation):引用短的文本

blockquote:引用长的文本

cite:作品的引用

abbr:缩写术语

dfn:专业名称

address:联系信息

bdo:改写文本的方向性

bdi:文本的方向性

strong:强调内容重要性,默认文字粗体

b(boldface):粗体,不建议使用,可以用样式的font-weight属性设置

em:着重阅读的内容,默认文字斜体化

i:区分普通文本,默默认文字斜体化

mark:为引用或符号目的而标记或突出显示的文本,默认文字高亮显示

small:文本的字体变小一号

s:删除线来渲染文本

del:删除的文字内容,默认文字上显示删除线

ins:添加的文字内容

sub:比文本更低并且更小

sup:比文本更高并且更小

u:某种形式的非文本注释,默认文本实线下划线,不建议使用,可以用样式的text-decoration属属性设置

br:换行(回车)符号

hr:段落级元素之间的主题转换,默认是一个水平线,但是想实现水平线,建议使用CSS实现

h1–h6(heading):标题,h1最高,h6最低

p:段落,一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进,块级元素

progress:任务的完成进度

hgroup:文档标题和与标题相关联的内容,把一个h1–h6元素与一个或多个p元素组合在一起

三、表格

table:表格

caption:表格标题

colgroup:表格列组,可以将表格按照列分成不同的组,比如可以给表格列组设置不同的样式,只有子元素col

col:表格中的列,所有公共单元格上的公共语义,span属性表示跨越的连续列数

thead:表格的列头的行

tbody:表格的主体

tr:表格中的行

th:表格内的表头单元格,colspan属性表示跨越的连续列数,rowspan属性表示跨越的连续行数,相对于td默认会有加粗的效果

td:包含数据的表格单元格,colspan属性表示跨越的连续列数,rowspan属性表示跨越的连续行数

tfoot:表格中各列的汇总行

四、表单

form:表单

label:标签,某个元素的说明

input:输入元素,其中type属性为不同,则为不同的元素

Type描述
button按钮
checkbox复选框
color指定颜色的控件
date输入日期的控件(年、月、日,不包括时间)
datetime-local输入日期和时间的控件,不包括时区
email编辑邮箱地址的区域
file选择文件的控件
hidden不显示的控件,其值仍会提交到服务器
image带图像的submit按钮
month输入年和月的控件,没有时区
number输入数字的控件
password单行的文本区域,其值会被遮盖
radio单选按钮
range用于输入不需要精确的数字
reset将表单的所有内容重置为默认值
search搜索字符串的单行文字区域
submit提交表单的按钮
tel输入电话号码的控件
text默认值。单行的文本区域
time输入时间的控件,不包括时区
url输入URL的控件
week输入以年和周数组成的日期,不带时区

button:可点击的按钮

datalist:包含了一组option元素,这些元素表示其它表单控件可选值

select:提供选项菜单的控件

optgroup:为select元素中的选项创建分组

option:选项,用于定义在select,optgroup或datalist元素中包含的项

textarea:多行纯文本编辑控件

fieldset:对表单中的控制元素进行分组(也包括label元素)

legend:父元素fieldset的内容标题

output:计算或用户操作的结果

meter:已知范围的标量值或者分数值

object:引入一个外部资源,这个资源可能是一张图片,一个嵌入的浏览上下文,或是一个插件所使用的资源

五、列表

dl:描述列表,包含术语定义以及描述的列表,通常用于展示词汇表或者元数据(键-值对列表)

dt:描述列表中的术语

dd:描述列表中的描述

ol:有序列表,type属性设置序号的类型

ul:(无序列表)多个元素的无序列表或项目符号列表,可以通过css的list-style-type属性设置标记,可以和ol混合使用

ol和ul两者可以无限嵌套,既可以同类嵌套,也可以互相嵌套

li:列表里的条目,必须包含在父元素(有序列表,无序列表,菜单)里

data:将一个指定内容和数据联系在一起

六、多媒体

audio:音频

video:媒体播放器

source:为picture, audio或者video元素指定多个媒体资源

track:作为媒体元素(audio和video)的子元素来使用。指定时序文本字幕(或者基于时间的数据)

七、图片

img:图像嵌入元素

map:与area属性一起使用来定义一个图像映射(一个可点击的链接区域)

area:在图片上定义一个热点区域,可以关联一个超链接。area元素仅在map元素内部使用

picture:包含零或多个source元素和一个img元素来为不同的显示/设备场景提供图像版本

figure:可附标题内容元素,在主文中引用的图片,插图,表格,代码段等等

figcaption:与其相关联的图片的说明/标题

八、结构

nav:当前文档或其他文档中提供导航链接,导航部分的常见示例是菜单,目录和索引

header:展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等

main:应用的主体部分,主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成

section:文档中的独立部分,它没有更具体的语义元素来表示,一般来说会有包含一个标题

article:文档、页面、应用或网站中的独立结构,可独立分配的或可复用的结构,可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目

aside:和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框

details:创建一个挂件,仅在被切换成展开状态时,它才会显示内含的信息

summary:用作details元素的一个内容的摘要,标题或图例

footer:一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息

dialog:对话框或其他交互式组件,例如一个检查器或者窗口

div:通用型的流内容容器,块元素

span:短语内容的通用行内容器,行内元素

九、其他

iframe:内联框架元素,将另一个HTML页面嵌入到当前页面中

a:通过href属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接

param:为object元素定义参数

time:24 小时制时间或者公历日期,若表示日期则也可包含时间和时区

canvas:通过JavaScript(Canvas API或WebG API)绘制图形及图形动画

slot:占位符,插槽,和template配合使用

template:内容模板,用于保存客户端内容机制,该内容在加载页面时不会呈现,但随后可以在运行时使用JavaScript实例化

十、不常使用

code:一段计算机代码

var:数学表达式或编程上下文中的变量名称

kbd:用户输入

samp:计算机程序输出

wbr: