HTML5学习笔记

发表于   |   分类于   |  

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

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

表单

  1. form属性,实现form与其中的标签分离
1
2
3
<form id="login" action="login.php" method="get"></form>
<input form="login" type="text" name="user" id="">
<input form="login" type="submit" value="提交">
  1. formaction ，实现不同的动作提交到不同的后台处理;formmethod,不同的提交方式;placeholder,提示字符
1
2
3
4
5
<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="不通过">
  1. autofocus 自动获得焦点,这里可以贴一下js的实现代码
1
2
3
4
<script>
    var username = document.getElementById('username');
    username.focus();
</script>
  1. autocomplete 根据输入记录自动补全
1
autocomplete="on" autocomplete="off"
  1. list提示列表
1
2
3
4
5
6
7
<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 属性

1
2
<input type="tel" name="" id=""> 没有特殊的校验规则
<input type="tel" title="只能输入十位数字" pattern="^\d{10}$">可以添加正则属性
  1. url 专门用来输入url
1
<input type="url" name="" id="">
  1. email
1
<input type="email" required> 该字段是必须的
  1. 时间属性
1
2
3
4
5
6
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>
  1. number 限制输入数字

小提示乱入：
在input中加入 formnovalidate 属性可设置不验证

1
<input type="number" name="num" max="20" min="0" step="3">
  1. range 与number类似
1
2
<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>
  1. color 颜色选择器
  2. multiple 选择多个文件
1
<input type="file" name="pic" multiple accept="image/*"> 仅仅支持上传图片

html5 中新增加的标签

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

html5 废除的元素

<font></font> <u></u>等元素

html5 新增的元素和废除的元素

  1. <base>
1
2
<base target="_blank" href="http://www.yangguang520.cn">
<a href="index.php">云课堂</a>
  1. 有序列表倒转
1
2
3
4
5
6
7
8
<ol reversed>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
</ol>
  1. async 设置 js 异步加载