html5 笔记（一）

@H_675_1@

还是先从说标签开始说起吧。

语化标签

header：页面头部或板块的头部

footer：页面底部或板块的底部

nav：导航

hgroup：标题组合

<hgroup>
<span style="white-space:pre">	</span><h1>主标题</h1>
<span style="white-space:pre">	</span><h2>副标题</h2>
</hgroup>

section：板块或区块（最近访客）

article：独立的内容部分（帖子内容）

aside：和主体相关的附属信息（友情链接、广告、侧边栏sidebar）

figure：图片和文字组合

<figure>
<span style="white-space:pre">	</span><img />
<span style="white-space:pre">	</span><figcaption>图票标题</caption>
</figure

time：时间标签（发表文章的列表）

address：定义页面文章或作者的详细联系信息。

@H_562_4@mark：标记。

功能标签

datalist：选项列表。与input配合使用，来定义input可能的值。

<input type="text" list="valList">
<datalist id="valList">
	<option value="css">css</option>
	<option value="html">html</option>
	<option value="javascipt">javascipt</option>
	<option value="PHP">PHP</option>
</datalist>

details：详情信息。

<details open>
	<sumMary>文章标题</sumMary>
	<p>该段落是展示文章内容的区域</p>
</details>

dialogs：一段对话。

<dialogs>
	<dt>老师：</dt>
	<dd>1+1 等于？</dd>
	<dt>学生：</dt>
	<dd>等于 2</dd>
	<dt>老师：</dt>
	<dd>谁家的孩子，真聪明！</dd>
</dialogs>

keygen：给表单添加一个公钥。（针对后端，前端这块没有什么作用）

<form action="http://www.baidu.com/" method="get">
	用户：<input type="text" name="userName" id="">
	公钥：<keygen name="security">
	<input type="submit" value="提交">
</form>

progress：进度条。

<progress max="200" value="65">
	<!--向下兼容-->
	<span>65</span>%
</progress>

如何作向下兼容

方法一

通过javascipt增加新元素，不过在css中要加上{display:block}哦

<script>
	document.createElement('header');
	document.createElement('article');
	document.createElement('aside');
	document.createElement('section');
	document.createElement('footer');
	document.createElement('rzy');
</script>

方法二

<script src="html5shiv.min.js"></script>