浏览器如何解析html

专业性论述，以下内容引用网络，请参考：

概述

为HTML文档尽早指定字符编码，可以让浏览器立刻开始执行脚本。

细节

HTML文档是作为带有字符编码信息的字节流序列在互联网中传送的。字符编码信息可以在随文档发送的HTTP响应头信息中指定，也可以在文档的 HTML标签中指定。浏览器根据字符编码信息将字节流转换为显示在浏览器上的字符。如果不知道如何构造一个页面的字符，浏览器自然也不能正确地渲染页面。绝大部分浏览器在开始执行任何JavaScript代码或者绘制页面之前都要缓冲一定数量的字节流，缓冲的同时它们也要查找相关的字符编码设定（一个值得注意的例外是IE6/7/8）。

不同浏览器需要缓冲的字节流数量不同，另外如果找不到编码设定，各浏览器默认的编码也不同。但是不管哪一种浏览器，如果在已经缓冲了足够的字节流、开始渲染页面之后才发现指定的编码设定与其默认值不同，都会导致重新解析文档并重绘页面。如果编码的变化影响到了外部资源（例如css\js\media），浏览器甚至会重新对资源进行请求。

为了避免这些延迟，对任何超过1k（精确地说是1024字节，这是我们测试过的所有浏览器的最大缓冲限制）的HTML文档，要尽早指定字符编码。

建议

通过HTTP头信息或meta标签指定编码

为HTML文档指定编码设定有几种方式：

服务器端：通过web服务器的配置来指定编码参数，为所有text/html类型的文档指定带有正确编码信息的Content-Type头信息。例如Content-Type: text/htmlcharset=UTF-8

客户端：在HTML代码中包含http-equiv="content-type"的meta标签，并指定字符编码。例如 。

如果可能的话，为你的web服务器做指定字符编码的HTTP头信息配置。某些浏览器（例如Firefox）在执行JavaScript之前会用（比 其它浏览器）更短的延迟缓冲来检查头信息中是否指定字符编码。这意味着它们可以跳过对HTML标签的检查，缩短缓冲的字节数和延迟时间。

把meta标签放在head区域的最前面

如果你不能对web服务器配置进行修改，又需要通过meta标签指定编码，要确保你用于指定编码的meta标签是文档中head标签的第一个子元 素。浏览器会在文档的前1024字节中寻找字符编码参数，因此为了避免性能损耗，编码参数在文档头部越早出现越好（译注：在IE6以下的版本中，特定情况 下，如果该meta标签不是head的第一个子元素，则会被忽略。具体触发情况尚未进行仔细测试，初步估计是与web服务器配置的默认编码或浏览器默认编码有关）。

始终指定文档类型

在浏览器开始检查字符编码设定前，它们必须先检测将被处理的文档是什么类型。如果没有在头信息或meta标签中指定文档类型（content-type），浏览器就会通过很复杂的算法去“嗅探”文档的类型。这个过程会造成额外的延迟，而且还会带来安全漏洞。

务必指定正确的字符编码

你在HTTP头信息或meta标签中指定的字符编码设置一定要和编辑HTML文档时的实际字符编码一致，这非常重要。另外，如果同时通过HTTP头信息和Meta标签两种方式指定了字符编码，它们一定要保持一致。否则浏览器发现两者相互矛盾，会造成页面渲染错误或者为了重绘页面而造成额外的延迟。有关这一点，你可以阅读HTML 4.01规范（英文）中的5.2节：字符编码（英文）。

html文件是一种超文本文件，也被称为网页文件，大家查看的大部分网页都是html格式，那么大家要怎么打开html格式呢?其实很简单，小编经过一番研究，整理出了三种可以快速打开html文件的方法，就放在下文了，大家有需要的可以来阅读一下。

html文件怎么打开

方法一、

1.打开HTML有很多工具，如果没有安装任何网页编辑开发软件，可以使用系统自带的记事本打开HTML文件。选中HTML文件后右键，d出选项卡中选择“打开方式”，再d出选项中选择“记事本”

