HTML+CSS

一. 网页浏览器及浏览器内核

1.IE:trident
2.Firefox:gecko
3.Safari:webkit
4.Opera:before-presto;now-Blink(developed with Google)
5.Chrome:Blink(base on Webkit)

二. <!Doctype html/xhtml>

<!Doctype html/xhtml>声明位于文档中的最前面的位置,标签前.
告知浏览器文档使用的是html/xhtml规范的

三. div+css的布局与table布局比较

1.div+css的布局:页面加载速度更快,结构化清晰,页面显示简洁
2.表现与结构相分离
3.易于优化(seo),搜索引擎更友好,排名更容易靠前

Seo：Search Engine Optimization的缩写，翻译成中文就是“搜索引擎优化"

就是通过一定的方法在网站内外发布文章、交换连接等，最终达到某个关键词在搜索引擎上获得好的排名。

img的alt与title异同/em与strong异同

1. alt:图片加载失败时，显示在网页上的替代文字
1. title:鼠标放上面时显示的文字
1. strong:粗体强调标签，强调，表示内容的重要性
1. em:斜体强调标签，更强烈强调，表示内容的强调点

五. 渐进增强/优雅降级

1. 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。(由基本到强大)(从低到高)
1. 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。(由完整到精简)(从高到底)

区别：

1.优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

2.降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

六. 利用多个域名来存储网站资源

1. CDN(服务器)缓存更方便
1. 突破浏览器并发限制
1. 节约cookie带宽
1. 节约主域名数,优化页面响应速度
1. 防止不必要的安全问题

Cookie:浏览网页时网站服务器放在客户端的txt文件.存储一些访问这个网站有关的东西;当下次访问时,Cookie会记住上次访问的状态会设置,让服务器针对性的发送页面相关内容.

Cookie包括:

所访问网站的域名(domain name)/访问开始的时间/访问者的IP地址--客户端信息

访问者关于这个网站的设置

七. 对网页标准和标准制定机构重要性的理解

1. 网页标准和标准制定机构都是为了能让web发展的更‘健康’，
1. 开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，
1. 不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

八. cookies，sessionStorage和localStorage的区别

共同点：都是保存在浏览器端，且同源的。
区别：

1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。,sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

2.cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。cookie还需要指定作用域，不可以跨域调用。

3.存储大小限制也不同:

cookie数据不能超过4k，同时因为每次http请求都会携带cookie(如会话标识)。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

4.数据有效期不同，

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

5.作用域不同，

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage 在所有同源窗口中都是共享的；

cookie也是在所有同源窗口中都是共享的。

插入内容:
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。为了在本地“存储”数据而生。

九. src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

1. src简介

source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

1. href简介

Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

十. 网页制作会用到的图片格式

png-8，png-24，jpeg，gif，svg , Webp

Webp简介

WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

十一. 微格式以及在前端构建中应该考虑微格式

Microformat，是一种对Web网页进行语义注解的方法，这种方法依托于标准的Web页面写作技术，例如，XHTML，这样引入语义信息对浏览器等所有现存的Web技术冲击最小。采用Microformat的Web页面，在XHTML文档中给一些标签（Tag）增加一些属性（attribute），这些属性对信息的语义结构进行注解，处理XHTML文档的软件，例如，浏览器等，如果不认识这些属性可以跳过，并不造成任何不良影响。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

十二. 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

dns缓存
cdn缓存
浏览器缓存
服务器缓存。

十三. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验

图片懒加载:

在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载

几种情况:

1.如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

2.如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

3.如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

4.如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

十四. 谈谈以前端角度出发做好SEO需要考虑什么？

1. 了解搜索引擎如何抓取网页和如何索引网页
1. 你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。
1. Meta标签优化

主题（Title)，网站描述(Description)，和关键词（Keywords）。

(还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。)

十五. 有哪项方式可以对一个DOM设置它的CSS样式？

1.外部样式表，引入一个外部css文件
2.内部样式表，将css代码放在标签内部
3.内联样式，将css样式直接定义在 HTML 元素内部

十六. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

1.基本：

设置display属性为none，或者设置visibility属性为hidden

2.技巧性：

设置宽高为0，设置透明度为0，设置z-index位置在-1000em

十七. 7. 超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不再具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

Love hate 就爱恨准则

十八. Css Hack/ie6,7,8的hack分别是什么？

针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

示例如下：

.test{
    width:300px;
    height:300px;
    background-color:blue; /firefox/
    background-color:red\9; /all ie/
    background-color:yellow; /ie8/
    background-color:pink; /ie7/
    background-color:orange; /ie6/
}
:root #test {
    background-color:purple\9;
} /ie9/

十九. 9. 行内元素和块级元素的具体区别/行内元素的padding和margin可设置吗？

1. 块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度

(height)、内边距(padding)和外边距(margin)都可控制;

1. 内联元素(inline)特性：

和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/

padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变

（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

