HTML5全部元素详解：一个都不能少
2015-04-20 23:51
288 查看
The root element
<html>
<html> 元素是 HTML 文档的根元素。建议为 <html> 元素指定 lang 属性，便于屏幕阅读器识别。<!DOCTYPE html> <html lang="en"> <head> </head> <body> </body> </html>
Document metadata
<head>
<head> 元素表示文档元数据的集合，是 <html> 元素的第一个子元素。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
<title>
<title> 元素代表文档的名字或标题。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name> <title>这是文档的标题</title> </head> <body> </body> </html>
<base>
<base> 元素为文档中的所有链接指定基地址。如果URL中含有协议名或"//"则会忽略 <base> 指定的基地址。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <base href="http://www.baidu.com/img/"> </head> <body> <!-- http://www.baidu.com/img/a.jpg --> <img src="a.jpg"> <!-- 如果带协议头，则忽略 base 指定的基URL --> <!-- http://www.baidu.com/img/b.jpg --> <img src="http://www.baidu.com/img/b.jpg"> <!-- 省略协议头但保留"//"，仍然会忽略 base 指定的基URL --> <!-- 这也是谷歌前端编码规范推荐使用的一种方式 --> <!-- http://www.baidu.com/img/c.jpg --> <img src="//www.baidu.com/img/c.jpg"> </body> </html>
<link>
<link> 元素为文档指定外部样式表。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html>
<meta>
<meta> 元素提供文档的元信息，如文档编码、文档作者、文档描述等。<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 常用的几个 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> </head> <body> </body> </html>
<style>
<link> 是引入外部样式文件，而 <style> 元素则是在文档中写样式。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
</body>
</html>Sections
<body>
浏览器窗口中显示的所有内容都在 <body> 元素中，是 <html> 元素的第二个子元素。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>浏览器窗口中显示的所有内容都在这里</h1> </body> </html>
<article>
代表独立的、完整的一篇”文章“，如一个贴子、一篇文章、一条回复。可以包含 <header> 、 <footer> 、 <section> 等元素。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 一篇文章 --> <article> <header> <h1>The Very First Rule of Life</h1> <p><time datetime="2009-10-09">3 days ago</time></p> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <section> <h1>Comments</h1> <!-- 一条评论 --> <article> <footer> <p>Posted by: <span>George Washington</span></p> <p><time datetime="2009-10-10">15 minutes ago</time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> <!-- 一条评论 --> <article> <footer> <p>Posted by: <span>George Hammond</span></p> <p><time datetime="2009-10-10">5 minutes ago</time></p> </footer> <p>Hey, you have the same first name as me.</p> </article> </section> </article> </body> </html>
<section>
代表页面或某一部分的一节或一个部分，每个 <section> 一般都有一个主题思想，但未必一定要有 <h> 元素。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h2>Apples</h2> <p>Tasty, delicious fruit!</p> </header> <p>The apple is the pomaceous fruit of the apple tree.</p> <!-- 此处表示文章的一个小主题 --> <section> <h3>Red Delicious</h3> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h3>Granny Smith</h3> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article> </body> </html>
<nav>
任何具有导航性质的链接组都可以用 <nav> 元素，不管是主导航、还是侧边栏中的导航、还是面包屑导航、还是页面内的锚点导航。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <header> <nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Index of all articles</a></li> <li><a href="today.html">Things sheeple need to wake up for today</a></li> <li><a href="successes.html">Sheeple we have managed to wake</a></li> </ul> </nav> </header> <main> <header> <h1>Demos in Exampland</h1> <p>Written by A. N. Other.</p> </header> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> ...more... </ul> </nav> <div> <section id="public"> <h1>Public demonstrations</h1> <p>...more...</p> </section> <section id="destroy"> <h1>Demolitions</h1> <p>...more...</p> </section> ...more... </div> <footer> </footer> </main> </body> </html>
<aside>
<aside> 元素用于突出的引用、广告、侧边栏。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> </head> <body> ... <p>He later joined a large company, continuing on the same work. <q>I love my job. People ask me what I do for fun ...</q></p> <!-- 突出的引用 --> <aside> <q> People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. </q> </aside> <p>Of course his work — or should that be hobby? — isn't his only passion. He also enjoys other pleasures.</p> ... </body> </html>
<h1> to <h6>
<h1>~<h6> 元素表示某一部分的标题。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>H1</h1> <h1>H2</h1> <h1>H3</h1> <h1>H4</h1> <h1>H5</h1> <h1>H6</h1> </body> </html>
<header>
<header> 元素表示文档的头部，或 <article> 的头部，或 <section> 的头部，或 <aside> 的头部。示例代码可参考上面几部分。
<footer>
与 <header> 相对，用法亦相同。<address>
<address> 代表联系信息，不仅仅是”地址“。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <footer> <address> For more details, contact <a href="mailto:js@example.com">John Smith</a>. </address> <p><small>© copyright 2038 Example Corp.</small></p> </footer> </body> </html>
Grouping content
<p>
<p> 元素代表一个段落。<hr>
<hr> 元素代表一条水平分隔线。<pre>
<pre> 元素用于定义预格式化的文本，被包围在 <pre> 元素中的文本通常会保留空格和换行符，常用来表示程序的源代码。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<pre>
<h1>hello world</h1>
echo "hello world";
print("hello world")
</pre>
</body>
</html><blockquote>
<blockquote> 元素用于定义引用块。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 下面是引用内容 --> <blockquote> <p>Hello World</p> </blockquote> </body> </html>
<ol>
<ol> 元素表示有序列表。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ol> <li>hello</li> <li>world</li> </ol> </body> </html>
<ul>
<ul> 元素表示无序列表。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>hello</li> <li>world</li> </ul> </body> </html>
<li>
<li> 元素表示有序列表 <ol> 和 无序列表 <ul> 的一项。<dl>
<dt>
<dd>
<dl> 元素、 <dt> 元素、 <dd> 元素表示自定义列表。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <dl> <dt>PHP</dt> <dd>这是一个神奇的语言 ... ...</dd> <dt>Java</dt> <dd>以服务器语言来说，与PHP ... ...</dd> </dl> </body> </html>
<figure>
<figcaption>
<figure> 元素表示独立的流内容（图像、图表、照片、代码等等）， <figcaption> 元素给 <figure> 元素添加标题。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <figure> <figcaption>Ubuntu诞生那一年</figcaption> <img src="ubuntu.jpg" width="350" height="234" /> </figure> </body> </html>
<div>
这是一个神奇的块标签，无任何语义。尽量使用 HTML5 新语义标签代替部分 <div> 元素。<main>
<main> 元素代表文档的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <main> <h1>编程语言</h1> <p>Java、C#、Python、PHP、JavaScript</p> <article> <h1>Java</h1> <p>Hello Sun</p> </article> <article> <h1>C#</h1> <p>Hello Microsoft</p> </article> <article> <h1>PHP</h1> <p>Hello Zend</p> </article> ... </main> </body> </html>
Text-level semantics
<a>
<a> 元素用于定义超链接。<em>
<em> 元素把文本定义为强调的内容。<strong>
<strong> 元素把文本定义为语气更强的强调的内容。<small>
<small> 元素呈现小号字体效果。<s>
<s> 元素定义加删除线的文本。<cite>
<cite> 元素通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。<q>
<q> 元素定义短的引用。<dfn>
<dfn> 元素定义一个定义项目。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn> is a device that allows off-world teams to open the iris.</p> </body> </html>
<abbr>
<abbr> 元素表示简称或缩写。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>The <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> started working on HTML5 in 2004.</p> </body> </html>
The data element
这里的 data 是指 data-* 属性，这不是一个属性吗？但却被写在元素一栏里，着实可疑...待日后明白了再说...<time>
<time> 元素能够以机器可读的方式对日期和时间进行编码。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>上班时间 <time>8:30</time> Let's Go</p> </body> </html>
<code>
<code> 元素用于表示计算机源代码或者其他机器可以阅读的文本内容。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>又是<code>println("hello world")</code></p>
</body>
</html><var>
<var> 元素用于定义变量。可以将此标签与 <pre> 及 <code> 标签配合使用。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>Then he turned to the blackboard and picked up the chalk. After a few moment's thought, he wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher looked pleased.</p> </body> </html>
<samp>
<samp> 元素用于定义样本文本。<samp> 元素表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>The computer said <samp>Too much cheese in tray two</samp> but I didn't know what that meant.</p> </body> </html>
<kbd>
<kbd> 元素定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p> </body> </html>
<sub> <sup>
<sub> 元素定义下标文本，<sup> 元素定义上标文本。<i>
<i> 元素定义斜体。<b>
<b> 元素定义粗体文件。<u>
<u> 元素为文本添加下划线。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>To make <u>George</u> eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p> </body> </html>
<mark>
<mark> 元素突出显示文本。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>Do not forget to buy <mark>milk</mark> today.</p> </body> </html>
<ruby> <rb> <rtc> <rt> <rp>
一组让人摸不着头脑的元素，真是无语...<bdi> 和 <bdo>
<bdi> 元素允许您设置一段文本，使其脱离其父元素的文本方向设置。<bdo> 元素可覆盖默认的文本方向。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>Username <bdi dir="ltr">Steve</bdi>: 78 points</p> <p>Username <bdi dir="rtl">Steve</bdi>: 78 points</p> <p>Username <bdo dir="ltr">Steve</bdo>: 78 points</p> <p>Username <bdo dir="rtl">Steve</bdo>: 78 points</p> </body> </html>
<span>
<span> 元素被用来组合文档中的行内元素。<br>
<br> 元素表示换行。<wbr>
Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。下面这段代码，给 <p> 的字体设置的足够大，然后缩小浏览器窗口，就会看到 <wbr> 元素的效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>www.simply<wbr>orange<wbr>juice.com</p> </body> </html>
Edits
<ins>
<ins> 元素定义已经被插入文档中的文本。<del>
<del> 元素定义文档中已被删除的文本。<ins> 与 <del> 常配合使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>I love <del>java</del><ins>javascript</ins></p> </body> </html>
Embedded content
<img>
<img> 元素定义图片。<iframe>
<iframe> 元素会创建包含另外一个文档的内联框架（即行内框架）。<embed>
<embed> 元素定义嵌入的内容。<object>
<param>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <figure> <object type="application/x-java-applet"> <param name="code" value="MyJavaClass"> <p>You do not have Java available, or it is disabled.</p> </object> <figcaption>My Java Clock</figcaption> </figure> </body> </html>
<video>
<audio>
<source>
<video> 元素定义视频。<audio> 元素定义音频。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html>
<track>
<track> 元素为诸如 video 元素之类的媒介规定外部文本轨道。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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> </body> </html>
<map>
<area>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets"> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus"> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury"> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun"> </map> </body> </html>
Links
<a>
<area>
Tabular data
<table>
<caption>
<colgroup>
<col>
<tbody>
<thead>
<tfoot>
<tr>
<td>
<th>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {width: 100%;}
</style>
</head>
<body>
<table>
<thead>
<colgroup span="2" align="left">
<col>
<col>
</colgroup>
<col align="right">
<tr>
<th>hello</th>
<th>hello</th>
<th>hello</th>
</tr>
</thead>
<tfoot>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tbody>
</table>
</body>
</html>Forms
<form>
<label>
<input>
<button>
<select>
<datalist>
<optgroup>
<option>
<textarea>
<keygen>
<output>
<progress>
<meter>
<fieldset>
<legend>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {width: 100%;}
</style>
</head>
<body>
<form>
<label>姓名</label>
<input type="text">
<keygen name="security">
<button>按钮</button>
<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<textarea rows="3" cols="20"><textarea>
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
<progress value="22" max="100"></progress>
<meter value="3" min="0" max="10">十分之三</meter>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
</body>
</html>Scripting
<script>
<script> 元素用于定义客户端脚本。<noscript>
<noscript> 元素用来定义在脚本未被执行时的替代内容。<template>
The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {width: 100%;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Sex</th>
<th>Legs<th>
</tr>
</thead>
<tbody>
<template id="row">
<tr><td></td><td></td><td></td><td></td></tr>
</template>
</tbody>
</table>
<script>
var data = [
{ name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
{ name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
];
var template = document.querySelector('#row');
for (var i = 0; i < data.length; i += 1) {
var cat = data[i];
var clone = template.content.cloneNode(true);
var cells = clone.querySelectorAll('td');
cells[0].textContent = cat.name;
cells[1].textContent = cat.color;
cells[2].textContent = cat.sex;
cells[3].textContent = cat.legs;
template.parentNode.appendChild(clone);
}
</script>
</body>
</html><canvas>
<canvas> 元素定义图形。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {width: 100%;}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 详解HTML5中的<aside>元素与<article>元素
- 给定一个集合A=[0,1,3,8](该集合中的元素都是在0，9之间的数字，但未必全部包含)， 指定任意一个正整数K，请用A中的元素组成一个大于K的最小正整数。
- 函数调用输出一个一维数组中的最大值、最小值、全部元素的和，并将此数组中的值按逆序重新存放。
- HTML5中video元素方法详解
- HTML5 video audio 元素详解
- 将一个数组中的奇元素全部移到数组的前半部分，即将奇偶元素分开
- 输出一个一维数组中的最大值、最小值、全部元素的和，并将此数组中的值按逆序重新存放。例如原先a[0]~a[4]存放2 8 7 5 3，逆序存放后 a[0]~a[4]变为存放3 5 7 8 2
- 将一个数组中的奇元素全部移到数组的前半部分，即将奇偶元素分开
- 1.7 将一个MxN矩阵所有为0的元素所在行和列全部置0
- HTML5中video元素事件详解
- 第十四周项目一数组大折腾（4）创建一个长度为16的整形数组a并初始化，删除数组中所有能被3整除的元素（数组中实际有效使用的元素将不足16），输出删除后数组中的全部元素
- 一个在线预览所有原生 HTML5 表单元素效果的网站
- 分享一个在线的HTML5元素在线测验 : HTML5 Element Quiz
- html5表单及新增的改良元素详解
- 【HTML5开发系列】meta元素详解
- 打造支持apk下载和html5缓存的 IIS（配合一个超简单的android APP使用）详解
- HTML5中canvas知识点详解1-用HTML5绘制一个简单的矩形
- 谷歌笔试题--给定一个集合A=[0,1,3,8](该集合中的元素都是在0，9之间的数字，但未必全部包含)， 指定任意一个正整数K，请用A中的元素组成一个大于K的最小正整数。
- Html5元素及基本语法详解
- 发现一个全部用html5写的网站，里面还有很多知识