本文介绍: 最全的HTML5标签元素合集,详细介绍

『主根元素

        HTML元素 表示一个 HTML 文档的根元素,所有其他元素必须是此元素的后代。

<html></html>

文档数据

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


base元素:

        指定用于一个文档包含的所有相对 URL 的根 URL。一份文件中只能有一个 <base> 元素。

<base href="http://url.com/" target="_blank">

link元素:

        引入HTML 外部资源链接元素,经常用于引入CSS样式表

<link href="/media/examples/link-element-example.css" rel="stylesheet">

meta标签

元数据(Metadata是数据的数据信息

<meta&gt; 标签提供了 HTML 文档元数据元数据不会显示客户端,但是会被浏览器解析

META元素通常用于指定网页描述关键词文件最后修改时间作者及其他元数据

元数据可以使用浏览器如何显示内容重新加载页面),搜索引擎关键词,或其他 Web 服务调用

<head&gt;
<!--网站基本信息,方便搜索引擎取数据-->
<meta name="description" content="网站用途">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="tonykan">

<!--字符编码-->
<meta charset="UTF-8">
</head>

每30秒刷新页面

<meta http-equiv="refresh" content="30">

style标签

        style元素包含文档样式信息或者文档的部分内容默认情况下,该标签的样式信息通常是CSS格式

<style>
p {
  color: #26b72b;
}
</style>

title元素

        title元素 定义文档的标题显示浏览器标题栏标签上。它只应该包含文本,若是包含标签,则它包含的任何标签都将被忽略

<title>页面标题</title>

分区根元素』

    body 元素表示文档的内容document.body 属性提供了可以轻松访问文档的 body 元素的脚本

<body>
<!--你的网站内容-->
</body>	

内容分区

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

元素

描述

<address>

address元素 表示其中的 HTML 提供了某个人或某个组织(等等)的联系信息

<article>

article元素表示文档页面应用网站中的独立结构,其意在成为独立分配的或可复用结构,如在发布中,它可能论坛帖子杂志或新闻文章博客用户提交评论交互式组件,或者其他独立的内容项目。​​

<aside>

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

<footer>

footer元素表示最近一个章节内容或者节点sectioning root )元素的页脚。一个页脚通常包含章节作者、版权数据或者与文档相关的链接等信息

<header>

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

<h1><h6>

<h1><h6> 标题 (Heading) 元素呈现了六个不同级别标题<h1> 级别最高,而 <h6> 级别最低

<main>

main元素呈现了文档的 body 或应用主体部分主体部分由与文档直接相关,或者扩展于文档的中心主题应用的主要功能部分的内容组成。

<nav>

nav元素表示页面的一部分,其目的是在当前文档或其他文档中提供导航链接导航部分的常见示例菜单目录索引

<section>

section元素表示 HTML 文档中一个通用独立章节,它没有更具体的语义元素来表示。一般来说会包含一个标题

文本分区

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

元素

描述

<blockquote>

blockquote元素代表其中的文字引用内容。通常在渲染时,这部分的内容会有一定的缩进。若引文来源于网络,则可以将原内容的出处 URL 地址设置cite 特性上,若要以文本的形式告知读者引文的出处时,可以通过 cite 元素

<dd>

dd元素用来指明一个描述列表 (dl) 元素中一个术语描述这个元素只能作为描述列表元素的子元素出现,并且必须跟着一个 dt 元素

<div>

div元素,是一个通用型的流内容容器,在不使用CSS的情况下,其对内容布局没有任何影响

<dl>

dl元素,是一个包术语定义以及描述的列表,通常用于展示词汇或者元数据

<dt>

dt元素用于在一个定义列表声明一个术语。该元素仅能作为 dl 的子元素出现。通常在该元素后面会跟着 dd 元素, 然而,多个连续出现的 <dt> 元素都将由出现在它们后面的第一个 dd 元素定义。

<figcaption>

figcaption元素,是与其相关联图片说明/标题,用?于描述其父节点 figure 元素里的其他数据。这意味着 <figcaption> figure 块里是第一个最后一个。同时Figcaption 元素是可选的,如果没有该元素,这个节点图片只是会没有说明/标题

<figure>

figure元素代表一段独立的内容,经常与说明captionfigcaption 配合使用,并且作为一个独立引用单元。当它属于主内容流(main flow时,它的位置独立于主体这个标签经常是在主文中引用图片插图表格代码段等等,当这部分转移到附录中或者其他页面时不会影响主体

<hr>

hr元素,表示段落级元素之间主题转换例如,一个故事中的场景的改变,或一个章节主题的改变)。

<li>

li元素用于表示列表里的条目。它必须包含在一个父元素里:一个序列表 (ol),一个序列表 (ul),或者一个菜单 (menu)。在菜单或者序列表里,列表条目通常用点排列显示;在有序列表里,列表条目通常在左边显示按升序排列计数例如数字或者字母

<menu>

menu元素呈现一组用户执行激活命令。这既包含了可能出现在屏幕顶端的列表菜单,也包含了那些隐藏按钮之下、当点击按钮显示出来的文本菜单

<ol>

ol元素,表示序列表,通常渲染为一个编号的列表

<p>

p元素, 表示文本一个段落。该元素通常表现为一整块与相邻文本分离文本,或以垂直空白隔离或以首行缩进。另外,<p> 块级元素

<pre>

