HTML5进阶教程

沙海

165
文章

2
评论

2018年7月21日23:25:44

评论 106 7944字阅读26分28秒

01

h5

html
css
js

语义化标签

header 头部标签
nav 导航栏
footer 尾部
section 区域
aside 侧边栏
article 文章
audio 音频
video 视频
- autoplay=autoplay 自动播放谷歌把他禁用了
- muted = muted 静音有了静音能自动播放
- controls = controls 控制面板
- poster=”图片路径” 视频播放前的图片
- loop =loop 单曲循环
- <source src=”路径” />
input
- type=”text” 文本框
- type=”password” 密码框
- tye=”button” 按钮
- type=”number” 数字在移动端会自动打开数字键盘
- type=”tel” 电话没有校验类型
- type=”search” 搜索
  - 属性
  - value 默认值
  - defaultvalue 默认值
  - placeholder 占位符
  - autofocus 自动获取焦点
  - autocomplete =”on” 必须要有name 表单提交过
  - required 必须验证

选择器

属性选择器

权重 10 伪类 10 伪元素10
语法 []
[c ] 表示选中属性是 c 的标签
[ c = “a” ] 表示选中属性是 c 属性值是 a 的标签
[ c *= “a” ] 表示选中属性是 c 只要属性值有一个是 a 的标签
[ c ^= “a” ] 表示选中属性是 c 只要属性值开头是 a 的标签
[ c $= “a” ] 表示选中属性是 c 只要属性值结尾是 a 的标签

伪类

:hover

鼠标经过的时候
伪元素 content里面的内容选不中伪元素没有hover 状态

:focus

文本框获得焦点

nth-child()

偶数 2n even
奇数 2n + 1 odd
n 是从0开始的
从个数数不限定子元素类型

nth-of-type

从子元素的类型来数的限定的子元素类型不管子元素在任何位置

并集选择器

div , p , a {}

交集

span.box span:nth-child()

伪元素

::before
::after
必须要有content
默认是行内元素
本质就是一个 HTML标签
伪元素hover
div:hover::after {}

2D移动

transform: translate(100px, 200px) x 100px y 200px
- 不会影响后面元素
transform: translate(50%, 50%) 这个百分比相对于自身

02

旋转

transform: rotate( 180deg );
- 顺时针是正的
- 逆时针旋转是负的
- 类似转盘抽奖旋转是Z轴
transition ：过度
- 过度写在本身上
- 过度一般执行一次
transform-origin: left top; 左上
transform-origin: 50px 50px; 左上改变旋转中心
background-position: left top;

缩放

transform: scale(2); 宽度和高度都放大2倍
缩小小于1
transform: scale(2 , 1.5 ); 宽度放大2倍高度放大1.5 倍

旋转移动注意点

旋转之后坐标轴会发生改变
一般我们先移动在旋转

动画

animation:
 css
@keyframes  aaa {
  0% {
   }
  100% {
      transform:  translate(1000px, 100px);
      transform:translateX();
    }
}
div {
    /*   动画的名字  */
    animation-name:   aaa;
    动画持续时间
    animation-duration: 2s;
    动画运动的曲线   linear  匀速 
    animation-timing-function:  ease;
    动画延时
    animation-delay: 2s;
    动画播放的 次数    infinite 无限循环 
    animation-iteration-count:  infinite
    动画播放的方向 
    animation-direction: normal;   alternate;
    动画结束后的状态  forwards  结束的状态   开始的状态 backwards
    animation-fill-mode: forwards;  
    停止动画
    animation-play-state: paused;
    无限循环  2s   infinite   forwards    alternate  
}

rgba 和 opacity的区别

rgba 只让背景透明内容不透明
opacity 让背景透明和内容都透明

03

看到盒子做动画的都是定位

3D

x x轴从右正左边负的
y y轴从上往下下面是正的
z Z 轴从里往外迎面而来
大拇指代表的是 x 轴
食指（大拇指旁边）代表的是y 轴
中指（大拇指旁边的旁边）代表的是Z轴
大拇指食指中指垂直的状态

transform: translate( 100px , 300px ); 注意：这里没有第三个值
transform: translate( 100px ); x 轴移动 100px y轴没有移动
transform: translateX(100px) translateY (100px) translateZ (100px);
transform: translate3d( 10px, 20px, 30px );
transform: translate3d( 10px, 0 , 30px );
Z 轴只能给 px

perspective 透视
透视作用：开启3D效果
透视写到被观察元素的父盒子上面
透视单位 px perspective : 100px 和 perspective : 1000px perspective : 100px 的盒子更大
近大远小
一般透视的距离要大于 translateZ 的值因为小于 translateZ 的值我们在屏幕上看不到盒子

X轴旋转

transform: rotateX( 100deg );

左手法则：
- 1、左手握拳
- 2、 大拇指指向 x 轴正方向
- 3、其余四个手指弯曲的方向顺时针为正方向
X 轴旋转类似于拉单杠旋转

