HTMLCSS学习笔记

HTML5 为 input 的 type 类型增加了多种枚举值,用来表达不同的意思,同事具有验证功能,如果格式不对,浏览器将原始提供错误提示,堪称超级牛 X 啊,具体如下:

KeywordData type
hidden隐藏输入框
text单行文本
search单行文本
tel手机号/座机号
url绝对地址
email一个或多个 email 地址
password密码框
datetime带有时区的时间
date无时区的年月日时间
month无时区的年月
week无时区的周数
time无时区的时间(小时,分钟,秒,毫秒)
datetime-local无时区的日期与时间
number数字值
range范围:<input type="range" min=0 max=100 step=20 value=50>
color8-bit 表示的颜色
checkboxcheckbox
radioradio
file文件
submit提交按钮
image图片按钮
reset重置表单数据
button按钮

 参考资料:http://www.mhtml5.com/resources/html5%E6%95%99%E7%A8%8B%EF%BC%88%E5%85%AD%EF%BC%89-html5-input%E7%B1%BB%E5%9E%8B

学习至此,大叔发现 mhtml5 网站上已经有很多现成的资料了,所以如下的一些新元素请大家自行参考该网站的资料学习,大叔将着重继续学习 HTML5 在现有元素上的更新改变。

  1. figure 元素
  2. figcaption 元素
  3. track 元素
  4. embed 元素
  5. mark 元素
  6. progress 元素
  7. time 元素
  8. ruby, rt 和 rp 元素
  9. bdi 元素
  10. wbr 元素
  11. canvas 元素
  12. command 元素
  13. details 元素

语义化

标记标签 mark 双标签
用电量提示 meter
电量或者内存的使用情况
min:最小值
max:最大值
value:当前值
low:最低预警值
high:最高预警值
*默认的最小值是0,最大值是1
*如果当前浏览器不支持该标签,会显示标签里的内容.

单词内换行标签 wbr 双标签
拼音标注标签 ruby 双标签,
需要和rt,rp标签配合使用,
rt:在rt标签里写上需要标注的信息,
rp:当浏览器不支持时,会显示该标签里的内容.

datalist 双标签,一般结合input标签使用
1.在不同的浏览器下显示的效果有差异.
2.input标签和datalist标签是靠input标签内的list标签属性联系在一起的.
例子:

form>input[type="text" list="city"]+datalist[id="city"]>option