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>.< ...
随机推荐
- 微信安卓版下载 Android微信各版本列表
前面ytkah弄了一个iso微信各版本列表,现在就来整一个微信 for Android各版本列表,方便大伙下载.每个版本都放出一些新的功能或修复相关错误,详情可以点击下面的版本链接进行查看.资源收集于 ...
- Linux C 中 fork() 函数详解
一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork() 函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同 ...
- r-cnn学习（八）：minibatch
这段代码包括由输入图片随机生成相应的RoIs,并生成相应的blobs,由roidb得到相应的 minibatch.其代码如下. # ---------------------------------- ...
- [Sass]命令编译
[Sass]命令编译 命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass.这种编译方式是最直接也是最简单的一种方式.因为只需要在你的命令终端输入: 单文件编译: sass & ...
- js计算地球两个经纬度之间的距离
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用poi读取xlsx中的数据
excel中的内容见下图: 详细代码: package dataprovider; import java.io.FileInputStream; import java.io.InputStream ...
- haproxy 实现多域名证书https
[root@ha02 keys]# openssl genrsa - Generating RSA bit long modulus ....+++ ......................... ...
- 【Java EE 学习 32 上】【JQuery】【选择器】
一.JQuery简介 1.JQuery是JavaScript库,封装了很多预定义对象和实用函数. 2.JQury的优势: (1)简洁,其宗旨就是写更少的代码做更多的事. (2)文档声明非常全面:htt ...
- fscanf使用
函数名: fscanf 简述:C语言中基本的文件操作 功 能: 从一个流中执行格式化输入,fscanf遇到空格和换行时结束,注意空格时也结束.这与fgets有区别,fgets遇到空格不结束. 简单的说 ...
- ibatis.net MVC 单元测试 错误解决方法
Q1:Unable to load file via resource "SqlMap.config" as resource.Cause : 未能找到文件:"...Te ...