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免费
2359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