Y轴旋转

transform: rotateY( 100deg );

左手法则：
1、左手握拳
2、大拇指指向 Y 轴正方向
3、其余四个手指弯曲的方向顺时针为正方向
Y 轴旋转类似于钢管舞

Z轴旋转

transform: rotateZ( 100deg );

左手法则：

1、左手握拳
2、大拇指指向 Z 轴正方向
3、其余四个手指弯曲的方向顺时针为正方向

transform-style : preserve-3d:

子元素默认没有3D效果
加给子元素的直接父元素

04

手机屏幕的现状移动开发现状

碎片化特别严重

视口看做一个相框

浏览器显示内容的区域

布局视口
- 移动端布局视口 980px PC 端布局视口浏览器有多宽
视觉视口
- 屏幕的宽度
理想视口
- 屏幕的宽度和设计图一致
- 需要添加一个meta 标签
SEO 搜索引擎优化 tdk

标准视口设置

<meta name="viewport"   content=" width=device-width ,  initial-scale = 1.0, user-scalable=no , minimum-scale =  1.0, maximum-scale = 1.0  "  />
  width=device-width    宽度等于设备的宽度 
  user-scalable=no   不允许用户缩放  
  maximum-scale = 1   最大缩放比  
  minimum-scale = 1   最小缩放比 
  initial-scale = 1  初始缩放比  
  快捷键   meta:vp+  tab

物理像素

物理像素就是我们说的分辨率 iPhone8的物理像素是 750 * 1334
pc端一个物理像素(px)能放一个物理像素点
iPhone8 一个开发尺寸(px) = 2个物理像素
物理像素比

为什么需要多倍图

retina 高清屏物理像素比 1:1 1:2 1:3
1:2 1CSS 开发像素对应 2个物理像素点
多倍图防止图片失真
移动端你量的图片 40px 实际需要80px的图片

背景图的大小

background-size: 500px; 宽度是500 高度自适应
background-size: 50%；父元素宽度的一半
background-size: cover ; 图片等比例放大或者缩小图片完全充满内容区域图片可能显示不完整
background-size: contain; 图片等比例放大或者缩小但是可能盒子有空白区域

移动端开发解决方案

单独开发一套移动端代码
- 性能好
响应式
- 一套代码性能不好

初始化css base.css 推荐的第三方 normalize.css

box-sizing: border-box; 一旦设置这个属性 width 是多少盒子宽高就是多少

移动端特殊样式

    /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
    -webkit-appearance: none;
    /*禁用长按页面时的弹出菜单*/
    img,a { -webkit-touch-callout: none; }

移动端常见布局

百分比布局
- 流式布局宽度使用百分比
flex 布局
less + rem
混合布局

max-height: 最大高度

min-height: 最小高度

京东项目

创建网站目录H5
创建css 主要存放css文件
- normalize.css 项目初始化的文件
- index.css 主要放首页的css
images 存储图片的目录
upload 经常更改的产品图片
index.html 首页

一般引入第三方的CSS文件首选引入他自己写的放在最后面
在移动端图片一定要注意倍图问题
行内块默认是基线对齐 vertical-align: baseline
- vertical-align:middle;
- vertical-align:top;
- vertical-align:bottom;
- display: block;

移动 web 和 APP 的区别
- 移动 web 在手机浏览器 中访问的网站都是移动 web
- APP 软件微信 QQ 手机淘宝客户端需要下载安装

圣杯布局双飞翼布局
- 两侧固定中间自适应
  - 结构
    - 先来一个一号大盒子大盒子里面左中右 3个盒子
    - 左和右侧的盒子定位（绝对定位）一号大盒子来个相对定位（子绝父相）
    - 中间的盒子是标准流给中间的盒子一个左右的margin
  - 盒子什么时候塌陷
    - 嵌套的盒子当子盒子设置margin-top 的时候会发生塌陷
    - 给父元素 overflow:hidden
    - 给父元素 padding-top
    - 给父元素 border-top
    - 浮动绝对定位和固定定位

伪元素默认的是行内元素同时伪元素必须要有content
伪元素就是一个标签

2倍精灵图做法
- PS里面可以把图片缩放一倍测量 x 和 y
- 精灵图 x和 y 都是负的
- background-size: 修改背景图尺寸
注意： background-size 在精灵图里面一定不要加 50%

常见图片格式
- jpg ，png, gif , tmp
- webp 谷歌比jpg 更小色彩更丰富
- dpg 京东

line-height: 1.5 表示盒子的高度会由font-size的大小乘以行高的倍数

.news a:nth-child(n+2) n的取值从0开始
.news a:nth-child(-n+2)
box-sizing: border-box; 盒子最终设置 width是多少盒子最终宽度就是多少

05

flex 布局

原理

给直接父元素添加flex 控制子元素的位置

控制主轴方向

