Web自动化---Web前端三大核心技术-摩杜云开发者社区

Web自动化---Web前端三大核心技术_测试工程师

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> 元素，并将它们的边框样式设置为灰色实线。