html基础

CSS

盒子模型

分类:
正常模型和IE模型
区分:
正常模型:width = content
IE模型:width = content + padding +border
切换指令:
border-size:content-box|border-box
外边距塌陷问题:

1. 问题出现的情况:

• 父子相邻1

• 兄弟相邻2

• 空的块级元素3

2. 问题的解决方案:

• 父元素加border或者overflow:hidden或者padding->1

• 父或子加display:inline-block->1

• 父或子设置float->1

• 父或子设置position:absolute->1

• 后面一个元素加float,脱离原来的文档流->2

权重划分

权重:
!important > id > class > 其他
其他:
标签选择器,伪类选择器,计算选择器

position

分类:

• static:正常文档流
• relative:在不改变页面布局的前提下调整位置(原位置会留有空白)
• absolute:文档被移除正常文档流,并且正常文档没有留有位置,可设置margin,并不会发生塌陷
• fixed:文档被移除正常文档流,相对于视口位置
• sticky:根据正常文档流进行定位,相对于最近的滚动祖先和块祖先

display

分类:

• block
• inline
• flex
• grid
• none
• contents
• -flow
• -root

flex布局

flex布局是一种强大的一维布局模型(只能处理一行或者一列)

• 主轴方向
  
• flex-direction:row(x从左到右)||column(y从上到下)||row-reserve(x从右到左)||column(y从下到上)
• 主轴排不下时是否换行
  flex-wrap:wrap(换行,从上到下)||wrap-reserve(换行,从下到上)||nowrap(不换行)
• 项目在主轴上的排列方式
  justify-content:flex-start(从起点开始排列)||flex-end(从终点开始排列)||center(中点对齐)||baseline(基线对齐)||stretch(拉伸对齐)
• 项目在交叉轴上的排列方式
  align-items:flex-start(从起点开始排列)||flex-end(从终点开始排列)||center(中点对齐)||baseline(基线对齐)||stretch(拉伸对齐)
• 多根线轴的对齐方式
  align-content:flex-start,flex-end,center,space-around,space-between,stretch

BFC

• 定义:
  BFC是块格式化上下文,是css渲染过程中生成块级盒子的一个区域,具有BFC特性的元素,盒子里面的元素不会影响外面的元素.
• 原理:
  

1. 具备BFC特性的元素不会跟浮动元素,相邻元素进行重叠
2. 具备BFC特性的元素在计算高度的时候会计算子元素的高度,不会出现塌陷的问题
3. 具备BFC特性的区域会产生块级作用域,不会影响外面的元素

• 创建规则:
  

1. html根元素就是一个BFC
2. display的值为:inline-block,table-cell,table-caption,flex,grid,inline-grid的元素
3. float的值不为none的元素
4. overflow的值不为visible的元素

• 应用场景:
  

1. 清除上下边距重叠
2. 清除浮动

.clearfix:after { display: table; content: " "; clear: both; }

3. 两栏布局,左边固定,右边自适应

响应式/移动端适配

解决方案:

1. 媒体查询(移动优先min-width,pc优先max-width)
2. 百分比
3. rem
4. vw,vh

图片响应式

解决方案:

1. 使用max-width自适应
2. 使用srcset--<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">
3. 使用background-image
4. 使用pictrue标签

动画

html

语义化

语义化是指根据内容的结构化,选择合适的标签,便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好地解析.

meta

定义:
meta是文档级元数据元素,用来表示那些不能由其他HTML元相关元素之一表示的任何元数据
属性:

1. name和content
   

• name和content一起使用,前者表示要表示的元数据的名称,后者是元数据的值

• description:对页面进行描述
  <meta name="description" content="这是测试的网页，可以写一些描述">

• keyword,关键字
  <meta name="keyword" content="医院,感冒">

• viewport视口,width用来设置viewport的宽度为设备宽度,initial-scale指的是设备宽度与viewport大小之间的缩放比例
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

