HTML & CSS 基础

2024/9/18

要构建页面结构、布局和样式，了解 HTML5 和 CSS 是非常重要的。以下是学习 HTML & CSS 基础的内容，帮助你掌握页面构建所需的技能。

1. HTML5 基本标签和语义化

HTML5 提供了一系列标签用于创建语义化的网页结构，这些标签不仅提升了代码的可读性，还帮助搜索引擎理解网页内容。

1.1 常见 HTML5 语义化标签：

<header>：定义文档或网页的一部分头部内容，通常包含导航栏、标题等。

html
1
2
3
4
5
6
7
8
9
10
<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">主页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>
</header>

<nav>：用于定义页面中的导航链接。

html
1
2
3
4
5
6
<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
  </ul>
</nav>

<section>：表示文档中的独立章节，通常包含一个标题。
html
1
2
3
4
```
<section>
  <h2>关于我们</h2>
  <p>公司信息描述...</p>
</section>
```
<article>：用于表示文档中的独立可分发内容，如博客文章或新闻。
html
1
2
3
4
```
<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>
```
<footer>：定义文档或文档的一部分的页脚信息，通常包含版权、链接等。
html
1
2
3
```
<footer>
  <p>© 2024 公司名称</p>
</footer>
```

1.2 其他常用的标签：

<div>：表示文档中的一个容器，通常用于布局。
<span>：用于在行内包裹文本，适用于小范围样式应用。
<img>：插入图片。
<a>：定义超链接。

2. CSS 基础

CSS 用于控制页面元素的布局和样式，包括字体、颜色、尺寸、边距、定位等。

2.1 选择器和样式规则

选择器：可以根据元素、类、ID 等方式来选择 HTML 元素。
- 元素选择器：p { color: blue; }
- 类选择器：.className { background-color: yellow; }
- ID 选择器：#idName { font-size: 18px; }

样式规则：通过 属性: 值; 的形式为元素应用样式。

css
1
2
3
4
5
6
7
8
9
10
11
12
13
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

h1 {
  color: #333;
}

.container {
  padding: 20px;
  border: 1px solid #ddd;
}

2.2 CSS 布局模型

盒模型（Box Model）：每个 HTML 元素都被视为一个矩形盒子，包含内容（content）、内边距（padding）、边框（border）和外边距（margin）。
css
1
2
3
4
5
6
7
```
.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid #000;
  margin: 20px;
}
```

3. Flexbox 布局

CSS Flexbox 是一种强大的布局方式，用于创建响应式、灵活的布局。

3.1 Flex 容器与项目

使用 display: flex 将父容器变成 flex 容器，其子元素则成为 flex 项目。
css
1
2
3
4
5
6
7
```
.container {
  display: flex;
}

.item {
  flex: 1; /* 子元素等宽 */
}
```

3.2 常用属性

justify-content：控制水平对齐方式（在主轴上的排列方式）。
css
1
2
3
```
.container {
  justify-content: space-between; /* 项目之间均匀分布 */
}
```
align-items：控制垂直对齐方式（在交叉轴上的排列方式）。
css
1
2
3
```
.container {
  align-items: center; /* 垂直居中 */
}
```
flex-direction：控制主轴方向，可以选择行（row）或列（column）。
css
1
2
3
```
.container {
  flex-direction: row; /* 横向排列 */
}
```

3.3 Flexbox 示例

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<style>
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .item {
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
  }
</style>

4. Grid 布局

CSS Grid 是一种二维布局系统，允许你在行和列之间创建复杂的布局。

4.1 创建 Grid 容器

使用 display: grid 将父元素定义为 grid 容器，设置行列模板。

css
1
2
3
4
5
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 列等宽 */
  grid-gap: 10px; /* 项目之间的间距 */
}

4.2 Grid 项目

控制项目的跨度：可以使用 grid-column 和 grid-row 控制项目在网格中的跨度。
css
1
2
3
```
.item1 {
  grid-column: span 2; /* 跨两列 */
}
```

4.3 Grid 示例

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
  .item {
    background-color: lightgreen;
    padding: 10px;
  }
</style>

5. 响应式设计基础

响应式设计的目标是创建能够适应不同屏幕大小的网页布局。使用媒体查询（Media Queries）可以根据设备的宽度调整布局。

5.1 媒体查询示例

使用 @media 设置条件样式，在特定屏幕尺寸下应用不同的布局。

css
1
2
3
4
5
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 在较小屏幕上，改为垂直布局 */
  }
}

5.2 移动优先设计

优先为移动设备设计，再通过媒体查询为更大的屏幕做优化。设置默认样式为移动设备样式，然后根据屏幕尺寸变化调整。
css
1
2
3
4
5
6
7
8
9
10
```
.container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}
```

通过掌握这些 HTML5 和 CSS 技术，你将能够构建结构清晰、布局灵活、响应性强的网页。