HTML基础
HTML5新特性
重要程度：10 分
<h2>HTML5 新特性</h2>
<ul>
<li><strong>语义化标签：</strong>
<ul>
<li><header>：定义文档或节的页眉。</li>
<li><nav>：定义导航链接的部分。</li>
<li><article>：定义页面或应用程序中一个独立的流内容。</li>
<li><section>：定义文档中的节。</li>
<li><footer>：定义文档或节的页脚。</li>
</ul>
</li>
<li><strong>多媒体支持：</strong>
<ul>
<li><video>：用于嵌入视频内容。</li>
<li><audio>：用于嵌入音频内容。</li>
</ul>
</li>
<li><strong>表单增强：</strong>
<ul>
<li><input type="date">：提供日期选择器。</li>
<li><input type="range">：提供滑块输入。</li>
<li><input type="email">：提供电子邮件格式验证。</li>
</ul>
</li>
<li><strong>Canvas绘图：</strong>
<ul>
<li><canvas>：用于图形绘制。</li>
</ul>
</li>
<li><strong>本地存储：</strong>
<ul>
<li><localStorage>：在客户端存储数据。</li>
<li><sessionStorage>：在会话期间存储数据。</li>
</ul>
</li>
</ul>
<h3>例题</h3>
<h4>语义化标签</h4>
<p>使用HTML5的语义化标签重新组织以下代码:</p>
<pre>
<div class="header">Header content</div>
<div class="content">Main content</div>
<div class="footer">Footer content</div>
</pre>
<p>正确答案:</p>
<pre>
<header>Header content</header>
<main>Main content</main>
<footer>Footer content</footer>
</pre>
<h4>多媒体支持</h4>
<p>在网页中嵌入一段视频，要求支持主流浏览器。</p>
<pre>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</pre>
<h4>表单增强</h4>
<p>创建一个表单，包含一个日期选择器和一个电子邮件输入框。</p>
<pre>
<form action="/submit" method="post">
<label for="date">Select a date:</label>
<input type="date" id="date" name="date">
<br>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<br>
<button type="submit">Submit</button>
</form>
</pre>
<h4>Canvas绘图</h4>
<p>使用Canvas绘制一个简单的矩形。</p>
<pre>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
</pre>
<h4>本地存储</h4>
<p>使用localStorage存储用户信息，并在控制台输出。</p>
<pre>
<script>
localStorage.setItem("username", "JohnDoe");
console.log(localStorage.getItem("username"));
</script>
</pre>