pre元素,表示预定义格式文本。在该元素中的文本通常按照原文中的编排,以等宽字体形式展现出来,文本中的空白符比如空格换行符)都会显示出来

<ul>

ul元素,表示一个内可含多个元素的无序列表项目符号列表


内联文本语义』

使用 HTML 内联文本语义(Inline text semantics定义一个单词一行内容,或任意文字的语义结构样式

元素

描述

<a>

a元素(或称锚元素),可以通过它的 href 属性创建通向其他网页文件一页面内的位置电子邮件地址或任何其他 URL 的超链接<a> 中的内容应该应该指明链接意图。如果存在 href 属性,当 <a> 元素聚焦时按下回车就会激活

<abbr>

缩写元素<abbr>,用于代表缩写,并且可以通过可选的 title 属性提供完整的描述。若使用 title 属性,则它必须且仅可包含完整的描述内容

<b>

提醒注意(Bring Attention To)元素(<b>用于吸引读者的注意到该元素的内容上(如果没有另加特别强调)这个元素过去被认为是粗体(Boldface)元素,并且大多数浏览器仍然将文字显示为粗体。尽管如此,你不应将 <b> 元素用于显示粗体文字;替代方案使用 CSS font-weight 属性来创建粗体文字

<bdi>

双向隔离元素 (** <bdi> **) 告诉浏览器双向算法将其包含的文本与周围的文本隔离,当网站动态插入一些文本且不知道插入文本的方向性时,此功能特别有用。

<bdo>

双向文本替代元素 (<bdo>) 改写了文本的方向性,使文本以不同方向渲染呈现出来 (override 可以翻译很多意思,编程语言中多用覆盖重载

<br>

br元素,在文本中生成一个换行回车符号。此元素写诗地址时很有用,这些地方的换行都非常重要。

<cite>

 引用( Citation)标签 (<cite>) 表示一个作品引用,且必须包含作品标题。这个引用可能是一个根据适当的上下文约定关联引用元数据的缩写

<code>

 code元素,呈现一段计算机代码默认情况下,它以浏览器默认等宽字体显示

<data>

data元素,将一个指定内容机器可读的翻译联系在一起。但是,如果内容是与时间或者日期相关的,则一定要使用 time

<dfn>

定义元素 (<dfn>) 表示术语的一个定义

<em>

着重元素 (<em>) 标记需要用户着重阅读的内容 <em> 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为需要着重阅读

<i>

元素 <i> 用于表现因某些原因需要区分普通文本的一系列文本例如技术术语、外文短语或是小说中人物的思想活动等,它的内容通常以斜体显示

<kbd>

键盘输入元素 (<kbd>) 用于表示用户输入,它将产生一个行内元素,以浏览器默认 monospace 字体显示

<mark>

标记文本元素 (< Mark >) 表示为引用或符号目的而标记或突出显示的文本,这是由于标记段落在封闭上下文中的相关性或重要性造成的

<q>

引用标签 (<q>) 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本,所以请不要引入换行符; 对于长的文本的引用请使用 blockquote 替代

<rp>

rp元素,用于为那些不能使用 ruby 元素展示 ruby 注解浏览器,提供随后的括号

<rt>

Ruby 文本 (<rt>) 元素包含字符的发音,字符ruby 注解中出现,它用于描述东亚字符的发音。这个元素始终在 ruby 元素中使用。

<ruby>

ruby元素,被用来展示拼音字符注释

<s>

s元素,使用删除线来渲染文本。使用 <s> 元素来表示不再相关,或者不再准确的事情。但是当表示文档编辑时,不提倡使用 <s>

<samp>

samp元素,用于标识计算机程序输出,通常使用浏览器缺省的 monotype 字体(例如 Lucida Console)

<small>

small元素將使文本的字体变小一号(例如从大变成中等,从中等变成小,从小变成超小)。在 HTML5 中,除了它的样式含义,这个元素被重新定义为表示边注释和附属细则,包括版权法律文本

<span>

span元素是短语内容的通用行内容器,并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者 Id 属性),或者这些元素有着共同的属性,比如lang。应该在没有其他合适的语义元素时才使用它。<span> div 元素相似,但 div 是一个 块元素 而 <span> 则是 行内元素.

<strong>

strong元素表示文本十分重要,一般用粗体显示。

<sub>

sub元素定义了一个文本区域,出于排版原因,与主要的文本相比,应该展示更低并且更小。

<sup>

sup元素定义了一个文本区域,出于排版原因,与主要的文本相比,应该展示更高并且更小。

<time>

time标签用来表示 24 小时制时间或者公历日期,若表示日期则也可包含时间时区

<u>

u元素(表意不清标注元素)表示一个需要标注为非文本化(nontextual)的内联文本域。默认情况下渲染为一个实线下划线,可以用 CSS 替换

<var>

var元素表示数学表达式编程上下文中的变量名称。尽管该行为取决于浏览器,但通常使用当前字体的斜体形式显示。

<wbr>

wbr元素,一个文本中的位置,其中浏览器可以选择换行,虽然它的换行规则可能不会在这里换行。

正在更新……

后面还会包括:

图片多媒体 内嵌内容 SVG 和 MathML 脚本 编辑标识 表格内容 表单 交互元素 Web 组件 过时的和弃用的元素

原文地址:https://blog.csdn.net/Tony_Kan_/article/details/126169797

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_34572.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注