html&css笔记

前端笔记---html与css

1.四大浏览器内核?

IE: trident 内核

Firefox： gecko 内核

Safari:webkit 内核

Opera:以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核

Chrome:Blink(基于 webkit， Google 与 Opera Software 共同开发)

  1. doctype作用?

    告诉浏览器按照何种规范解析页面.

  2. Quirks与Standards区别?

区别 布局 样式解析 脚本执行
Quirks 盒模型： 在 W3C 标准中， 如果设置一个元素的宽度和高度， 指的是元素内容的宽度和高度， 而在 Quirks 模式下， IE 的宽度和高度还包含了 padding 和 border。
Standards 设置行内元素的高宽： 在 Standards 模式下， 给span等行内元素设置 wdith 和 height 都 不会生效， 而在 quirks 模式下， 则会生效。
设置百分比的高度： 在 standards 模式下， 一个元素的高度是由其包含的内容来决定的， 如 果父元素没有设置百分比的高度， 子元素设置一个百分比的高度是无效的用 margin:0 auto 设置水平居中： 使用 margin:0 auto 在 standards 模式下可以使元素水平 居中， 但在 quirks 模式下却会失效。

  1. div+css较table有何优点?

改版的时候更方便 只要改 css 文件。

页面加载速度更快、 结构化清晰、 页面显示简洁。 表现与结构相分离。

易于优化（ seo） 搜索引擎更友好， 排名更容易靠前。

前端做好seo需要考虑什么:https://www.jianshu.com/p/7d7d83e4ec46

  1. img 的 alt 与 title 有何异同？ strong 与 em 的异同？

    a:alt(alt text):为不能显示图像、 窗体或 applets 的用户代理（ UA） ， alt 属性用来指 定替换文字。 替换文字的语言由 lang 属性指定。 (在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示)

    title(tool tip):该属性为设置该属性的元素提供建议性的信息。

    strong:粗体强调标签， 强调， 表示内容的重要性

    em:斜体强调标签， 更强烈强调， 表示内容的强调点

  2. 多个域名存储网站资源的利弊和处理手段?

优点:

CDN 缓存更方便 

突破浏览器并发限制

节约 cookie 带宽 

节约主域名的连接数， 优化页面响应速度 

防止不必要的安全问题

问题:

两个或多个域名指向同一个网站，会造成这两个或多个网站的收录数量差较大、权重分散的问题，不利于网站的排名。

处理手段:

  1. cookies， sessionStorage 和 localStorage 的区别？

    sessionStorage （ session） 中的数据， 这些数据只有在同一个会话中的页面才能访问 并且当会话结束后数据也随之销毁。 因此 sessionStorage 不是一种持久化的本地存储， 仅 仅是会话级别的存储。

    而 localStorage 用于持久化的本地存储， 除非主动删除数据， 否则 数据是永远不会过期的。 web storage 和 cookie 的区别 Web Storage 的概念和 cookie 相似， 区别是它是为了更大容量存储设计的。

    Cookie 的大小 是受限的， 并且每次你请求一个新的页面的时候 Cookie 都会被发送过去， 这样无形中浪费 了带宽， 另外 cookie 还需要指定作用域， 不可以跨域调用。

    除此之外， Web Storage 拥有 setItem,getItem,removeItem,clear 等方法， 不像 cookie 需要前端开发者自己封装 setCookie， getCookie。

    但是 Cookie 也是不可以或缺的： Cookie 的作用是与服务器进行交互， 作为 HTTP 规范的一部分而存在 ， 而 Web Storage 仅仅是为 了在本地“ 存储” 数据而生。

  2. 简述一下 src 与 href 的区别?

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

    src 是 source 的缩写， 指向外部资源的位置， 指向的内容将会嵌入到文档中当前标签所在 位置； 在请求 src 资源时会将其指向的资源下载并应用到文档内， 例如 js 脚本， img 图片 和 frame 等元素。<script src =” js.js” > 当浏览器解析到该元素时， 会暂停其他资源的下载和处理， 直到将该资源加载、 编译、 执行 完毕， 图片和框架等元素也如此， 类似于将所指向资源嵌入当前标签内。 这也是为什么将 js 脚本放在底部而不是头部。

    href 是 Hypertext Reference 的缩写， 指向网络资源所在位置， 建立和当前元素（ 锚点） 或当前文档（ 链接） 之间的链接， 如果我们在文档中添加<link href=” common.css” rel=” stylesheet” />那么浏览器会识别该文档为 css 文件， 就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css， 而不是使用@import 方式。

  3. 网页制作用到的图片格式有哪些?

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

  1. 如何在前端适当考虑微格式?

    微格式（ Microformats） 是一种让机器可读的语义化 XHTML 词汇的集合， 是结构化数据的开 放标准。 是为特殊应用而制定的特殊格式。

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

