从零开始：掌握 HTML 和 CSS 的第一步
•林小卫很行
在数字化时代，网页设计已经成为一项重要的技能。无论你是想成为一名专业的前端开发者，还是仅仅想为自己的网站或博客打造一个漂亮的界面，掌握 HTML 和 CSS 都是不可或缺的基础。今天，我们就从零开始，一起学习如何使用 HTML 和 CSS 来构建一个简单的网页。
HTML：网页的骨架
1. 建立 HTML 文件结构
HTML（HyperText Markup Language）是网页的骨架，它定义了网页的结构和内容。一个基本的 HTML 文件通常包括以下几个部分：
<!DOCTYPE html>：声明文档类型为 HTML5，这是告诉浏览器如何解析页面的关键.<html>：根元素，包含整个网页的内容.<head>：包含文档的元数据，如标题、字符集、外部 CSS 和 JavaScript 文件的链接等.<body>：包含网页的主体内容，如文本、图片、视频等.
2. HTML 常用标签
- 标题标签：
<h1>到<h6>，用于定义不同级别的标题，帮助组织内容结构. - 段落标签：
<p>，用于定义段落，是网页中最常见的文本容器. - 列表标签：
<ul>（无序列表）、<ol>（有序列表）和<li>（列表项），用于创建列表结构，使内容条理清晰.
3. HTML5 语义标签
HTML5 引入了一些语义标签，使网页结构更加清晰和有意义：
<header>：定义文档或部分的页眉，通常包含导航链接和网站标题.<footer>：定义文档或部分的页脚，通常包含版权信息和联系方式.<article>：定义独立的内容块，如博客文章或新闻报道.<section>：定义文档中的一个区段，通常包含一组相关内容.
CSS：网页的外观
1. 如何用 CSS 修改样式
CSS（Cascading Style Sheets）用于设置网页的外观和布局。通过 CSS，我们可以改变元素的颜色、字体、大小、边框等属性。基本语法如下：
选择器 {
属性: 值;
}
例如，要将所有段落的字体颜色设置为蓝色，可以写：
p {
color: blue;
}
2. CSS 盒子模型
CSS 盒子模型是理解布局的基础，每个 HTML 元素都被视为一个盒子，包括：
- 内容区域（Content）：元素的实际内容.
- 内边距（Padding）：内容与边框之间的空间.
- 边框（Border）：围绕内容和内边距的线条.
- 外边距（Margin）：元素与其他元素之间的空间.
3. CSS Position 布局
CSS 提供了几种定位方式，包括：
static：默认定位方式，元素按照正常的文档流布局.relative：相对定位，元素相对于其正常位置进行偏移.absolute：绝对定位，元素相对于其最近的已定位祖先元素进行定位.fixed：固定定位，元素相对于浏览器窗口进行定位，即使页面滚动，元素也会固定在指定的位置.
4. CSS Class 选择器
通过类选择器，我们可以为多个元素应用相同的样式。例如：
<p class="highlight">这是一段突出显示的文本。</p>
.highlight {
color: red;
}
5. CSS Flexbox 布局
Flexbox 是一种灵活的布局方式，可以轻松实现元素的对齐和分布。例如，要使容器内的项目水平居中，可以使用：
.container {
display: flex;
justify-content: center;
}
6. 使用 CSS 固定导航栏
通过设置 position: fixed;，我们可以创建一个固定导航栏，使其在页面滚动时始终显示在顶部：
.navbar {
position: fixed;
top: 0;
width: 100%;
}
7. CSS 响应式设计
响应式设计使网页能够适应不同屏幕尺寸的设备。通过媒体查询，我们可以根据屏幕宽度应用不同的样式：
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
HTML 表单设计
表单是网页与用户交互的重要方式。通过 HTML 表单，我们可以收集用户输入的数据。一个基本的表单包括：
<form>：定义表单，包含action和method属性.<input>：创建不同类型的输入字段，如文本框、密码框、单选按钮等.<button>：创建按钮，用于提交表单或其他操作.