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 异步加载
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