如何巧妙应用,详见:https://www.jianshu.com/p/7e11c1f32a48

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

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

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

    如果图片为 css 图片， 可以使用 CSSsprite， SVGsprite， Iconfont、 Base64 等技术。 如果图片过大， 可以使用特殊编码的图片， 加载时会先加载一张压缩的特别厉害的缩略图， 以提高用户体验。

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

  1. 如何理解HTML的语义化
  • 什么是HTML语义化？
    • <基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等
    • 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
  • 为什么要语义化？
    • 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
    • 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
    • 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
    • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
    • 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
  • 写HTML代码时应注意什么？
    • 尽可能少的使用无语义的标签div和span；
    • 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
    • 不要使用纯样式标签，如：b、font、u等，改用css设置。
    • 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
    • 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
    • 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
    • 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

  1. 路径问题?

    1.绝对路径

    绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。那么如果要使用绝对路径指定网页的背景图片就应该使用 以下语句： 使用绝对路径的缺点: 事实上，在网页编程时，很少会使用绝对路径，如果使用“E:\book\网页布\代码\第2章\bg.jpg”来指定背景图片的位置，在自己的计算机上 浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的E盘， 有可能是D盘或H盘。即使放在Web服务器的E盘里，Web服务器的E盘里也不一定会存在“E:\book\网页布局\代码\第2章”这个目录，因此在浏 览网页时是不会显示图片的。

    2.相对路径

    为了避免这种情况发生，通常在网页里指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于自己的目标文件位置。例如上面的例子，“s1.htm” 文件里引用了“bg.jpg”图片，由于“bg.jpg”图片相对于“s1.htm”来说，是在同一个目录的，那么要在“s1.htm”文件里使用以下代 码后，只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。 再 举一个例子，假设“s1.htm”文件所在目录为“E:\book\网页布局\代码\第2章”，而“bg.jpg”图片所在目录为“E:\book\网页 布局\代码\第2章\img”，那么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在目录的“img”子目录里，则引用图片的语句应该 为： 注意：相对路径使用“/”字符作为目录的分隔字符，而绝对路径可以使用“\”或“/”字符作为目录的分隔字符。由于“img”目录是“第2章”目录下的子目录，因此在“img”前不用再加上“/”字符。 在相对路径里常使用“../”来表示上一级目录。如果有多个上一级目录，可以使用多个“../”，例如“http://www.cnblogs.com/”代表上上级目录。假设 “s1.htm”文件所在目录为“E:\book\网页布局\代码\第2章”，而“bg.jpg”图片所在目录为“E:\book\网页布局\代码”，那 么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在目录的上级目录里，则引用图片的语句应该为： 再举一个例子，假设“s1.htm”文件所在目录为“E:\book\网页布局\代码\第2章”，而“bg.jpg”图片所在目录为“E:\book\网 页布局\代码\img”，那么“bg.jpg”图片相对于“s1.htm”文件来说，是在其所在目录的上级目录里的“img”子目录里，则引用图片的语句 应该为：
    3.相对虚拟目录

    有关相对路径还有一个比较特殊的表示：“相对虚拟目录”。请看下面的例子： 在这个例子里，background属性的值为“/img/bg.jpg”，注意在“img”前有一个“/”字符。这个“/”代表的是虚拟目录的根目录. 假设把“E:\book\网页布局\代码”设为虚拟目录，那么“/img/bg.jpg”的真实路径为“E:\book\网页布局\代码\img \bg.jpg”；如果把“E:\book\网页布局\代码\第2章”设为虚拟目录，那么“/img/bg.jpg”的真实路径为“E:\book\网页 布局\代码\第2章\img\bg.jpg”

  2. 前端角度谈SEO需要考虑什么?

    了解搜索引擎如何抓取网页和如何索引网页

    你需要知道一些搜索引擎的基本工作原理， 各个搜索引擎之间的区别， 搜索机器人 （ SE robot 或叫 web crawler） 如何进行工作， 搜索引擎如何对搜索结果进行排序等 等。

    Meta 标签优化

    主要包括主题（ Title)， 网站描述(Description)， 和关键词（ Keywords） 。 还有一些其它 的隐藏文字比如 Author（ 作者） ， Category（ 目录） ， Language（ 编码语种） 等。

    如何选取关键词并在网页中放置关键词

    搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作之一。 首先要给网站确定主关键 词（ 一般在 5 个上下） ， 然后针对这些关键词进行优化， 包括关键词密度（ Density） ， 相 关度（ Relavancy） ， 突出性（ Prominency） 等等。

    了解主要的搜索引擎

    虽然搜索引擎有很多， 但是对网站流量起决定作用的就那么几个。 比如英文的主要有 Google， Yahoo， Bing 等； 中文的有百度， 搜狗， 有道等。 不同的搜索引擎对页面的抓取和 索引、 排序的规则都不一样。 还要了解各搜索门户和搜索引擎之间的关系， 比如 AOL 网页搜 索用的是 Google 的搜索技术， MSN 用的是 Bing 的技术。

    主要的互联网目录

    Open Directory 自身不是搜索引擎， 而是一个大型的网站目录， 他和搜索引擎的主要区别 是网站内容的收集方式不同。 目录是人工编辑的， 主要收录网站主页； 搜索引擎是自动收集 的， 除了主页外还抓取大量的内容页面。

    按点击付费的搜索引擎

    搜索引擎也需要生存， 随着互联网商务的越来越成熟， 收费的搜索引擎也开始大行其道。 最典型的有 Overture 和百度， 当然也包括 Google 的广告项目 Google Adwords。 越来越多的 人通过搜索引擎的点击广告来定位商业网站， 这里面也大有优化和排名的学问， 你得学会用 最少的广告投入获得最多的点击。

    搜索引擎登录

    网站做完了以后， 别躺在那里等着客人从天而降。 要让别人找到你， 最简单的办法就是将网 站提交（ submit） 到搜索引擎。 如果你的是商业网站， 主要的搜索引擎和目录都会要求你付 费来获得收录（ 比如 Yahoo 要 299 美元） ， 但是好消息是（ 至少到目前为止） 最大的搜索引 擎 Google 目前还是免费， 而且它主宰着 60％以上的搜索市场。

    链接交换和链接广泛度（ Link Popularity）

    网页内容都是以超文本（ Hypertext） 的方式来互相链接的， 网站之间也是如此。 除了搜索 引擎以外， 人们也每天通过不同网站之间的链接来 Surfing（ “ 冲浪” ） 。 其它网站到你的 网站的链接越多， 你也就会获得更多的访问量。 更重要的是， 你的网站的外部链接数越多， 会被搜索引擎认为它的重要性越大， 从而给你更高的排名。

    合理的标签使用

  1. 导入CSS的三种方式

