本文最后更新于 92 天前,其中的信息可能已经有所发展或是发生改变。
1、HTML5新标签和属性
1.1 兼容性前缀与语义化
兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的。
内核 | 兼容性前缀 | 浏览器 |
---|---|---|
Gecko | -moz- | Firefox |
Webkit | -webkit- | Chrome、Safari |
Presto | -o- | Opera |
Trident | -ms- | IE |
语义化:根据页面的结构,选择合适的标签,这就是语义化。如标题使用h1-h6
1.2 新增的标签
浏览器要求,最新的浏览器 ie9:包含ie9 ie8以下都不支持,包括ie8。
1.2.1 音频标签
- 音频标签属性:
属性 | 说明 |
---|---|
src | 加载音频的路径 |
controls | 控制音频的显示 |
loop | 定当音频/视频结束后将重新开始播放 |
muted | 音频处于静音状态 |
- 音频标签支持音频的格式:
格式 | MIME-type | 最新的浏览器支持情况 |
---|---|---|
Ogg | audio/ogg | Chrome、Firefox、Opera10+ |
MP3 | audio/mpeg | Chrome、Firefox、Opera10+、IE9+、Safari5+ |
Wav | audio/wav | chrome、Firefox、Opera10+、Safari5+ |
- 使用方式:
<!-- 格式1: --> <audio src="1.ogg" controls loop muted></audio> <!-- 注意: 属性直接用空格隔开 属性1 属性2 属性3 --> <!-- 格式2: --> <audio src="1.mp3" controls="controls" loop="loop" muted="muted"></audio> <!-- 属性=“属性值” : controls="controls" loop="loop" muted="muted" --> <!-- 格式3: --> <audio controls loop muted> <source src="1.wav" type="audio/wav" /> </audio> <!-- 格式4: --> <audio controls="controls"> <source src="1.mp3" type="audio/mpeg" /> <source src="1.ogg" type="audio/ogg" /> <source src="1.wav" type="audio/wav" /> </audio>
-注意:
- 可以加载多个音频.浏览器默认读取第一个音频。如果第一个音频有错误,浏览器会默认读取第二个音频.
- 媒介元素里面属性:
src属性: src="加载音频的地址"
type="音频的类型[MIME-type]" 音频的类型最好根据src加载的音频给音频的类型
1.2.2 视频标签
- 视频标签属性:
属性 | 说明 |
---|---|
src | 加载视频的路径 |
controls | 控制视频的显示 |
loop | 定当音频/视频结束后将重新开始播放 |
muted | 视频处于静音状态 |
- 视频标签支持音频的格式:
格式 | MIME-type | 最新的浏览器支持情况 |
---|---|---|
Ogg | video/ogg | Chrome、Firefox、Opera |
MP4 | video/mpeg | Chrome、Firefox、Opera25+、IE9+、Safari |
WebM | video/wav | chrome、Firefox、Opera |
- 视频标签使用方式:
<!-- 格式1: --> <video src="1.mp4" controls loop muted></video> <!-- 属性与属性直接用空格隔开 -->
格式2: 属性: src="加载视频路径" 相对路径 绝对路径 controls:查看视频 loop属性:规定当音频/视频结束后将重新开始播放 muted属性:音频处于静音状态 width="值" 设置视频的宽度 height="值" 设置视频的高度 poster="图片路径" poster属性 预览图片 视频封面 <video src="1.webm" controls="controls" loop="loop" muted="muted" width="400" height="400"></video>
<!-- 格式3:--> <video controls loop muted width="500" height="500" poster="./images/1.jpg"> <source src="1.webm" type="video/webm" /> </video> <!-- 注意:属性 可以混合一起使用,多个属性值直接用空格隔开 -->
<source src="属性值" type="属性值" /> <!-- src="视频路径" type="视频的类型" -->
<!-- 格式4:--> <video controls="controls" loop="loop" poster="./images/1.jpg"> <source src="1.webm" type="video/webm" /> <source src="1.mp4" type="video/mp4"> </video> <!-- 视频有多个视频: 浏览器默认读取第一个视频.如果第一个视频有问题或者路径加载不出来。默认读取第二个视频。-->
1.2.3 input表单元素
type | 说明 |
---|---|
text | 文本元素 |
url | 对文本框里面的地址进行验证,输入错误的地址,会有文本框有红色的提示;当你提交按钮时,输入错误的地址.会有一个友情提示.且你的内容不会进行提交;url地址要完整并正确,才能把数据提交过去;手机端识别后缀为.com ,在pc端识别.cn .com .top |
search | 用于搜索域 |
对输入框进行一个验证.输入框里面输入错误,鼠标移开,在外面进行点击,默认提示会有文本框有红色的提示;输入框里面email内容输入错误,当你提交表单时,会友情提示。且表单里面内容不会进行提交;输入框里面email内容输入正确,表单可以把数据进行提交 | |
tel | 用于输入电话号码的文本域 |
number | 用于数字的文本域;没有默认值value,步长step,最小值min,最大值max |
range | 用于包含一定范围内数字值的输入域,默认开始值value,step步长值 |
color | 用于选取颜色 |
1.2.4 input日期表单元素
type | 说明 |
---|---|
date | 获取日期 年/月 /日 , yyyy:年 mm:月 dd:日 |
datatime | 手动输入一个日期和时间 |
time | 用于选择一个时间 低版本的浏览器不兼容 |
week | 用于选择周和年 低版本的浏览器不兼容 |
datetime-local | 用于选择日期和时间 |
month | 用于选择一个年份+月份 |
<!--
list:自定义一个值 选择下拉框 必须要和 <datalist id="classlist">中id="值一起使用(id里面的值最好和文本框里面的list值一致)"和js组合一起使用.
属性:<option value="给选择值">
-->
<form action="#" method="get">
<input type="date" />
手动输入一个日期和时间:<input type="datetime" />
选择时间:<input type="time" />
选择周和年:<input type="week" />
选择日期和时间:<input type="datetime-local" />
选择一个月份:<input type="month" />
<input id="myCar" list="classlist" />
<datalist id="classlist">
<option value="WEB"></option>
<option value="ASD"></option>
</datalist>
</form>
1.2.5 input表单元素属性
属性值 | 说明 |
---|---|
placeholder | 友情提示,鼠标聚焦 会清除文本框里面内容。当即有value属性值也有placeholder属性值时,默认读取的是value属性的值. |
required | 文本域 验证 |
number | max="最大值" min="最小值" step="间隔的值" :数字之间间隔的值 (根据偶数) |
autocomplete | 开启(on),关闭(off) 选择 (根据你的name值) |
autofocus | 文本框给到属性值,默认会聚焦到文本框 |
-
控件归属于表单:
1 表单的控件id名一定是唯一
2 控件归属于那个表单,那么控件里面属性form=“表单的id[一致]”<form action="#" method="get" id="form"> <input type="text" name="usernam"/> </form> <input type="reset" form="form"/>
-
文本框下拉选择:
<input type="url" name="weblist" list="res" id=""> <datalist id="res"> <option label="百度" value="http://baidu.com"></option> <option label="淘宝" value="http://taobao.com"></option> </datalist>
注意:
1:id值不能重复 ,
2:文本框里面的list的值要和datalist里面的id属性值一致
3:label="值" 如果有label值,默认选中框里面读取label值.选择了label值文本框里面会赋值value的值
1.2.6 html5新增属性
新增的标签有(双标签):
标签 | 内容 | 描述 |
---|---|---|
header | 页眉 头部标签 | 可以用来包含 标题 搜索框 logo |
footer | 页脚 尾部标签 | 可以用来包含 底部的友情链接 版权 |
nav | 导航 | 可以用来设置导航 或者 分页 默认的样式横排 |
article | 文档中独立的内容 | 可以是完整的评论或者留言 |
section | 页面内容章节 | 一般情况下里面子属性会是h1-h6标题 |
aside | 侧边栏 | 侧边栏与文档或某个区块相关的附属信息 |
hgroup | 标题组 | 对标题或者子标题进行分组 |
figure | figure的标题 | figure的标题 |
mark | 标记 | 默认有一个背景颜色为黄色 |
time | 时间 | 时间 |
2、css3新特性
2.1 新增的属性选择器
在此之前,我们常用的选择器是:class选择器,id选择器
属性选择器,按照字面意思,都是根据标签中的属性来选择元素
css3新增的属性选择器:
选择器 | 例子 | 说明 |
---|---|---|
^ | div[class^="box"] | 要类名为box开头的都进行控制 |
$ | div[class$="aaa"] | 以元素aaa结尾的都进行控制 |
* | div[class*="o"] | 元素只要包含了o都进行控制 |
除此之外,在input标签里面还有这样的选择器:
input[type=text] {
color: #000000;
} // 表示对文本标签进行控制
2.2 新增的结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素, 常用于根据父级选择器里面的子元素
2.2.1 选择器和描述
选择器 | 描述 |
---|---|
div:first-child | 选择父元素的第一个子元素 |
div:last-child | 选择父元素的最后一个子元素 |
div:nth-child(n) | 选择父元素的第n个子元素 |
div:nth-child(odd) | 选择父元素的奇数个子元素 |
div:nth-child(even) | 选择父元素的偶数个子元素 |
选择器这里的n可以用数学公式表示,如div:nth-child(2n)表示匹配父元素下的偶数位子元素。
2.2.2 div:nth-child 与 div:nth-of-type 的区别
先看下面的代码:
<body>
<ul class="list">
<li>1</li>
<p>2</p>
<li>3</li>
<p>4</p>
<li>5</li>
<p>6</p>
</ul>
</body>
<style>
.list p:nth-child(2){
background-color: red;
}
.list p:nth-of-type(2){
background-color: blue;
}
</style>
可以看到如下结果:
p:nth-child(2)是先从父元素中选取一个p元素,并且是父元素的第二个元素,若不是则选择失败;p:nth-of-type(2)直接选取父元素下第2个p元素。
2.2.3 伪元素选择器
利用css直接创建某个元素,而不用标签进行创建。
举个例子:
<style>
.apple{
padding: 20px 10px;
background: coral;
}
.apple::before{
content: "?";
}
.apple::after{
content: "看起来很好吃的样子!";
}
</style>
<body>
<div class="apple">这是一个苹果!</div>
</body>
效果如下:
- div::before表示在div前添加元素
div::after表示在div后添加元素
都属于行内元素,权重是1
2.2.4 盒子模型
box-sizing属性值 | 描述 |
---|---|
content-box | 盒子大小为 width + 2padding + 2border |
border-box | 盒子大小为 width |
一个div宽高为100px,content-box的盒子内容宽高为100px;border-box的盒子包含border的宽高为100px,实际内容宽高要小于100px
2.2.5 转换效果transform
属性值 | 描述 |
---|---|
rotate | 旋转 |
skew | 倾斜 |
位移 | translate |
缩放 | scale |
2.2.6 其它特性
- 弹性盒
- 个性化字体 @font-face{}
- 媒体查询 @media (max-width: 480px){}
- 动画 @keyframes animation01{}
- 过度 transition
- 颜色透明度 rgba
- 圆角 border-radius
- 渐变 background:linear-gradient()
- 阴影 box-shadow
- 倒影 box-reflect
- 文字溢出 text-overflow:ellipsis
- 等等