display: flex;
主轴可能是 x 轴也可能是 y轴
flex-direction: row ; 默认是x轴从左到右
flex-direction: row-reverse ; 从右到左
flex-direction: column; 主轴变成y轴从上到下
flex-direction: column-reverse; 从下到上
主轴和侧轴垂直的

控制主轴子元素的排列方式

justify-content: flex-start; 默认从主轴头部开始
justify-content: flex-end 从尾部开始最后在尾部
justify-content: center; 居中
justify-content: space-around ; 平分剩余空间
justify-content:space-between; 先2边贴边中间再平分剩余空间
justify-content 永远只控制主轴

设置子元素换行

flex-wrap: nowrap; 不换行
flex-wrap: wrap 换行

控制侧轴子元素显示 align-items 单行单列

align-items: center; 在侧轴上居中
align-items: flex-start; 默认头部开始
align-items: flex-end ; 尾部开始
align-items:stretch; 子元素拉伸子元素不能设置高度
align-items 控制侧轴单行或者单列

控制侧轴多行子元素显示 align-content 多行多列

align-content: 控制多行多列
align-content: space-around; 平分剩余空间
align-content: space-between; 先2边贴边中间再平分剩余空间

flex-flow

flex-flow: flex-direction flex-wrap;
flex-flow: column wrap; 主轴是y轴子元素换行

flex:number; 子元素占据剩余空间的比例

当前子元素所占的比例 = 当前子元素的flex的值 / 所有子元素的flex值得和（ / 除以）

flex:number;

携程在线

技术选型
- 流式布局
- flex
- less + rem
- 混合

注意点第三方样式永远放在自己写的样式的前面

固定定位盒子居中

left:50%; 如果盒子有具体宽度 margin-left: – 自身宽度的一般
left:50%; transform: translateX(50%); transform 中百分比是相对于自身的

search部分

首先来一个大盒子大盒子里面在嵌套2个子盒子
左侧是一个 div 右侧是一个a标签

左侧自适应右侧固定

百分比布局的时候
- 给右侧的盒子固定宽高子绝父相进行定位
- 左侧的盒子宽度是100%; 给一个margin-right
flex 布局
- 首先给父元素开启flex display:flex
- 给右侧的盒子固定宽高
- 给左侧的盒子flex :1;

移动端背景图怎么做

在ps里面把缩小 2倍项目中的原图宽度还是208
量取小图标的位置
background-size 缩小背景图、

盒子阴影 box-shadow
文字阴影 text-shadow

word-spacing 英文之间的距离

letter-spacing 汉字之间的距离

###扩展

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果

linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...)
第一个参数表示线性渐变的方向，
1.  to top：设置渐变从下到上。相当于: 0deg
2.  to right：设置渐变从左到右。相当于: 90deg;   
3.  to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。也可以直接指定度数，如45deg;
4.  to left：设置渐变为从右到左。相当于: 270deg;

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

radial-gradient(形状 大小 坐标,颜色1，颜色2...)
形状shape:circle:产生正方形的渐变色   ellipse:适配当前的形状

em

em 是一个单位如果自身有font-size 会参照自身的font-size 来计算
如果自身没有就是找的父元素的font-size 来计算

rem

rem 只会参照html 的font-size 字体大小

rem 原理

等比例缩放

媒体查询

根据不同的屏幕加载不同的样式
@media screen and ( max-width: 800px ) {}

css

无法计算
不方便扩展和维护

less

支持运算
css预处理语言
@ 变量名 : 变量值 ;
变量名不能数字字母数字不要使用中文
变量名区分大小写

注意： less 浏览器不支持但是编译之后的css 我们才需要引入

* 乘以
/ 除
// 1. 我们运算符的左右两侧必须敲一个空格隔开// 2. 两个数参与运算如果只有一个数有单位，则最后的结果就以这个单位为准// 3. 两个数参与运算，如果2个数都有单位，而且不一样的单位最后的结果以第一个单位为准

sass scss

w100% 750 –》 750px 640 –> 640px 320 —》 320px
1rem 750 –》 html{ font-size: 75px }
10rem 750 –》 html{ font-size: 75px } 640 —-> html{ font-size: 64px }

rem适配原理

等比例缩放
根据不同的屏幕设置不同的html 的font-size 字体大小

less + rem
淘宝 flexible.js –

ui 给的设计图一般是 750 或者640px

引入less @import “common”;

渐进增强
- 先开发低版本在开发高版本
优雅降级
- 先开发高版本在兼容ie678

实际工作中拿到的设计图只有一个一般给你 750px 那你就要用750宽的font-size
给你 360px 那你就要用360宽的font-size

flexible.js 默认把屏幕化成10份每一个屏幕下的html 的font-size 都算好了
一般给你 750px 750的html font-size 75

  @media (-webkit-min-device-pixel-ratio: 2) {
            div {
                background-color: pink;
                加载2倍图图片
                background-image: url();
            }
        }
  @media (-webkit-min-device-pixel-ratio: 3) {
            div {
                background-color: yellow;
                 加载3倍图图片
                background-image: url();
            }
 }