本周主要学习html 5的基础内容，看完了w3school上的基础内容和慕课上的h5标签的视屏。
通过学习，h5有以下几个新特性：
1、新增video 和 audio 元素，可以播放音频和视频；
2、新增特殊元素内容，如article、footer、header、nav、section、figure等；
3、新的表单控件，比如 calendar、date、time等。
4、对本地离线存储的更好的支持
以下是将学习到的标签写的集合：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<h1>AAAAA</h1>
<nav>
<ul>
<li><a href="html5.html">aaa</a></li>
<li><a href="html5.html">sss</a></li>
<li><a href="html5.html">ddd</a></li>
<li><a href="html5.html">eee</a></li>
</ul>
</nav>
</header>
<section id="idea">
<div>
<h2>AAAA</h2>
<h3>mark</h3>
<p>dsfgkdsahfidsauyfhiwaueoy <mark>guanzhu</mark> frisudhfoiudsfg</p>
</div>
</section>
<section id="activity">
<div class="up">
<div id="calendar" class="left_part">
<h3>进度条</h3>
<progress max="100" value="85"></progress>
</div>
</div>
<div id="info" class="right_part"></div>
<div id="bullentin">
<h3>time</h3>
<p>
<time datetime="10:35">12:00</time>
</p>
</div>
</section>
<section id="post">
<h3>Canvas画布</h3>
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
<script>
var c=document.getElementById("mycanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
</canvas>
</section>
<footer>
<div>
<h3>details</h3>
<details open>
<summary>LISTlistlistlistlist</summary>
<ul>
<li>aaaaaaaa</li>
<li>dddddddd</li>
<li>ssssssss</li>
<li>ffffffff</li>
</ul>
</details>
</div>
<div>
<h3>output</h3>
<form οninput="x.value=parseInt(a.value) + parseInt(b.value)">
0
<input type="range" id="a" value="50">
100 +
<input type="number" id="b" value="50">
=
<output name="x" for(a b)>"150"</output>
</form>
</div>
</footer>
</body>
</html>
总的来说，h5新增的某些标签实现了很多新的功能如details，比JavaScript实现相同的功能要简单很多。关于其他的一些表单元素并没有看完，会在接下来的时间完成。
3349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
