html+css知识点复习(1)

html+css知识点复习(1)_第1张图片

1. 标签的目的是什么?用可伸缩矢量图来画图或文本

2.要去掉文本超链接的下划线,下列正确的是:a{ text-decoration:none}。

3.有一个元素,需要在pc端显示而在手机端隐藏,需要使用的方法是

visible-md-8 hidden-xs
解析:v3 裝置間有四個切換階段
mobile – xs ( <768px )
tablet – sm ( 768~991px )
desktop – md ( 992~1170px )
large desktop – lg ( >1170px )

.col-xs-超小屏幕 手机 (<768px),
.col-sm-小屏幕 平板 (≥768px),
.col-md-中等屏幕
.col-lg-桌面显示器 (≥992px)(栅格参数)

4.HTML5 中新增加的标签:nav、article、video、header、footer、section......

5.css中clear的作用是什么?指明该元素周围不可出现浮动元素。

6.HTTP协议:

简介

HTTP协议(Hyper Text Transfer Protocol,超文本传输协议),是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。
HTTP基于TCP/IP通信协议来传递数据。
HTTP基于客户端/服务端(C/S)架构模型,通过一个可靠的链接来交换信息,是一个无状态的请求/响应协议。

特点

(1)HTTP是无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。
(2)HTTP是媒体独立的:只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
(3)HTTP是无状态:无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。

请求方法

GET 请求指定的页面信息,并返回实体主体。
HEAD 类似于get请求,只不过返回的响应中没有具体的内容,用于获取报头
POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
PUT 从客户端向服务器传送的数据取代指定的文档的内容。
DELETE 请求服务器删除指定的页面。
CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS 允许客户端查看服务器的性能。
TRACE 回显服务器收到的请求,主要用于测试或诊断。

状态码

HTTP状态码分类
1** 信息,服务器收到请求,需要请求者继续执行操作
2** 成功,操作被成功接收并处理
3** 重定向,需要进一步的操作以完成请求
4** 客户端错误,请求包含语法错误或无法完成请求
5** 服务器错误,服务器在处理请求的过程中发生了错

7.CSS Sprites(CSS精灵)

简介

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。

优点

(1)CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
(2)CSS Sprites能减少图片的字节;
(3)CSS Sprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率。
(4)CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

缺点

(1)图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。
(2)图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。
(3)图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。
(4)可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。

8.DHTML 的动态样式的作用是:使网页作者改变内容的外部特征而不强制用户再次下载全部内容。

9.能继承的元素:

所有元素可继承:visibility和cursor。
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承:text-indent和text-align。
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

10.嵌入在HTML文档中的图像格式可以是?

.gif、.bmp、*.jpg

11.浏览器 的内核引擎

浏览器 的内核引擎,基本上是四分天下:
1)Trident: IE 以Trident 作为内核引擎;
2)Gecko: Firefox 是基于 Gecko 开发;
3)WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器;
4)Presto: Opera的内核,但由于市场选择问题,主要应用在手机平台--Opera mini
注:2013年2月Opera宣布转向WebKit引擎
注:2013年4月Opera宣布放弃WEBKIT,跟随GOOGLE的新开发的blink引擎

12.BFC(块级格式化上下文)

计算BFC的高度时,浮动子元素也参与计算。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素是不会影响到外面的元素。

13.注释

HTML注释 :
CSS注释 :/* 注释内容 */
JS注释 :单行注释以 // 开头 ;多行注释以 /
*开始,以 */ 结尾。

14.bootstrap中,一个元素需要在打印时隐藏,使用的类是:hidden-print。

15.CSS3新增属性

box-shadow、border-radius、rgba【前三个数值是 RGB 颜色的值, 最后一个数值指代的是元素的透明度 (0 表示透明, 1 表示不透明).】

16.iframe的使用场景有?

与第三方域名下的页面共享cookie
上传图片,避免当前页刷新
左边固定右边自适应的布局
资源加载

扩展

iframe可用在以下几个场景中:
(1)典型系统结构,左侧是功能树,右侧就是一些常见的table或者表单之类的。为了每一个功能,单独分离出来,采用iframe。
(2)ajax上传文件。
(3)加载别的网站内容,例如google广告,网站流量分析。
(4) 在上传图片时,不用flash实现无刷新。
(5) 跨域访问的时候可以用到iframe,使用iframe请求不同域名下的资源。

17.元素的alt和title有什么异同?

alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字。

18.列哪个样式定义后,内联(非块状)元素可以定义宽度和高度:

display:block

19.sessionStorage 保存数据的方法正确的是:

sessionStorage.setItem(“键名”,”键值”);

20.如果一个HTML文档内含有阿拉伯文,则应该?

使用utf-8编码
解析:UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,又称万国码。UTF-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言(如英文,日文,韩文)。
GBK是汉字编码,是双字节码,可表示繁体字和简体字。
ISO8859-2 字符集,也称为 Latin-2,收集了东欧字符。

21.浏览器在一次 HTTP 请求中,需要传输一个 4097 字节的文本数据给服务端,可以采用那些方式? post

解析:IndexdDB 是 HTML5 的本地存储,把一些数据存储到浏览器(客户端)中,当与网络断开时,可以从浏览器中读取数据,用来做一些离线应用。
Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份,最大为 4 kb 。
url 参数用的是 get 方法,从服务器上获取数据,大小不能大于 2 kb 。
Session 是服务器端使用的一种记录客户端状态的机制 。
post 是向服务器传送数据,数据量较大。
local Storage 也是 HTML5 的本地存储,将数据保存在客户端中(一般是永久的)。

22.块级元素和行内元素:

块级元素
html+css知识点复习(1)_第2张图片
行内元素
html+css知识点复习(1)_第3张图片
块级元素与行内元素的区别

(1)块级元素会独占一行,其宽度自动填满其父元素宽度;
行内元素不会独占一行,相邻的行内元素会排列在同一行,直至一行排不下才会换行,其宽度随元素的内容而变化。
(2)块级元素可以包含行内元素和块级元素;行内元素不能包含块级元素。
(3)行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。

可变元素
html+css知识点复习(1)_第4张图片

23.如何让一个区块居中?

center、center-block
解析:center-block是bootstrap里的东西~就是我们常用的margin:0 auto;

24.关于栅格系统,以下说法正确的是:

会有自动的padding样式
其字体默认为14px
其box-sizing默认为border-box

25.以下对form表单中input元素的readonly与disabled属性描述正确的是?

Disabled为真时,input的值不会随着表单提交

26.置换元素:img、input、textarea、select...

解析:a) 置换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
例如:浏览器会根据标签的src属性的 值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;标签的type属性来决定是显示输入 框,还是单选按钮等。 (x)html中 的