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

省略引号


 Html5_3c

Html5_html_02

内嵌页面

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


Html5_html5_03


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>


Html5_html_04


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>



 Html5_html_05


Html5_html5_06

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>


Html5_html_07

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>