html5 笔记(一)

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


语化标签

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:定义页面文章或作者的详细联系信息。

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>


你可能感兴趣的:(html5 笔记(一))