HTML5
-
HTML新增的语义化标签
| 标签 | 含义 |
|---|---|
| <header> | 头部标签 |
| <nav> | 导航标签 |
| <article> | 内容标签 |
| <section> | 定义文档某个区域 |
| <aside> | 侧边栏标签 |
| <footer> | 尾部标签 |
-
HTML新增的多媒体标签
-
音频：<audio>
尽量使用MP3格式
<audio src="文件地址" controls="controls"></audio>兼容性问题
<audio controls="controls"> <sourse src="1.mp3" type="audio/mpeg"> <sourse src="1.ogg" type="audio/ogg"> 您的浏览器不支持audio元素 </audio>常见属性
属性 值 描述 autoplay autoplay 就绪后马上播放 controls controls 展示播放控件 loop loop 循环播放 src url 音频的url -
视频：<video>
尽量使用MP4格式
<video src="文件地址" controls="controls"></video>常见属性
属性 值 描述 autoplay aotoplay 视频自动播放（谷歌需要加muted） controls controls 展示播放控件 width pixels 宽度 height pixels 高度 loop loop 是否循环播放 preload auto（预先加载）none（不预先加载） 是否预加载（如果有autoplay则忽略） src url 视频url地址 poster lmgurl 视频未加载则显示等待图片 muted muted 静音播放 HTML5新增input类型
属性值 说明 type="email" 必须为email类型 type="url" URL type="date" 日期 type="time" 时间 type="month" 月 type="week" 周 type="number" 数字 type="tel" 手机号码 type="search" 搜索框 type="color" 生成颜色选择器 <form action=""> <ul> <li>邮箱：<input type="email" /></li> </u> </form>HTML5新增表单属性
属性 值 说明 required required 表单内容不能为空 placeholder 提示文本 表单的提示信息 autofocus autofocus 自动聚焦，页面加载光标自动聚焦到指定表单 autocomplete off/on 显示历史值，默认为autocomplete=”on“ multiple multiple 可以多选文件提交（支持键盘ctrl多选）
CSS3新特性
1.属性选择器
<style>
/* 1.选择有value的 */
input[value] {
color: aqua;
}
/* 2.选择input=text的*/
input[type=text] {
color: aquamarine;
}
/* 3.选择div 具有class属性 值为icon开头的 */
div[class^=icon] {
color: blue;
}
/* 4.选择结尾为data的 */
section[class$=data] {
color: blueviolet;
}
/* 5.选择含有icon的 */
section[class*=icon] {
color: pink;
}
</style>
<body>
<!-- 1.选出 -->
<input type="text" value="请输入用户名">
<input type="text">
<!-- 2.选出属性=值的 -->
<input type="text" name="" id="">
<input type="password">
<!-- 3.选出以...开头的 -->
<div class="icon1">1</div>
<div class="icon2">2</div>
<div class="icon3">3</div>
<div class="icon4">4</div>
<div>拔丝憨包</div>
<!-- 4.选择以...结尾的 -->
<section class="icon1-data">拔丝</section>
<section class="icon2-data">憨包包</section>
<section class="icon3-ico">憨包</section>
</body>注意：类选择器、属性选择器、伪类选择器权重为10
2.结构伪类选择器
根据文档结构来选择元素，常用于父级选择器里的子元素
| 选择符 | 描述 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素 E |
| E:last-child | 匹配父元素中最后一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n 个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后 |
| E:nth-of-type(n) | 指定类型E的第n个 |
nth-child(n) 选择某个父元素的一个或多个特定的子元素
n可以是数字、关键字和公式
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15... |
| n+5 | 从第5个到最后 |
| -n+5 | 前五个 |
<style>
/* 奇数孩子 */
ul li:nth-child(odd) {
background-color: gray;
}
/* 偶数孩子 */
ul li:nth-child(even) {
background-color: pink;
}
/* 选择所有的 */
/* ol li:nth-child(n) {
background-color: pink;
} */
/* 选择偶数孩子 相当于even */
ol li:nth-child(2n) {
background-color: pink;
}
/* 选择奇数孩子 相当于odd */
ol li:nth-child(2n+1) {
background-color: pink;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
</body>nth-of-type()
<style>
/* 和child一样 */
ul li:first-of-type {
background-color: skyblue;
}
ul li:last-of-type {
background-color: purple;
}
ul li:nth-of-type(even) {
background-color: pink;
}
/* nth-child会把所有的孩子排序 */
/* 执行的时候先看后面选择的孩子 再去看前面的div 第1个孩子是p 匹配不了 */
section div:nth-child(1) {
background-color: aqua;
}
/* nth-of-type会把指定的孩子排序 */
/* 执行的时候先找div 再去找第1个孩子 */
section div:nth-of-type(1) {
background-color: pink;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<section>
<p>拔丝憨包</p>
<div>拔丝</div>
<div>憨包</div>
</section>
</body>3.伪元素选择器（重点）
利用CSS创建新标签元素，而不需要HTML标签，简化HTML结构
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
-
新创建的元素在文档树中是找不到的
-
创建的元素属于行内元素
-
element::before{}
-
before和after必须有content属性
-
before在父元素内容的前面创建元素，after在父元素的后面创建元素
-
和标签选择器一样，权重都为1
案例：字体图标
<style>
/* 字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hdotvh');
src: url('fonts/icomoon.eot?hdotvh#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hdotvh') format('truetype'),
url('fonts/icomoon.woff?hdotvh') format('woff'),
url('fonts/icomoon.svg?hdotvh#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid black;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
content: '';
/*content: '\e900';*/
color: black;
font-size: 20px;
}
</style>
<body>
<div></div>
</body>
使用场景：伪元素清除浮动
-
额外标签法，W3C推荐（在浮动元素最后添加标签（盒子）必须是块级元素clear：both）
-
父级添加overflow
-
父级添加after伪元素
.clearfix::after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } -
父级添加双伪元素
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}4.CSS盒子模型 box-sizing
-
box-sizing：content-box 盒子大小为width+padding+border（默认的）
-
box-sizing：border-box 盒子大小为width （padding和border就不会撑大盒子了）
5.CSS其他特性
-
图片变模糊
filter: blur();/*数值越大图像越模糊 数值要加px*/ -
计算盒子宽度width：calc 函数 + - * / 计算
<style> .father { width: 300px; height: 200px; background-color: pink; } .son { /* width: 150px; */ width: calc(100% - 30px); height: 30px; background-color: skyblue; } </style> <body> <!-- 父盒子宽度永远比子盒子小30px --> <div class="father"> <div class="son"></div> </div> </body>
6.CSS3过渡（重点）
transition：从一个状态渐渐过渡到另一个状态，经常和hover一起搭配使用
transition：要过渡的属性 花费时间 运动曲线 何时开始； 谁做过渡给谁加
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition：要过渡的属性 花费时间 运动曲线(默认ease可以省略) 何时开始(默认0s可以省略)； */
/* 多个属性用逗号进行分割 */
/* 多个属性都变化写all */
/* 谁做过渡给谁加 */
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 200px;
background-color: skyblue;
}
</style>
<body>
<div></div>
</body>进度条案例：
<style>
.bar {
width: 150px;
height: 10px;
border: 1px solid red;
border-radius: 5px;
padding: 1px;
}
.bar-in {
width: 50%;
height: 100%;
background-color: red;
transition: all .5s;
}
.bar:hover .bar-in {
width: 100%;
}
</style>
<body>
<div class="bar">
<div class="bar-in"></div>
</div>
</body>