一、Web开发工作流程
1. 请求前端资源
当我们在浏览器中输入一个网址并按下回车键后，浏览器首先会向前端服务器请求前端资源，也就是我们常说的网页。这个网页是由HTML等语言编写而成，它构成了网页的基本框架和内容展示。
2. 获取后台数据
接下来，浏览器会向后台服务器发起请求，以获取数据。这些数据可能是用户的个人信息、文章内容、商品列表等等，它们将为网页提供丰富的动态内容。
3. 数据填充与展示
最后，浏览器会将得到的后台数据巧妙地填充到之前获取的网页上，并展示给用户观看。这样，一个完整且功能丰富的网页就呈现在了用户眼前。
二、HTML基础标签
1. 标题
在HTML中，我们可以使用h1到h6标签来定义不同级别的标题。例如：
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>2. 水平线
hr标签用于在网页中创建一条水平线，起到分隔内容的作用。
<p>这是一段内容。</p>
<hr>
<p>这是另一段内容。</p>3. 段落和换行
p标签用于定义段落，它会自动在段落前后添加一定的间距。而br标签则用于强制换行。
<p>这是第一段内容。<br>这里进行了换行。</p>
<p>这是第二段内容。</p>4. 文字效果
我们可以使用多种标签来实现不同的文字效果。比如：
b标签用于加粗文字：<b>加粗的文字</b>i标签用于使文字倾斜：<i>倾斜的文字</i>u标签用于给文字添加下划线：<u>带下划线的文字</u>center标签可将文字居中显示（不过在HTML5中已不推荐使用，建议使用CSS来实现居中）：<center>居中的文字</center>font标签可设置文字的字体、颜色、大小等属性（同样在HTML5中不推荐使用，CSS更优）：<font face="Arial" color="red" size="4">设置了字体、颜色和大小的文字</font>
5. 超链接
a标签用于创建超链接，通过设置href属性指定链接的目标地址，target属性可设置链接在何处打开（如_blank表示在新窗口打开）。
<a href="https://www.example.com" target="_blank">点击这里访问示例网站</a>6. 图像
使用img标签可以在网页中插入图像。需要设置src属性指定图像的源文件路径，alt属性用于在图像无法显示时提供替代文本，width属性可设置图像的宽度。
<img src="image.jpg" alt="这是一张示例图片" width="300">7. 音频和视频
audio和video标签分别用于在网页中嵌入音频和视频内容。需要设置src属性指定音频或视频文件的路径。
<audio src="audio.mp3"></audio>
<video src="video.mp4"></video>三、HTML布局标签
1. 列表
ul标签用于创建无序列表，其内部的每个列表项通常用li标签包裹。
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>ol标签用于创建有序列表，同样每个列表项用li标签。
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>2. 通用容器
div标签是一个常用的块级元素，可用于划分网页的不同区域，方便进行布局和样式设置。
<div>这是一个div区域</div>span标签则是一个内联元素，通常用于对文本中的某一部分进行样式设置等操作。
<p>这是一段包含<span>特殊样式部分</span>的文字。</p>3. 表格
使用table标签来创建表格，其内部的行用tr标签定义，每行中的单元格用td标签（普通单元格）或th标签（表头单元格）定义。
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>四、HTML表单标签
1. 表单整体
form标签用于创建表单，通过设置action属性指定表单提交的目标地址，method属性可选择提交方式，常见的有get和post。
<form action="submit.php" method="post">
<!-- 表单内容在此添加 -->
</form>2. 文本框
input标签可创建多种类型的文本框。普通文本框：
<input type="text" placeholder="请输入内容">密码框：
<input type="password" placeholder="请输入密码">日期选择框：
<input type="date">单选框：
<input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女复选框：
<input type="checkbox" value="option1">选项1 <input type="checkbox" value="option2">选项2文件上传：
<input type="file">提交按钮：
<input type="submit" value="提交">重置按钮：
<input type="reset" value="重置">普通按钮（常与JS结合使用）：
<input type="button" value="点击我">隐藏：
<input type="hidden" value="隐藏的值">
3. 下拉框
select标签用于创建下拉框，其内部的每个选项用option标签定义。
<select>
<option value="option1">选项1</option>
<option value="option2">选项2</option>
</select>4. 文本域
textarea标签用于创建一个可输入多行文本的文本域。
<textarea rows="4" cols="30">请在此输入多行文本内容。</textarea>五、CSS引入方式
1. 行内样式
行内样式是直接在HTML标签内部通过style属性来设置样式。例如：
<p style="color: red; font-size: 16px;">这是一段设置了行内样式的文字。</p>2. 内部样式
内部样式是在HTML文档的<head>标签内通过<style>标签来定义样式。
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一段应用了内部样式的文字。</p>
</body>3. 外部样式
外部样式是将CSS代码单独写在一个.css文件中，然后在HTML文档的<head>标签内通过<link>标签来引入。
假设我们有一个名为styles.css的文件，内容如下：
p {
color: green;
font-size: 20px;
}在HTML文档中引入的方式如下：
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一段应用了外部样式的文字。</p>
</body>六、CSS选择器
1. 标签选择器
标签选择器是直接使用HTML标签名作为选择器，它会对文档中所有该类型的标签应用样式。例如：
p {
text-align: center;
}这会将所有的p标签内的文字设置为居中对齐。
2. id选择器
id选择器是通过在HTML标签中设置id属性，然后在CSS中使用#加上id值作为选择器。每个id在文档中应该是唯一的。
<div id="myDiv">这是一个设置了id的div区域。</div>#myDiv {
background-color: yellow;
}3. 类选择器
类选择器是通过在HTML标签中设置class属性，然后在CSS中使用.加上class值作为选择器。一个标签可以有多个类属性，多个标签也可以共享同一个类。
<p class="highlight">这是一段设置了类的文字。</p>
<div class="highlight">这是一个设置了类的div区域。</p>.highlight {
font-weight: bold;
}希望这篇博客能够帮助大家更好地理解HTML & CSS的基础知识，开启网页开发的奇妙之旅！如果你有任何疑问，欢迎在评论区留言哦。
评论