HTML base-CSDN博客

假如发现打开的页面乱码了，该如何处理？
- 查看，标签，查看内部对不对；
- 用记事本打开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">
      
  </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语义化。好处；
  - 没有样式也可以呈现清晰的页面结构
  - 便于维护、便于搜索引擎、盲人更好的阅读。
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>
复制代码
```