2. http-equiv常用来做ie的适配
3. charset用来用来声明文档类型和字符集

SEO

作用:
提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为. 工作原理:
在搜索引擎网站的后台有一个庞大的数据库,里面存储了海量的关键词,而这些关键词又对应着许多的网址,而这些网址是程序从茫茫的互联网上一点一点下载收集而来的,这些程序被称为搜索引擎蜘蛛,或者叫网络爬虫,这些勤劳的蜘蛛每天都在互联网上爬行,从一个连接到另一个链接,下载其内容,进行分析提炼,并找出关键字,如果蜘蛛认为关键词在数据库中没有,但是对用户有用,那么他就会将其存入数据库,反之,如果觉得是垃圾信息,就会舍弃不要,继续向前爬行,寻找新的,有用的信息保存下来,供用户搜索使用,一个关键字对应多个网址,因此就会出现排序的问题,与关键字吻合度高的网址自然会被排在前面,在蜘蛛抓取网页的过程中,需要解决蜘蛛是否能看懂网页这个问题,若是网站的内容是flash和js,那么蜘蛛就看不懂,即使关键字再贴切也没有用,因此,如果网站的内容是他的语言,他就可以看懂,他的语言就是SEO 优化:

1. 网页布局优化:

• 原因:
  一般而言,建立的网站结构层次越少,越容易被蜘蛛抓取,也就越容易被录入,一般中小型的网站结构不能超过3级,3级之后蜘蛛遍不愿意往下爬了,而且访客如果跳转3次之后还没有到达目的地,大部分会选择离开,
• 控制首页链接数量:
  网站首页是网站权重最高的地方,如果链接太少,则无法让蜘蛛爬完所有内页,如果太多则影响喻户体验,降低网站权重,也影响收录,因此对于小中型网站建议100个链接以内,并建立在用户的良好体验和引导用户获取信息的基础上.
• 扁平化的目录层次:
  尽量在三次之内让蜘蛛可以到达网站的任意一个内页.
• 导航优化:
  尽量采用文字的形式,也可以结合图片使用,但是图片代码必须进行优化,添加alt以及titlr属性,其次在网页上应该添加面包屑导航,这样可以帮助用户快速了解网站组织的形式,从而形成更好地位置感,同时提供各个位置的接口,方便用户操作,对于蜘蛛而言,能够快速清晰了解网站结构,同时还增加了大量的内部链接,方便抓取,降低跳出率.
• 控制页面的大小,减少http请求,提高网站的加载速率.超时会留不住访客,蜘蛛也会离开.

3. 网页代码优化:

• title标题:
  只强调重点即可,尽量把重要的关键字放在最前面,关键字不要重复,而且每个页面的title不要重复.
• meta keywords标签:
  列举出关键字即可,不能过分堆砌
• meta description标签:
  高度概括网页内容,切记不能太长,每个页面也要不同
• body标签:
  代码尽量语义化让阅读源码者和蜘蛛都一目了然.
• a标签:
  页内链接要加上title属性,外部链接要加上el = "nofollow" 告诉蜘蛛不用爬,因为爬完可能回不来了.
• h1标签:
  正文标题一定要用h1标签,因为蜘蛛认为他最重要,如果不喜欢原样式可以通过css进行修改
• 使用alt属性加以说明
• 不要使用iframe 框架,因为蜘蛛一般不会读取其中的内容
• 谨慎使用display:none :
  对于不想显示的文字内容,可以设置z-index,或者移除可看范围,搜索引擎会自动过滤掉display:none的内容
• css代码放前面,js代码放到后面

5. 网页响应优化:

• 原因:
  web性能优化与seo的优化有很大联系,研究表明,用户最满意的打开网页的时间是2-5秒,超过10秒,90%的用户会选择关闭网页,因此权重会降低,不利于seo优化.
• 减少HTTP请求:
  压缩图片,图片转base64,使用静态资源,精简代码,压缩文件,图片懒加载,按需加载,添加expires头等
