-
假如发现打开的页面乱码了,该如何处理?
- 查看 ,标签,查看内部对不对;
- 用记事本打开html文件,查看编码方式对不对;
- 打开js文件,看看对不对;
- 看看声明的编码方式和实际文件的编码方式,是否相同;
- 如果是异步请求返回的内容,查看返回报文的编码对不对;
-
SEO
- 含义:
- 合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前, 不同页面title要有所不同;description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同; keywords列举出重要关键词即可。
- 语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页
- 重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取
- 重要内容不要用js输出:爬虫不会执行js获取内容
- 少用iframe:搜索引擎不会抓取iframe中的内容
- 非装饰性图片必须加alt
- 提高网站速度:网站速度是搜索引擎排序的一个重要指标b。
-
在html文档中,script标签一般插入在页面的哪个位置?包含css属性的style标签呢?为什么?
- script:body的末尾;因为浏览器遇见script标签时,会解析js代码,如果放在末尾,会减少浏览器显示空白页面的时间。
- style:head的末尾;这样加载body元素时,他们是直接产生样式的;
- 假如浏览器不支持javascript(比如说被禁止了),我们怎么告诉用户应打开浏览器的javascript脚本功能?
- 将提示信息放入 标签中,启用脚本时,里面的内容会被忽视。
复制代码
<body> <script type="text/javascript"> <!--document.write("如果显示了这段文字,那么您的浏览器支持 JavaScript!")//--> </script> <noscript>No JavaScript support!</noscript> <p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p> </body> ``` 复制代码
-
web开发中会话跟踪的方法有哪些?
- cookie;session;url重写;隐藏input;ip地址。
-
img 中的title和alt的区别
- title 鼠标hover显示的内容。alt为图片无法加载时候显示。设置有意义的值,搜索引擎会分析。
-
doctype
- 含义:HTML的头部,不区分大小写,他不是一个标签, 告诉浏览器当前版本的指令,常用的HTML5的写法为:<!doctype html>
-
HTML全局属性有哪些:
- class:类的标识,多个类名用空格分开,css和js可以通过属性获取元素。
- id:文档内唯一。
- data-name:为元素增加自定义属性。通过target.dataset.name或者target.getAttribute(data-name)获取、
- style:行内css样式。
- title:元素相关的建议信息。
- contextmenu(火狐):右击本标签弹出的菜单内容。contextmenu="mymenu" ,标签为menu id = 'mymenu'.
- oncontextmenu: 右击本标签的弹框内容。
- contentediteable: 标签内的内容在网页上是否可编辑。
- dir:设置元素的文本方向。
- draggable: 是否可以拖拽移动。
- hidden:hidden=‘hidden’,页面有dom结构。隐藏改元素,通过js删除属性显示。
- lang:一般用于html,便于SEO,用什么语言解析。有些怪癖的标签不能用,比如script和iframe等
- spellcheck :对input type=text;textarea或者可以编辑的文本拼写检查,
- tabindex:页面上tab键的时候,根据设置的数字大小进行切换。
-
web语义化
- 包含HTML语义化和css语义化。好处;
- 没有样式也可以呈现清晰的页面结构
- 便于维护、便于搜索引擎、盲人更好的阅读。
- 包含HTML语义化和css语义化。好处;
-
http 请求的方法
- GET:请求服务器发送某个资源。
- POST:常用用于表单提交,或者大量数据的提交,安全性高。
- PUT:提交一个新的文档,如果已经有了,就返回新的文档,
- DELETE:删除url中指定的资源
- HEAD:类似于get,响应中仅仅返回首部,不返回实体。
- OPTIONS: 预请求,请求服务器告知其支持的各种功能,可以查询服务器支持哪些方法或者某些特殊资源支持的哪些方法。
-
浏览器输入url到显示页面发生了什么
- 检测是否有缓存
- 没有缓存,新的请求;
- 有缓存,通过判断(http中Expires和Cache-Control( max-age=)判断)是否最新,
- 浏览器解析url:协议、Ip主机、端口、path等
- 浏览器组装一个请求头。
- 浏览器获取主机ip地址过程:
- 浏览器缓存、本机缓存、hosts文件、路由器缓存、ISP 、DNS缓存、DNS递归查询(可能存在负载均衡导致每次IP不一样)
- 打开一个socket与目标IP地址,端口建立TCP链接,三次握手如下:
- 客户端发送一个TCP的SYN=1,Seq=X的包到服务器端口;服务器发回SYN=1, ACK=X+1, Seq=Y的响应包;客户端发送ACK=Y+1, Seq=Z
- TCP链接建立后发送HTTP请求
- 服务器接受请求并解析,将请求转发到服务程序,如虚拟主机使用HTTP Host头部判断请求的服务程序
- 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜,返回304等对应状态码
- 处理程序读取完整请求并准备HTTP响应,可能需要查询数据库等操作
- 服务器将响应报文通过TCP连接发送回浏览器
- 浏览器接收HTTP响应,然后根据情况选择关闭TCP连接或者保留重用,关闭TCP连接的四次握手如下:
- 主动方发送Fin=1, Ack=Z, Seq= X报文
- 被动方发送ACK=X+1, Seq=Z报文
- 被动方发送Fin=1, ACK=X, Seq=Y报文
- 主动方发送ACK=Y, Seq=X报文
- 浏览器检查响应状态吗:是否为1XX,3XX, 4XX, 5XX,这些情况处理与2XX不同
- 如果资源可缓存,进行缓存
- 对响应进行解码(例如gzip压缩)
- 根据资源类型决定如何处理(假设资源为HTML文档)
- 解析HTML文档,构件DOM树,下载资源,构造CSSOM树,执行js脚本,这些操作没有严格的先后顺序,以下分别解释
- 构建DOM树:
- Tokenizing:根据HTML规范将字符流解析为标记
- Lexing:词法分析将标记转换为对象并定义属性和规则
- DOM construction:根据HTML标记关系将对象组成DOM树
- 根据DOM树和CSSOM树构建渲染树:
-
从DOM树的根节点遍历所有可见节点,不可见节点包括:1)script,meta这样本身不可见的标签。2)被css隐藏的节点,如display: none 复制代码
-
对每一个可见节点,找到恰当的CSSOM规则并应用 复制代码
-
发布可视节点的内容和计算样式 复制代码
- js解析如下:
- 浏览器创建Document对象并解析HTML,将解析到的元素和文本节点添加到文档中,此时document.readystate为loading
- HTML解析器遇到没有async和defer的script时,将他们添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序,他们可以遍历和操作script和他们之前的文档内容
- 当解析器遇到设置了async属性的script时,开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器不会停下来等它下载。异步脚本禁止使用document.write(),它们可以访问自己script和之前的文档元素
- 当文档完成解析,document.readState变成interactive
- 所有defer脚本会按照在文档出现的顺序执行,延迟脚本能访问完整文档树,禁止使用document.write()
- 浏览器在Document对象上触发DOMContentLoaded事件
- 此时文档完全解析完成,浏览器可能还在等待如图片等内容加载,等这些内容完成载入并且所有异步脚本完成载入和执行,document.readState变为complete,window触发load事件
- 显示页面
- 检测是否有缓存
-
HTTP request报文结构是怎样的
- 首行是Request-Line包括:请求方法,请求URI,协议版本,CRLF
- 首行之后是若干行请求头,包括general-header,request-header或者entity-header,每个一行以CRLF结束
- 请求头和消息实体之间有一个CRLF分隔
- 根据实际请求需要可能包含一个消息实体
GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1 Host: www.w3.org Connection: keep-alive Cache-Control: max-age=0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36 Referer: https://www.google.com.hk/ Accept-Encoding: gzip,deflate,sdch Accept-Language: zh-CN,zh;q=0.8,en;q=0.6 Cookie: authorstyle=yes If-None-Match: "2cc8-3e3073913b100" If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT name=qiu&age=25 复制代码
-
HTTP response报文结构是怎样的
- 首行是状态行包括:HTTP版本,状态码,状态描述,后面跟一个CRLF
- 首行之后是若干行响应头,包括:通用头部,响应头部,实体头部
- 响应头部和响应实体之间用一个CRLF空行分隔
- 最后是一个可能的消息实体
HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1
{"name": "qiu", "age": 25}
复制代码
-
HTML5的离线存储怎么使用?能否解释一下工作原理?
-
在用户没有连接英特网时,可以正常访问站点和应用;在用户连接英特网时,更新用户机器上的缓存文件。
-
原理:HTML5的离线存储是基于一个新建的
.appcache
文件的缓存机制(并非存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储下来。之后当网络处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。 -
使用方法:
- (1)在页面头部像下面一样加入一个 manifest 的属性;
- (2) 在 cache.manifest 文件里编写离线存储资源;
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resource/logo.png FALLBACK: / /offline.html 复制代码
- (3) 在离线状态时,操作 window.applicationCache 进行需求实现;
-
-
计算机二级考察table运用和字体
<p style="font-family: 'DIN Alternate'"><font size="5" face="隶书">我是一个隶属标题</font></p> <table border="2"> <tr> <td><b>b</b></td> <td><i>i</i></td> </tr> <tr> <td><strike>strike 删除线(罢工)</strike></td> <td><tt>tt</tt></td> </tr> <tr> <td><sub>sub下标</sub></td> <td rowspan="2"><sup>sup上标</sup></td> </tr> <tr> <td><a href="">a</a></td> </tr> </table> 复制代码
-
Label的作用是什么?是怎么用的?
- 标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label> 复制代码