html5+css3补充
html5新特性
这些新特性均具有兼容性问题
1. 语义化标签
<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
注：
-
这种语义化标准主要是针对搜索引擎的
-
这些新标签页面中可以使用多次
-
在IE9中，需要把这些元素转换为块级元素
2. 多媒体标签
2.1 视频<video>
| 属性 | 值 描述 |
|---|---|
| autoplay | autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题） |
| controls | controls 向用户显示播放控件 |
| width | pixels(像素) 设置播放器宽度 |
| height | pixels(像素) 设置播放器高度 |
| loop | loop 播放完是否继续播放该视频，循环播放 |
| preload | auto(预先加载视频) none(不应加载视频) 规定是否预加载视频(如果有了autoplay就忽略该属性) |
| src | url 视频url地址 |
| poster | imgurl 加载等待的画面图片 |
| muted | muted 静音播放 |
2.2 音频<audio>
- 谷歌浏览器把音频和视频自动播放禁止了
| 属性 | 值 描述 |
|---|---|
| autoplay | autoplay 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls 如果出现该属性，则向用户显示控件，比如播放按钮 |
| loop | loop 如果出现该属性，则每当音频结束时重新开始播放 |
| src | url 要播放的音频的URL |
2.3 input 新类型
| 属性值 | 说明 |
|---|---|
| type=“email” | 限制用户输入必须为Email类型 |
| type=“url” | 限制用户输入必须为URL类型 |
| type=“date” | 限制用户输入必须为日期类型 |
| type=“time” | 限制用户输入必须为时间类型 |
| type=“month” | 限制用户输入必须为月类型 |
| type=“week” | 限制用户输入必须为周类型 |
| type=“number” | 限制用户输入必须为数字类型 |
| type=“tel” | 手机号码 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
<body>
<!--我们验证的时候必须添加form表单域-->
<form action="">
<ul>
<li>邮箱:<input type="email" /></li>
<li>网址:<input type="url" /></li>
<li>日期:<input type="date" /></li>
<li>日期:<input type="time" /></li>
<li>数量:<input type="number" /></li>
<li>手机号码:<input type="tel" /></li>
<li>搜索:<input type="search" /></li>
<li>颜色:<input type="color" /></li>
<!--当我们点击提交按钮就可以验证表单-->
<li><input type="submit" value="提交"></li>
</ul>
</form>
</body>
| 属性 | 值 说明 |
|---|---|
| required | required 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus 自动聚焦属性，页面加载完成自动聚集到指定表单 |
| autocomplete | off / on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段填写的选项；默认已经打开，如autocomplete=“on”，关闭autocomplete=”off”需要放在表单内，同时加上name属性，同时成功提交 |
| multiple | multiple 可以多选文件提交 |
可以通过以下设置方式修改placeholder里面的字体颜色：
input::placeholder {
color: pink;
}
css3新特性
css3盒子模型
box-sizing：content-box
-
这是由 CSS2.1 规定的宽度高度行为。
-
宽度和高度分别应用到元素的内容框。
-
在宽度和高度之外绘制元素的内边距和边框。
box-sizing：border-box
-
不会撑开盒子
-
在宽度和高度之内绘制元素的内边距和边框
其他特性
1. CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数();
例如：filter: blur(5px); blur模糊处理 数值越大越模糊
2. CSS3 calc函数：
calc()
- 此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100% - 30px); /*子盒子永远比父盒子小30px*/
- 括号里面可以使用+ – * /来进行计算。
版权声明：本文为mtdj原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。