HTML5 & CSS3
新增标签 | 新增表单 | 新表单属性 |
---|---|---|
语义化标签 | input表单 | 限制输入属性 |
多媒体标签 |
-
新增语义化标签
-
<header> <nav> <artical> <section> <aside> <footer>
-
注意
- 此语义化标准是针对搜索引擎的
- 新增标签可在页面使用多次
- IE9中,需要将元素转换为块级元素
- 更常在移动端使用
-
多媒体标签
-
视频
-
支持格式:MP4,WebM,Ogg
-
谷歌浏览器会禁止自动播放,加muted属性
-
通常不适用controls组件
-
多属性
-
<media src="" controls="controls" ></media>
-
-
音频
-
支持格式:MP3,Wav,Ogg
-
<audio src="" controls="controls"></audio>
-
谷歌浏览器会禁止自动播放-通过JS解决
-
-
-
form表单-input
-
新增type的属性值,限制输入框的内容
-
当submit时会反馈
-
属性 属性值 说明 required required 该属性必填 placeholder 提示文本 提示信息,存在默认值不显示 autofocus autofocus 自动聚焦属性 autocomplete off/on 历史提示,加上name属性 multiple multiple 多选文件提交 -
CSS样式
- input::placeholder
- …
-
-
-
CSS3
-
有兼容性问题,IE9+才支持
-
移动端优于PC端
-
现阶段主要:新增选择器,盒子模型,其它特性
-
新增选择器
-
权重 10
-
属性选择器 结构伪类选择器 伪元素选择器 E [att] E:first-child ::before父元素内容前创建元素 E [att=“val”] E:last-child ::after父元素内容后创建元素 E [att^=“val”] E:nth-child(n) E [att$=“val”] E:first-of-type E[att*=“val”] E:last-of-type E:nth-of-type(n) -
n-----数字,表达式,关键字
- n从0开始
- 偶数–even,2n
- 奇数–odd,2n+1
- 选择所有孩子:n
- 前m个: -n+m
- 第m个开始: n+m
-
nth-child(n)& **nth-of-type(n)**区别
- nth-child(n)
- 先父元素所有孩子固定排序
- 执行nth-child(n)
- 再判断是否与nth前的E类型符合
- nth-of-type(n)
- 把子元素指定E类型的元素排序
- 再执行nth-of-type(n)
- nth-child(n)
-
伪元素选择器
-
利用CSS创建新标签元素,不需要HTML,简化HTML结构
-
否则层叠嵌套的元素过多
-
注意
- after,before创建一个元素–属于行内元素
- 伪元素:在HTML文档树中不存在
- 必须有content属性,同标签选择器权重==1
-
使用场景
-
1.伪元素字体图标 2.遮罩效果 3.清除浮动 子绝父相 :hover::after/before 父级添加after伪元素 父级添加双伪元素 -
after伪元素:后封闭
-
/* 清除浮动 */ .clearfix::after { content: ""; display: block; /*必须块级元素*/ height: 0; clear: both; visibility: hidden; }
-
-
双伪元素–前后封闭
-
/* 清除浮动 */ .clearfix::before,.clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1; }
-
-
-
其他
- 额外标签法:插入一个不可见块级元素
- overflow:hidden
-
-
-
新增盒子模型
-
原因:修改padding,border值会影响盒子原本大小box-sizing
-
属性值 组成 content-box width+padding+border border-box width -
border-box不会撑大盒子
-
-
其它特性
-
1. 图片变模糊 2. 盒子宽度计算width:calc函数 filter:模糊/颜色偏移 + - * / filter:blur(n) width:calc(100%-80px)
-
-
CSS3过渡
-
从一种状态变换为另一种样式时为元素增加效果
-
常与 :hover 搭配使用
-
transition
-
组成 作用 属性 需要过渡的属性 花费时间 秒 运动曲线 ease 何时开始 延迟触发时间 -
若想加多个属性
- 需要写在同一属性,用逗号隔开
- 所有属性: all
-
-
-
2D转换–右X下Y
-
移动盒子位置
- 定位,盒子外边距,2D转换移动
-
transform–实现元素
-
类别 方法 特点 位移–translate **1.**translate(x,y) **2.**translateX() **3.**translateY() **1.**不会影响其他元素; **2.**对行内标签无效果; **3.**百分比针对本身; 旋转–rorate **1.**transform-origin(x,y) **2.**rorate(x y) **1.**单位:deg; **2.**正-顺时针,负-逆时针; **3.**默认旋转中心; 缩放–scale **1.**scale(x,y)**2.**rorate(x y) **1.**单位:倍数; **2.**不影响其他盒子; **3.**默认中心放大-缩小 -
实现元素居中
- 定位:position:absolute
- top:50%; left:50%;
- 位移转换
- translate(-50%,-50%);
- 定位:position:absolute
-
转换中心点
- transform-origin()
- 参数–百分比、像素、方位名词
- transform-origin()
-
实现多个transform的顺序
- 位移—>其他
- transform:translate() rorate() scale()
-
-
-
CSS3—动画
-
设置多个节点,精确控制一个/组动画
-
比过渡更多变化,控制,连续自动播放等效果
-
定义动画–调用动画
-
动画序列
-
/*定义动画 关键帧*/ @keyframes 动画名称 { 0% { /*from*/ } 100% { /*to*/ } } /*调用动画*/ 元素 { /*使用动画*/ animation-name: 动画名称; /*持续时间*/ animation-duration: 持续时间; }
-
-
注意
- 位置移动是针对元素初始位置变化,而不是上一次变化结果
- 简写
- animation:
- name duration 曲线 delay count 是否反方向 起始/结束状态
- 暂停动画配合使用:animation-play-state:pause
- 返回:animation-direction:alternate (跑马灯)
- 播放结束样式:animation-fill-mode:forwords / backwords
-
animation-timing-function:曲线,默认ease
-
值 描述 linear 匀速 ease 低速-加快-变慢 ease-in 低速开始 ease-out 低速结束 ease-in-out 低速开始,结束 steps() 指定时间函数的间隔数量(步长)
-
-
热点图案例
- 点+阴影
-
步长案例
- 打字机效果-overflow,white-space,steps()
-
同一元素加多个动画,逗号隔开
-
-
CSS3—3D转换 Transform
-
三维空间
-
坐标轴 注意 X轴:水平向右 左负有正 Y轴:垂直向下 上负下正 Z轴:垂直屏幕 里负外正
-
-
主要内容
-
类别 方法 注意 3D位移:translate3d(x,y,z) translateX/Y/Z,translate3d 不可省略 3D旋转:rorate3d(x,y,z) 绕轴旋转 透视:perspective 父盒子 3D呈现:transform-style 2/3D环境 父盒子 - 透视
- 视距越小,所见越大;
- z轴越大,所见越大;
- 透视
-
-
3D旋转
-
语法 特点 rorateX() 横轴 rorateY() 纵轴 rorateZ() 2D rorate3d() x,y,z确定矢量
-
-
左手准则
-
3D呈现-------------------transform-style
-
控制子元素是否开启三维立体环境
- 默认:flat
- preserve-3d
-
在父盒子设计,子盒子呈现
-
两面翻转–只翻转一面解决
-
/*方法一*/ -webkit-backface-visibility:visible; backface-visibility: visible; /*方法二*/ transform: translateZ(1px); ```
-
-
旋转木马样式
-
-
-
浏览器私有前缀
-
兼容老版本的写法,较新的浏览器无需添加
私有前缀 属性 -moz- firefox私有 -mz- ie私有 -webkit- sarari,chrome私有 -o- Opera私有 -
/*建议写法*/ -moz-borer-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
-
-
广义的HTML5
- HTML5+CSS3+JavaScript
-
品优购项目
-
步骤
-
提前设计文件夹
-
设计相关页面命名
-
准备好首页,初始化CSS,并引入
-
模块化开发–common.css,公共部分
- 按功能划分
- 重复使用,更换方便
- 内容
- 头部,底部
- 版心宽度,清除浮动,页面文字颜色
- 按功能划分
-
主体部分–index.css
- main盒子给高度就不用清除浮动
-
主体部分-轮播图
- ul>li>img
-
favicon.ico图标
-
比特虫网站
- 标签下--
-
-
-
网站TDK三大标签SEO优化
- SEO-Search Engine Optimization搜索引擎优化
- 目的:对网站进行深度优化,从而帮网站获取免费流量,提升在搜索引擎上网站的排名,提高网站的知名度,点击率更高;
- SEO-Search Engine Optimization搜索引擎优化
-
TDK–优化标准
- Title-网站标题
- 网站名-网站介绍(30以内)
- Description
- 网站总体业务和主题概括
- 长尾关键词
- Keyword
- 6~8关键词,英文逗号隔开
-
常用模块类名命名
-
名称 说明 快捷导航栏 shortcut 头部 header 标志 logo 购物车 shopcar 搜索 search
| 热点词 | hotwords |
| 导航 | nav |
| 导航左侧 | dropdown 包含.dd .dt |
| 导航右侧 | navitems |
| 页面底部 | footer |
| 页面底部服务模块 | mod_service |
| 页面底部帮助模块 | mod_help |
| 页面底部版权模块 | mod-copyright | -
-
注意SVG和PNG的区别
-
-
LOGO SEO优化
- H1标签–a链接–a背景图片logo(点击可返回首页)
- 链接中放文字(网站名称),无显示文字
- 方法1:text-indent移到盒外,overflow-hidden
- 方法2:font-size=0;
- 链接title属性=提示文字
-
遇到问题
- search搜索框的按钮总是会与上下有缝隙,需要调整分辨率
- 解决:
- 不在父盒子search里设置边框样式
- 在input和button里设置样式
-
电梯侧导航
- 大盒子包含–楼层区,不设高度
- TabList-----TabContent
- 一般情况下,a如果包含有宽度的盒子,a需要转换为块级元素
-
列表页----list.html,list.css
-
注册页面-register.html
- 注册页面比较隐私,不需要SEO优化,保护用户信息
- 布局-header-register-footer
-
Web服务器
-
文件,数据库,应用程序,Web服务器
-
本地服务器–局域网,远程服务器–互联网
-
免费远程服务器–http://free.3v.do/
- 注册账号
- FTP管理-激活
- 记录主机名,用户名,密码,域名
- 利用cutftp软件上传到远程服务器
- 即可在浏览器中输入域名访问浏览器
-
GitHub免费