前言：在学HTML过程中呢，我总算明白一些前辈自嘲“码农”一说了。在使用HTML构建网页过程中，有大量重复性内容需要构建，这恰恰是枯燥无味的。比如最经典的网页结构，如新闻。我们随便上人民日报上找一篇文章，你静下心来仔细分析结构，就会发现任意一篇新闻，它的结构无外乎就是标题、时间、内容段落以及图片。相对应的，你要使用HTML构建新闻页，你就会发现，新闻里面的段落，你要一段一段的嵌入进去，重复性得复制粘贴，是不是就相当于搬运工了？
当然，方法总比困难多。比如我可以使用python提供的模板引擎jinja2，动态的生成HTML，或者使用JavaScript动态生成内容。简而言之，虽然有这些工具的帮助，我还是会相信，在日后工作中还是会有充满重复性的工作内容的。
这种性质的工作，也恰恰让我恐慌起来。技术含量真的很低，当你学会了基本语法之后，想要提高，无外乎就是熟练度的提高。我也就大胆推测，前端和后端，本质没什么区别，当你掌握了相应技术栈之后，提高的无外乎熟练度、经验了。
网页的组成
网页由三部分组成：
HTML:负责网页的结构（页面元素和内容）
CSS:负责网页的表现（页面元素的外观、位置等页面样式，如颜色、大小等）
javaScript:(负责页面的行为、交互效果）
什么是HTML
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它被用来描述并定义网页的内容结构。HTML通过一系列预定义的标签（tags）来标注文本、图片、链接、按钮等网页元素，告诉浏览器如何显示这些内容以及哪些部分是可交互的。
简而言之，整个网页架构都是由标签组成的。当我们想要使用图片的时候，我们就在相应地方贴上图片标签，使用段落标签时候，就在相应地方贴上段落标签。
HTML语法
HTML是一种语法，也就跟C语言、java语言等有些相似之处，比如都有类似的头文件、源文件。我想之所以这样设定，一方面是为了简化操作流程，另一方面就是避免大量重复性的工作了。你总不能在类似源文件的地方，比如你想要控制十来个段落标签所给定的颜色，一个段落一个段落的设置颜色吧？具体解决方法是，在头文件区域写一个类似改变颜色的模板，就可以把这些段落的颜色改变了。当然，这是CSS的活。我们先不做考虑。
HTML常用标签
- 文档结构标签：
<html>：表示HTML文档的根元素。<head>：包含文档的元数据，如字符集声明、页面标题、外部资源链接等。<title>：定义文档的标题，显示在浏览器标签上。<body>：包含文档的所有内容（文本、图片、链接等）。
- 头部信息标签：
<meta>：提供关于HTML文档的元数据，如字符编码、视口设置或描述文档的关键词。<link>：用于链接外部资源，如CSS文件。<style>：内嵌样式表，直接在HTML文档中定义CSS样式。<script>：用于嵌入或引用JavaScript代码。
- 文本格式化标签：
<h1>到<h6>：定义标题，<h1>是最高级别标题，<h6>是最低级别。<p>：定义段落。<strong>或<b>：强调重要文本（<strong>语义更强）。<em>或<i>：表示强调文本（<em>语义更强），通常以斜体显示。<br>：插入一个简单的换行符。<hr>：表示主题上的一个分割线。
- 列表标签：
<ul>：无序列表。<ol>：有序列表。<li>：列表项，用于上述两种列表中。
- 链接和多媒体标签：
<a>：创建超链接，使用href属性指定链接地址。<img>：嵌入图像，通过src属性指定图像路径。<audio>和<video>：分别为嵌入音频和视频内容。
- 表格相关标签：
<table>：定义表格。<tr>：表格中的行。<th>：表格中的表头单元格。<td>：表格中的标准单元格。
- 表单相关标签：
<form>：定义HTML表单用于用户输入。<input>：多种类型的输入控件，如文本框、复选框、按钮等。<textarea>：多行文本输入区域。<button>：可点击的按钮。<select>和<option>：下拉列表及其选项。
- 语义化标签（HTML5新增）：
<header>：定义文档或节的页眉。<footer>：定义文档或节的页脚。<article>：独立的内容块，可以独立于页面其余部分存在。<section>：文档中的节或部分。<nav>：导航链接的部分。
注意：想要深入了解，还需个人去参考官方文档。
现在我们知道了这些标签的含义了，那么我们就尝试着自己去构建一个网页吧。在这里我选取一篇新闻网页做示例。
新闻页面的结构：标题、时间、段落、图片和少许超链接。
当然，现在是AI时代，我们可以完全使用AI来辅助我们写这些前端代码。我采用的是VSCode内部插件Trae。
接下来我引入一个概念，盒子模型。什么是盒子模型，以及盒子模型的作用是什么？之后会在CSS中介绍一番。
留言