HTML相关

知无涯者
245 阅读14分钟

1 html5有哪些新特性、移除了那些元素？

添加：

  • 绘画canvas
  • 媒体video和audio元素
  • 存储 localStorage 本地离线存储,长期存储数据，浏览器关闭后数据不丢失
  • 存储 sessionStorage 数据浏览器关闭后自动删除
  • 新的语义化标签 footer,header,nav,section,article
  • 新的表单控件 email,time,date,calendar

移除：

  • 存表现的元素 font,big,u
  • 对可用性产生负面影响的元素：frame、frameset、noframes

支持HTML5新标签：

  • IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后，还需要添加标签默认的样式
  • 当然也可以直接使用成熟的框架、比如html5shim
<!--[if lt IE 9]>
 
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
 
<![endif]-->

2 前端注意哪些SEO?

  • 合理的title,description,keywords
<title>网站标题</title>
<meta name=”Keywords” Content=”关键词1,关键词2,关键词3,关键词4″>
<meta name=”Description” Content=”你网页的简述”>

这三个属性，搜索的权重逐渐减小

  • 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
  • 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
  • 重要内容不要用js输出：爬虫不会执行js获取内容
  • 非装饰性图片必须加alt
  • 提高网站速度：网站速度是搜索引擎排序的一个重要指标

3 从浏览器地址栏输入url到显示页面的步骤

简略回答

  • 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
  • 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
  • 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
  • 载入解析到的资源文件，渲染页面，完成。

详细回答

1 URL的解析

  • 一个URL包括协议，网络地址，资源路径
  • 协议：最常用的比如HTTP（超文本传输协议）FTP（文件传输协议）
  • 网络地址：可以是域名或者ip地址，包括端口号，如果没有默认为80 如果是不合法的地址，搜索引擎当作关键字进行搜索，合法进行资源请求

2 DNS域名解析

首先我们大部分输入的都是域名www.baidu.com 这是为了便于人类识别，但是通信使用的其实是ip地址 需要DNS域名解析服务

①先在各种缓存信息种去找

先到浏览器缓存记录中查找------浏览器会缓存DNS一段时间

系统缓存-----如果浏览器中没有找到，浏览器会有一个系统调用，获得系统缓存中的记录

路由器缓存-----接着将请求发给路由器，路由器一般也有自己的DNS缓存 浏览器缓存DNS ==》 系统缓存 ==》 路由器

②DNS服务器查找

如果上述的缓存都没有查找到 查询本地域名服务器（维护一个高速缓存，存放的就是最近使用过的域名和IP地址），本地没找到就是递归到上一次，直到根域名服务器，通过返回得到的ip，找到路（客户端到服务器的路径）

image.png

3 TCP链接的建立

找到正确的ip后，浏览器就向服务器建立TCP连接请求，三报文握手建立连接，建立连接后就可以发送数据了 TCP三次握手 客户端 ==》 服务端 发送 SYN 服务端 SYN + ACK， 接收请求 客户端 ==》 ACK 收到回复，建立请求

image.png

4 发送HTTP请求

与服务器建立了连接后，就可以向服务器发起请求了

根据HTTP协议的要求，组织一个HTTP数据包，向服务器发送HTTP请求，HTTP的请求报头有请求行和请求报头，空行。

image.png

image.png 请求行包括请求方法、URI、HTTP版本。 首部行包括了很多的请求条件和属性

5 服务器处理请求

服务器收到请求并响应，生成一个HTTP响应报文，通过TCP协议发送给浏览器主机

通过HTTP请求服务后，服务器会像浏览器返回一个应答信息----------HTTP响应，

在HTTP里，有请求就会有响应，哪怕是错误信息。这里我们同样看下响应报文的组成结构：

响应报文

image.png

HTTP状态码

image.png

6 断开TCP连接

为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似，关闭TCP连接，需要4次握手。

image.png

  • 客户端发起中断请求，发送FIN到服务端
  • 服务端收到请求，可能数据还没有发完。这个时候不会关闭socket，而是回复ACK，告诉客户端知道了
  • 客户端进入Fin_Wait状态，继续等待服务端端的FIN报文。服务端端发送完毕后，会向客户端发送FIN
  • 客户端客服端收到后就回复ACK，并关闭连接

7 浏览器解析文件

浏览器通过解析HTML，生成DOM树，解析CSS，生成CSS规则树，然后通过DOM树和CSS规则树生成渲染树。渲染树与DOM树不同，渲染树中并没有head、display为none等不必显示的节点。

4 如何进行网站性能优化

  • content 方面

    减少HTTP请求：合并文件、CSS精灵、inline Image 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名 减少DOM元素数量

  • Cookie 方面

    减小cookie大小

  • Server 方面

    使用CDN 配置ETag 对组件使用Gzip压缩

  • 图片 方面

    优化图片：根据实际颜色需要选择色深、压缩 优化css精灵 不要在HTML中拉伸图片

  • css 方面

    将样式表放到页面顶部 不使用CSS表达式 使用<link>不使用@import

  • js 方面

    将脚本放到页面底部 将javascript和css从外部引入 压缩javascript和css 删除不需要的脚本 减少DOM访问

