HTML5分节元素和语义元素
<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>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body> </body>
</html>
<article>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 下面是引用内容 -->
<blockquote>
<p>Hello World</p>
</blockquote>
</body>
</html>
<figure>
<figcaption>
<!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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>又是<code>println("hello world")</code></p>
</body>
</html>
<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>
<!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>
<!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分节元素和语义元素的更多相关文章
- HTML5 语义元素、迁移、样式指南和代码约定
语义元素是拥有语义的元素. 什么是语义元素? 语义元素清楚地向浏览器和开发者描述其意义. 非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息. 语义元 ...
- HTML5: HTML5 语义元素
ylbtech-HTML5: HTML5 语义元素 1.返回顶部 1. HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发 ...
- 如何让老式浏览器支持html5新增的语义元素
html5新增加了一些语义元素,如header, footer, nav, aritcle, aside,等等. 然而,有些老款浏览器无法识别这些元素,会把它们当成 inline 元素对待,这会导致一 ...
- html5权威指南：组织内容、文档分节
HTML5新增及删除标签:http://www.cnblogs.com/starof/archive/2015/06/23/4581850.html 第九章:组织内容 ...
- 努力学习 HTML5 （4）—— 浏览器对语义元素的支持情况
经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示. 毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> ...
- HTML5 语义元素
返回目录 http://hovertree.com/h/bjaf/html5zixueji.htm 一个语义元素能够清楚的描述其意义给浏览器和开发者.无语义 元素实例: <div> 和 & ...
- HTML5语义元素总结
HTML5语义元素 语义=意义 语义元素=元素的意义 什么事语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例:div.span.无需考虑内容. 语义 元素实例:fo ...
- HTML5学习笔记（四）语义元素
语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <tab ...
- HTML5 语义元素(一)页面结构
本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...
随机推荐
- SQLite的时候判断语句是否纯在：出现RuntimeException
写SQLite的时候判断语句是否纯在: public boolean exist(long id) { String filter = FRIEND_KEY_ID + "=" + ...
- width的数值为百分比
对于width的数值为百分比的时候,表示该元素的长度是相对于父容器来算的. 对于padding-right和padding-left比较好理解也是相对于父容器来算的,但容易出错的是padding-to ...
- redis使用简介
1.redis 支持"生产者与消费者模式"."订阅模式" 2.实时数据, 用数据类型.时间戳.数据内容,以二进制形式存取 3.查询时间.查询间隔时间.查询更新时 ...
- sublime 编译运行C程序
{ "cmd": ["gcc", "${file}", "-o","${file_path}/${file_b ...
- 微信支付 发布后显示 System:access_denied
微信支付发布后显示 System:access_denied (android)或 System:not_allow(IOS) 我们项目用的是.NET MVC3 授权目录是:http://mynetd ...
- BMP文件格式
- getRealPath("/")弃用
用request.getSession().getServletContext().getRealPath("/");替换getRealPath("/"):
- php中并发读写文件冲突的解决方案
在这里提供4种高并发读写文件的方案,各有优点,可以根据自己的情况解决php并发读写文件冲突的问题. 对于日IP不高或者说并发数不是很大的应用,一般不用考虑这些!用一般的文件操作方法完全没有问题.但如果 ...
- 用命令行来安装mac应用
今天看了下唐巧的博客,发现了这样一种宝贝呀,哈哈,分享一下 命令行工具,brew cask是一个用命令行管理Mac下应用的工具,它是基于homebrew的一个增强工具. brew cask insta ...
- Python字符串倒序-7. Reverse Integer
今天做了下LeetCode上面字符串倒序的题目,突然想Python中字符串倒序都有哪些方法,于是网上查了下,居然有这么多种方法: 个人觉得,第二种方法是最容易想到的,因为List中的reverse方法 ...