1:主流浏览器的内核分别是什么?
IE:trident内核 [‘traidnt ]
Firefox:gecko 内核 [ˈɡekəʊ]
Safari:webkit 内核
Chrome,Opera:Blink内核(基于webkit)
声明位于文档中的最前面的位置,此标签告知浏览器文档使用哪种HTML或XHTMl规范(重点:告诉浏览器按照何种规范解析页面)
严格模式下:页面排版及 JS 解析是以该浏览器支持的最高标准来执行
混杂模式:不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容
不存在或格式不正确会导致文档以混杂模式呈现
(1)div+css布局的好处:
a.符合W3C标准,结构、样式和行为分离,代码结构清晰明了,带来足够好的可维护性。
b.布局精准,网站版面布局修改简单。
c.加快了页面的加载速度(最重要的)。
d.用只包含结构化内容的HTML代替嵌套的标签,提高另外搜索引擎对网页的搜索效率。
a.容易上手。
b.可以形成复杂的变化,简单快速。
c.表现上更加“严谨”,在不同浏览器中都能得到很好的兼容。
alt属性:在图片无法加载的时候才会显示的其值,
title属性:在图片正常加载鼠标划上去显示的值
strong:粗体强调标签,强调,表示内容的重要性
em:斜体强调标签,更强烈强调,表示内容的强调点
渐进增强(progressive enhancement) [prəu'ɡresiv][ɪnˈhɑːnsmənt]
:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级( graceful degradation)[ˈɡreɪsfl ,deɡrəˈdeɪʃn]:一开始就构建完整的功能,然后再针对低版本浏览器进
行兼容。
渐进增强的观点关注内容本身
优雅降级的观点更关注主流浏览器,一些特定的浏览器,除修复较大的错误外,其他的差异将会被直接忽略
网页标准的制定,使得web发展的更健康,提高网站的易用性。
a、开发者遵循统一的标准,降低了开发难度和开发成本
b、SEO优化网页也会更加方便,不会因为滥用代码出现各种bug和安全问题。
src 用于替换当前元素,href 用于在当前文档和引用资源之间确立联系。
Src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在的位置。例如:js脚本,img图片,frame等。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,这也是为什么将js 脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css,而不是使用@import 方式。
Png,jpeg,gif,svg,webp
webp格式:谷歌开发的新的图片格式,体积小,质量好,但兼容性略差
微格式(Microformats)是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式
作用:
a、在捉取Web内容时,能够更为准确地识别内容块的语义;
b、对内容进行操作,包括提供访问、校对,还可以将其转化成其他的相关格式,提供给外部程序和Web服务使用。
应用例子:
当用手机浏览某公司的网站时,手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式,手机浏览器很聪明地提示我“是否保存到通讯录”,于是我很经松地保存了我所需要的信息
DNS缓存,CDN缓存,客户端(浏览器缓存),服务器缓存
DNS缓存是指在正常访问ip之后,系统会将这个ip存储起来,当再次访问的时候,系统就会把本地的DNS缓存提取显示,等于是加速了网址的解析。
CDN是Content Delivery NetWork的简称,即‘内容分发网络'的意思,主要用于分地域的集群服务器,当用户浏览网站请求数据时,CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求。
服务器缓存就是存放频繁访问内容的服务器。
a. 图片懒加载,滚动到相应位置才加载图片。
b. 图片预加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite,SVGsprite,Iconfont、Base64等技术,如果图片为css图片的话。
d. 如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。
A:在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:裸奔时也好看;
B:用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
C:有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
D:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备),更好的方式来渲染网页;
E:便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
(1).维护网站,提高内容质量,保持更新
(2).网站结构布局优化:尽量简单、开门见山,提倡扁平化结构。
(3).控制首页链接数量,要适中
(4).导航优化:
a:尽量采用文字方式
b:搭配图片导航,但是图片代码一定要进行优化,img标签必须添加“alt”和“title”属性
c:应该加上面包屑导航
(5).控制页面的大小:减少http请求,提高网站的加载速度
(6).适量的关键词和网页描述
title标题,强调重点即可,
meta keywords标签:关键词,列重要关键字即可
meta description标签:网页描述,要高度概括
body中的标签:尽量让代码语义化
a标签:页内链接,要加 “title” 属性加以说明
img应使用 “alt” 属性加以说明
strong、em标签 : 需要强调时使用
巧妙利用CSS布局
谨慎使用 display:none
保留文字效果
A:外部样式表,引入一个外部 css 文件
B:内部样式表,将 css 代码放在 标签内部,里
C:内联样式,将 css 样式直接定义在 HTML 元素内部
选择器类型
(1)、ID #id
(2)、class .class
(3)、标签 p
(4)、通用 *
(5)、属性 [type="text"]
(6)、伪类 a: hover
(7)、伪元素 li: nth - child
(8)、子选择器(ul < li) 、相邻选择器(h1 + p)、后代选择器(li a)
权重计算规则
一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。
!important 比 内联优先级高
(1). 第一等:代表内联样式,如: style=””,权值为1000。
(2). 第二等:代表ID选择器,如:#content,权值为0100。
(3). 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
(4). 第四等:代表标签和伪元素选择器,如div p,权值为0001。
(5). 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
(6). 继承的样式没有权值。
(7).相同权重
优先级就近原则,样式定义最近者为准,载入样式以最后载入的定位为准;
继承性
可继承: font-size font-family color;
不可继承 :border padding margin width height ;
CSS3 新增伪类举例:
p:first-of-type 选择属于其父元素的首个 元素的每个 元素。
p:last-of-type 选择属于其父元素的最后 元素的每个 元素。
p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked,单选框或复选框被选中。
display:none;隐藏,并且不占位 ,宽高各种属性值,都‘丢失’
visibility:hidden;隐藏,占位,仅是视觉上‘看不见’
width:0;height:0;overflow:hidden;这只是通过设置元素的大小使元素不显示
问题是:a标签的四种状态,排序出问题了。
正确排序:L-V-H-A
love hate原则,即l(link)ov(visited)e h(hover)a(active)te。
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
针对不同的浏览器写不同的 CSS code 的过程,就是 CSS hack。
(1):块级元素(block)特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
(2):内联元素(inline)特性:
宽度(width)、高度(height)、内外边距的上下都不可设置,内外边距的左右可设置,其大小就是里面文字或图片的大小。
(3):inline-block 元素
拥有内在尺寸,可设置高宽,但不会自动换行
、 、
外边距重叠就是 margin-collapse。
折叠外边距 :在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。
折叠结果遵循下列计算规则:
两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
两个外边距一正一负时,折叠结果是两者的相加的和。
opacity作用于元素,以及元素内的所有内容的透明度(元素会继承其属性)
而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)
垂直方向:line-height
水平方向:letter-spacing 增加或减少字符间距。
可用于消除 inline-block 元素间的换行符空格间隙问题。
方法一:.child{
height: 100px;
position: absolute;//父元素相对定位
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
方法二:.child{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}
方法三:child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}
方法一:的容器
.img-container{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法二:方法二
.img-container{
display: flex;
justify-content: center;
align-items: center;}
px 和 em 都是长度单位,区别是,px 的值是固定的,指定是多少就是多少,计算比较容易。em 得值不是固定的,并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。
是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成
CSS。
优势:
结构清晰,便于扩展。
减少了重复代码的编写,增加了变量等的功能
可以方便的屏蔽浏览器私有语法差异。
可以轻松实现多重继承。
完全兼容CSS代码,可以方便地应用到老项目中。less只是在CSS语法上做了扩展,所以老的CSS代码也可以与less代码一同编译。
Link 属于 html 标签,而@import 是 CSS 中提供的
在页面加载的时候,link 会同时被加载,而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS ,@import 只有在 ie5 以上才可以被识别,
link 是 html 标签,不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用(@import 是将引用的样式导入到当前的页面中)
CSS 的盒子模型有两种:IE 盒子模型、标准的 W3C 盒子模型模型
盒模型:内容、内边距、外边距(一般不计入盒子实际宽度)、边框
0417 第二次提问
31:为什么要初始化样式?
由于浏览器兼容的问题,不同的浏览器对标签的默认样式值不同,若不初始化会造成不同
浏览器之间的显示差异
但是初始化 CSS 会对搜索引擎优化造成小影响
BFC(块级格式化上下文),页面上的一个隔离的独立容器,一个创建了新的 BFC 的盒子是独立布局的,盒子内元素的布
局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin
重叠的问题
创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
1. 所有的标记都必须要有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的 XML 标记都必须合理嵌套
4. 所有的属性必须用引号 "" 括起来
5. 把所有 < 和 & 特殊符号用编码表示
6. 给所有属性赋一个值
7. 不要在注释内容中使用 "--"
8. 图片必须有说明文字
浏览器默认的margin和padding不同
解决方案:加一个全局的 *{margin:0;padding:0;} 来统一
(1).标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、
(2):使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、
(3):更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
CSS 规范规定,每个元素都有 display 属性,确定该元素的类型,每个元素都有默认
的 display 值
块级元素(默认值是‘block’) : div p h1-h6 form ul hr table
行内元素(默认值是‘inline’) : a b br i span input img link select small strong
Css 盒模型:内容,border ,margin,padding
结构层 Html
表示层 CSS
行为层 j s
display:
none:取消样式
block:块级元素
inline:行内元素
inline-block:行内块元素
normal:默认样式
flex:弹性布局
*absolute
生成绝对定位的元素,相对于离最近的包含块元素进行定位。
*fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
* relative
生成相对定位的元素,相对于其正常位置进行定位。
* static 默认值。没有定位,元素出现在正常的流中
* inherit 规定从父元素继承 position 属性的值。
(1):b标签和strong标签都可以对文本进行加粗
(2):i标签和em标签同样也可以对文本进行倾斜
但是strong和em有强调的作用,有利于SEO(搜索引擎优化
所以日常工作中建议用strong和em标签。
定义
标准模式页面按照HTML,CSS的定义渲染,
怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计,并未严格遵循W3C标准而产生的一种页面渲染模式。
区别:
两者盒子模型 渲染模式等的不同
三者之间的区别对比: |
|||
特性 |
Cookie |
localStorage |
sessionStorage |
特性 |
一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效 |
除非被清除,否则永久保存 |
仅在当前会话下有效,关闭页面或浏览器后被清除 |
存放数据大小 |
4K左右 |
一般为5MB |
|
与服务器端通信 |
每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 |
仅在客户端(即浏览器)中保存,不参与和服务器的通信 |
|
易用性 |
需要程序员自己封装,源生的Cookie接口不友好 |
源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 |
相同点:都存储在客户端
不同点:
1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
2.有效时间
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie s 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会
话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储,仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
解决:加入_display:inline
浏览器根据请求的 URL 交给 DNS 进行域名解析,找到真实 IP 地址,向服务器发起请求;
服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、CSS、JS、images等);
浏览器对加载到的资源(HTML、CSS、JS、images等)进行语法解析,建立相应的内部数据结构(如HTML的DOM);
载入解析到的资源文件,渲染页面,完成。
表格布局,
浮动布局,
浮动布局主要采用float和clear两个属性来构建。
定位布局
position属性来实现元素的绝对定位和相对定位。
流体布局的方式
1、 flex-direction:排列方向
flex-direction: row | row-reverse | column | column-reverse
2、flex-wrap如果一条轴线排不下,如何换行
flex-wrap: nowrap | wrap | wrap-reverse
3、flex-flow属性(上述两个组合)
flex-flow: flex-direction, flex-wrap
flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
4、justify-content属性(在主轴上的对齐方式)横向
justify-content: flex-start | flex-end | center | space-between | space-around
5、align-items属性(在交叉轴上如何对齐)纵向
align-items: flex-start | flex-end | center | baseline | stretch
6、flex-grow属性(放大比例,默认为0,即如果存在剩余空间,也不放大)
flex-grow: 默认为0
7、flex-shrink属性(缩小比例,默认为1,即如果空间不足,则缩小)
flex-shrink: 默认为1
8、flex-basis属性(在分配多余空间之前,项目占据的主轴空间)
flex-basis: | auto
9、flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
flex: auto; (1 1 auto)
flex: none; (0 0 auto)
css reset
normalize css
*{}