DAY 10 | 自学前端第十天

从今天开始，一天都不能断。

今天学HTML5和CSS提高。

目标：

能说出3-5个HTML5新增布局和表单标签；
能够说出CSS3的新增特性有哪些

一、HTML5的新特性

增加了新的标签，新的表单，新的表单属性等。

新特性都有兼容性问题，基本IE9以上版本的浏览器才支持；

1.1 HTML5新增的语义化标签

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

注意：

这种语义化标准主要针对搜索引擎的
这种新标签页面中可以使用多次
在IE9，需要把这些元素转换为块级元素（小米官网）
移动端更喜欢这些标签
HTML5还增加了很多其他标签

 <title>HTML5新增语义化标签</title><style>header,nav,footer {height: 120px;width: 800px;background-color: green;border-radius: 15px;margin: 15px auto;}section,aside {width: 500px;height: 300px;background-color: green;}</style>
</head><body><header>头部标签</header><nav>导航栏标签</nav><section>某个区域</section><aside>侧边栏</aside><footer>尾部标签</footer>
</body>

1.2 HTML5新增的多媒体标签

音频：<audio> Mp3 WAV Ogg

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

视频： <video> MP4 Ogg WebM，尽量MP4 低版本不支持MP4，比如火狐

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

1.3 HTML 5 新增的input类型

type=“email”
type=“url”
type=“data”
type=“time”
type=“month”
type=“week”
type=“number”
type=“tel”
type=“search”
type="color"

  <title>input</title>
</head><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="month"></li><li>周：<input type="week"></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>

1.4 HTML5新增的表单属性

required——内容不能为空

  <input type="search" name="" id="" required="required">

placeholder——表单提示信息

  <input type="search" name="" id="" placeholder="胖胖的葡萄籽">

修改placeholder里的字体样式：

 input::placeholder {color: pink;}

autofocus——自动聚焦

 <input type="search" name="" id="" autofocus="autofocus">

autocomplete——显示键入过的值

<input type="search" name="sear" id="" autocomplete="on">
<input type="search" name="sear" id="" autocomplete="off">

multiple——多选文件提交

 <input type="file" multiple="multiple">

二、CSS3 新特性

2.1 CSS3的现状

有兼容性问题，IE9以上才支持；
移动端支持优于PC端
不断改进中
应用相对广泛
现阶段学习：新增选择器和盒子模型以及其他特性

2.2 CSS3新增选择器

属性选择器
结构伪类选择器
伪元素选择器

2.3属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助类或者id选择器。

1.利用属性选择器可以不借助类选择器或者id选择器

input[value] {color: green;}

2.属性选择器可以选择属性=值的某些元素

 input[type=password] {color: pink;}

3.属性选择器可以选择属性值开头的某些元素

div[class^=icon] {color: red;}

4.属性选择器可以选择属性值结尾的某些元素

 section[class$=data] {color: blue;}

5.属性选择器可以选择包含属性值的某些元素

 section[class*=icon] {color: purple;}

注意：类选择器，属性选择器，伪类选择器权重都是10

2.4 结构伪类选择器

结构伪类选择器主要根据文档结构部来选择元素，常用根据父级选择器里面的子元素

选第一个子元素

ul li:first-child {background-color: green;}

选最后一个子元素

ul li:last-child {background-color: pink;}

E :nth-child(n)

n可以是数字，关键字和公式；
n如果是数字，就是选择第n个元素；
n可以是关键字，even偶数，odd奇数；

数字：

 /* 3 选择第几个的li */ul li:nth-child(3) {background-color: blue;}/* 选择第五个 */ul li:nth-child(5) {background-color: red;}

关键字：

  ul li:nth-child(even) {background-color: red;}

公式：

n——全选——从0开始，第0个元素没有，第9个没有，自动忽略
2n——等价于even
2n+1——等价于odd
5n——选中5的倍数
n+6——从第6个（包含第6个）到最后
-n+5——前5个，包含第5个

<title>结构伪类选择器nth-child()</title><style>/* 1. 选择奇数 *//* ul li:nth-child(odd) { *//* 2. 选择偶数 */ul li:nth-child(even) {background-color: red;}/* 3. 从0开始，第0个元素没有，第9个没有，自动忽略 */ol li:nth-child(n) {background-color: pink;}/* 4. 2n——等价于even */ol li:nth-child(2n) {background-color: green;}/* 5. 2n+1 ——等价于odd */ol li:nth-child(2n+1) {background-color: blue;}/* 6. 5n ——5的倍数 */ol li:nth-child(5n) {background-color: black;}/* 7. n+6 ——从第6个（包含第6个）到最后 */ol li:nth-child(n+6) {background-color: blueviolet;}/* 8. -n+5 ——前5个，包含第5个 */ul li:nth-child(-n+5) {background-color: aqua;}</style>
</head><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>

第一个 E:first-of-type

 ul li:first-of-type {background-color: red;}

最后一个 E:last-of-type

 ul li:last-of-type {background-color: black;}

E:nth-of-type(n) 用法和nth-child(n)一样

 ol li:nth-of-type(n) {background-color: green;}

E :nth-child(n)和E:nth-of-type(n) 的区别