2.如果鼠标右键在“打开方式”中，没有“记事本”可选，需要再点“选择默认程序”进入再找到“记事本”即可打开html网页文件。

方法二、

1.我们可以使用浏览器来打开，小编这里使用的是谷歌浏览器

谷歌浏览器

谷歌浏览器是一款深受广大用户们所喜爱的专业的浏览器软件。在这款谷歌浏览器中不仅仅有着其自带的谷歌搜索引擎，同时其他的众多的搜索引擎都是可以在这里进行设置的，百度引擎、360搜索引擎等等都是可以来进行设置的，非常的全面，欢迎大家前来下载使用。

2.在桌面选择html文件，右键打开，选择打开方式为谷歌浏览器

3.通过浏览器打开之后，可以看到html网页效果，有的时候html网页显示很乱，是因为没有找到css和js文件，需要将这些文件放在一起，html的网页才会出来。

方法三、

1.如果大家想要对html文件进行编辑，则需要用到dreamweaver

Dreamweaver（网页制作）

Dreamweaver（网页制作）是一款功能非常强大好用的网页代码编辑器软件。这款软件将可视化的布局功能与开发功能融合在一起，用户可以一边制作网页一边观看网页的页面效果，为用户提供了一个高效的处理环境。并且一些基础 *** 作并不复杂，新手也可以短时间上手。快来免费下载吧。

2.在电脑桌面上面找到这个扩展名字为html的文件

3.在这个文件上面右键单击，出现的菜单中选择“打开方式”，然后选择“Adobe dreamweaver CC”选项

4.在dreamweaver软件中打开后，单击“代码”选项，进行查看即可。

以上就是小编为大家带来的html文件怎么打开的三种方法了，希望能帮助到大家。

URL：

https://account.cnblogs.com/signin

编写思路(入门级别)

1、打开谷歌浏览器

2、打开博客园登录网页地址

3、在用户名输入框内输入用户名

4、在密码输入框内输入密码

5、点击登录

6、检测是否跳转到了登录成功的页面

脚本如下图:

4feb5d799ae52eea8c1b063cc8c60f85.png

现在我们来分解下输入用户名这个动作

1、首先找到用户名输入框

2、在输入框中输入用户名

【找到用户名输入框】实现此步骤的前提就是需要掌握控件的定位。具体在脚本中实现也就是图中的第11行：

('//*[@autocomplete="username"]')

WEB控件定位所做的事情，就是通过特定的方式找到我们需要 *** 作的页面控件

那么如何才能学会这个控件定位呢？第一步就是简单了解下前端的语言。和我一起往下看即可轻松学会。

二、WEB网页文本—HTML5

要想掌握WEB自动化测试的控件定位，我们首选要了解控件是什么。

控件就是浏览器展示的前端语言生成对象。

web前端的基础语言就是HTML5

依旧是老套路，拿博客园举例：

5faa8b60ca05f50f4c0d6430574214fd.png

用户打开浏览器，看到的用户名输入框、密码输入框、登陆按钮、立即注册等等所有，都是浏览器展示的HTML5语言的对象。

我们按下F12键即可打开浏览器的调试模式，来查看网页的HTML5源代码。

如下图：

按下F12后右边页面中Elements选项对应的就是网页的html5代码

第一次接触肯定觉得非常晦涩难懂、云里雾里。但是相信我，万事开头难！你在看我自动化测试思维的文章以前不也是觉得自动化测试非常高大上吗?

不了解什么是自动化测试思维？戳下方5分钟即可学会☟☟☟

【自动化测试入门】自动化测试思维

00a821b679ab09e913981cf6a655f861.png

HTML5一个控件的写法一般是2个尖括号成对出现。

一、第一个尖括号的第一个单次为控件类型，之后是控件属性。

二、第二个尖括号表示此控件的尾部。

三、2个尖括号中间为控件在前端显示的文字部分。

