HTML5学习笔记

HTML5新增标签、表单及属性，有兼容问题，IE9+以上版本浏览器支持

一、新增语义化标签

<header>头部标签
<nav>导航标签
<article>内容标签
<section>定义文档某个区域（大号div）
<aside>侧边栏标签
<footer>尾部标签

注：
①语义化标准主要针对搜索引擎
②新标签页面中可多次使用
③IE9中需把这些元素转换为块级元素
④移动端更喜欢用没有兼容问题

二、新增多媒体标签

1、视频<video>

支持MP4（推荐）、WebM、Ogg

可以在页面中嵌入，不需使用flash和其他浏览器插件

语法：

<video src="文件地址" controls=“controls”></video>

或解决兼容性可用

<video  controls=“controls”  width=“300”>
    <source src="move.ogg" type="video/ogg">
    <source src="move.mp4" type="video/mp4">
    您的浏览器暂不支持<video>标签播放视频
</video>

属性	值	描述
autoplay	autoplay	自动播放（谷歌要加muted解决自动播放）
controls	controls	向用户显示播放控件
width	px	设置播放器宽度
height	px	设置播放器高度
loop	loop	循环播放
preload	auto（预先加载视频） none（不应加载视频）	规定是否预加载视频（有autoplay就忽略此属性）
src	url	地址
poster	lmgurl	加载等待的画面图片
muted	muted	静音播放

2、音频<audio>

支持MP3（推荐）、Wav、Ogg

语法：

<audio src=文件地址 controls=“controls”></audio>

或解决兼容问题

<audio controls=“controls”>
    <source src="xxx.mp3" type="audio/mpeg">
    <source src="xxx.ogg" type="audio/ogg">
     对不起，您的浏览器不支持播放音频！请升级浏览器！
</audio>

三、新增表单

1、新增input类型

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为url类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

重点number、search、tel

2、新增表单属性

属性	值	说明
required	required	其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户再字段开始键入时浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认on，需要有name属性，同时提交成功
multiple	multiple	可以多选文件提交

可通过伪元素形式设置修改placeholder里的字体颜色

input::placeholder { color：red;}