网站首页 > 技术文章 正文
HTML5 元素有多种维度展示方式,常见以下:
- 1.按照类别分类
- 2.按照是否Block元素
按照类别分:
根元素
- - html 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。
- 文档元数据
- head 代表关于文档元数据的一个集合,包括脚本或样式表的链接或内容。
- title 定义文档的标题,将显示在浏览器的标题栏或标签页上。该元素只能包含文本,包含的标签不会被解释。
- base 定义页面上相对 URL 的基准 URL。
- link 用于链接外部的 CSS 到该文档。
- meta 定义其他 HTML 元素无法描述的元数据。
- style 用于内联 CSS。
- -
- 脚本
- script 定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。
- noscript 定义当浏览器不支持脚本时显示的替代文字。
- template 这个元素在 HTML5 中加入 通过 JavaScript 在运行时实例化内容的容器。
- -
- 章节
- body 代表 HTML 文档的内容。在文档中只能有一个 元素。
- section 这个元素在 HTML5 中加入 定义文档中的一个章节。
- nav 这个元素在 HTML5 中加入 定义只包含导航链接的章节。
- article 这个元素在 HTML5 中加入 定义可以独立于内容其余部分的完整独立内容块。
- aside 这个元素在 HTML5 中加入 定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。
- h1~ h6 标题元素实现了六层文档标题,h1 是最大的标题,h6 是最小的标题。标题元素简要地描述章节的主题。
- header 这个元素在 HTML5 中加入 定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录
- footer 这个元素在 HTML5 中加入 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
- address 定义包含联系信息的一个章节。
- main 这个元素在 HTML5 中加入 定义文档中主要或重要的内容。
- -
- 内容组织
- p 定义一个段落。
- hr 代表章节、文章或其他长内容中段落之间的分隔符。
- pre 代表其内容已经预先排版过,格式应当保留 。
- blockquote 代表引用自其他来源的内容。
- ol 定义一个有序列表。
- ul 定义一个无序列表。
- li 定义列表中的一个列表项。
- dl 定义一个定义列表(一系列术语和其定义)。
- dt 代表一个由下一个
- 定义的术语。
- dd 代表出现在它之前术语的定义。
- figure 这个元素在 HTML5 中加入 代表一个和文档有关的图例。
- figcaption 这个元素在 HTML5 中加入 代表一个图例的说明。
- div 代表一个通用的容器,没有特殊含义。
- -
- 文字展示
- a 代表一个链接到其他资源的超链接 。
- em 代表强调 文字。
- strong 代表特别重要 文字。
- small 代表注释 ,如免责声明、版权声明等,对理解文档不重要。
- s 代表不准确或不相关 的内容。
- cite 代表作品标题 。
- q 代表内联的引用 。
- dfn 代表一个术语包含在其最近祖先内容中的定义 。
- abbr 代表省略 或缩写 ,其完整内容在 title 属性中。
- data 这个元素在 HTML5 中加入 关联一个内容的机器可读的等价形式 (该元素只在 WHATWG 版本的 HTML 标准中,不在 W3C 版本的 HTML5 标准中)。
- time 这个元素在 HTML5 中加入 代表日期 和时间 值;机器可读的等价形式通过 datetime 属性指定。
- code 代表计算机代码 。
- var 代表代码中的变量 。
- samp 代表程序或电脑的输出 。
- kbd 代表用户输入 ,一般从键盘输出,但也可以代表其他输入,如语音输入。
- sub,- sup 分别代表下标 和上标 。
- i 代表一段不同性质 的文字,如技术术语、外文短语等。
- b 代表一段需要被关注 的文字。
- u 代表一段需要下划线呈现的文本注释,如标记出拼写错误的文字等。
- mark 这个元素在 HTML5 中加入 代表一段需要被高亮的引用 文字。
- ruby 这个元素在 HTML5 中加入 代表被ruby 注释 标记的文本,如中文汉字和它的拼音。
- rt 这个元素在 HTML5 中加入 代表ruby 注释 ,如中文拼音。
- rp 这个元素在 HTML5 中加入 代表 ruby 注释两边的额外插入文本 ,用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。
- bdi 这个元素在 HTML5 中加入 代表需要脱离 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。
- bdo 指定子元素的文本方向 ,显式地覆盖默认的文本方向。
- span 代表一段没有特殊含义的文本,当其他语义元素都不适合文本时候可以使用该元素。
- br 代表换行 。
- wbr 这个元素在 HTML5 中加入 代表建议换行 (Word Break Opportunity) ,当文本太长需要换行时将会在此处添加换行符。
- -
- 文字编辑
- ins 定义增加 到文档的内容。
- del 定义从文档移除 的内容。
- -
- 图片等资源展示
- img 代表一张图片 。
- iframe 代表一个内联的框架 。
- embed 这个元素在 HTML5 中加入 代表一个嵌入 的外部资源,如应用程序或交互内容。
- object 代表一个外部资源 ,如图片、HTML 子文档、插件等。
- param 代表 - object 元素所指定的插件的参数 。
- video 这个元素在 HTML5 中加入 代表一段视频 及其视频文件和字幕,并提供了播放视频的用户界面。
- audio 这个元素在 HTML5 中加入 代表一段声音 ,或音频流 。
- source 这个元素在 HTML5 中加入 为 - video 或 - audio 这类媒体元素指定媒体源 。
- track 这个元素在 HTML5 中加入 为 - video 或 - audio 这类媒体元素指定文本轨道(字幕) 。
- canvas 这个元素在 HTML5 中加入 代表位图区域 ,可以通过脚本在它上面实时呈现图形,如图表、游戏绘图等。
- map 与 - area 元素共同定义图像映射 区域。
- area 与 - map 元素共同定义图像映射 区域。
- svg 这个元素在 HTML5 中加入 定义一个嵌入式矢量图 。
- math 这个元素在 HTML5 中加入 定义一段数学公式 。
- -
- 表格
- table 定义多维数据 。
- caption 代表表格的标题 。
- colgroup 代表表格中一组单列或多列 。
- col 代表表格中的列 。
- tbody 代表表格中一块具体数据 (表格主体)。
- thead 代表表格中一块列标签 (表头)。
- tfoot 代表表格中一块列摘要 (表尾)。
- tr 代表表格中的行 。
- td 代表表格中的单元格 。
- th 代表表格中的头部单元格 。
- -
- 表单
- form 代表一个表单 ,由控件组成。
- fieldset 代表控件组 。
- legend 代表 - fieldset 控件组的标题 。
- label 代表表单控件的标题 。
- input 代表允许用户编辑数据的数据区 (文本框、单选框、复选框等)。
- button 代表按钮 。
- select 代表下拉框 。
- datalist 这个元素在 HTML5 中加入 代表提供给其他控件的一组预定义选项 。
- optgroup 代表一个选项分组 。
- option 代表一个 - select 元素或 - datalist 元素中的一个选项
- textarea 代表多行文本框 。
- keygen 这个元素在 HTML5 中加入 代表一个密钥对生成器 控件。
- output 这个元素在 HTML5 中加入 代表计算值 。
- progress 这个元素在 HTML5 中加入 代表进度条 。
- meter 这个元素在 HTML5 中加入 代表滑动条 。
- -
- 导航等交互元素
- details 这个元素在 HTML5 中加入 代表一个用户可以(点击)获取额外信息或控件的小部件 。
- summary 这个元素在 HTML5 中加入 代表 - details 元素的综述 或标题 。
- menuitem 这个元素在 HTML5 中加入 代表一个用户可以点击的菜单项。
- menu 这个元素在 HTML5 中加入 代表菜单。
按照是否Block元素分:
- 1.Empty Elements
- area 与 map 元素共同定义图像映射 区域。
- base 定义页面上相对 URL 的基准 URL。
- basefont 4.0种标签,目前已废弃
- br 代表换行 。
- col 代表表格中的列 。
- frame 4.0种标签,目前已废弃
- hr 代表章节、文章或其他长内容中段落之间的分隔符。
- img 代表一张图片 。
- input 代表允许用户编辑数据的数据区 (文本框、单选框、复选框等)。
- isindex 4.0种标签,目前已废弃
- link 用于链接外部的 CSS 到该文档。
- meta 定义其他 HTML 元素无法描述的元数据。
- param 代表 object 元素所指定的插件的参数
- embed 代表一个嵌入 的外部资源,如应用程序或交互内容
- -
- 2.Block Elements
- address 定义包含联系信息的一个章节
- applet 4.0种标签,目前已废弃
- blockquote 代表引用自其他来源的内容。
- button 代表按钮
- center 4.0种标签,目前已废弃
- dd 代表出现在它之前术语的定义
- del 定义从文档移除 的内容。
- dir 4.0种标签,目前已废弃
- div 代表一个通用的容器,没有特殊含义
- dl 定义一个定义列表(一系列术语和其定义)
- dt 代表一个由下一个 dd 定义的术语
- fieldset 代表控件组
- form 代表一个表单 ,由控件组成
- frameset 4.0种标签,目前已废弃
- hr 代表章节、文章或其他长内容中段落之间的分隔符
- iframe 代表一个内联的框架
- ins 定义增加 到文档的内容
- isindex 4.0种标签,目前已废弃
- li 定义列表中的一个列表项
- map 与 area 元素共同定义图像映射 区域
- menu 代表菜单
- noframes
- noscript 定义当浏览器不支持脚本时显示的替代文字
- object 代表一个外部资源 ,如图片、HTML 子文档、插件等
- ol 定义一个有序列表
- p 定义一个段落
- pre 代表其内容已经预先排版过,格式应当保留
- script 定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript
- table 定义多维数据
- tbody 代表表格中一块具体数据 (表格主体)
- td 代表表格中的单元格
- tfoot 代表表格中一块列摘要 (表尾)
- th 代表表格中的头部单元格
- thead 代表表格中一块列标签 (表头)
- tr 代表表格中的行
- ul 定义一个无序列表
- -
- 3.Inline Elements
- a 代表一个链接到其他资源的超链接
- abbr 代表省略 或缩写 ,其完整内容在 title 属性中
- acronym 4.0种标签,目前已废弃
- applet 4.0种标签,目前已废弃
- b 代表一段需要被关注 的文字
- basefont 4.0种标签,目前已废弃
- bdo 指定子元素的文本方向 ,显式地覆盖默认的文本方向
- big 4.0种标签,目前已废弃
- br 代表换行
- button 代表按钮
- cite 代表作品标题
- code 代表计算机代码
- del 定义从文档移除 的内容
- dfn 代表一个术语包含在其最近祖先内容中的定义
- em 代表强调 文字
- font 4.0种标签,目前已废弃
- i 代表一段不同性质 的文字,如技术术语、外文短语等
- iframe 代表一个内联的框架
- img 代表一张图片
- input 代表允许用户编辑数据的数据区 (文本框、单选框、复选框等)
- ins 定义增加 到文档的内容
- kbd 4.0种标签,目前已废弃
- label 代表表单控件的标题
- map 与 area 元素共同定义图像映射 区域
- object 代表一个外部资源 ,如图片、HTML 子文档、插件等
- q 代表内联的引用
- s 代表不准确或不相关 的内容
- samp 代表程序或电脑的输出
- script 定义一个内联脚本或链接到外部脚本。默认脚本语言是 JavaScript
- select 代表下拉框
- small 代表注释 ,如免责声明、版权声明等,对理解文档不重要
- span 代表一段没有特殊含义的文本,当其他语义元素都不适合文本时候可以使用该元素
- strike 4.0种标签,目前已废弃
- strong 代表特别重要 文字
- sub 代表下标
- sup 代表上标
- textarea 代表多行文本框
- tt 4.0种标签,目前已废弃
- u 4.0种标签,目前已废弃
- var 代表代码中的变量
- -
参考文献:
- https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
- 本文作者:前端首席体验师(CheongHu)
- 联系邮箱:simple2012hcz@126.com
- 版权声明: 本文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
猜你喜欢
- 2024-10-11 Html5知识点 html5详解
- 2024-10-11 前端h5支付攻略 h5支付功能如何实现
- 2024-10-11 编程小白,如何区分HTML5开发和前端开发?
- 2024-10-11 干货整理:适合新手学习的HTML5大前端学习路线图
- 2024-10-11 HTML5最新版本介绍 html5官方下载
- 2024-10-11 第26天,开发开发软件的软件之前端H5可视化设计器开发
- 2024-10-11 【从零入门 Web 前端】HTML5 + CSS 简明教程
- 2024-10-11 前端开发学习路线是什么?零基础怎么快速学会H5?
- 2024-10-11 有趣的前端开发-html5(1) 前端开发小游戏
- 2024-10-11 前端h5性能优化 h5页面性能优化
你 发表评论:
欢迎- 501℃几个Oracle空值处理函数 oracle处理null值的函数
- 495℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 494℃Oracle分析函数之Lag和Lead()使用
- 482℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 473℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 468℃【数据统计分析】详解Oracle分组函数之CUBE
- 453℃Oracle有哪些常见的函数? oracle中常用的函数
- 450℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 最近发表
-
- Directus 火了!无代码 SQL 数据的协作应用利器!
- PHP和NodeJS的代码执行效率比较(php和nodejs的区别)
- 工商银行获得发明专利授权:“基于数据库映射动态接口的前端页面应用开发方法及装置”
- FAISS和Chroma:两种流行的向量数据库的比较
- 什么是数据库的索引?(数据库索引的定义和作用)
- Vercel和Neon“首次”推出用于前端云的无服务器SQL数据库
- 记一次前端逻辑绕过登录到内网挖掘
- 学Access好还是MySQL好?(access与mysql的语句区别)
- 惬意!清晨慢品 HTML canvas 标签题,面试知识轻松 get
- 前端实现知识图谱-force(d3.js)(前端知识树)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端富文本编辑器 (47)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)