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>.< ...
随机推荐
- PHP二维数组排序(list_order)
/** * 对二维数组进行排序 * 模拟 数据表记录按字段排序 * * <code> * @list_order($list, $get['orderKey'], $get['orderT ...
- PHP中如何在数组中随机抽取n个数据的值 - array_rand()？
PHP中如何在数组中随机抽取n个数据的值? 最佳答案 array_rand() 在你想从数组中取出一个或多个随机的单元时相当有用.它接受 input 作为输入数组和一个可选的参数 num_req,指明 ...
- Spring面试题
69道Spring面试题和答案 原文地址 译者:深海(1422207401@qq.com) 校对:方腾飞 目录 Spring 概述 依赖注入 Spring beans Spring注解 Spr ...
- Linux下c开发 之 线程通信（转）
Linux下c开发 之 线程通信(转) 1.Linux“线程” 进程与线程之间是有区别的,不过Linux内核只提供了轻量进程的支持,未实现线程模型.Linux是一种“多进程单线程”的操作系统.Linu ...
- JS正则表达式元字符
https://segmentfault.com/a/1190000002471140
- MineCraft note
客户端:http://pan.baidu.com/s/1hqgS8sshttp://pan.baidu.com/s/1mgmkduC 材质包:R3D小地图MODCraftGuide mod 内置合成表 ...
- PHP 图片处理工具类（添加水印与生成缩略图）
=================ImageTool.class.php================= <?php class ImageTool { private $imagePath; ...
- shell 脚本之获取命令输出字符串以及函数参数传递
在ubuntu 14.04之后,所有的U盘挂载也分用户之分,最近很多操作也和U盘有关,所以就研究了一上午shell脚本函数以及字符串操作的方法. 字符串操作: 获取他的命令输出比较简单,打个简单的比方 ...
- DNS解析过程和域名收敛、域名发散、SPDY应用
前段时间项目要做域名收敛,糊里糊涂的完成了,好多原理不清晰,现在整理搜集下知识点. 域名收敛的目的是什么?简单来说就是域名解析慢.那为什么解析慢?且听下文慢慢道来. 什么是DNS? DNS( Doma ...
- orm 语法 数据库连接、建表、增删改查、回滚、单键关联 、多键关联、三表关联
1.数据库连接, #!usr/bin/env/python # -*- coding:utf-8 -*- # from wangteng import sqlalchemy from sqlalche ...