html5语义化标签、音视频标签、inpute新增类型

html5基础

语法
• 内容类型（ContentType）
◦ HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"
• DOCTYPE声明
◦ 不区分大小写
• 指定字符集编码
•
• 可省略标记的元素
◦ 不允许写结束标记的元素：br、col、embed、hr、img、input、、
link、meta
• 可以省略结束标记的元素：
◦ li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
• 可以省略全部标记的元素：html、head、body、colgroup、tbody
• 属性值可以使用双引号，也可以使用单引号。
语义化标签
在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没
• section元素 表示页面中的一个区块
• article元素 表示一块与上下文无关的独立的内容
• aside元素 在article之外的，与article内容相关的辅助信息
• header元素 表示页面中一个内容区块或整个页面的标题
• footer元素 表示页面中一个内容区块或整个页面的脚注
• nav元素 表示页面中导航链接部分
• figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一
个子元素的位置)
• main元素 表示页面中的主要的内容(ie不兼容)
• hgroup标题的一个分组
• mark定义高亮显示的文本(span)
• time时间
• dialog标记定义一个对话框(会话框)类似微信
• embed 标记定义外部的可交互的内容或插件 比如flash

音视频标签:
video: 视频标签
audio: 音频标签

            属性:
                src="文件地址"
                controls="显示控件"
                autoplay="自动播放" 谷歌屏蔽了
                loop="循环播放"
                muted="静音"
                poster="图片地址" 显示为第一帧图片,直到用户点击播放按钮
                 
            source标签: 定义媒介资源 (备份文件)
                type="文件类型"
                文件类型:
                    视频:
                        video/ogg
                        video/webm
                        video/mp4
                    音频:
                        audio/ogg
                        audio/mpeg
                        audio/wav
                        主流的音频文件格式mp3 ogg wav

input 中新增加的type类型
type=“email” 请输入邮箱地址
type=“url” 请输入网址
type=“range” 滑块
type=“number” 请输入数字
type=“search” 搜索表单
type=“color” 生成颜色表单

            作为了解
            type=“time”      限制用户必须输入时间类型
            type=“month”        限制用户必须输入月类型
            type=“week”        限制用户必须输入周类型
            type=“datetime-local”        选取本地时间
            type=”date”     年月日
             
        新增加的表单属性:
            required    检测是否为空(必填字段)
            step        步长,确定一个值-4 0 4 8
            min         限定最小值
            max         限定最大值
             
            autoplete="是否自动关联提示信息"
                on  默认值 关联
                off 不关联
                 
            placeholder="文本框的提示信息"
             
            autofocus   自动聚焦,光标的初始位置,一个页面只有一个
             
            pattern="正则表达式" 可以自己指定合法的格式
                //手机号正则表达式:  ^1[3|5|8]\d{9}$
                 
            novalidate="取消验证"   
             
            multiple    多选
             
            list    结合 datalist标签的id属性才有效
             
        新增加的标签:
            <input type="text" list="aa" />
            <datalist id="aa">
                <option value="http://www.baidu.com"></option>
                <option value="http://www.vip.com"></option>
                <option value="http://www.mao.com"></option>
                <option value="http://www.taobao.com"></option>
            </datalist>
             
            output 输出标签,用于计算结果的输出或者是脚本的输出