软件测试|web前端的HTML浅析

简介: 软件测试|web前端的HTML浅析

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

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

HTML 超文本标记语言(Hyper Text Markup Language)就是用来描述网页的一种计算机语言。

HTML发展

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

HTML查看工具

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

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

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

HTML基本结构

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

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

标签有两种常见的形式:

  • 单标签:<标签名 />
  • 双标签:<标签名称><!--标签名称-->
  • <!DOCTYPE html>:向浏览器声明当前的文档是 HTML 类型。
  • <html></html> 之间的文本描述网页,是网页当中最大的一个标签,称之为根标签。
  • <head></head> 描述网页头部,里面的内容是写给浏览器看的。
  • <meta charset="UTF-8"> 表示在设置当前网页的显示编码。
  • <title></title> 之间文本为网页的标题,里面的内容会在浏览器的标签页上显示。
  • <body></body> 之间的文本是网页主体,里面的内容会显示在浏览器的空白区域内。
  • <div></div> 之间定义网页中的一个分隔区块或者一个区域部分。
  • <h1></h1> 之间的文本被显示为标题。
  • <p></p> 之间的文本被显示为段落。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <div>
        <h1>我的第一个网页</h1>
        <p>网页中的内容</p>
    </div>
</body>
</html>

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

属性的基本格式为:<标签名 属性1="属性值1" 属性2="属性值2">

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

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

比如常见的全局属性有:

  • class:规定元素的类名
  • id:规定元素的唯一 id
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <div id="first" class="content">网页中的内容</div>
</body>
</html>
相关文章
|
2月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
23天前
|
Web App开发 IDE JavaScript
Selenium IDE:Web自动化测试的得力助手
Selenium IDE:Web自动化测试的利器。作为开源工具,Selenium IDE支持录制与回放用户操作,适用于Chrome、Firefox等多浏览器,简化了测试流程,提升了效率,降低了自动化测试的门槛。它还支持导出多种编程语言的脚本,便于测试集成与复用。
75 19
Selenium IDE:Web自动化测试的得力助手
|
9天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
25天前
|
Web App开发 IDE 测试技术
Selenium:强大的 Web 自动化测试工具
Selenium 是一款强大的 Web 自动化测试工具,包括 Selenium IDE、WebDriver 和 Grid 三大组件,支持多种编程语言和跨平台操作。它能有效提高测试效率,解决跨浏览器兼容性问题,进行性能测试和数据驱动测试,尽管存在学习曲线较陡、不稳定等缺点,但其优势明显,是自动化测试领域的首选工具。
144 17
Selenium:强大的 Web 自动化测试工具
|
24天前
|
Web App开发 IDE JavaScript
Selenium IDE:Web自动化测试的得力助手
Selenium IDE是开源的Web自动化测试工具,适用于Chrome、Firefox等多款浏览器。它提供简单的录制与回放功能,用户可通过录制浏览器操作自动生成测试脚本,支持导出为多种编程语言,便于非专业测试人员快速上手,有效提升测试效率与质量。
188 6
Selenium IDE:Web自动化测试的得力助手
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
44 6
|
2月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
40 5
|
2月前
|
监控 安全 测试技术
如何在实际项目中应用Python Web开发的安全测试知识?
如何在实际项目中应用Python Web开发的安全测试知识?
34 4
|
2月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
2月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。

热门文章

最新文章