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