蒋振飞的博客 - HTML5与CSS3新知识   
正在加载蒋振飞的博客...
V3.0
蒋振飞的博客

HTML5与CSS3新知识

发布时间: 2018年06月23日 发布人: 蒋振飞 热度: 468 ℃ 评论数: 0

一、HTML5新结构标签

1.h5新增的主要语义化标签

    ①header:页面头部、页眉。       
    ②nav:页面导航。
    ③article:一篇文章。
    ④section:文章中的章节。
    ⑤aside:侧边栏。
    ⑥footer:页面底部、页脚。

2.PC端兼容h5的新标签方法

    在页面中引入以下js文件:

<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

二、HTML5 新增表单控件

1.新增类型

    网址、邮箱、日期、时间、星期、数量、范围、电话、颜色、搜索

<label>网址:</label><input type="url" name="" required><br><br>
<label>邮箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>时间:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>颜色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>

2.新增常用表单控件属性

    ①placeholder 设置文本框默认提示文字。
    ②autofocus 自动获得焦点。
    ③autocomplete 联想关键词。

三、HTML5 音频和视频

1.audio标签

    支持格式:ogg、wav、mp3
    对应属性:
        ①autoplay 自动播放。
        ②controls 显示播放器。
        ③loop 循环播放。
        ④preload 预加载。
        ⑤muted 静音。

2.video标签

    支持格式:ogg、mp4、webM。
    属性:
        ①width。
        ②height。
        ③Poster。

3.可选第三方播放器

    ①cyberplayer。
    ②tencentPlaye。
    ③youkuplayer。

四、CSS权重

1.权重的概念

    CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。

2.权重的等级

    可以把样式的应用方式分为几个等级,按照等级来计算权重。
    ①!important,加在样式属性值后,权重值为 10000。
    ②内联样式,如:style="";,权重值为1000。
    ③ID选择器,如:#content,权重值为100。
    ④类,伪类和属性选择器,如: content、:hover 权重值为10。
    ⑤标签选择器和伪元素选择器,如:div、p、:before 权重值为1。
    ⑥通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0。

五、CSS3新增选择器

E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素
E:nth-last-child(n):匹配元素类型为E且是父元素的倒数第n个子元素
E:first-child:匹配元素类型为E且是父元素的第一个子元素
E:last-child:匹配元素类型为E且是父元素的最后一个子元素
E:only-child:匹配元素类型为E且是父元素中唯一的子元素
E:nth-of-type(n):匹配父元素的第n个类型为E的子元素
E:nth-last-of-type(n):匹配父元素的倒数第n个类型为E的子元素
E:first-of-type:匹配父元素的第一个类型为E的子元素
E:last-of-type:匹配父元素的最后一个类型为E的子元素
E:only-of-type:匹配父元素中唯一子元素是E的子元素
E:empty: 选择一个空的元素
E:enabled: 可用的表单控件
E:disabled: 失效的表单控件
E:checked: 选中的checkbox
E:not(s): 不包含某元素
E:target: 对应锚点的样式
E > F E:元素下面第一层子集
E ~ F E:元素后面的兄弟元素
E + F :紧挨着的兄弟元素
E[data-attr]: 含有data-attr属性的元素
E[data-attr='ok']: 含有data-attr属性的元素且它的值为“ok”
E[data-attr^='ok']: 含有data-attr属性的元素且它的值的开头含有“ok”
E[data-attr$='ok']: 含有data-attr属性的元素且它的值的结尾含有“ok”
E[data-attr*='ok']: 含有data-attr属性的元素且它的值中含有“ok”

六、CSS3圆角、阴影、rgba

1.CSS3圆角

    ①设置某一个角的圆角,比如设置左上角的圆角:

border-top-left-radius:30px 60px;

    ②同时分别设置四个角:

border-radius:30px 60px 120px 150px;

    ③设置四个圆角相同:

border-radius:50%;

2.CSS3阴影

box-shadow:h-shadow v-shadow blur spread color inset;
分别设置阴影:水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

