软件测试如何快速具备前端三剑客能力

锅锅聊软测

已于 2022-07-08 10:36:40 修改

阅读量559

点赞数

文章标签：前端 java servlet

于 2022-07-07 16:27:21 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_68548441/article/details/125661860

版权

本文介绍了前端开发的基础知识，包括HTML语法基础，如语言结构和常用标签；CSS语法，涉及选择器和样式应用；以及JS语法，涵盖用法、输出及基本语法概念。通过学习，软件测试人员可以快速掌握前端开发的基本技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. HTML语法基础

HTML是超文本标记语言，在Web开发三大语言中负责描述内容和结构，目前该语言标准已经发展到了HTML5。

1.1 语言结构

不同于其他的编程语言，HTML是一种DSL（Domain Specific Language，领域特定语言），这种语言专门用来结构化地描述网页的内容。它提供一种语义信息让浏览器很快明白整个超文本内容的框架结构。HTML是用树形结构来描述内容的，学过数据结构的同学能立马明白过来，只要是树形结构就一定存在两种关系：父子关系（parent-child)和兄弟关系(siblings)。举个例子大家就明白了：

<div>
    <h1>Article Title</h1>
    <p>Paragraph of text.</p>
<div>

上面这小段HTML代码中，div元素就是父节点，它有两个子节点h1和p。而h1和p之间互为兄弟关系。如下图所示：

所以HTML的元素是可以像这样嵌套包含的，就像一个容器一样，如果要用百分比来表示大小，那么这个百分比永远只根据最近的父元素进行计算。

现代HTML的标准模板

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

1.2 常用标签

<!-- 这是注释  -->
<html>
<!-- 头部标签，可以导入js，css等 -->
<header></header>
<!-- 网页主体  -->
<body>
<!-- 脚标签，增加可读性  -->
<footer></footer>
</body>
</html>

<!-- 标题标签(数字越小,字越大) -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>

<!-- 这是字体  -->
<font> 字体的设置 </font>
<b>字体会加粗</b>
<i>字体会倾斜</i>
<u>字体下划线&l

最低0.47元/天解锁文章