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

「爱情、让人受尽委屈。」 2023-10-14 21:13 31阅读 0赞

![d5b4fc207d1d4827b3f8c34a0dcbfebb.png][]

**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\` 属性指定图片的URL，\`alt\` 属性为图片添加描述性文本。

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

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

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

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

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

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

<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>用于标记表单字段，<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> 元素，并将它们的边框样式设置为灰色实线。

**最后：**下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取**【保100%免费】**

![8b0171187dce405e878f274a8cdd9ec0.png][]

#### **软件测试面试文档** ####

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

![a3e4226c935c4242804cbdf26b571bc6.png][]

![58df6cd288094ad8874e814f2477620b.gif][]

[d5b4fc207d1d4827b3f8c34a0dcbfebb.png]: https://img-blog.csdnimg.cn/d5b4fc207d1d4827b3f8c34a0dcbfebb.png
[8b0171187dce405e878f274a8cdd9ec0.png]: https://img-blog.csdnimg.cn/8b0171187dce405e878f274a8cdd9ec0.png
[a3e4226c935c4242804cbdf26b571bc6.png]: https://img-blog.csdnimg.cn/a3e4226c935c4242804cbdf26b571bc6.png
[58df6cd288094ad8874e814f2477620b.gif]: https://img-blog.csdnimg.cn/58df6cd288094ad8874e814f2477620b.gif