3. rgba(新的颜色值表示法)

    ①盒子透明度表示法:

opacity:0.1;filter:alpha(opacity=10)(兼容IE);

    ②rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度。

七、CSS3 transition动画

1.transition-property 

    设置过渡的属性,比如:

width height background-color

2.transition-duration 

    设置过渡的时间,比如:

1s 500ms

3.transition-timing-function 

    设置过渡的运动方式
    ①linear 匀速。
    ②ease 开始和结束慢速。
    ③ease-in 开始是慢速。
    ④ease-out 结束时慢速。
    ⑤ease-in-out 开始和结束时慢速。
    ⑥cubic-bezier(n,n,n,n)
        比如:cubic-bezier(0.845, -0.375, 0.215, 1.335)。
    曲线设置网站:https://matthewlein.com/ceaser/

4.transition-delay 

    设置动画的延迟。

5.transition

    property duration timing-function delay 同时设置四个属性。

八、CSS3 transform变换

①translate(x,y) 设置盒子位移。
②scale(x,y) 设置盒子缩放。
③rotate(deg) 设置盒子旋转。
④skew(x-angle,y-angle) 设置盒子斜切。
⑤perspective 设置透视距离。
⑥transform-style flat | preserve-3d 设置盒子是否按3d空间显示。
⑦translateX、translateY、translateZ 设置三维移动。
⑧rotateX、rotateY、rotateZ 设置三维旋转。
⑨scaleX、scaleY、scaleZ 设置三维缩放。
⑩tranform-origin 设置变形的中心点。
①①backface-visibility 设置盒子背面是否可见。

九、CSS3 animation动画

1.@keyframes 

    定义关键帧动画。

2.animation-name

    动画名称。

3.animation-duration

    动画时间。

4.animation-timing-function

    动画曲线。
    ①linear 匀速。
    ②ease 开始和结束慢速。
    ③ease-in 开始是慢速。
    ④ease-out 结束时慢速。
    ⑤ease-in-out 开始和结束时慢速。
    ⑥steps 动画步数。

5.animation-delay

    动画延迟。

6.animation-iteration-count

    动画播放次数 n|infinite。

7.animation-direction

    ①normal 默认动画结束不返回。
    ②Alternate 动画结束后返回。

8.animation-play-state

    动画状态。
    ①paused 停止。
    ②running 运动。

9.animation-fill-mode

    动画前后的状态。
    ①none 不改变默认行为。
    ②forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
    ③backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
    ④both 向前和向后填充模式都被应用。

animation:name duration timing-function delay iteration-count direction;同时设置多个属性

十、CSS浏览器前缀

1.浏览器样式前缀

    为了让CSS3样式兼容,需要将某些样式加上浏览器前缀:
    -ms- 兼容IE浏览器
    -moz- 兼容firefox
    -o- 兼容opera
    -webkit- 兼容chrome 和 safari

比如:div{  -ms-transform: rotate(30deg);  }

2.自动添加浏览器前缀

    目前的状况是,有些CSS3属性需要加前缀,有些不需要加,有些只需要加一部分,这些加前缀的工作可以交给插件来完成,比如安装: autoprefixer。
    Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。

十一、移动端页面布局

1.移动端app分类

    1) Native App 原生app手机应用程序
        使用原生的语言开发的手机应用,Android系统用的是java,iOS系统用的是object-C。

    2) Hybrid App 混合型app手机应用程序
        混合使用原生的程序和html5页面开发的手机应用。

    3) Web App 基于Web的app手机应用程序
        完全使用html5页面加前端js框架开发的手机应用。

2.Viewport 视口

    ①视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大。
    ②目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条。
    ③为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。
    ④可以用 meta 标签,name=&ldquo;viewport &rdquo;将视口的大小设置为和移动设备可视区一样的大小。

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

