前端学习日记09

HTML5新特性

1. 内容结构更加简洁

   （1）文档声明更加简洁
   （2） 编码格式更加简洁
   （3）有的标签结束标签可以不写(p,li)
   （4）标签的属性名和属性值相同,属性值可以省略
   input checked = ‘checked’
   （5） 标签的属性值是true,也可以省略

2, 新增更具有语义化的结构标签
3, 新增表单元素相关内容
4, 新增多媒体标签(音视频)
5, Canvas(画布)
6, 拖放
7, 地图api
8, 对本地缓存支持更好

新增结构标签

1, header标签： 定义网页头部区域
2, footer标签 ： 定义网页底部区域
3, article标签 ： 定义网页的主要内容
4, section标签 ：定义内容的章节或分区
5, nav 标签 ： 定义网页的导航栏区域
6, aside 标签 ： 定义侧边栏区域

其他新增标签:

1, hgroup 标题组
2, figure 定义独立流内容

 比如 图片+标题
 figcaption 定义独立流的标题

3, mark 标记标签(默认添加黄色背景)
4, time 时间标签 datetime属性定义时间

html5兼容

ie8及以下不兼容html5
解决:
1, 利用js创建标签,创建的标签是行内标签,需要转换成block

<script>
    //  script标签放js代码
    // 创建header标签
    // js创建的标签是行内标签
    document.createElement('header');
    document.createElement('nav');
    document.createElement('aside');
    document.createElement('article');
    document.createElement('section');
    document.createElement('footer');
 </script>

2, 利用外部js,html5shive.js

<!-- 引入外部js -->
<script src="./html5shiv.js"></script>

音视频标签

1, 音频标签: audio

属性:
    src    文件路径
    controls  播放控件
    autoplay  自动播放
    muted    静音
    loop  循环播放

2, 视频标签: video

 属性:
    src   文件路径
    controls  播放控件
    autoplay  自动播放(视频在静音状态下可以自动播放)
    muted     静音
    loop      循环播放
    width/height     宽高
    poster='图片路径'   设置封面图片,不设置默认视频开始画面
    preload  当前页面加载时,就会加载视频文件;如果没有这个属性,用户点击播放时才会完整加载视频

3, source 媒介标签(配合video,audio使用)

<video controls>
     <source src="../videoAudio/despacito.webm">
     <source src="../videoAudio/despacito.mp4">
        <!-- 当浏览器不支持video标签是显示 -->
    您的浏览器不支持video标签,请下载谷歌浏览器
 </video>
 <audio controls>
    <source src="../videoAudio/butterfly.ogg">
    <source src="../videoAudio/nada.wav">
    <!-- <source src="../videoAudio/hanmai.mp3"> -->
    您的浏览器不支持audio标签,请下载谷歌浏览器
 </audio>

常见音视频格式

音频格式:
1, mp3 兼容性最好
2, ogg ie9+ 不兼容
3, wav ie9+ 不兼容

视频格式:
1, mp4 兼容性最好
2, ogg ie9+ 不支持
3, webm ie9+ 不支持

新增表单内容

新增表单类型:

html5新增类型:

	1, search  搜索框,最后出现一个× ,点击可以删除输入内容
    2, email    邮箱,提交时自带验证(邮箱)规则
    3, url      地址,自带网址验证规则
    4, tel      电话号码,手机端输入时自动切换数字键盘
    5, number    数字框,只能输入数字
    6, color     颜色框
    7, range     进度条(max和min确定一个范围,value确定当前进度值)
    8, date    日期  选择年月日
    9, datetime  手动输入日期
    10, time    时间,选择时分
    11, datetime-local 选择年月日时分
    12, month   选择年月
    13, hidden  隐藏域, 不显示在页面

​
datalist配合input使用,input的list属性 = datalist的id
​

新增表单元素属性

新增属性:

    1, max,min    最大最小值(数字)
    2, step  步长(默认步长为1)
    3, maxlength,minlength   最多最少字符
    4, placeholder  提示文字
    5, autofocus    自动聚焦
    6, autocomplete  自动补全(必须有name属性,提示的值是之前提交成功的值)
        值:  on 开启|off 关闭   默认值on
    7, required   必填项(不能为空)
    8, multiple   可以同时提交多个文件(按ctrl同时选多个文件)
    9, pattern    验证规则(正则表达式)
    10, form      绑定一个form(输入框的form值需要和form标签的id一致)
    11, list      绑定datalist(输入框的list值需要和datalist标签的id一致)

淘汰标签

html5 向上兼容(向前兼容),使用之前的淘汰标签不会报错
淘汰:

center
big
strike  删除线
font  
frame