HTML和CSS
新增语义化标签
HTML5的新增特性主要是针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本上是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
声明：
新特性增加了很多，但是我们专注于开发常用的新特性。
HTML5新增的语义标签
以前布局，我们基本用div来做，div对于搜索引擎来说，是没有语义的。
HTML5新增的语义标签
<header>: 头部标签
<nav>:导航标签
<article>:内容标签
<section>:定义文档某个区域
<aside>:侧边栏标签
<footer>:尾部标签
注意：
- 这种语义化标签主要是正对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中，需要把这些元素转换为块级元素
- 其实，我们移动端更喜欢使用这些标签
新增多媒体标签
一、主要包括两个：
1、音频： “<audio，>
2、视频： <video。>
使得他们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。
二、
HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的
- 视频<video，>
当前<video，>元素支持三种视频格式：尽量使用MP4格式
语法：
<video width="320" height="240" controls="controls">
<source src ="movie.mp4" type="video/mp4">
<source src ="movie.ogg" type="video/ogg">
您的浏览器不支持<video>标签播放视频
</video>
语法：
<video src="视频地址"></video>
video{
width:"320" ;//为video设置宽高
height:"240";//为video设置高
controls:"controls"; //为视频屏幕上设置播放按钮
poster:"images/1.png" ;//放图片的地址，为未加载出来的视频提供展示照片，不黑屏
muted:"muted"; //将视频自动静音，并显示静音按钮
autoplay:"autoplay" ;//打开视频或页面时视频自动播放
loop:"loop";//使得 循环播放
}
新增音频标签
HTML5在不是要看哪个插件的情况下，也可以原生的支持音频合适文件的播放，当然，支持的格式是有限的。
音频<audio，>
当前<audio，>元素支持的三种音频格式
语法：
<audio src="文件地址" controls="controls"></audio>
<audio controls="controls">
<source src="happy.mp3" type ="audio/mpeg">
<source src="happy.ogg" type ="audio/ogg">
您的浏览器暂不支持<audio>标签
</audio>
- 谷歌浏览器把音频和视频自动播放禁止了
多媒体标签总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器吧音频和视频自动播放禁止了
- 我们可以给视频标签添加muted属性来静音播放视频，音频不可以（可以通过JavaScript解决）
- 视频标签是重点，我们经常设置自动播放，不使用contros控件，循环和设置大小属性
新增input标签
新增input类型
- 重点记忆：number、tel、search这三个
新增表单属性
<form action="">
<input type="tel" required="required">//required表示内容不能为空
<input type="tel" placeholder="请输入电话号码">//表示在表单里面的提示内容，输入文字时自动消失
<input type="file" multiple="multiple">//可以同时上转多个文件
<input type="search" autocomplete="off">//表单默认是打开显示历史输入记录的，要设置为off，关闭之后就不会出现以前输入过的文字，
<input type="search" autofocus="autofocus">//表示进入表单后，自动给对该表单聚焦，不点击直接就可以向里面输入内容
</form>
- 可以通过以下方式修改placeholder里面的字体颜色
input::placeholder{
color:pink;
}
css3新特性
新增选择器
css3给我新增了选择器，可以更加便捷欸，更加自由的选择目标元素
- 属性选择器（权重10）
- 结构伪类选择器（权重10）
- 伪元素选择器（权重10）
属性选择器
属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器。
<style>
/* 必须时input 但是同时具有value这个属性 选择这个元素; */
/* <!-- 利用属性选择器就可以不应借助于类或则id选择器 --> */
input[value] {
color: pink;
}
/* <!-- 属性选择器还可以选择属性=值的某些元素，重点务必掌握的。 -->; */
input[type=text] {
color: pink;
}
/* <!-- 属性选择器可以选择 属性值开头的某些元素--> */
div[class^="icon"] {
color: pink;
}
/* <!-- 属性选择器可以选择属性值结尾的某些元素 --> */
section[class$=data] {
color: blue;
}
div[class*=icon],
section[class*=icon] {
color: red;
}
</style>
</head>
<body>
<!-- 利用属性选择器就可以不应借助于类或则id选择器 -->
<!-- <input type="text" value="请输入用户名">
<input type="text" name="" id=""> -->
<!-- 属性选择器还可以选择属性=值的某些元素，重点务必掌握的。 -->
<input type="text" value="">
<input type="password" name="" id="">
<!-- 属性选择器可以选择 属性值开头的某些元素-->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div class="icon5">我是打酱油的</div>
<!-- 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon1-data">我是哥斯拉</section>
<section class="icon1-ico">那我是谁</section>
<!-- 属性选择器可以选择属性值开头的的所有 元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon1-data">我是哥斯拉</section>
<section class="icon1-ico">那我是谁</section>
</body>
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
新增nth-child选择器
<style>
/* 选择ul里面的第一个li孩子标签; */
ul li:first-child {
color: pink;
}
/* 选择ul里面的最后一个li孩子标签; */
ul li:last-child {
color: blue;
}
/* 选择ul里面的奇数的li孩子标签; */
ul li:nth-child(odd) {
color: red;
}
/* 选择ul里面的偶数的li孩子标签; */
ul li:nth-child(even) {
color: pink;
}
/* 选择ul里面的所有li孩子标签; */
/* nth-child( n);,这里面必须写n，其他均无法成立，n从0开始 每次加1 往后面计算 这里必须是 n 不能是其他字母，他代表选择了所有的孩子; */
ul li:nth-child(n) {
color: yellow;
}
</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>
<li>我是第9个孩子</li>
<li>我是第10个孩子</li>
</ul>
</body>
nth-child( n );这里面必须写n，其他均无法成立，n从0开始 每次加1 往后面计算 这里必须是 n 不能是其他字母，他代表选择了所有的孩子
结构伪类选择器
nth-child(n)选择某个父元素的一个或多个特定的子元素
- n可以是数字，关键字和公式
- n如果是数字，就是选择第n个子元素，里面的数从1开始。。。
- n可以是关键字:even偶数，odd奇数
- n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或则超出了元素的个数会被忽略）
公式如下：
<style>
/* n是从0开始，2n则是用2乘以n,依次相乘，代表的是偶数项;*/
ul li:nth-child(2n) {
color: skyblue;
}
/* 代表的是偶数项; */
ul li:nth-child(2n+1) {
color: pink;
}
</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>
<li>我是第9个孩子</li>
<li>我是第10个孩子</li>
</ul>
</body>
nth-child和nth-of-type的区别
区别：
- nth-child对元素里面所有孩子排序选择（序号是固定的，先找到第n个孩子，然后看看是否和E匹配）
- nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子。
<style>
section di v:nt-child() {}
//nth-of-type 会把指定元素的盒子排列序号
//执行的时候先看 div指定的元素，
//div指定的元素 之后回去看：nth-of-type（1） 第几个孩子
section div:nth-of-type(){}
<style>
<body>
<ul>
<p>光头强</p>
<li>熊大</li>
<li>熊二</li>
</ul>
</body>
小结：
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child对父元素里面所有孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配
- nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找到第n个孩子
- 关于nth-child(n)我们要知道n是从0开始计算的，要记住常用的公式
- 如果是无序列表。我们肯定用nth-child更多
伪元素选择器（重点）
伪元素选择器可以帮助我们利用css创建新标签元素，而不需要HTML标签，从而简化HTML标签结构。
注意：
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法：element::before{}
- before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素的后面插入元素
- 伪元素选择器font>和标签选择器一样，权重为1
伪类选择器的基本使用
<style>
/* 这是在div盒子的前面添加内容 */
div::before {
content: '小明';
}
/* 这是在div盒子的后面添加内容 */
div::after {
content: '小孩子';
}
</style>
</head>
<body>
<div>
是
</div>
</body><div>
是
</div>
- 运行结果
伪元素选择器的使用场景
伪元素选择器的使用场景1：伪元素字体图标
<style>
.wys {
position: relative;
width: 200px;
height: 100px;
border: 1px solid red;
}
.wys::before {
content: "";
width: 12px;
height: 12px;
border: solid pink;
border-width: 1px 0 0 1px;
/* 使得他旋转45度 */
transform: translate(-100%, -100%) rotate( -45deg);
position: absolute;
left: 50%;
top: 50%;
}
</style>
<body>
<div class="wys"></div>
</body>
浙公网安备 33010602011771号