技术分享web前端的HTML浅析

本文节选自霍格沃兹测试开发学社内部教材

WEB就是WorldWideWeb的缩写，称之为全球广域网，俗称WWW。对于用户来说其实就是由多个网页组合在一起而形成一种服务。

WEB前端负责展示一个网站当中前台网页里的内容。而网页是由前端工程师使用HTML语言编写而成的一种文件，它里面会包含文字、图片、超链接、音频、视频等等这些内容。

HTML超文本标记语言（HyperTextMarkupLanguage）就是用来描述网页的一种计算机语言。

在互联网最初的时候是没有HTML的，只能通过网络传输最简单的文字内容。随着用户的要求越来越多，同时也随着技术的不断发展，就出现了一种可以表达文字内容之外的语言HTML1.0。后来又慢慢发展到了现在的HTML5，也就是现在常说的H5。

在测试过程中，有时候需要通过工具去查看对应的HTML代码。在这里可以用浏览器自带的开发者工具，打开这个工具的快捷键是F12。

开发者工具是一个相当强大的工具。可以查看修改HTML，还可以调试JS，可以修改CSS，还可以查看网络数据，并且还能进行性能测试，非常的全能。对于WEB测试来说，是一个必须要掌握的工具。

要查看HTML源码，只需要进入开发者工具的Elements界面。在这里可以对WEB页面上的元素进行定位，并且查看整个WEB页面的HTML源码。

网页是通过HTML语言来书写。用HTML语言去书写网页有一些结构是默认必须存在的，这个结构就叫做网页（HTML）骨架。

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/title/headbody/body/htmlHTML基本标签标签

标签就是HTML语言的发明者人为定义好的一些“单词”，不同的标签代表了不同的功能。

标签有两种常见的形式：

单标签：标签名/

双标签：标签名称!--标签名称--

!DOCTYPEhtml：向浏览器声明当前的文档是HTML类型。

html与/html之间的文本描述网页，html是网页当中最大的一个标签，称之为根标签。

head与/head描述网页头部，里面的内容是写给浏览器看的。

metacharset="UTF-8"表示在设置当前网页的显示编码。

title与/title之间文本为网页的标题，里面的内容会在浏览器的标签页上显示。

body与/body之间的文本是网页主体，里面的内容会显示在浏览器的空白区域内。

div与/div之间定义网页中的一个分隔区块或者一个区域部分。

h1与/h1之间的文本被显示为标题。

p与/p之间的文本被显示为段落。

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title网页标题/title/headbodydivh1我的第一个网页/h1p网页中的内容/p/div/body/html标签的属性

HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。

属性的基本格式为：标签名属性1="属性值1"属性2="属性值2"!--标签名--

每个标签都可以拥有多个属性。属性必须写在开始标签中，位于标签名的后面。属性之间不区分顺序。标签名与属性、属性与属性之间使用空格隔开。任何属性都有默认值，省略该属性表示使用默认值。

在HTML里，属性也有很多种，比如首先有全局属性，全局属性是所有的标签都可以使用的。然后还有事件属性，事件大家可以理解为不同的操作。在不同的操作中，也有特殊的属性可以定义。最后还有各个标签的一些独有的属性。

比如常见的全局属性有:

class：规定元素的类名

id：规定元素的唯一id

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title网页标题/title/headbodydivid="first"class="content"网页中的内容/div/body/html

推荐学习

内容全面升级，4个月20+项目实战强化训练，资深测试架构师、开源项目作者亲授BAT大厂前沿最佳实践，带你一站式掌握测试开发必备核心技能（对标阿里P6+，年薪50W+）！直推BAT名企测试经理，普遍涨薪50%+！

??点击“阅读原文”，提升测试核心竞争力！