Web自动化---Web前端三大核心技术

•  📢专注于分享软件测试干货内容，欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！
• 📢交流讨论：加入1000人软件测试技术学习交流群
• 📢资源分享：进了字节跳动之后，才发现师兄给的这份资料有多重要！
• 📢 最困难的时候，也就是我们离成功不远的时候！

​

Web前端的三大核心技术：HTML、CSS、JS

1、HTML（超文本标记语言）：

HTML是一种用于创建网页结构和内容的标记语言。它由一系列的标签组成，每个标签都有特定的含义和作用。通过使用不同的HTML标签，可以创建标题、段落、链接、列表、图片等元素来构建网页的结构。HTML标签使用尖括号（<>）包围，通常是成对出现的，有起始标签和结束标签。例如，`<h1>`表示一级标题的起始标签，而`</h1>`表示一级标题的结束标签。HTML可以指定元素的属性，如`id`、`class`、`src`等，用于进一步控制元素的样式和行为。

2、CSS（层叠样式表）：

CSS用于为HTML文档添加样式和布局。通过CSS，可以改变网页中元素的外观和排列方式。CSS使用选择器来选取HTML元素，并通过属性值对其进行样式设置。比如，可以选择一个标题元素`<h1>`，然后通过CSS设置其颜色、字体大小、边距等样式。CSS具有层叠的特性，即当多个规则同时应用到一个元素时，可以通过设置优先级来确定最终的样式。此外，CSS还支持响应式设计，可以通过媒体查询等技术，让网页在不同设备和屏幕尺寸下有不同的样式和布局。

3、JavaScript（JS）：

JavaScript是一种脚本语言，用于为网页添加交互和动态功能。它使得网页能够对用户的操作作出响应、处理数据和与服务器进行通信。通过JavaScript，可以操作网页的各种元素，如修改文本内容、处理表单数据、创建动画效果、发送网络请求等。JavaScript还拥有强大的编程功能，支持面向对象编程、异步操作和模块化开发等。它可以与HTML和CSS紧密结合，为网页提供更加交互性、复杂性的功能和效果。

这三大核心技术共同构成了现代Web前端开发的基础，它们互相配合、相互作用。HTML定义网页的结构和内容，CSS负责网页的样式和布局，JavaScript实现网页的动态效果和交互逻辑。通过它们的结合运用，可以构建出功能完善、用户友好的Web应用。

​

常见的HTML标签

1. <h1>~<h6>：定义标题，从一级标题到六级标题，依次递减，用于表示标题的重要程度。

<h1>This is a heading level 1</h1><h2>This is a heading level 2</h2><h3>This is a heading level 3</h3>

<h1>是一级标题的标签，文本显示为一级标题的样式，以此类推。

2. <p>：定义段落。

<p>This is a paragraph.</p>

<p>标签定义一个段落，用于包裹一段文本。

3. <a>：定义链接，用于创建超链接到其他页面、文件或位置。

<a href="https://www.example.com">Click here</a>

<a>标签创建一个超链接，`href` 属性指定链接的目标地址。

4. <img>：定义图像，用于在网页中插入图片。

<img src="image.jpg" alt="Description of Image">

<img>`标签用于在网页中插入图片，`src` 属性指定图片的URL，`alt` 属性为图片添加描述性文本。

5. <ul> / <ol>：定义无序列表 / 有序列表。

<ul>  <li>Item 1</li>  <li>Item 2</li></ul><ol>  <li>Item 1</li>  <li>Item 2</li></ol>

<ul> 标签定义无序列表，其中每个列表项由 <li>标签表示；<ol>标签定义有序列表，同样使用<li>标签表示列表项。

6. <div>：定义文档中的一个区块或容器。​​​​​​​

<div>  <h2>Section Title</h2>  <p>Content goes here.</p></div>

<div> 标签用于定义一个区块或容器，可以用于包裹一组相关的元素。

7. <span>：定义文本中的一个区域或行内元素。

<p>My name is <span style="color: blue;">John</span>.</p>

<span>标签用于定义文本中的一个区域，可以用于添加样式或处理特定的行内元素。

8. <table>：定义表格。​​​​​​​

<table>  <tr>      <th>Header 1</th>      <th>Header 2</th>   </tr>   <tr>       <td>Data 1</td>       <td>Data 2</td>   </tr></table>

 <table>标签定义一个表格，<tr>表示表格的行，<th> 表示表头单元格，<td>表示数据单元格。

9. <form>：定义表单，用于接收用户输入。​​​​​​​

<form>  <label for="name">Name:</label>  <input type="text" id="name" name="name" required>  <input type="submit" value="Submit"></form>

<form>标签定义表单，<label>用于标记表单字段，<input>用于输入表单数据。

10. <button>：定义按钮。

<button onclick="myFunction()">Click Me</button>

<button>标签定义一个按钮，可以执行JavaScript函数或其他交互操作。

​

CSS常见选择器

1. 元素选择器：通过元素类型选择元素。​​​​​​​

p {  color: red;}

选择所有<p>元素，并将它们的文本颜色设置为红色。

2. 类选择器：通过类名选择元素。​​​​​​​

.highlight {  background-color: yellow;}

选择所有具有 highlight 类的元素，并将它们的背景颜色设置为黄色。

3. ID选择器：通过ID选择元素。​​​​​​​

#logo {   width: 200px;}

选择具有 logo ID 的元素，并将其宽度设置为200像素。

4. 后代选择器：选择某个元素的后代元素。​​​​​​​

.container p {  font-size: 16px;}

选择所有位于具有 container 类的元素内部的 <p> 元素，并将它们的字体大小设置为16像素。

5. 直接子元素选择器：选择某个元素的直接子元素。​​​​​​​

ul > li {  list-style-type: square;}

选择所有直接位于 <ul> 元素内部的 <li> 元素，并将它们的列表样式设置为方形。

6. 伪类选择器：选择特定状态或位置的元素。​​​​​​​

a:hover {  color: purple;}

选择鼠标悬停在 <a> 元素上的状态，并将其文本颜色设置为紫色。

7. 属性选择器：选择具有特定属性的元素。

input[type="text"] {  border: 1px solid gray;}

选择所有 type 属性值为 text 的 <input> 元素，并将它们的边框样式设置为灰色实线。

如果对软件测试、接口、自动化、性能测试、测试开发、面试经验交流。感兴趣可以加裙485187702，群内会有不定期的发放免费的资料链接，这些资料都是从各个技术网站搜集、整理出来的，如果你有好的学习资料可以私聊发我，我会注明出处之后分享给大家。

最后：下面是配套学习资料，对于做【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！【100%无套路免费领取】

​

​