HTML5进阶教程

  • A+
所属分类: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 流式布局

  • 资源分享QQ群
  • weinxin
  • 官方微信公众号
  • weinxin
沙海
C语言项目源码分享
动力节点最牛Java自学基础教程
TripodCloud:性价比最高的CN2 GIA服务器
专业承接各类企业网站的开发和维护

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: