HTML5 标签简介（五）

来源：互联网发布：输电线路三维设计软件编辑：程序博客网时间：2024/04/28 12:19

本文的主要内容参考于w3shool网站。本文是自己对 HTML5 标签学习的一个简单梳理。如果你发现了文中的错误，请通过评论及时告诉我，避免对别人产生误导；如果你发现有不明白的地方，也可以通过评论告诉我，大家可以相互交流；如果你想转载我的博文，请在你的博文开头或末尾处注明，并附上该博文的链接地址，也请通过评论及时告诉我你转载后的链接地址，以便我能看到其他人在你转载处的评论。

69<ruby><rp><rt> 70<samp> 71<script> 72<small> 73<source> 74<span> 75<strong> 76<style> 77<sub><sup> 78<summary> 79<textarea> 80<time> 81<title> 82<track> 83<var> 84<video> 85<wbr>

<ruby><rp><rt> 其中 <ruby> 标签定义 ruby 注释（中文注音或字符）。在东亚使用，显示的是东亚字符的发音。<rt> 标签定义字符（中文注音或字符）的解释或发音。<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 ruby 元素时显示的内容。例：
```
<!DOCTYPE HTML><html><body><ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby></body></html>
```
支持 ruby 元素的浏览器不会显示 rp 元素的内容。它们支持 HTML5 的全局属性和事件属性。
<samp> 定义样本文本。支持 HTML5 的全局属性和事件属性。
<script> 标签用于定义客户端脚本，比如 JavaScript 和 VBscript。script 元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。JavaScript 通常用于图像操作、表单验证以及动态内容更改。例：
```
<!DOCTYPE HTML><html><body><script type="text/javascript">document.write("Hello World!")</script></body></html>
```
如果使用 "src" 属性，则 script 元素必须是空的。有多种执行外部脚本的方法：
- 如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
- 如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
- 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
它的属性：asyncasync规定异步执行脚本（仅适用于外部脚本）。详见 async 属性。deferdefer规定当页面已完成解析后，执行脚本（仅适用于外部脚本）。详见 defer 属性。typeMIME_type规定脚本的 MIME 类型。详见 type 属性。charsetcharacter_set规定在脚本中使用的字符编码（仅适用于外部脚本）。详见 charset 属性。srcURL规定外部脚本的 URL。支持 HTML5 的全局属性和事件属性。
<small> 标签将旁注 (side comments) 呈现为小型文本。免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求。对于由 em 元素强调过的或由 strong 元素标记为重要的文本，small 元素不会取消对文本的强调，也不会降低这些文本的重要性。例：
```
<!DOCTYPE HTML><html><body><dl> <dt>单人间</dt> <dd>399 元 <small><em>含早餐</em>，不含税</small></dd> <dt>双人间</dt> <dd>599 元 <small><em>含早餐</em>，不含税</small></dd></dl></body></html>
```
支持 HTML5 的全局属性和事件属性。
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。它的属性：mediamedia query定义媒介资源的类型，供浏览器决定是否下载。srcurl媒介的 URL。typenumeric value定义播放器在音频流中的什么位置开始播放。默认，音频从开头播放。支持 HTML5 的全局属性和事件属性。
<span> 标签用于对文档中的行内元素进行组合。请使用 span 元素对行内元素进行分组，以便通过样式对它们进行格式化。例：
```
<!DOCTYPE html><html><body><p>This is a paragraph <span style="color:#00ff00;">This is a paragraph</span>This is a paragraph</p></body></html>
```
支持 HTML5 的全局属性和事件属性。
<strong> 定义重要的文本。支持 HTML5 的全局属性和事件属性。
<style> 标签定义 HTML 文档的样式信息。在 style 元素中，您规定的是 HTML 元素如何在浏览器中呈现。例：
```
<!DOCTYPE HTML><html><head><style type="text/css">h1 {color:red}p {color:blue}</style></head><body><h1>Header-1</h1><p>This is a paragraph.</p></body></html>
```
这在 CSS 中会详细讲解。如需链接外部样式表，请使用 <link> 标签。它的属性：typetext/css定义内容类型。media
- screen
- tty
- tv
- projection
- handheld
- print
- braille
- aural
- all
样式信息的目标媒介。scopedscoped如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。如果未定义 scoped 属性，那么 <style> 元素必须位于 <head> 部分中。支持 HTML5 的全局属性和事件属性。
<sub><sup> 其中 <sub> 标签可定义下标文本。<sup> 可定义上标文本。支持 HTML5 的全局属性和事件属性。
<summary> 标签包含在 details 元素中的标题，details 元素用于描述有关文档或文档片段的详细信息。例：
```
<!DOCTYPE HTML><html><body><details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details></body></html>
```
请与 <details> 标签一起使用。标题是可见的，当用户点击标题时会显示出详细信息。summary 元素应该是 details 元素的第一个子元素。支持 HTML5 的全局属性和事件属性。
<textarea> 定义一个文本区域 (text-area) （一个多行的文本输入区域）。用户可在此文本区域中写文本。在一个文本区中，您可输入无限数量的文本。文本区中的默认字体是等宽字体 (fixed pitch)。例：
```
<!DOCTYPE html><html><body><textarea rows="3" cols="30">这是文本输入区域 ... </textarea></body></html>
```
它的属性：autofocus
- true
- false
在页面加载时，使这个 textarea 获得焦点。colsnumber规定文本区内可见的列数。disabled
- true
- false
当此文本区首次加载时禁用此文本区。form
- true
- false
定义该 textarea 所属的一个或多个表单。inputmodeinputmode定义该 textarea 所期望的输入类型。namename_of_textarea为此文本区规定的一个名称。readonly
- true
- false
指示用户无法修改文本区内的内容。required
- true
- false
定义为了提交该表单，该 textarea 的值是否是必需的。rowsnumber规定文本区内可见的行数。支持 HTML5 的全局属性和事件属性。
<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。例：
```
<!DOCTYPE HTML><html><body><p>我们在每天早上 <time>9:00</time> 开始营业。</p><p>我在 <time datetime="2010-02-14">情人节</time> 有个约会。</p></body></html>
```
目前主流的浏览器都不支持 <time> 标签。它的属性：datetimedatetime规定日期 / 时间。否则，由元素的内容给定日期 / 时间。详见 datetime 属性。pubdatepubdate指示 <time> 元素中的日期 / 时间是文档（或 <article> 元素）的发布日期。详见 pubdate 属性。支持 HTML5 的全局属性和事件属性。
<title> 标签定义文档的标题。title 元素在所有 HTML 文档中是必需的。title 元素：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时的标题
- 显示在搜索引擎结果中的页面标题
例：
```
<!DOCTYPE html><html><head><title>HTML5 Tag Reference</title></head><body><a href="/example/html5/html5_title.html" target="_blank">请点击这里，查看标题是如何在浏览器中显示的。</a></body></html>
```
一个文档中不能有一个以上的 <title> 元素。支持 HTML5 全局属性。
<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。下例为带有播放字幕的视频代码片段：
```
<video width="320" height="240" controls="controls">  <source src="forrest_gump.mp4" type="video/mp4" />  <source src="forrest_gump.ogg" type="video/ogg" />  <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English"></video>
```
目前所有主流浏览器都不支持 <track> 标签。它的属性：defaultdefault规定该轨道是默认的，假如没有选择任何轨道。详见 default 属性。kind
- captions
- chapters
- descriptions
- metadata
- subtitles
表示轨道属于什么文本类型。详见 kind 属性。labellabel轨道的标签或标题。详见 label 属性。srcurl轨道的 URL。srclanglanguage_code轨道的语言，若 kind 属性值是 "subtitles"，则该属性必需的。详见 srclang 属性。支持 HTML5 的全局属性和事件属性。
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。支持 HTML5 的全局属性和事件属性。
<video> 标签定义视频，比如电影片段或其他视频流。例：
```
<!DOCTYPE HTML><html><body><video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls">your browser does not support the video tag</video></body></html>
```
它的属性：autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。支持 HTML5 的全局属性和事件属性。
<wbr> Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机）。例：
```
<!DOCTYPE html><html><body><p>如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。</p></body></html>
```
IE 不支持该标签。该标签支持 HTML5 的全局属性和事件属性。