nth-child会把所有的孩子都排序，它执行的时候先看序号，再去看元素div，匹配不上就不执行；

nth-of-type 会把先看指定元素，给指定元素排序，再选序号。

小结：

结构伪类选择器一般用于选择父级里的第几个孩子；
nth-child 先对父元素里面所有的孩子排序，找到第n个孩子，看标签是否匹配；
nth-of-type先找到标签，再对标签排序；
nth-child（n） n从0开始；
无序列表我们用nth-child 更多。
类选择器，属性选择器，伪类选择器，权重都是10

2.5 伪元素选择器（重点）

用CSS创建新标签元素，不需要HTML标签，简化HTML结构。

::before
::after

注意：

before和after创建一个元素，属于行内元素
新创建的元素在文档树中找不到，所以叫伪元素
语法：E::before{}
before和after必须有content属性
before在父元素内容前面创建元素；after在父元素内容后面插入元素
伪元素选择器和标签选择器一样，权重为1

伪元素选择器使用场景1：伪元素字体图标

 <title>伪元素选择器使用场景——伪元素字体图标</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?u3stqe');src: url('fonts/icomoon.eot?u3stqe#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?u3stqe') format('truetype'),url('fonts/icomoon.woff?u3stqe') format('woff'),url('fonts/icomoon.svg?u3stqe#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}div {position: relative;width: 300px;height: 50px;border: 1px solid #CCC;}div::after {position: absolute;right: 20px;line-height: 50px;content: '';font-family: 'icomoon';font-size: 20px;color: #CCC;}</style>
</head><body><div></div>
</body>

伪元素选择器使用场景2：仿土豆效果

 <title>伪元素仿土豆</title><style>.tudou {position: relative;width: 444px;height: 320px;margin: 50px auto;}.tudou img {width: 100%;height: 100%;}.tudou::before {display: none;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;background: url(images/hot.png) no-repeat center rgba(0, 0, 0, .3);}.tudou:hover::before {display: block;}</style>
</head><body><div class="tudou"><img src="data:images/sk.webp" alt=""></div><div class="tudou"><img src="data:images/sk.webp" alt=""></div><div class="tudou"><img src="data:images/sk.webp" alt=""></div>
</body>

伪元素选择器使用场景3：清除浮动

 <title>伪元素清除浮动</title><style>/* .clearfix::after {content: '';display: block;height: 0;clear: both;visibility: hidden;} */.clearfix::before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {/* I6 I7专有 */*zoom: 1}.box div {float: left;width: 200px;height: 200px;}.box .a {background-color: pink;}.box .b {background-color: green;}.footer {width: 500px;height: 300px;background-color: antiquewhite;}</style>
</head><body><div class="box clearfix"><div class="a">什么</div><div class="b">好家伙</div></div><div class="footer"></div>
</body>

2.6 CSS3盒子模型

box-sizing: border-box;

<title>CSS3盒子模型</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}div {width: 200px;height: 200px;background-color: green;border: 20px solid red;padding: 15px;box-sizing: content-box;}p {width: 200px;height: 200px;background-color: green;border: 20px solid red;padding: 15px;/* 不会撑开盒子 */box-sizing: border-box;}</style>
</head><body><div>胖胖的葡萄籽</div><p>小猪佩奇</p>
</body>

2.7 CSS3其他特性

CSS3滤镜 filter：

filter: 函数();    例如：filter: blur(5px);   blur模糊处理，数值越大越模糊

CSS3 calc函数

让你在声明CSS属性值时执行一些计算

width: calc(100%-80px);


<title>calc函数</title><style>.father {width: 300px;height: 200px;background-color: pink;}.son {/* calc(符号之间打空格) *//* width: calc(150px + 30px); *//* 子盒子永远比父盒子小30像素 */width: calc(100% - 30px);height: 30px;background-color: green;}</style>
</head><body><!-- 需求：子盒子永远比父盒子小30像素 --><div class="father"><div class="son"></div></div>
</body>

2.8 CSS过渡（重点）

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

从一个状态渐渐过渡另外一个效果，IE9以下版本不支持

经常和 : hover 一起搭配使用

谁做过渡给谁加

属性：宽高背景颜色内外边框 all
花费时间： 0.5s
运动曲线：默认ease
何时开始：默认0s

  <title>CSS3之过渡transition</title><style>div {height: 100px;width: 200px;background-color: pink;/* transition: width .5s ease .5s, height .5s ease .5s; *//* transition: width .5s, height .5s; *//* transition: height .5s ease .5s; *//* 变所有的 */transition: all .5s;}div:hover {width: 400px;height: 200px;background-color: green;}</style>
</head><body><div></div>
</body>

进度条案例：

进度条如何布局
过渡的使用

 <title>进度条</title><style>.ba {width: 200px;height: 20px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar {width: 50%;height: 100%;background-color: red;border-radius: 7px;transition: all .7s;}.ba:hover .bar {width: 100%;}</style>
</head><body><div class="ba"><div class="bar"></div></div>
</body>

广义的H5：HTML5＋CSS3＋javascript

狭义的HTML5 CSS3：HTML5结构标签本身