• 使用cdn加速:
  CDN将资源存储在更接近用户的位置,缩短到服务器的往返行程,加快页面加载时间来解决问题.
• css放头部,js放底部
• 减少iframe数量
• 避免404:
  404代表服务器没有找到,客户端发送请求却返回一个无用的结果,时间就浪费掉了
• 减少DNS查找:
  DNS查找过程:域名解析--发起TCP三次握手--建立TCP连接后发送http请求--服务器响应http请求,浏览器得到代码--浏览器解析代码,并请求资源(js,css,图片等)--浏览器渲染--呈现
• 使用ajax缓存
• 减少dom数量和层级数量

重绘，回流

什么是重绘，回流:

• 重绘：某些元素的外观被改变所触发的浏览器行为（重新计算节点在屏幕中额绝对位置并渲染的过程）叫重绘。例如：改颜色
• 回流：重新生成布局，重新排列元素（重新计算各个节点和css具体的大小和位置，渲染树需要重新计算所有受影响的节点）叫回流。例如：改宽高
• 通过概念可知，回流的成本要比重绘的成本要高，因此我们需要尽可能地减少回流操作，减少页面的性能消耗。
  重绘出现的场景有哪些：
  
• color
• bordeer-style
• border-radius
• text-decoration
• box-shadow
• outline
• background
  回流出现的场景有哪些：
  

• 页面初始渲染，这是开销最大的一次回流
• 添加或者删除可见的dom元素
• 改变元素的位置
• 改变元素尺寸，比如边距，边框，高度，宽度
• 改变元素内容如文字数量，图片大小等
• 改变字体的大小
• 改变浏览器尺寸的大小，如resize事件发生时
• 激活css伪类，如hover
• 设置style属性的值，因为通过style属性改变节点样式时，每一次设置都会触发一次reflow
• 查询某些属性或调用某些计算方法：offsetwidth,offsetHeight等，除此之外，调用getConputedStyle方法，或者IE里的currentStyle时，也会触发回流，原理都是一样的，都为求一个即时性和准确性
  优化方法（场景）:
  

1. 样式集中改变，减少回流次数：
   a.color = 'blue';a.width = 100px;a.height = 100px将其合并成a.className = 'XXX'(XXX就是指上面的三个样式合并成一个类名)
2. 使用display：none或者position：fixed/absolute将dom离线后再进行操作
3. 添加元素时，可以先使用变量或者数组对数据进行存储后再添加到dom中。

HTML5新特性

• 语义标签

标签	含义
header	文档头部
footer	文档尾部
nav	文档导航
section	文档节段
article	页面独立的内容区域
aside	侧边栏
details	描述细节
summary	标签包含details元素的标题
dialog	对话框，提示框等

• 增强型表单

1. input输入类型：

输入类型	描述
color	主要用于选取颜色
date	从日期选择器中选择日期
datetime	选择一个日期 （utc时间）
datetime-local	选择一个日期和时间（无地区限制）
email	email地址的输入域
month	选择一个月份
number	数值输入域
range	数字范围
search	搜索域
tel	定义电话输入字段
time	选择一个时间
url	地址输入域
week	选择周和年

2. 表单元素：

表单元素	描述
datalist	元素规定输入域的选项列表，使用input元素的list属性与datalist元素的id进行绑定
keygen	提供一种验证用户的可靠方法，标签规定用于表单的秘钥对生成器字段
output	用于不同类型的输出

3. 表单属性：

属性名	描述
placehoder	输入框的默认提示文字
required	boolean值，要求填写能不能为空
pattern	对输入的值进行正则验证
min max	设置元素的最大最小值
step	为输入域规定合法的数字间隔
height width	设置image类型的input标签的图像的宽和高
autofocus	boolean 刷新时是否自动获取焦点
multiple	boolean 设置input元素是否可以选择多个值

• 视频和音频
• canvas绘画
• svg绘图
• 地理定位
• 拖放api
• webworker
• webstorage
• websocket