1.
display属性 :
block : CSS1 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行 可以定义高度和宽度
none : CSS1 隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行
inline-block : IE5.5 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 inherit: 看display默认是不具备继承性的,使用inherit可以让其继承父对象的display属性。
参数是auto时候,子元素内容大于父元素时出现滚动条。
参数是visible时候,溢出的内容出现在父元素之外。
参数是hidden时候,溢出隐藏。
_blank | 在新窗口中打开被链接文档。 |
_self | 默认。在相同的框架中打开被链接文档。 |
_parent | 在父框架集中打开被链接文档。 |
_top | 在整个窗口中打开被链接文档。 |
framename | 在指定的框架中打开被链接文档。 |
title标签这个不用多说,网页的标题就是写在<title></title>这对标签之内的。
title作为属性时,用来为元素提供额外说明信息。例如,给超链接标签a添加了title属性,把鼠标移动到该链接上面是,就会显示title的内容,以达到补充说明或者提示的效果。
而alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
浏览器模式
DOCTYPE 切换
- 包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
- 包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
- 但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
- DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。
8.
border-style:none;和border-0;的区别 -
1.效果border-style:none;//无边框border-0;//边框宽度为0px2.区别(1)性能差异border:0;浏览器对border-width、border-color进行渲染,占用内存。border:none;浏览器不进行渲染,不占用内存。Chrome:border:none;>> border:initial none initial;border:0;>> border:0 initial initial ;Firefox、360:border:none; >>border:medium none;border:0;>> border:0 none;计算出的样式:border:0px none 元素color属性值;(2)浏览器兼容IE7-不支持border:none;W3C提示:请始终把border-style属性声明到border-color属性之前,元素必须在改变颜色之前获得边框。参考网站:https://segmentfault.com/q/1010000000694683/a-1020000001818777
9.
浏览器的内核引擎
浏览器 的内核引擎,基本上是四分天下: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引擎详细点:-
一、Trident内核代表产品Internet Explorer,又称其为IE内核。Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
-
二、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一,仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
-
三、WebKit内核代表作品Safari、Chromewebkit 是一个开源项目,包含了来自KDE项目和苹果公司的一些组件,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
-
四、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。
10.CSS Sprites
1.简介CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。2.优点(1)CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;(2)CSS Sprites能减少图片的字节;(3)CSS Sprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率。(4)CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。3.缺点(1)图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。(2)图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。(3)图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。(4)可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。10.HTML5中的二进制大对象Blob
1、 Blob 是什么?- 在计算机中,BLOB常常是数据库中用来存储 二进制文件 的字段类型。
- 这里说的是一种 JavaScript 的对象类型。
- MYSQL中的BLOB类型就只是个二进制数据容器。而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIME类型,这相当于对文件的储存。
- 一个Blob对象就是一个包含有只读原始数据的类文件对象。
2、 创建Blob 对象在新的方法中直接可以通过 Blob() 的构造函数来创建了。构造函数,接受两个参数:第一个为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。第二个参数,是一个包含了两个属性的对象,其两个属性分别是:(1)type -- MIME 的类型(MIME是多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式。)。
(2)endings -- 决定 append() 的数据格式,
- <script>
- var blob = new Blob([ "Hello World!" ],{type: "text/plain" });
- </script>
11.
典型例子
<
div
style=”400px;height:200px;”>
<span style=”
float
:left;auto;height:100%;”>
<i style=”position:absolute;
float
:left;100px;height:50px;”>hello</i>
</span>
</
div
>
其中span的宽度和高度是多少?答案是:width:0 height:200px;
解析:首先span不是块级元素,是不支持宽高的,但是style中有了个float:left;就使得span变成了块级元素支持宽高,height:100%;即为,200,宽度由内容撑开。但是内容中的 i 是绝对定位,脱离了文档流,所以不占父级空间,所以span的width=0
CSS伪类用于向某些选择器添加特殊的效果。
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
所以综合来看如果把鼠标移到按钮并点击时,会产生hover -> focus -> active的事件
cellpadding属性和cellspacing属性
- 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间单;
- 元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离。
HTML语义化
1、什么是HTML语义化?
<基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
2、为什么要语义化?
- 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
- 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
- 有利于SEO :和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息: 爬虫依赖于标签来确定上下文和各个关键字的权重;
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
- 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
3、写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关联起来。
HTTP协议
1.简介HTTP协议(Hyper Text Transfer Protocol,超文本传输协议),是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。HTTP基于TCP/IP通信协议来传递数据。HTTP基于客户端/服务端(C/S)架构模型,通过一个可靠的链接来交换信息,是一个无状态的请求/响应协议。2.特点(1)HTTP是无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。(2)HTTP是媒体独立的:只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。(3)HTTP是无状态:无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。2.通信流程4.消息结构HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接。一旦建立连接后,数据消息就通过类似Internet邮件所使用的格式[RFC5322]和多用途Internet邮件扩展(MIME)[RFC2045]来传送。
客户端请求消息:请求行、请求头部、空行和请求数据。1234GET /hello.txt HTTP/1.1User-Agent: curl/7.16.3 libcurl/7.16.3OpenSSL/0.9.7l zlib/1.2.3Host: www.example.com Accept-Language: en, mi服务端响应消息:状态行、消息报头、空行和响应正文。123456789HTTP/1.1 200 OKDate: Mon, 27 Jul 2009 12:28:53 GMTServer: ApacheLast-Modified: Wed, 22 Jul 2009 19:15:56 GMTETag: "34aa387-d-1568eb00"Accept-Ranges: bytesContent-Length: 51Vary: Accept-EncodingContent-Type: text/plain5.请求方法(对资源的操作方式)GET 请求指定的页面信息,并返回实体主体。(获取内容)HEAD 类似于get请求,只不过返回的响应中没有具体的内容,用于获取报头POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。(新增内容)PUT 从客户端向服务器传送的数据取代指定的文档的内容。(更新内容)DELETE 请求服务器删除指定的页面。(删除内容)CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。OPTIONS 允许客户端查看服务器的性能。TRACE 回显服务器收到的请求,主要用于测试或诊断。6.状态码HTTP状态码分类
1** 信息,服务器收到请求,需要请求者继续执行操作2** 成功,操作被成功接收并处理3** 重定向,需要进一步的操作以完成请求4** 客户端错误,请求包含语法错误或无法完成请求5** 服务器错误,服务器在处理请求的过程中发生了错HTTP状态码列表100 Continue 继续。客户端应继续其请求101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议,例如,切换到HTTP的新版本协议200 OK 请求成功。一般用于GET与POST请求201 Created 已创建。成功请求并创建了新的资源202 Accepted 已接受。已经接受请求,但未处理完成203 Non-Authoritative Information 非授权信息。请求成功。但返回的meta信息不在原始的服务器,而是一个副本204 No Content 无内容。服务器成功处理,但未返回内容。在未更新网页的情况下,可确保浏览器继续显示当前文档205 Reset Content 重置内容。服务器处理成功,用户终端(例如:浏览器)应重置文档视图。可通过此返回码清除浏览器的表单域206 Partial Content 部分内容。服务器成功处理了部分GET请求300 Multiple Choices 多种选择。请求的资源可包括多个位置,相应可返回一个资源特征与地址的列表用于用户终端(例如:浏览器)选择301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI303 See Other 查看其它地址。与301类似。使用GET和POST请求查看304 Not Modified 未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源305 Use Proxy 使用代理。所请求的资源必须通过代理访问306 Unused 已经被废弃的HTTP状态码307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向400 Bad Request 客户端请求的语法错误,服务器无法理解401 Unauthorized 请求要求用户的身份认证402 Payment Required 保留,将来使用403 Forbidden 服务器理解请求客户端的请求,但是拒绝执行此请求404 Not Found 服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面405 Method Not Allowed 客户端请求中的方法被禁止406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求407 Proxy Authentication Required 请求要求代理的身份认证,与401类似,但请求者应当使用代理进行授权408 Request Time-out 服务器等待客户端发送的请求时间过长,超时409 Conflict 服务器完成客户端的PUT请求是可能返回此代码,服务器处理请求时发生了冲突410 Gone 客户端请求的资源已经不存在。410不同于404,如果资源以前有现在被永久删除了可使用410代码,网站设计人员可通过301代码指定资源的新位置411 Length Required 服务器无法处理客户端发送的不带Content-Length的请求信息412 Precondition Failed 客户端请求信息的先决条件错误413 Request Entity Too Large 由于请求的实体过大,服务器无法处理,因此拒绝请求。为防止客户端的连续请求,服务器可能会关闭连接。如果只是服务器暂时无法处理,则会包含一个Retry-After的响应信息414 Request-URI Too Large 请求的URI过长(URI通常为网址),服务器无法处理415 Unsupported Media Type 服务器无法处理请求附带的媒体格式416 Requested range not satisfiable 客户端请求的范围无效417 Expectation Failed 服务器无法满足Expect的请求头信息500 Internal Server Error 服务器内部错误,无法完成请求501 Not Implemented 服务器不支持请求的功能,无法完成请求502 Bad Gateway 充当网关或代理的服务器,从远端服务器接收到了一个无效的请求503 Service Unavailable 由于超载或系统维护,服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中504 Gateway Time-out 充当网关或代理的服务器,未及时从远端服务器获取请求505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本,无法完成处理12.labelhtml5中label标签只有for和form属性:
-