HTML Element

根元素

  • <html> 表示一个HTML文档的根(顶级元素),所所以它也被称为根元素。其他所有其他元素必须是此元素的后代。

文档元数据

元数据(Metadata)含有页面的相关信息,包括样式、脚本及数据,能帮助一些软件 (如搜索引擎, 浏览器等等)更好地运用和渲染页面。对于样式和脚本的元数据,可以直接在网页里定义,也可以链接到包含相关信息的外部文件。

  • <link> 指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。
  • <meta> 表示那些不能由其它HTML元相关元素 (<base><link><script><style><title>)之一表示的任何元数据信息。
  • <style> 包含了文档的样式化信息或者文档的一部分。指定的样式化星系包含的该元素内,通常是CSS的格式。

内容分区

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素,来为页面内容创建明确的大纲,以便区分各个章节的内容。

  • <address> 可以让作者为它最近的<article>或者<body>祖先元素提供联系信息。在后一种情况下,它应用于整个文档。
  • <article> 表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。
  • <aside> 表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。
  • <footer> 示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
  • <h1-h6> 标题信息
  • <header> 表示一组引导性的帮助,可能包含标题元素,也可以包含其他元素,像logo、分节头部、搜索表单等。
  • <hgroup> 代表一个段的标题。
  • <nav> 描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表.
  • <section> 表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading)。

文本内容

使用 HTML 文本内容元素来组织在开标签<body>和闭标签</body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构,而这对于 accessibility 和 SEO很重要。

  • <blockquote> 引用块
  • <div> 是一个通用型的流内容容器。
  • <dl> 是一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键-值对列表)。
  • <dt> 用于在一个定义列表中声明一个术语。通常在该元素后面会跟着 <dd>元素
  • <dd> 用来指明一个描述列表 ( <dl> ) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现,并且必须跟着一个 <dt> 元素。
  • <hr> 表示段落级元素之间的主题转换。在HTML的早期版本中,它是一个水平线。现在它仍能在可视化浏览器中表现为水平线,但目前被定义为语义上的,而不是表现层面上。
  • <main> 呈现了文档<body>或应用的主体部分。
  • <ol> 表示多个有序列表项,通常渲染为有带编号的列表。
  • <ul> 代表多项的无序列表,即无数值排序项的集合,且它们在列表中的顺序是没有意义的。
  • <li> 用于表示列表里的条目。它必须被包含在一个父元素
    <ul> <ol> 里.
  • <p> 表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。
  • <pre> 表示预定义格式文本。

内联文本语义

使用 HTML 内联文本语义(Inline text semantics)定义语句,结构,可以是一个词,一段,或任意风格的文字。

  • <a> 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
  • <abbr> 代表缩写,并可选择提供一个完整的描述。
  • <b> 表示相对于普通文本字体上的区别,但不表示任何特殊的强调或者关联,通常以粗体显示。
  • <bdi> (双向隔离元素) 会隔离可能以不同方向进行格式化的外部文本。
  • <bdo> (HTML双向覆盖元素)用于覆盖当前文本的朝向,它使得字符按给定的方向排列。
  • <br> 文本中产生一个换行(回车键)。
  • <cite> 表示一个作品的引用。
  • <code> 现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示。
  • <data> 将一个指定内容和机器可读的翻译联系在一起。
  • <em> 标记出需要用户着重阅读的内容
  • <i> 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等,它的内容通常以斜体显示。
  • <kbd> 用于表示用户输入,它将产生一个行内元素,以浏览器的默认monospace字体显示。
  • <mark> 代表突出显示的文字。
  • <q> 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本,所以请不要引入换行符; 对于长的文本的引用请使用<blockquote>替代。
  • <s> 使用删除线来渲染文本。
  • <small> 使文本的字体变小一号。
  • <span> 短语内容的通用行内容器,并没有任何特殊语义。
  • <strong> 表示文本十分重要,一般用粗体显示。
  • <sub> 定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更低并且更小。下标
  • <sup> 定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更高并且更小。上标
  • <u> 使文本在其内容的基线下的一行呈现下划线。

图片和多媒体

