一、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 异步加载

html5 学习笔记的更多相关文章

  1. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  2. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  4. HTML5学习笔记(一):HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  5. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  6. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  7. HTML5 学习笔记(一)——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  8. Html5学习笔记(1)

    1.figure\figcaption||detail\summary||mark学习笔记 效果图 代码为: <!DOCTYPE html> <html> <head&g ...

  9. HTML5 学习笔记--------》HTML5概要与新增标签!

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  10. [html5] 学习笔记-表单新增的元素与属性(续)

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

随机推荐

  1. IOS 表视图(UITableVIew)的使用方法(7)表视图的编辑功能(拖拉调整排序位置)

    除了每个单元行左边的删除和新增图标,UITableView还支持在单元行的右侧显示一个供用户拖拉调整排序位置的控件. 不过如果要显示此控件,UITableView的数据源需要实现以下的方法. -(vo ...

  2. ios 学习笔记(8) 控件 按钮(UIButton)的使用方法

    在实际开发中,对于开发者来说,更多的还是使用“自定义”按钮.将“按钮”对象的类型设置成UIButtonTypeCustom.这样一来,按钮的所有元素都将由开发者来配置和自定义. 对于一个自定义按钮来说 ...

  3. Java多线程编程中Future模式的详解

    Java多线程编程中,常用的多线程设计模式包括:Future模式.Master-Worker模式.Guarded Suspeionsion模式.不变模式和生产者-消费者模式等.这篇文章主要讲述Futu ...

  4. nginx 重写 rewrite 基础及实例(转)

    nginx rewrite 正则表达式匹配 大小写匹配 ~ 为区分大小写匹配 ~* 为不区分大小写匹配 !~和!~*分别为区分大小写不匹配及不区分大小写不匹配 文件及目录匹配 -f和!-f用来判断是否 ...

  5. ALV列、行、单元格颜色设置

    )颜色含义 :海蓝:2:浅清:3:黄色:4:浅蓝:5:青色:6:红色:7:橙色. (1)首位为主颜色: (2)次位为辅助颜色: (3)末位为0时,表示首位数字表为表格的底色: 末位为1时,则表示以1为 ...

  6. Spring 拦截器实现事物

    Spring+Hibernate的实质:就是把Hibernate用到的数据源Datasource,Hibernate的SessionFactory实例,事务管理器HibernateTransactio ...

  7. Struts2 学习笔记19 类型转换 Part1

    现在来说一说类型转换,提到类型转换其实我们之前早已经用过了,在url传递参数的时候,我们传递过来的参数其实都是String类型的,在显示的时候都自动转换了,像这种简单的转换很好理解,我们要说的是,转换 ...

  8. SPOJ1811最长公共子串问题(后缀自动机)

    题目:http://www.spoj.com/problems/LCS/ 题意:给两个串A和B,求这两个串的最长公共子串. 分析:其实本题用后缀数组的DC3已经能很好的解决,这里我们来说说利用后缀自动 ...

  9. python字符串操作总结

    python中有各种字符串操作,一开始python有个专门的string模块,要使用需先import string.后来从python2.0开始,string方法改用str.method()形式调用, ...

  10. Dropping tests(01分数规划)

    Dropping tests Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8176   Accepted: 2862 De ...