注释:浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行）

input 、img 、button 、texterea 、label。

二十.rgba()和opacity的透明效果有什么不同？

相同点:

rgba()和opacity都能实现透明效果，

不同点:

opacity作用于元素，以及元素内的所有内容的透明度，

rgba()只作用于元素的颜色或其背景色。

（设置rgba透明的元素的子元素不会继承透明效果！）

二十一. css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height
水平方向：letter-spacing
关于letter-spacing的妙用

可以用于消除inline-block元素间的换行符空格间隙问题。

CSS letter-spacing 属性示例

.ls3px{
    letter-spacing: 3px;
}
.lsn3px{
    letter-spacing: -3px;
}

梦之都 CSS教程,letter-spacing示例,All i have to do, is learn CSS.(仔细看是字母之间的距离,不是空格本身的宽度,参考word-spacing属性示例.)

梦之都 CSS教程,letter-spacing示例,All i have to do, is learn CSS.

二十二. px和em的区别。

相同点:

px和em都是长度单位，

区别:

px的值是固定的，指定是多少就是多少，计算比较容易。

em得值不是固定的，并且em会继承父级元素的字体大小。

(浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。)

二十三. Sass、LESS是什么？大家为什么要使用他们？

CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

为什么要使用它们？

1. 结构清晰，便于扩展。
1. 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
1. 可以轻松实现多重继承。
1. 完全兼容 CSS 代码，可以方便地应用到老项目中。
1. LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

二十四. display:none与visibility:hidden的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
区别

a: 使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”

b: 而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

二十五. CSS中link和@import的区别是：

Link属于html标签，而@import是CSS中提供的。在页面加载的时候，link会同时被加载;
@import引用的CSS会在页面加载完成后才会加载引用的CSS。
@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题
Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

二十六. 简介盒子模型(具体图例见笔记)

CSS的盒子模型有两种：IE盒子模型、标准的W3C盒子模型模型

盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

二十七. 为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异

注意内容:(但是初始化CSS会对搜索引擎优化造成小影响,代码过多会影响速度)

二十八. html语义化是什么？

1. 当页面样式加载失败的时候能够让页面呈现出清晰的结构
1. 有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
1. 便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析。

二十九. Doctype的作用？严格模式与混杂模式的区别？

<!DOCTYPE>用于告知浏览器该以何种模式来渲染文档

严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行
混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

HTML是一种基本的WEB网页设计语言，

XHTML是一个基于XML的置标语言，看起来与HTML有些相象

区别:
1. XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。
1. HTML 和 XHTML 的区别简单来说，XHTML 可以认为是 XML 版本的 HTML，为符合 XML 要求，XHTML 语法上要求更严谨些。

以下是 XHTML 相对 HTML 的几大区别：

XHTML 要求正确嵌套

XHTML 所有元素必须关闭

XHTML 区分大小写

XHTML 属性值要用双引号

XHTML 用 id 属性代替 name 属性

XHTML 特殊字符的处理

三十. IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的大两倍。

满足下面这三个条件时，就会出现这个BUG：

1、要为块状元素；

2、要左侧浮动；

3、要有左外边距（margin-left）。

解决这个BUG，只需在相应的块状元素的CSS属性中加入“display:inline;”。

HTML+CSS

HTML+CSS

一. 网页浏览器及浏览器内核

二. <!Doctype html/xhtml>

三. div+css的布局与table布局比较

img的alt与title异同/em与strong异同

五. 渐进增强/优雅降级

六. 利用多个域名来存储网站资源

七. 对网页标准和标准制定机构重要性的理解

八. cookies，sessionStorage和localStorage的区别

九. src与href的区别

十. 网页制作会用到的图片格式

十一. 微格式以及在前端构建中应该考虑微格式

十二. 在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

十三. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验

十四. 谈谈以前端角度出发做好SEO需要考虑什么？

十五. 有哪项方式可以对一个DOM设置它的CSS样式？

十六. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

十七. 7. 超链接访问过后hover样式就不出现的问题是什么？如何解决？

十八. Css Hack/ie6,7,8的hack分别是什么？

十九. 9. 行内元素和块级元素的具体区别/行内元素的padding和margin可设置吗？

二十.rgba()和opacity的透明效果有什么不同？

二十一. css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

二十二. px和em的区别。

二十三. Sass、LESS是什么？大家为什么要使用他们？

为什么要使用它们？

二十四. display:none与visibility:hidden的区别是什么？

二十五. CSS中link和@import的区别是：

二十六. 简介盒子模型(具体图例见笔记)

CSS的盒子模型有两种：IE盒子模型、标准的W3C盒子模型模型

盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

二十七. 为什么要初始化样式？

二十八. html语义化是什么？

二十九. Doctype的作用？严格模式与混杂模式的区别？

<!DOCTYPE>用于告知浏览器该以何种模式来渲染文档

三十. IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的大两倍。

results matching ""

No results matching ""