5 语义化的理解

  • 简单来说：用正确的标签做正确的事情！
  • HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
  • 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
  • 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

6 对浏览器内核的理解

  • 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
  • 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
  • JS引擎则：解析和执行javascript来实现网页的动态效果
  • 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

7 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

  • cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
  • cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递
  • sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存 存储大小：

cookie数据大小不能超过4k sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据 sessionStorage 数据在当前浏览器窗口关闭后自动删除 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

8 页面访问cookie的限制条件

cookie （储存在用户本地终端上的数据）

cookie 指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据。cookie 在网络系统中几乎无处不在，当我们浏览以前访问过的网站时，网页中可能会出现 ：你好 XXX。

1 跨域问题：

cookie允许Web开发者保留他们的用户的登录状态。但是当你的站点有一个以上的域名时就会出现问题了。在cookie规范上说，一个cookie只能用于一个域名，不能够发给其它的域名。因此，如果在浏览器中对一个域名设置了一个cookie，这个cookie对于其它的域名将无效。

解决： 通过nginx反向代理，jsonp方式请求

2 设置了HTTP only：

如果在cookie中设置了HttpOnly属性，那么通过程序(JS脚本、Applet等)将无法读取到cookie信息，这样能有效的防止XSS攻击。

9 cookie的作用与弊端

cookie的作用

  • 可以在客户端上保存用户数据，起到简单的缓存和用户身份识别等作用。
  • 保存用户的登陆状态，用户进行登陆，成功登陆后，服务器生成特定的cookie返回给客户端，客户端下次访问该域名下的任何页面，将该cookie的信息发送给服务器，服务器经过检验，来判断用户是否登陆。
  • 记录用户的行为。

cookie弊端

  • 增加流量消耗，每次请求都需要带上cookie信息。
  • 安全性隐患，cookie使用明文传输。如果cookie被人拦截了，那人就可以取得所有的session信息。
  • Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉

10 介绍cookie的属性

image.png

  • Name
    • 为一个cookie的名称（用 JavaScript 操作 Cookie 的时候注意对 Value 进行编码处理。）
  • value
    • 为一个cookie的值（用 JavaScript 操作 Cookie 的时候注意对 Value 进行编码处理。）
  • Domain
    • 为可以访问此cookie的域名

注：二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享，需要设置domain为顶级域名，这样就可以在所有二级域名里面获得到这个cookie的值了。

顶级域名只能获取到domain设置为顶级域名的cookie，其他domain设置为二级域名的无法获取。

  • Path
    • 为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie
  • Expires
    • 字段为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

当为会话性 Cookie 的时候，值保存在客户端内存中，并在用户关闭浏览器时失效。需要注意的是，有些浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话期 Cookie 也会被保留下来，就好像浏览器从来没有关闭一样。

与会话性 Cookie 相对的是持久性 Cookie，持久性 Cookies 会保存在用户的硬盘中，直至过期或者清除 Cookie。这里值得注意的是，设定的日期和时间只与客户端相关，而不是服务端。

  • Max-Age
Set-Cookie: id=a3fWa; Max-Age=604800;

Max-Age 可以为正数、负数、甚至是 0。

如果 max-Age 属性为正数时，浏览器会将其持久化，即写到对应的 Cookie 文件中。

当 max-Age 属性为负数，则表示该 Cookie 只是一个会话性 Cookie。

当 max-Age 为 0时，则会立即删除这个 Cookie。

假如 Expires和 Max-Age 都存在，Max-Age优先级更高。

  • Size 此cookie大小
  • HttpOnly
    • 若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。
  • Secure
    • 设置是否只能通过https来传递此条cookie。使用 HTTPS安全协议，可以保护 Cookie 在浏览器和 Web 服务器间的传输过程中不被窃取和篡改。
  • SameSite

11 doctype 的作用？严格模式与混杂模式如何区分？它们有何意义？

DOCTYPE是document type (文档类型) 的缩写。 < !DOCTYPE > 声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则。比如：loose.dtd

  • 严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面
  • 混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。

12 HTML5 为什么只需写< !DOCTYPE HTML> ?

HTML5不基于SGML （标准通用标记语言），因此不需要对DTD（ DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。）进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

13 WEB标准以及W3C标准是什么?

标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离

14 行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素不可以设置宽高，不独占一行 块级元素可以设置宽高，独占一行

行内：

<a>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<i>、<img>、<input>、<kbd>、<label>、<q>、<samp>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<textarea>、<tt>、<var>

块级：

<address>、<caption>、<dd>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<legend>、<li>、<noframes>、<noscript>、<ol>、<ul>、<p>、<pre>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>

空：

<br> <hr> <img> <input> <link> <meta>

15 xhtml和html有什么区别?

功能上的差别

主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页

书写习惯的差别

XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素

16 iframe有那些缺点？

  • iframe会阻塞主页面的Onload事件
  • 搜索引擎的检索程序无法解读这种页面，不利于SEO
  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
  • 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

17 网页验证码是干嘛的，是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

18 title与h1的区别、b与strong的区别、i与em的区别？

  • title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响;
  • strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时， 会重读，而是展示强调内容。
  • i内容展示为斜体，em表示强调的文本；
avatar
文章
阅读
粉丝