外部样式表， 引入一个外部 css 文件

内部样式表， 将 css 代码放在 标签内部

内联样式， 将 css 样式直接定义在 HTML 元素内部

使用链接方式时，会在装载页面主体部分之前装载css文件，这样显示出来的网页从一开始就是带有样式
导入式，会在整个页面装载完成后再装载css文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式页面，闪一下之后再出现设置样式后的效果。
对于较大网站，为了便于维护，可能会希望把所有的css样式分类别放到几个css文件中，这样如果使用链接式引入，就需要几个语句分别导入css，如果要调整css的文件分类，就需要同是调整HTML文件。这对于维护工作来说，是一个缺陷。如果使用导入式，则可以只引进一个总的css文件，在这个文件中再导入其他独立css文件;而链接则不具备这个特性

  1. 导入JS的三种方式

  2. CSS 都有哪些选择器？

派生选择器（ 用 HTML 标签申明）

id 选择器（ 用 DOM 的 ID 申明）

类选择器（ 用一个样式类名申明）

属性选择器（ 用 DOM 的属性申明， 属于 CSS2， IE6 不支持， 不常用， 不知道就算了）

除了前 3 种基本选择器， 还有一些扩展选择器， 包括

后代选择器（ 利用空格间隔， 比如 div .a{ }）

群组选择器（ 利用逗号间隔， 比如 p,div,#a{ }）

那么问题来了， CSS 选择器的优先级是怎么样定义的？

基本原则： 一般而言， 选择器越特殊， 它的优先级越高。 也就是选择器指向的越准确， 它的优先级就越 高。

!important > id > class > tag
important 比 内联优先级高

复杂的计算方法：

 用 1 表示派生选择器的优先级 用 10 表示类选择器的优先级 用 100 标示 ID 选择器的优先级 

div.test1 .span var 优先级 1+10 +10 +1 

span#xxx .songs li 优先级 1+100 + 10 + 1 

#xxx li 优先级 100 +1

那么问题来了， 看下列代码，

标签内的文字是什么颜色的？

<style> 
	.classA{ color:blue;} 
	.classB{ color:red;} 
</style> 
<body> 
	<p class='classB classA'> 123 </p> 
</body>

答案： red。 与样式定义在文件中的先后顺序有关， 即是后面的覆盖前面的， 与在<p class=’ classB classA’ >中的先后关系无关。

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

设置 display 属性为 none， 

或者设置 visibility 属性为 hidden 

技巧性：

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

19.超链接访问后hover样式就不出现的问题如何解决?

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

20.什么是 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*/
@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;}
and safari*/
  1. 块状元素和行内元素

块级元素(block)特性：

总是独占一行， 表现为另起一行开始， 而且其后的元素也必须另起一行显示; 宽度(width)、 高度(height)、 内边距(padding)和外边距(margin)都可控制; 

div p h1 h2 h3 h4 form ul

内联元素(inline)特性：

和相邻的内联元素在同一行; 宽度(width)、 高度(height)、 内边距的 top/bottom(padding-top/padding-bottom)和外边 距的 top/bottom(margin-top/margin-bottom)都不可改变（ 也就是 padding 和 margin 的 left 和 right 是可以设置的） ， 就是里面文字或图片的大小。

a b br i span input select

那么问题来了， 浏览器还有默认的天生 inline-block 元素（ 拥有内在尺寸， 可设置高宽， 但不会自动换行） ， 有哪些？ 答案： 、 、

posted @ 2018-11-13 13:56  隐姓埋名的巫妖皇  阅读(106)  评论(0)    收藏  举报