HTML 支持各种多媒体资源,例如图像,音频和视频。

  • <area> 在图片上定义一个热点区域
  • <audio> 用于在文档中表示音频内容。 <audio>元素可以包含多个音频资源, 这些音频资源可以使用 src属性或者<source>元素来进行描述; 浏览器将会选择最合适的一个来使用。对于不支持 <audio> 元素的浏览器,<audio> 元素也可以作为浏览器不识别的内容加入到文档中。
  • <img> 代表文档中的一个图像。
  • <track> 被当作媒体元素—<audio><video>的子元素来使用。它允许指定计时字幕(或者基于事件的数据),例如自动处理字幕。
  • <video> 用于在HTML或者XHTML文档中嵌入视频内容。

内嵌内容

除了常规的多媒体内容,HTML 可以包括各种其他的内容,即使它并不容易交互。

  • <embed> 用于表示一个外部应用或交互式内容的集合点,换句话说,就是一个插件。
  • <object> 表示引入一个外部资源,这个资源可能是一张图片,一个嵌入的浏览上下文,亦或是一个插件所使用的资源。
  • <param> 定义了 <object>的参数
  • <source>

脚本

为了创建动态内容和 Web 应用程序,HTML 支持使用脚本语言,最突出的就是 JavaScript。某些元素支持此功能。

  • <canvas> 可被用来通过脚本(通常是JavaScript)绘制图形。
  • <noscript> 如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本,则HTML <noscript>元素定义要插入的html部分。
  • <script> 用于嵌入或引用可执行脚本

编辑标识

这些元素能标示出某个文本被更改过的部分。

  • <del> 表示已经从文档中删除的文本范围。此元素通常是(但不必)呈现删除线的文本。
  • <ins> 定义已经被插入文档中的文本。

表单

HTML 提供了许多可一起使用的元素,这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。

  • <button> 表示一个可点击的按钮。
  • <datalist> 包含了一组<option>元素,这些元素表示其它表单控件可选值.
  • <fieldset> 用来对表单中的控制元素进行分组(也包括 label 元素)
  • <form> 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。
  • <input> 用于为基于Web的表单创建交互式控件,以便接受来自用户的数据。
  • <label> 表示用户界面中项目的标题。
  • <legend> 代表一个用于表示它的父元素<fieldset>的内容的标题。
  • <meter> 用来显示已知范围的标量值或者分数值。
  • <option> 用于定义在<select><optgroup><datalist> 元素中包含的项。
  • <output> 表示计算或用户操作的结果。
  • <progress> 用来显示一项任务的完成进度。通常情况下,该元素都显示为一个进度条形式.
  • <select> 一种表单控件,可创建选项菜单。
  • <textarea> 表示一个多行纯文本编辑控件。

交互元素

HTML 提供了一系列有助于创建交互式用户界面对象的元素。

  • <details> 被用作发现小部件,用户可以从其中检索附加信息。
  • <dialog> 表示一个对话框或其他交互式组件,例如一个检查员或窗口。
  • <menu> 呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单,也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。
  • <menuitem> 生成一个弹出式菜单。这包括上下文菜单,以及按钮可能附带的菜单。
  • <summary> 用作 一个 <details> 元素的一个内容的摘要,标题或图例。

web组件

Web 组件是种近似 HTML(HTML-related) 的技术,这使得它能够,从本质上讲,创建和使用自定义元素,就好像它是普通的 HTML。此外,你甚至可以创建自定义版本的标准 HTML 元素。

  • <slot> web组件技术的一部分,slot是web组件的一个占位符,可以用来插入自定义的标记文本。可以创建不同的DOM树并进行渲染。
  • <template> 一种用于保存客户端内容的机制,该内容在页面加载时不被渲染,但可以在运行时使用JavaScript进行实例化。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • 每一个念头, 从你的心上生起, 带着另一个你, 完成一趟心念的旅行。 那样的一种境地, 是你去过也未曾抵达的地方。...
    小剧在成长阅读 133评论 0 6
  • 姓名 徐海燕 公司 宁波四维尔工业有限责任公司 【日精进打卡第216天】 【知~学习】 《六项精进》大纲今日1...
    柠檬茶_4592阅读 330评论 0 0
  • 其实养狗狗都要注意这几点: 1.如果希望自己家的狗狗能陪自己时间长点,切记不要给狗狗吃人吃的东西。不要相信淘宝卖的...
    blackenna阅读 239评论 0 0