html5、css3——笔记整理

html5 兼容性：支持所有现代浏览器，IE9以下版本不支持

一、浏览器兼容性处理

方式 一：浏览器之间的样式存在差异，使用 normalize 重置浏览器默认样式。将normalize. css 文件放在css文件夹里，在样式里边引入。

"stylesheet" href="./css/normalize.css"/>

方式 二：强制兼容处理，如果是IE浏览器，强制使用谷歌的内核。

"X-UA-Compatible" content="IE=edge,chrome=1">

方式三：使用css hack 做IE9以下版本HTML5兼容处理。
(详细的css hack 方式，查看转载的另一篇博客《CSS hack》)
1、以下为几个常用的css hack语句，即css hack 条件注释法：

2、css hack 的类内属性前缀法：

            /*所有识别*/
            background-color: #1e0bd1;
            /*IE6、7识别*/
            +background-color: red;
            /*IE6识别*/
            _background-color: #1e0bd1;
            /*6,7,8,9识别*/
            background-color: pink \9;   

3、css hack 的选择器前缀法：
针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
如：

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效

方式四：引入PIE文件处理css3样式差异。
css3 样式在ie9以下不兼容，用css3 pipe来处理兼容性,方法：将PIE.htc文件和PIE.js 文件放在同一目录下，再使用 behavior 来处理。
主要处理css3 在 IE8 或者 IE7上的兼容性。

注意：

处理浏览器兼容性，一般先使用 normalize 重置浏览器默认样式；
再做强制兼容处理；
再使用csshack做IE9以下版本HTML5兼容处理；
如果还有差异，再引入PIE文件处理css3样式差异。

二、html5 新元素

1、
绘图标签，通过js在canvas上进行绘图，比如图表和其它图像。canvas主要做 cocos-2d引擎 、做网页游戏 ，是基于js的绘图API来制作。
2、新的多媒体元素标签
：视频
属性：src（视频的路径），auto play（自动播放），controls（控制器），loop（循环播放），可以通过js提供的api来制作视频控制

：音频
属性：src（视频的路径），auto play（自动播放），controls（控制器），loop（循环播放），可以通过js提供的api来制作视频控制

：是视频音频资源文件

3、新的表单元素标签 datalist
和，连用，为元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
需要使用 元素的 list 属性来绑定 元素。

"text" list="list"/>

4、秘钥标签，分为：私有秘钥（在本地），公有秘钥(在服务器)
5、

输出计算值，结合js来使用
6、

描述细节 ，summary元素包含detail元素的标题；detail标签兼容性不好

    
日志
    
学生今天没有休息！

7、

用来包表单、图片、代码

    "" alt=""/>

8、新的语义元素标签

页脚
头部
导航
定义内容区域
2020-05-01
文本的突出显示，默认带黄色
独立内容
侧边栏
类似span

9、进度条

"50" min="0" max="100">
"20" min="0" max="100">

10、自定义列表

    
信息
        
内容1
        
内容1
        
内容1
    
    
信息
        
内容2
        
内容2
        
内容2
    

三、css3样式

1、css3 字体文件引入
将下载好的字体文件放在项目文件夹里，再从样式表中引入，font-family是该字体的名称，src 是字体文件的路径。引入之后就可以使用该字体了。

2、border-radius 圆角

3、box-shadow 阴影
前两个值是0——全边框阴影；第一个值是阴影向右偏移的距离；第二个值是阴影向下偏移的距离

三个阴影样式从边框向外重叠，inset outset 阴影向内 向外

4、border-image
用法举例：边框图片,30代表切割图片的宽度slice，也可以用百分比来表示

单个属性

5、背景图片

6、背景颜色渐变

7、文本阴影

8、单行溢出省略

9、多行溢出省略

四、css3 里边的过渡

transition
属性值：linear 匀速； ease-in-out 慢进慢出；ease-in 慢进；ease-out 慢出
写法：

五、2D变换

transform
属性值：translate 平移；rotate 旋转；scale 缩放；skew 倾斜
transform-origin 设置变换的中心点
写法：

六、3D转换

构建三维空间：给元素设置属性 transform-style: preserve-3d;
设置透视点：perspective: 100px;

七、css3动画

八、viewport

"viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no">

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=3.0, user-scalable=no不是必需的，是否允许用户手动缩放根据网站的需求来定，但把width设为device-width基本是必须的，这样能保证不会出现横向滚动条。

