第三天课程（网页设计标签）

常用的H5标签

<header></header> 表示文档的头部内容

例子：     <header>

<h1>这里是头部内容</h1>

<p>欢迎大家</p>

</header>

<nav></nav>表示导航链接部分

<footer></footer> 表示文档的底部内容

<section> 标签定义文档中的节（区段）。比如章节、页眉、页脚或文档中的其他部分。

<article></article> 标签规定独立的自包含内容。

<article> 元素的潜在来源：

论坛帖子

报纸文章

博客条目

用户评论

<aside> 标签定义其所处内容之外的内容。

aside 的内容应该与附近的内容相关,，可用作文章的侧栏。

<details></details>文档的细节

一般与<summary>（详情）标签结合使用

例子：     <details>

<summary>Copyright 2011.</summary>

<p>All pages and graphics on this web site are the property ofW3School.</p>

</details>

<mark></mark> 标记文本

例子：<p>Donot forget to buy <mark>milk</mark> today.</p>

<meter></meter> 度量给定范围内的数据

例子：<metervalue="3" min="0" max="10">十分之三</meter>

<meter value="0.6">60%</meter>

<progress></progress>进度条

例子：<progress value="22"max="100"></progress>

 

表单里用到的标签

<datalist></datalist> 下拉列表

例子：     <input list="cars" />

<datalist id="cars">

                            <optionvalue="BMW">

                            <optionvalue="Ford">

                            <optionvalue="Volvo">

</datalist>

 

<audio></audio> 声音

例子：     <audio src="/i/horse.ogg"controls="controls">

Your browser does not support the audio element.

</audio>

<video></video> 视频

 

例子：     <video src="/i/movie.ogg"controls="controls">

your browser does not support the video tag

</video>

<canvas></canvas> 图形

例子：     <canvas id="myCanvas">yourbrowser does not support the canvas tag </canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

</script>