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