<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>