html5 学习笔记

一、ie8及以下对html5相关语义标签的支持

<!-[if lt IE9]>
    <script src="html5.js"></script>
<![endif]->

　　

二、表单
1,form属性,实现form与其中的标签分离

<form id="login" action="login.php" method="get"></form>
<input form="login" type="text" name="user" id="">
<input form="login" type="submit" value="提交">

2,formaction ，实现不同的动作提交到不同的后台处理
formmethod ,不同的提交方式
placeholder,提示字符

<form id="login" action="login.php" method="get"></form>
<input form="login" placeholder="请输入用户名" type="text" name="user" id="">
<input form="login" formaction="del.php" formmethod="get" type="submit" name="dosubmit" value="删除">
<input form="login" formaction="pass.php" formmethod="post" type="submit" name="dosubmit" value="通过">
<input form="login" formaction="notpass.php" formmethod="get" type="submit" name="dosubmit" value="不通过">

3，autofocus 自动获得焦点
这里可以贴一下js 的实现代码

<script>
    var username = document.getElementById('username');
    username.focus();
</script>

4,autocomplete 根据输入记录自动补全
autocomplete="on" autocomplete="off"
5,list ,提示列表

<input form="login" list="listtest" autofocus autocomplete="on" id="username" placeholder="请输入用户名" type="text" name="user" id="">
<datalist id="listtest">
    <option>this is one</option>
    <option>this is two</option>
    <option>this is three</option>
    <option>this is four</option>
</datalist>

三、改良的input元素种类（可以简单的使用这些元素来实现js的功能）
1，<input type="search" name="" id="">
2, tel 属性

<input type="tel" name="" id=""> 没有特殊的校验规则
<input type="tel" title="只能输入十位数字" pattern="^d{10}$">可以添加正则属性

3,url 专门用来输入url
<input type="url" name="" id="">
4,email 
<input type="email" required> 该字段是必须的
5，时间属性

Datetime: <input type="datetime" name="" id=""><br>
Date: <input type="date" name="" id=""><br>
month: <input type="month" value="2015-02"><br>
week: <input type="week" name="" value="2015-W10"><br>
time: <input type="time" name="" id=""><br>
Datetime-local: <input type="datetime-local" name="" id=""><br>

6，number 限制输入数字
小提示乱入：
在input 中加入 formnovalidate 属性可设置不验证

<input type="number" name="num" max="20" min="0" step="3">

7,range 与number类似

<input type="range" onchange="document.getElementById('num').value = this.value" name="num" max="20" min="0" step="3" value="0"><br>
<output id="num">0</output>

8,color 颜色选择器
9，multiple 选择多个文件

<input type="file" name="pic" multiple accept="image/*"> 仅仅支持上传图片

四、html5 中新增加的标签
1， <mark></mark> 黄色背景强调
2，<wbr> 软换行 
3，进度条，可以使用 js 控制它们的 value 值
<progress min="0" max="100" value="20" id="pro"></progress>
<meter min="0" max="100" low="30" high="80" id="pro"></meter>
4，canvas 通过js 画图
5，details 详细信息
<details>
<summary>
标题
</summary>
内容
内容
内容
</details>
6，ruby 拼音注释
<ruby>
妹子<rp>(</rp><rt>meizi</rt><rp>)</rp>
</ruby>

五、html5 废除的元素
<font></font>
<u></u>
等元素

六、html5 新增的元素和废除的元素
1，<base>
<base target="_blank" href="http://www.yangguang520.cn">
<a href="index.php">云课堂</a>
2,有序列表倒转

<ol reversed>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
</ol>

3,async 设置 js 异步加载