前端入门HTML5扩展知识（一）

一、 请描述一个网页从开始请求到最终显示的完整过程？

1.  在浏览器中输入网址；

2.  发送至 DNS 服务器并获得域名对应的 WEB 服务器的 IP 地址；

3.  与 WEB 服务器建立 TCP 连接；

4.  浏览器向 WEB 服务器的 IP 地址发送相应的 HTTP 请求；

5. WEB 服务器响应请求并返回指定 URL 的数据，或错误信息，如果设定重定向，则重定向到新的 URL 地址。

6.  浏览器下载数据后解析 HTML 源文件，解析的过程中实现对页面的排版，解析完成后在浏览器中显示基础页面。

7.  分析页面中的超链接并显示在当前页面，重复以上过程直至无超链接需要发送，完成全部显示。

二、浏览器加载渲染网页的过程及其了解意义

1. 浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的；

2. 在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么下载过程会启用单独连接进行下载并进行解析，解析过程中，停止页面所有往下元素的下载；

3.样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染，直到整个页面渲染结束。

了解意义：提高网页加载速度，方法如下：

（1）压缩javascript和CSS；

（2）合并外部javascript和CSS；

（3）减少DNS寻址时间；这条与将图片分散到不同的域名存储这条折中处理；

（4）使用缓存；

（5）尽量避免CSS表达式；

（6）为图片增加宽度和高度属性；

（7）将css放在网页头部，合理放置js的位置。

三、DOCTYPE  声明的作用是什么?  严格模式与混杂模式如何区分和触发，有何意义？

1、<!DOCTYPE>  声明告知浏览器的解析器，用什么文档类型规范来解析这个文档。

2、在严格模式（标准模式）中，浏览器根据规范呈现页面；在混杂模式中，页面以向后兼容的方式显示，以防止老站点无法工作。

3、如果 HTML 文档包含形式完整的 DOCTYPE，那么它一般以标准模式呈现。对于 HTML 4.01 文档，包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

意义：决定浏览器如何渲染页面。

四、如何理解 html 标签语义化？

1、语义化的主要目的在于，直观的认识标签(markup)和属性(attribute)的用途和作用。可以概括为：用正确的标签做正确的事情。

2、html 语义化可以让页面的内容结构化，便于浏览器解析，便于搜索引擎解析，并提高代码的可维护度和可重用性。

五、锚点的作用是什么？如何创建锚点？

锚点是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置。当定义了锚点后，我们可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无需

不停地滚动页面来寻找他们需要的信息了。

在使用  <a>  元素创建锚点时，需要使用  name  属性为其命名，代码如下所示：

<a name=”anchorname1”>锚点一</a>

然后就可以创建链接，直接跳转到锚点，代码如下所示：

<a href=”#anchorname1”>回到锚点一</a>

六、使用  <label>  元素显示文本与使用其他文本标记显示文本有什么不同？

<label>  元素的直观效果是直接显示标记之间的文本，而且不会为文本呈现任何特殊效果。但是，它和其他文本标记所不同的是，它为鼠标用户改进了用户体验性。

这是因为，  <label>  元素可以附带一个 for 属性，只要将该属性的值设置为表单中任何一个控件的 id 属性的值，则当用户点击该标签（文本）时，就会触发此控件。

七、列举常用的结构标记，并描述其作用。

结构标记专门用于标识页面的不同结构，相对于使用  <div>  元素而言，可以实现语义化的标签。

常用的结构标记有：

<header>  元素：用于定义文档的页眉；

<nav>  元素：用于定义页面的导航链接部分；

<section>  元素：用于定义文档中的节，表示文档中的一个具体的组成部分；

<article>  元素：常用于定义独立于文档的其他部分的内容；

<footer>  元素：常用于定义某区域的脚注信息；

<aside>  元素：常用于定义页面的一些额外组成部分，如广告栏、侧边栏和相关引用信息等。

八、超级链接有哪些常见的表现形式？

<a>  元素用于创建超级链接，常见的表现形式有：

1、普通超级链接，语法为：  <a href="" target="">文本</a>

2、下载链接，即目标文档为下载资源，语法如：  <a href="DAY02.zip">下载</a>

3、电子邮件链接，用于链接到  email，语法如：  <a href="mailto:tarena@tarena.com.cn">联系我们</a>

4、空链接，用于返回页面顶部，语法如：  <a href="#">...</a>

5、链接到 JavaScript，以实现特定的代码功能，语法如：  <a href="javascript : …">JS 功能</a>

九、简要描述行内元素和块级元素的区别。

1、块级元素的前后都会自动换行，如同存在换行符一样。默认情况下，块级元素会独占一行。例如，<p>、<hn>、<div>  都是块级元素。在显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。

2、行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。例如，<a>、<span>  等。对于行内元素，不能设置其高度和宽度。

3、还有一种元素，为行内块级元素，比如  <img>  、<input>  元素等。这些元素可以和其他行内元素位于同一行，同时可以设置其高度和宽度。

十、表单向服务器提交数据有几种方式？这些方式有什么区别？

1、将表单数据发送给服务器的常用方式有两种：Get 和 Post。

2、两种方式的区别主要在于发送数据方式不同。 使用 Get  方式向服务器发送表单数据时，表单数据将附加在POST 方法发送数据时，数据会放置在主体中发送。 URL 属性的末端；采用POST 方法发送数据时，数据会放置在主体中发送。同时，POST方法安全性高于Get方式。

3、浏览器发送给服务器的 HTTP 请求分为请求头（header）和请求主体（body）两部分。其中，必须包含头部分，用于指定发送请求的方式、目的地以及其他关键信息；而主体是可选的。在头数据和主体数据之间用一个空白行来隔开。

比如，需要发送请求到页面 GetStockPrice.php，且需要附带数据 Symbol=MSFT。

那么如果使用 Get 方式发送数据，则简化后的请求数据内容如下所示：

GET /Trading/GetStockPrice.aspx?Symbol=MSFT HTTP/1.1 

Host: localhost

如果使用 Post 方式发送数据，则简化后的请求数据内容如下所示：

POST /Trading/GetStockPrice.aspx HTTP/1.1 

Host: localhost

Content-Type: application/x-www-form-urlencoded

Content-Length: 11  

Symbol=MSFT 

2016-04-23  15:06:29