HTML5和CSS3基础知识总结

基础知识

常用浏览器

• 常用的五大浏览器: IE, 火狐(Firefox), 谷歌(Chrome), Safari 和 Opera 等.
  
• 浏览器内核(渲染引擎): 负责读取网页内容, 整理讯息, 计算网页的显示方式并显示页面
• IE: Trident; (IE, 猎豹安全, 360极速浏览器, 百度浏览器)
• Firefox: Gecko; (火狐浏览器内核)
• Safari: Webkit; (苹果浏览器内核)
• Chrome/Opera: Blink; (Chrome / Opera 浏览器内核, Blink 其实是 WebKit 的分支)
• 国内浏览器一般采用 Webkit/Blink 内核(360, UC, QQ, 搜狗等)

浏览器的私有前缀

浏览器的私有前缀是为了兼容老版本的写法, 比较新版本的浏览器无需添加

• -moz-: 代表 firefox 浏览器私有属性
• -ms-: 代表 ie 浏览器私有属性
• -webkit: 代表 safari, chrome 私有属性
• -o-: 代表 Opera 私有属性

html

块级元素

常见的块级元素有: <h1> ~ <h6>, <p>, <div>, <ul>, <ol>, <li>等, 其中 <div> 标签是最典型的块元素
块级元素的特点:

• 独占一行
• 高度, 宽度, 外边距, 内边距都可以自己控制
• 宽度默认是容器(父级宽度)的100%
• 是一个容器及盒子
• 文字类的元素内不能使用块级元素
• <p> 标签主要用于存放文字, 因此, <p> 里面不能放块级元素, 特别是 <div>
• 同理,<h1> ~ <h6> 等都是文字类块级标签, 里面也不能放其他块级元素

行内元素

常见的行内元素有 <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span> 等, 其中 标签是最典型的行内元素, 也称为内联元素
行内元素的特点:

• 一行上可以显示多个行内元素
• 高, 宽直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素
• 链接里面不能放链接
• 特殊情况链接 <a> 里面可以地方块级元素, 但是给<a> 转换一下块级模式最安全

行内块元素

行内块元素同时具有块级元素和行内元素的特点: <img>, <input>, <td>
行内块元素的特点:

• 一行可以显示多个, 但是之间会有空白缝隙
• 默认跨度就是它本身内容的宽度
• 高度, 宽度, 外边距, 内边距都可以控制

CSS

三大特性

• 继承性
• 层叠性
• 优先级

PC端传统网页布局

• 标准流(普通流/文档流)
• 浮动
• 定位

图片

• jpg: 色彩信息保留较好, 高清, 颜色较多
• gif: 最多只能存储 256 色, 可以保存透明背景和动画效果, 实际经常用于一些图片小动画效果
• png: 结合GIF和JPEG的优点, 具有存储形式丰富的特点, 能够保持透明背景
• PSD: Photoshop的专用格式

css 属性书写顺序

1. 布局定位定位属性

• display (建议第一个写, 关系到模式)
• position
• float
• clear
• visibility
• overflow

2. 自身属性

• width / height
• margin / padding
• border
• background

3. 文本属性

• color / font
• text-decoration / text-align
• vertical-align
• white-space
• break-word

4. 其他属性(CSS3)

• content
• cursor
• border-radius
• box-shadow / text-shadow
• …

定位

• 浮动的元素不会压住下面标准流的文字
• 绝对定位(固定定位)会压住下面标准流所有的内容

粘性定位可以被认为是相对定位和固定定位的混合, Sticky 粘性的
语法: position: sticky;
粘性定位的特点:

• 以浏览器的可视窗口为参照点移动元素
• 占有原先位置
• 必须添加 top, left, right, bottom 其中一个才有效

跟页面滚动搭配使用, 兼容性较差, IE 不支持

HTML5

HTML5增加了新的标签, 表单和表单属性等, 这些新特性都有兼容问题, 基本是 IE9 + 以上的版本才支持

新特性

1. 语义化标签

• : 头部标签
• : 导航标签
• : 内容标签
• : 定义文档某个区域
• : 侧边栏标签
• : 尾部标签
• 语义化标准主要是针对搜索引擎的
• 新标签页面中可以使用多次
• IE9中, 需要把这些元素转换为块级元素
• 移动端更喜欢使用这些标签

2. 多媒体标签

• <audio> 音频 http://caibaojian.com/w3c/html5/tag_audio.html
• <video> 视频 http://caibaojian.com/w3c/html5/tag_video.html

3. 新增表单

4. 新增表单属性

CSS3

• 新增的CSS3特性有兼容性问题, IE9 + 才支持
• 移动端支持优于PC端

新增选择器

类选择器, 属性选择器和伪类选择器权重都是10

1. 属性选择器: 根据元素特定属性来选择元素
   

2. 结构伪类选择器: 根据文档结构来选择元素
   

• nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第 n 个孩子, 然后看看是否匹配
• nth-of-type 对父元素里面指定子元素进行排序选择

3. 伪元素选择器: 创建新的标签元素
   

• before 和 after 创建一个元素, 但是属于行内元素
• 新创建的元素在文档树中是找不到的, 称为伪元素
• before 和 after 必须有 content 属性
• before 在父元素内容的前面创建元素, after 在父元素内容的后面插入元素
• 伪元素选择器和标签选择器权重一样 , 为 1

CSS3 盒模型

CSS3 中可以通过 box-sizeing 来指定盒模型

• content-box: 默认值, 盒子大小为 width + padding + border
• border-box: 盒子大小为 width

CSS3 函数

滤镜 filter 函数

filter: 函数, 模糊处理, 数值越大越模糊

calc 函数

calc: 在声明 CSS 属性是执行一些计算: + - * /

过渡

过渡动画:: 从一个状态, 渐渐的过渡到另外一个状态, 经常和 :hover 搭配使用, 所有的属性都做动画, 写一个 all 就可以了
transition: 属性 时间 运动曲线 何时开始;

• 属性: 想要变化的 css 属性, 比如: 宽高…
• 时间: 单位是秒, 必须写单位, 如: 0.5s
• 运动曲线: 默认值 ease 可以省略
• 何时开始: 单位是秒, 必须写单位, 设置延迟触发时间, 默认值 0s, 可以省略

2D 转换

转换(transform)是 CSS3 中具有颠覆性的特征之一, 可以实现元素的位移, 旋转, 缩放等效果

1. 移动: translate

• 定义2D转换中的移动, 沿着X和Y轴移动元素
• translate最大的优点: 不会影响到其他的元素
• translate 中的百分比单位是相对于自身元素的
• 对行内标签没有效果

2. 旋转: rotate

• rotate 里面的度数, 单位是 deg
• 角度为正时, 顺时针, 负时, 逆时针
• 默认旋转中心点是元素的中心点

3. 旋转中心点 transform-origin: x y;

• 注意后面的参数 x 和 y 用空格隔开
• x y 默认旋转的中心点事元素的中心点 (50%, 50%)
• 还可以给 x y 设置像素或者方位名词 (top bottom left right center)

4. 缩放: scale

• 注意其中的 x 和 y 用逗号分隔
• 只写一个参数, 第二个参数和第一个参数一样
• 优势: 可以设置缩放的中心点, 不会影响其他盒子

注意:

• 同时使用多个转换, 格式: transform: translate() rotate() scale()...
• 顺序会影响转换效果
• 当我们同时有位移和其他属性时, 位移要放到最前

动画

动画(animation)是CSS3具有颠覆性的特性之一, 可通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果

步骤:

1. 先定义动画, keyframes
2. 再使用(调用)动画

属性:

速度曲线:

注意点:

• 简写属性里面不包含 animation-play-state
• 暂停动画: animation-play-state: puased;
• 让动画走回来, 而不是跳回来: animation-direction: alternate;
• 盒子动画结束后, 停在结束位置: animation-fill-mode: forwards;

3D 转换

透视 perspective

• 透视写在被观察元素的父盒子上面的
• d: 视距
• z: z轴, z轴越大(正值), 看到的物体越大

旋转 rotate3d

• transform: rotateX(45deg);: 沿着x轴正方向旋转45度
• transform: rotate3d(x, y, z, deg);: 沿着自定义轴旋转 ,deg 为角度

3D 呈现 transform-style

• 控制子元素是否开启三维立体环境
• transform-style: flat; 子元素不开启3D立体空间, 默认的
• transform-style: preserve-3d; 子元素开启立体空间
• 代码写给父级, 但是影响的是子盒子

项目规划

网站TDK三大标签SEO优化

​ SEO (Search Engine Optimization) 汉译为搜索引擎优化, 是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式
​ SEO 的目的是对网站进行深度的优化, 从而帮助网站获取免费的流量, 进而在搜索引擎上提升网站的排名, 提高网站的知名度

1. title 网站标题, 是搜索引擎了解网页的入口和对网页主题归属的最佳判断点: 网站名(产品名) - 网站的介绍(尽量不要超过30个汉字)
2. descriptor 网站说明, 简要说明网站主要是做什么的
3. keywords 关键字, 页面关键词, 搜索引擎的关注点之一, 最好限制为 6~8 个关键词, 用英文逗号隔开

LOGO SEO 优化

1. logo 里面首先放一个

   标签, 目的是为了提权, 告诉搜索引擎, 这个地方很重要

2. 里面再放一个链接,可以返回首页, 把 logo 的背景图片给链接即可

3. 为了搜索引擎收录, 链接里面要放文字(网站名称), 但是文字不要显示出来

• 方法1: text-indent 移到盒子外面text-indent: -9999px, 然后overflow:hidden, 淘宝做法
• 直接给 font-size: 0;, 京东做法

4. 最后给链接一个 title 属性