width = device-width：宽度等于当前设备的宽度
initial-scale： 初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

九、媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。一般写在css样式代码的最后。
在使用media的时候需要先设置viewport，来兼容移动设备的展示效果。
语法：

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

用法举例：
1、不加限制条件，表示所有屏幕共有的样式

@media screen {
            .box{
                width:300px;
                background-color: #39a0ff;
            }
        }

2、min-width，从小到大写

@media screen and (min-width: 320px) {
            .box {
                width: 310px;
                background-color: #51cfff;
            }
        }
@media screen and (min-width: 768px) {
            .box {
                width: 758px;
                background-color: #51cfff;
            }
        }
@media screen and (min-width: 1024px) {
            .box {
                width: 1014px;
                background-color: #51cfff;
            }
        }
@media screen and (min-width: 1380px) {
            .box {
                width: 1080px;
                background-color: #51cfff;
            }
        }

3、写max-width，从大到小写

@media screen and (max-width: 1380px) {
            .box {
                width: 1024px;
                background-color: #ff966c;
            }
        }
@media screen and (max-width: 1024px) {
            .box {
                width: 768px;
                background-color: #ff966c;
            }
        }
@media screen and (max-width: 768px) {
            .box {
                width: 320px;
                background-color: #ff966c;
            }
        }
@media screen and (max-width: 320px) {
            .box {
                width: 100%;
                background-color: #ff966c;
            }
        }

4、min-width and max-width 不分顺序

@media screen and (min-width: 320px) and (max-width: 768px){
            .box {
                width: 320px;
                background-color: #51cfff;
            }
        }
@media screen and (min-width: 768px) and (max-width: 1024px){
            .box {
                width: 768px;
                background-color: #f2c0ff;
            }
        }
@media screen and (min-width: 1024px) and (max-width: 1380px){
            .box {
                width: 1024px;
                background-color: #ffb91b;
            }
        }

5、从外部引入样式的媒体查询
以下代码的意思是，当媒体满足特定的条件时，引入对应的样式表。

"stylesheet" href="./css/box.css"/>
"stylesheet" href="./css/media 1.css" media="screen and (min-width:320px) and (max-width:768px)"/>
"stylesheet" href="./css/media 2.css" media="screen and (min-width:768px) and (max-width:1024px)"/>
"stylesheet" href="./css/media 3.css" media="screen and (min-width:1024px) and (max-width:1380px)"/>

十、css3选择器

1、css2 属性选择器

[type] 匹配包含type属性的元素
[type=text] 匹配type属性为 text 的元素
input[type] 匹配有type属性的input元素
input[type=text] 匹配type属性为 text 的input元素
input[type=text][name=txt] 匹配type=text, name=txt 的 input 元素

2、css3 选择器应用举例

ul>li:first-child 指定只有当 li 是 ul 的第一个子级
ul>li:last-child 指定只有当 li 是 ul 的最后一个子级
.box:before 在.box 之前插入内容
.box:after 在.box 之后插入内容
ul>li:first-child~li ul里边的li是第一个子级，这个li之后的所有li
ul>li:first-child+li ul里边的li是第一个子级，这个li紧跟之后的那一个li
input[type^=te] type值以te 开头的input 元素
input[type$=xt] type值以xt 结尾的input 元素
input[type*=ex] type值包含ex 的input 元素
ul>li:first-of-type 每个li是其父级的第一个li
ul>li:last-of-type 每个li是其父级的最后一个li
ul>p:only-of-type 父元素里面仅有一个同类别标签的元素
:only-child 这个元素是其父级的唯一子元素
ul>li:nth-child(2) 选择子元素，括号里边写序号
ul>li:nth-last-child(2) 选择子元素，括号里边写序号
ul>li:nth-of-type(2) 选择子元素，括号里边写序号
ul>li:nth-last-of-type(2) 选择子元素，括号里边写序号
ul>*:not(p) ul 里边除过p 元素的所有元素

::selection 匹配元素中被用户选中或处于高亮状态的部分

::selection {
            color: deeppink;
            background-color: yellow;
        }

:checked 只对input的checkbox 和 radio 起作用

input:checked{
           -webkit-appearance: none;
        }

:disabled, :enabled一般用于input标签，选中每一个未启用或已启用的元素

     "text" disabled/>
     "button" enabled/>