HTML5 CSS3
语义化标签:
header 页面或页面中某一个区块的页眉,通常是一些引导和导航信息
nav 可以作为页面导航的链接组
section 页面中的一个内容区块,通常由内容及其标题组成
article 代表一个独立的、完整的相关内容块,可独立于页面其它内容使用
aside 非正文的内容,与页面的主要内容是分开的,被删除而不会影响到网页的内容
footer 页面或页面中某一个区块的脚注
input新增的type类型:
<input type="color"> 选取颜色
<input type="email"> 设置邮箱
<input type="url"> 设置网址
<input type="number"> 设置数字
<input type="range"> 设置滑动条
<input type="date"> 设置年月日
<input type="month"> 设置年月
<input type="time"> 设置时、分
HTML新增的全局属性:
contentEditable="true" 是否允许用户编辑内容 true表示允许 false表示不允许
hidden 表示将该标签不占位隐藏 display:none;效果一致
H5新增音频视频播放器:
<video src="video/video.mp4"></video>
<audio src="video/上河Lin、司南%20-%20盗将行.mp3"></audio>
属性:
controls 用于音频视频播放器添加控件
autoplay 是否自动播放 (所有新式浏览器都不用允许直接自动播放,想要自动播放可以添加静音属性)
muted 是否静音
H5新增了哪些内容:
1.语义化标签
2.增加了很多表单的控件
3.新增用于绘画的canvas标签
4.媒介播放的 video 和 audio 元素
5.新增本地存储和离线缓存
CSS3新增内容;
新增选择器:
li:first-of-type 表示选择到第一个li标签
li:last-of-type 表示选择到最后一个li标签
li:nth-of-type(2) 表示选择到第2个li标签
li:nth-of-type(odd) 表示选择到所有奇数li标签
li:nth-of-type(even) 表示选择到所有偶数li标签
一般的标签都会有样式的继承性,比如颜色,如果自己没设置颜色,会从最近的祖级元素开始找,
如果祖级元素有设置过颜色,则会继承,如果都没有则是默认色,但是a标签无法继承颜色,因为本身自带颜色,
想要设置a标签文字颜色必须选择到a标签本身来设置
css3新增的常见样式设置:
所有的css3新增样式都要添加不同的浏览器前缀
-webkit- 谷歌和苹果
-moz- 火狐
-o- 欧朋
-ms- IE
设置边框圆角
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
设置盒子阴影:
box-shadow: inset 5px 5px 10px 15px #333;
inset: 表示设置内阴影 还可以改成outset 表示外阴影
第一个像素值表示水平阴影偏移位置
第二个像素值表示垂直阴影偏移位置
第三个像素值表示阴影的模糊距离 不允许负数
第四个像素值表示阴影的外延值
#333 表示阴影的颜色
设置文本阴影:
text-shadow:5px 5px 5px #ccc;
第一个像素值表示水平阴影偏移位置
第二个像素值表示垂直阴影偏移位置
第三个像素值表示阴影的模糊距离 不允许负数
#ccc 表示阴影的颜色