前端入门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:[email protected]">联系我们</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

时间: 2024-10-06 00:22:32

前端入门HTML5扩展知识(一)的相关文章

Web前端入门必学知识

入门主要有三个部分   一.html+css部分:      1.前端的入门门槛极低,体现在HTML和CSS上运行环境就是浏览器,html+css这部分特别简单,网上搜资料,书籍视频非常多.css中盒子模型,流动,block,inline,层叠,样式优先级等这些自学起来也是非常容易.最 后再深入了解下浏览器差异性,ie9以下兼容简单了解就行了,ie9以下浏览器被淘汰掉是趋势,低版本没必要浪费大量时间去学习兼容主流浏览 器,google chrome浏览器.firefox浏览器.safari浏览器

前端涉及的所有知识体系

资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript(JS 教程) 麻省理工学院公开课:计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS函数式编程指南 JavaScript Promise迷你书(中

转摘_结合个人经历总结的前端入门方法

转载请注明出处: https://github.com/qiu-deqing/FE-learning Table of Contents generated with DocToc FE-learning 必备基础技能 基本开发工具 学习方法和学习目标 入门之路 继续提高 一些个人经历 LingyuCoder的学习经历 工具 技能 语言基础 进阶 项目 未来 其他 入门书 一些不错的网站 历程 MrRaindrop的学习经历 缘起 项目,下一个项目 收集癖和知识管理 跟对神 读书 前端的定位 最

前端入门方法(大全)

转载请注明出处: https://github.com/qiu-deqing/FE-learning Table of Contents generated with DocToc FE-learning 必备基础技能 基本开发工具 学习方法和学习目标 入门之路 继续提高 一些个人经历 LingyuCoder的学习经历 工具 技能 语言基础 进阶 项目 未来 其他 入门书 一些不错的网站 历程 MrRaindrop的学习经历 缘起 项目,下一个项目 收集癖和知识管理 跟对神 读书 前端的定位 最

最全的资源教程-前端涉及的所有知识体系

https://github.com/AutumnsWind/Front-end-tutorial 资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript(JS 教程) 麻省理工学院公开课:计算机科学及编程导论 JavaScript中的t

Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转

Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 - 转 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript(JS 教程) 麻省理工学院公开课:计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS

前端:HTML5学习之路(一)

第1章 HTML5基础 关于HTML5基础这一部分的内容没有明显边界.各种HTML5教材关于HTML5基础知识的介绍大同小异,这里不做过多赘述. 1. 我们要把HTML5简单用起来,首先要学会新建HTML5文档.每个网页都包含doctype.html.head和body元素,以下是一个简单的HTML5文档示例(用到了a.article.em.h1.img和p这6种常见的元素): 1 <!doctype html> 2 <html> 3 <head> 4 <meta

Web前端入门学习(2)——HTML常用标签

HTML标签 a标签 a标签是一个超链接标签,用于从一个页面链接到另一个页面.在<Web前端入门学习(1)>有提到过4个伪类,分别是a:link.a:visited.a:hover.a:active. a:link代表的是未访问过的链接,当访问者首次打开网页未点击链接时,所表现的形式: a:visited代表的是访问过的链接,相对于link,是访问者点击了连接后,所表现的形式: a:hover代表的是当鼠标经过链接上面时所表现的形式,鼠标经过后,链接会有所变化: a:active代表的是当用户

web前端入门:一小时学会写页面

一小时学会写页面 作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法.既然题目已经定了一个小时那么废话就不多说了,计时开始 1.什么是前端 简单来说,前端就是做网页(大神勿喷,本文一切从简) 2.前端技术 html,是首字母缩写,具体意义请百度,大家要记住“t”代表text,ok你们没有想错,text就是文本文件text,好了准备工作做好了,现在开始做网页 3.我们的第一个网页 请身边有电脑的小伙伴和我一起开始,在桌面鼠标