3. 视网膜屏幕(retina屏幕)清晰度解决方案

    视网膜屏幕指的是屏幕的物理像素密度更高的屏幕,物理像素可以理解为屏幕上的一个发光点,无数发光的点组成的屏幕,视网膜屏幕比一般屏幕的物理像素点更小,常见有2倍的视网膜屏幕和3倍的视网膜屏幕,2倍的视网膜屏幕,它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕,它的物理像素点大小是一般屏幕的1/9。
    图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样,但是由于视网膜屏幕的物理像素点比一般的屏幕小,图像在上面好像是被放大了,图像会变得模糊,为了解决这个问题,可以使用比原来大一倍的图像,然后用css样式强制把图像的尺寸设为原来图像尺寸的大小,就可以解决模糊的问题。

3.background新属性

    background-size:
    ①length:用长度值指定背景图像大小。不允许负值。
    ②percentage:用百分比指定背景图像大小。不允许负值。
    ③auto:背景图像的真实大小。
    ④cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
    ⑤contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

4.PC及移动端页面适配方法

    设备屏幕有多种不同的分辨率,页面适配方案有如下几种:

    1) 全适配

        流体布局+响应式布局。

    2) 移动端适配

        流体布局+少量响应式。
        基于rem的布局。
        弹性盒模型。

5.流体布局

    流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线无法用百分比,可以使用样式中的计算函数 calc() 来设置宽度,或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
    1) calc()

        可以通过计算的方式给元素加尺寸,比如: width:calc(25% - 4px);

    2) box-sizing

        content-box 默认的盒子尺寸计算方式。
        border-box 置盒子的尺寸计算方式为从边框开始,盒子的尺寸,边框和内填充算在盒子尺寸内。

6.响应式布局

    响应式布局就是使用媒体查询的方式,通过查询浏览器宽度,不同的宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕(pc、平板、手机)。

7. 基于rem的布局

    首先了解em单位,em单位是参照元素自身的文字大小来设置尺寸,rem指的是参照根节点的文字大小,根节点指的是html标签,设置html标签的文字大小,其他的元素相关尺寸设置用rem,这样,所有元素都有了统一的参照标准,改变html文字的大小,就会改变所有元素用rem设置的尺寸大小。
    安装cssrem,cssrem插件可以动态地将px尺寸换算成rem尺寸。

git clone https://github.com/flashlizi/cssrem

    进入packages目录:

Sublime Text -> Preferences -> Browse Packages...

    复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。
    配置参数 参数配置文件:

Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例,默认为40
max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6
available_file_types - 启用此插件的文件类型。默认为:[".css", ".less", ".sass"]。

8.弹性盒模型布局

    ①容器属性

display : flex,声明使用弹性盒布局
flex-direction : row | row-reverse | column | column-reverse,确定子元素排列的方向
flex-wrap : nowrap | wrap | wrap-reverse,元素超过父容器尺寸时是否换行
flex-flow : flex-direction | flex-wrap,同时设置flex-direction 和 flex-wrap
justify-content : flex-start | flex-end | center | space-between | space-around,子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的分布方式
align-items : flex-start | flex-end | center | baseline | stretch,子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的垂直方向的分布方式
align-content : flex-start | flex-end | center | space-between | space-around | stretch,设置多行子元素在行方向上的对齐方式

    ②条目属性

flex : none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>,同时设置flex-grow 和 flex-shrink 以及 flex-basis
flex-grow : number,表示的是当父元素有多余的空间时,这些空间在不同子元素之间的分配比例
flex-shrink: number,当父元素的空间不足时,各个子元素的尺寸缩小的比例
flex-basis :length | percentage | auto | content,用来确定弹性条目的初始主轴尺寸
align-self :auto | flex-start | flex-end | center | baseline | stretch,覆写父元素指定的对齐方式
order : integer,改变条目在容器中的出现顺序

打赏 蒋振飞

取消

感谢您的支持,我会继续努力的!

扫码支持
一分也是爱     一块不嫌多

点击 支付宝 或 微信 打赏蒋振飞

打开支付宝扫一扫,即可进行扫码打赏哦

评论列表