html5总结

声明改变 为<!DOCTYPE html>

【Html5的新标签】

用之前的标签完全可以代替的:header footer aside atrical nav address time mark section

新增的重要的标签:video(视频) audio(音频) caves(画图)

新标签的作用:语义化,使代码的可读性更强;便于提高搜索优化。

兼容性:兼容IE9+,IE8及其以下有些可以解决,但大部分的还是放弃。 1,保证功能在高级浏览器上的使用,放弃低级浏览器。 ,2,低级浏览器只保证基本功能的实现,高级浏览器确保的是更好的用户体验。

一个有用的小东西,可以解决部分IE浏览器兼容性问题:HTML5shiv.js

 补充说明 :

  • hground如果有多级标题,这个元素可以将H元素进行分组
  • mark这个元素可以显示特殊情况下的重要文字
  • small 这个元素表示边栏评论,如附属细则
  • cite这个元素可用于显示作品标题(图书、电影、诗歌等)
  • adress这个元素显示article或整个文档的合同信息,且位于footer这个元素之中
  • time显示人和机器可读的日期和时间,而且机器可读的时间戳是属性datetime的值第二个可选的是pubtime用于表示出版日期值 重新定义的HTML标签
    • <b> 代表内联文本,通常是粗体,没有传递表示重要的意思
    • <i> 代表内联文本,通常是斜体,没有传递表示重要的意思
    • <dd> 可以同detailsfigure一同使用,定义包含文本,ialog也可用
    • <dt> 可以同detailsfigure一同使用,汇总细节,dialog也可用
    • <hr>表示主题结束,而不是水平线,虽然显示相同
    • <menu> 重新定义用户界面的菜单,配合commond或者menuitem使用
    • <small> 表示小字体,例如打印注释或者法律条款
    • <strong> 表示重要性而不是强调符号

input表单type属性值 

  • type="text" 单行文本输入框
  • type="password" 密码(maxlength=""
  • type="radio" 单项选择(checked="checked"
  • type="checkbox" 多项选择
  • type="button" 按钮
  • type="submit" 提交
  • type="file" 上传文件

  type="reset" 重置

input表单type属性值: 

  • type = "email" 限制用户输入必须为Email类型
  • type="url" 限制用户输入必须为URL类型
  • type="date" 限制用户输入必须为日期类型
  • type="datetime" 显示完整日期 含时区
  • type="datetime-local" 显示完整日期 不含时区
  • type="time" 限制用户输入必须为时间类型
  • type="month" 限制用户输入必须为月类型
  • type="week" 限制用户输入必须为周类型
  • type="number" 限制用户输入必须为数字类型
  • type="range" 生成一个滑动条
  • type="search" 具有搜索意义的表单results="n"属性
  • type="color" 生成一个颜色选择表单
  • type="tel" 显示电话号码

                       **HTML5 拥有多个可供选取日期和时间的新输入类型:

  •  date 选取日、月、年
  • month 选取月、年
  • week 选取周和年
  • time 选取时间(小时和分钟)
  • 以下两个没有作用
    • datetime 选取时间、日、月、年(UTC 时间)
    • datetime-local 选取时间、日、月、年(本地时间)
HTML5新增表单属性

  • required:required内容不能为空
  • placeholder: 表单提示信息
  • autofocus:自动聚焦
  • pattern: 正则表达式 输入的内容必须匹配到指定正则范围
  • autocomplete:是否保存用户输入值 
    • 默认为on,关闭提示选择off
  • formaction: 在submit里定义提交地址
  • datalist: 输入框选择列表配合list使用 list值为datalistid
  • output: 计算或脚本输出

                   validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都返回true,一种验证失败返回false

  • oText.addEventListener("invalid",fn1,false)
  • ev.preventDefault(): 阻止默认事件
  • valueMissing: 当输入值为空的时候,返回true
  • typeMismatch: 控件值与预期不吻合,返回true
  • patternMismatch: 输入值不满足pattern正则,返回true
  • cusomError
    • setCustomValidity()

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券