Html5出现之前的问题
Web浏览器之间兼容性低
文档结构不够明确
Web应用程序的功能受限
语法的改变
拓展名html不变
<octype html>声明
指定字符编码 meta charset=”UTF-8”
可省略标记的元素
具有boolean值的属性
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
前三个为true 最后一个是false
省略引号
内嵌页面
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
<meta charset="UTF-8" />
</head>
<body>
<form>苹果
<input type="checkbox" checked="checked" /> 栗子
<input type="checkbox" checked="checked" /> 香蕉
<input type="checkbox" /> 葡萄
<input type="checkbox" checked="checked" /></form>
<article>
<header>
<h1>新特性</h1>
<p>应用程序的功能受限</p>
</header>
<article>
<header>作者</header>
<p>评论</p>
<footer>time</footer>
</article>
<footer>这是底部</footer>
</article>
<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="#" width="600" height="400" />
</object>
</article>
</body>
</html>
Section元素
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="UTF-8" />
<title>section元素</title>
</head>
<body>
<section>
<h1>苹果</h1>
<p>这是一个苹果,点发货很快发飞</p>
</section>
<article>
<h1>苹果</h1>
<p>苹果 发生过好久 富含维生素,</p>
<section>
<h2>苹果</h2>
<p>苹果 发生过好久 富含维生素,</p>
</section>
<section>
<h2>苹果</h2>
<p>苹果 发生过好久 富含维生素,</p>
</section>
</article>
<section>
<article>
<h2>苹果</h2>
<p>苹果 发生过好久 富含维生素,</p>
</article>
<article>
<h2>苹果</h2>
<p>苹果 发生过好久 富含维生素,</p>
</article>
<article>
<h2>苹果</h2>
<p>苹果 发生过好久 富含维生素,</p>
</article>
</section>
<!--section元素强调分段或分块,articl元素强调独立性-->
</body>
</html>
Nav元素
<html>
<head>
<meta charset="UTF-8" />
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>nav元素</title>
</head>
<body>
<nav>
<ul>
<li>
<a href="#">主页</a>
</li>
<li style="list-style: none; display: inline">
<ul>
<li>
<a href="#">开发文档</a>
</li>
</ul>
</li>
</ul>
</nav>
<article>
<header>
<h1>html和css3的历史</h1>
<nav>
<ul>
<li>
<a href="#">html5的历史</a>
</li>
<li>
<a href="#">css3的历史</a>
</li>
</ul>
</nav>
</header>
<section>
<h1>html5的历史</h1>
<p>..................</p>
</section>
<section>
<h1>css3的历史</h1>
<p>..................</p>
</section>
<footer>
<a href="#">删除</a>
<a href="#">修改</a></footer>
</article>
<footer>
<p>
<small>版权声明:</small>
</p>
</footer>
</body>
</html>
aside
<html>
<head>
<meta charset="utf-8">
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>aside元素</title>
</head>
<body>
<header>
<h1>js入门</h1>
</header>
<article>
<h1>语法</h1>
<p>文章的正文</p>
<aside>
<h1>名词解释</h1>
<p>语法:这是一个对语言来说很重要的内容体</p>
</aside>
</article>
<aside>
<nav>
<h2>评论</h2>
<nav>
<ul>
<li>
<a href="#">2016-9-26</a>
</li>
<li>
<a href="#">大牛:要好好学习</a>
</li>
</ul>
</nav>
</nav>
</aside>
</body>
</html>
time属性
<html>
<head>
<meta charset="UTF-8" />
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>time元素</title>
</head>
<body>
<time datetime="2016-9-26">2016-9-26</time>
<time datetime="2016-9-26T10:00">2016-9-26</time>
<time datetime="2016-9-26T10:00Z">2016-9-26</time>
<time datetime="2016-9-26T10:00Z+9:00">2016-9-26</time></body>
</html>
pubdate
<html>
<head>
<meta charset="UTF-8">
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>pubdate属性</title>
</head>
<body><article>
<header><h1>苹果</h1>
<p>发布时期<time datetime="2016-9-26" pubdate>2016-9-26</time></p><!--指定具体的发布时间-->
<p>发布会时期<time datetime="2016-9-26">2016-9-26</time></p></header>
</article></body>
</html>