举例说明的话。控件类型是狗的类型(中华田园犬、哈巴狗、牧羊犬等)，控件属性就是这条狗的名字、性别、体重、毛发颜色等。2个尖括号中间的文字，就是你想在此页面上展示的这个狗的'名字'。

还是拿博客园的登陆界面举例来说：

点击'小箭头'定位控件，或者在控件处右键选中'检查元素'，即可定位到指定的控件

7b1de1397c71dcde07d8d9da72e61ab5.png 控件的源码为：

<input _ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登录用户名 / 邮箱"autocomplete="username" id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false">

input就是控件类型

input以外的就都是控件属性

这个输入框的控件属性有：

_ngcontent-miv-c141=""

matinput=""

formcontrolname="username"

placeholder="登录用户名 / 邮箱"

autocomplete="username"

id="mat-input-0"

aria-describedby="mat-error-0"

aria-invalid="true"

aria-required="false"

三、基于控件的唯一控件属性定位

了解了什么是控件，现在我们在上手控件的定位。

selenium有八种定位控件的方式，有6种都是基于HTML5原生控件的单一控件属性来定位的。

id定位：

find_element_by_id()

name定位：

find_element_by_name()

class定位：

find_element_by_class_name()

tag定位：

find_element_by_tag_name()

link定位：

find_element_by_link_text()

partial_link定位：

find_element_by_partial_link_text()

以下两种为特定的2种控件定位方法，下一篇文章再做详解。 xpath定位：find_element_by_xpath() CSS定位：find_element_by_css_selector()

下面我将举例来讲解这6种基于单一控件属性的定位方法。

还是拿博客园的登陆界面举例来说：

833005656b1e6d0fa4a7e2cc58d875a5.png

登陆用户名的输入框的HTML5源码为：

<input _ngcontent-miv-c141=""matinput=""formcontrolname="username"placeholder="登录用户名 / 邮箱"autocomplete="username" id="mat-input-0" aria-describedby="mat-error-0" aria-invalid="true" aria-required="false">

这个输入框的控件属性有：

_ngcontent-miv-c141=""

matinput=""

formcontrolname="username"

placeholder="登录用户名 / 邮箱"

autocomplete="username"

id="mat-input-0"

aria-describedby="mat-error-0"

aria-invalid="true"

aria-required="false"

对应的定位方法：

id属性来定位此控件

写法为：

find_element_by_id(mat-input-0)

name属性来定位此控件

此控件前端开发没有定义name属性，则无法使用此定位方法

tag属性来定位此控件(控件的类型)

写法为：

find_element_by_tag_name('input')

class属性来定位此控件

写法为：

find_element_by_class_name(mat-input-0)

另外两种定位是针对link属性的控件，也就是链接控件。如下图：

依旧是老老路。使用博客园登陆页举例：

【立即注册】就是页面中的一个link控件，其作用就是跳转到注册页面。

fe0c7b4e9f770591aeaa13a7a9e5ec43.png

_ngcontent-arq-c141="" href="/signup?returnUrl=https:%2F%2Fwww.cnblogs.com%2F">立即注册

他的控件属性有

link定位(通过link控件的文本值)

find_element_by_link_text('立即注册')

但是部分页面会存在，link的文本值非常长，所以就发明了partial_link定位。

如下图中的百度文库的某一页面：

5ddb0ca6201cd203245824c06c9e7932.png link的文本值为：全国2018年10月04741计算机网络原理真题以及答案解析

定位的脚本就可以写成：(只取文本的某一段值即可)

find_element_by_link_text('04741计算机网络')

但是这样的定位方式存在一个致命且常见的问题：

随着前端的技术不断的发展，页面的复杂度越来越高。一个页面的控件越来越多(tag不唯一)，id、name、class_name可能有很多重名或者完全是动态的一串字母(id、name、class_name、link_name可能都不唯一)，我们基于唯一控件属性定位的在特别复杂的项目上可能完全无法完成UI自动化测试的定位工作。

---