HTML5元素相关补充

发布于：2025-07-28 ⋅ 阅读:(14) ⋅ 点赞:(0)

 一.元素

<!DOCTYPE html>是HTML5 的文档类型声明，它告诉浏览器当前页面是使用 HTML5 规范编写的，HTML5 是最新的 HTML 版本，拥有更多的功能和优化，因此推荐在新的 Web 页面中使用它。在 HTML 文档中，<!DOCTYPE> 声明通常是文档的第一行

文档元数据

元素 描述
<base> 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个该元素。
<head> 包含文档相关的配置信息（元数据），包括文档的标题、脚本和样式表等。
<link> 指定当前文档与外部资源的关系。该元素最常用于链接 CSS，此外也可以被用来创建站点图标（比如“favicon”样式图标和移动设备上用以显示在主屏幕的图标）。
<meta> 表示那些不能由其它 HTML 元相关（meta-related）元素表示的元数据信息。如：<base>、<link>、<script>、<style> 或 <title>。
<style> 包含文档或者文档部分内容的样式信息，它们会被应用于包含此元素的文档。
<title> 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

 meta常见形式如

设置charset属性：此时是一个字符集声明，告诉文档使用哪种字符编码。

设置name属性：此时提供的是文档级别（document-level）的元数据，应用于整个页面。

设置content属性： 此属性包含 http-equiv 或 name 属性的值，具体取决于所使用的值。

标准元数据名称：

  • author：文档作者的名字。

  • description：一段简短而精确的、对页面内容的描述。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。

  • generator：生成此页面的软件的标识符（identifier）。

  • keywords：与页面内容相关的关键词，使用逗号分隔。

  • referrer：控制由当前文档发出的请求的 HTTP Referer 请求头。

name设置为 viewport用来设置视口大小

语义化内容分区元素

元素 描述
<address> 表示其中的 HTML 提供了某个人、某些人或某个组织（等等）的联系信息。
<article> 表示文档、页面、应用或网站中的独立结构，旨在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其它独立的内容项目。
<aside> 表示文档的一部分，其内容仅与文档的主要内容间接相关。其通常以侧边栏或标注框（call-out box）的形式出现。
<footer> 表示最近的一个父分段内容或分段的根元素的页脚。<footer> 通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<header> 表示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其它元素，比如 Logo、搜索框、作者名称和其它元素。
<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 表示六个不同的级别的章节标题，<h1> 级别最高，而 <h6> 级别最低。
<main> 呈现了文档正文的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
<nav> 表示页面的一部分，其目的是在当前文档或其它文档中提供导航链接。导航部分的常见示例是菜单、目录和索引。
<section> 表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。

 

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

元素 描述
<area> 在图片上定义一个可点击区域。图像映射（image map）允许图像上的几何区域与超链接关联。
<audio> 用于在文档中嵌入音频内容。它可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者 source 元素来进行表示：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。
<img> 将一张图像嵌入文档。
<map> 与 <area> 元素一起使用，以定义一个图像映射（可点击链接区域）。
<track> 被当作媒体元素——音频（audio）和视频（video）的子元素来使用。它允许指定时序文本轨道（或者基于时间的数据），例如自动处理字幕。轨道格式有 WebVTT 格式（.vtt 格式文件）——Web 视频文本轨格式。
<video> 用于在文档中嵌入媒体播放器，支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 audio 元素可能在用户体验上更合适。

这里的元素用于创建和处理表格数据。

元素 描述
<caption> 指定表格的标题。
<col> 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于 <colgroup> 元素内。
<colgroup> 定义表中的一组列表。
<table> 表示表格数据——即通过二维（由行和列组成）数据表表示的信息。
<tbody> 封装了一系列表格的行（<tr> 元素），代表了它们是表格（<table>）主要内容的组成部分。
<td> 定义了一个包含数据的表格单元格。它是表格模型（table model）的一部分。
<tfoot> 定义了一组表格中各列的汇总行。
<th> 定义表格内的表头单元格。这部分特征是由 scope 和 headers 属性准确定义的。
<thead> 定义了一组定义表格的列头的行。
<tr> 定义表格中的行。同一行可同时出现 <td>（数据单元格）和 <th>（列头单元格）元素。

 

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

元素 描述
<button> 一个可交互元素（可通过用户的鼠标、键盘、手指、声音指令或其他辅助技术激活）。一旦被激活，它就会执行一个动作，例如提交表单或打开对话框。
<datalist> 包含了一组 <option> 元素，这些元素表示其它表单控件可选值。
<fieldset> 用于对 web 表单中的控件和标签（<label>）进行分组。
<form> 表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
<input> 用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。取决于设备和用户代理的不同，表单可以使用各种类型的输入数据和控件。<input> 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。
<label> 表示用户界面中某个元素的说明。
<legend> 用于表示其父元素 <fieldset> 的内容标题。
<meter> 用来显示已知范围的标量值或者分数值。
<optgroup> 为 <select> 元素中的选项创建分组。
<option> 用于定义在 select、<optgroup> 或 <datalist> 元素中包含的选项。<option> 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。
<output> 网站或应用程序可以将计算或用户操作的结果注入其中的容器元素。
<progress> 用来显示一项任务的完成进度，通常情况下该元素显示为一个进度条。
<select> 表示一个提供选项菜单的控件。
<textarea> 表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

 

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

元素 描述
<details> 创建一个挂件，仅在被切换成“展开”状态时，它才会显示内含的信息。必须使用 <summary> 元素为该部件提供概要或者标签。
<dialog> 表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。
<summary> 用作 details 元素内容的摘要、标题或图例。点击 <summary> 元素会翻转父元素 <details> 的展开和关闭状态。

 

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

元素 描述
<canvas> 用来通过 canvas scripting API 或 WebGL API 绘制图形及图形动画的容器元素。
<noscript> 定义脚本未被执行时（页面的脚本类型不受支持，或当前浏览器关闭了脚本）的替代内容。
<script> 用于嵌入可执行脚本或数据。这通常用作嵌入或者引用 JavaScript 代码。<script> 元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言和 JSON。

 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布