HTML5进阶教程

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();
            }
 }

布局容器

• 在不同的屏幕下 宽度不一样
• 超小屏 （手机） < 768
• 小屏 （平板） < 992
• 桌面显示器 < 1200
• 电脑 1200
• 4k 电视
• @media screen 查询到任何屏幕

750 的设计图 html font-size : 100px 屏幕化分成7.5份

在750的设计图上 量的宽度是 400px 最终写

• px换成rem rem = 量的宽度/当前设计图宽度的font-size

量的宽度是 400px 400 / 100 4rem

如果说 我写的是 4rem 问 在 750的设计图下 盒子多宽

rem换成px rem * 当前屏幕下的 html 的 font-size

• 4rem * 100 = 400px

• 4rem 在 320屏幕下 宽度
  • 4 * 320/7.5 170px

和上面的没关系 屏幕化分成 15份

• 750屏幕下 font-size: 50px
• 360 font-size: 24px;

rem换成px rem * 当前屏幕下的 html 的 font-size

• 0.88rem 750屏幕下 0.88 * 50 = 44px 44/750 = 0.058666666666666666
• 0.88rem 360屏幕下 0.88 * 24 = 21.12px 21.12 / 360 = 0.05866666666666667

栅格系统 把布局容器 平分成12份

@media (min-width: 992px){}

• 媒体查询 当最小宽度是 992

• col-md-offset-1 margin-left: 1/12
• col-md-offset-2 margin-left: 1/6
• col-md-offset-3 margin-left: 1/4
• col-md-3 width: 3/12 ==> width: 25%;

@media (max-width: 1199px) and (min-width: 992px) {}

9992 – 1199

bootstrap

• 快速开发
• 开发确实 爽
• 对于 用户 体验不爽

• 迭代 v.9.00 v.901
  • 升级
  • 如果性能有要求 分开开发

flyxfa

col-md-2 只有屏幕宽度大于 992 才会有width: 16.66666667%;

flex rem 流式布局