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