HTML容器元素分类
1. 通用容器
2. 语义化容器（HTML5新增）
<header>- 页眉或章节头部<footer>- 页脚或章节尾部<main>- 文档主要内容<section>- 文档章节<article>- 独立内容块（如博客文章）<aside>- 侧边栏或相关内容<nav>- 导航链接区域<figure>- 图像、图表等媒体内容<figcaption>- 为figure元素添加标题
3. 列表容器
4. 表格容器
5. 表单容器
<form>- 表单<fieldset>- 表单字段组<legend>- 字段组标题
6. 其他容器
传统网页布局方式
传统网页布局主要基于HTML和CSS技术，通过不同的结构设计和样式控制实现页面排版。以下是几种常见的传统布局方式：
表格布局（Table Layout）
早期网页常用<table>标签进行布局，通过行（<tr>)和列（<td>）划分内容区域。
- 特点：简单直观，兼容性好。
- 缺点：代码冗余，语义性差，不利于SEO和响应式设计。
- 示例：
1<table border="1"> 2 <tr> 3 <td>头部</td> 4 </tr> 5 <tr> 6 <td>侧边栏</td> 7 <td>主内容</td> 8 </tr> 9</table>
浮动布局（Float Layout）
利用CSS的float属性让元素脱离文档流，实现多栏布局。
- 特点：比表格布局更灵活，适合复杂排版。
- 缺点：需要清除浮动（如使用
clearfix），否则易引发布局错乱。 - 示例：
1.sidebar { float: left; width: 30%; } 2.content { float: right; width: 70%; } 3.clearfix::after { content: ""; display: block; clear: both; }
定位布局（Position Layout）
通过position属性（如absolute、fixed、relative）精确控制元素位置。
- 特点：适合叠加元素或固定位置的组件（如导航栏）。
- 缺点：脱离文档流可能导致父容器高度塌陷。
- 示例：
1.header { position: fixed; top: 0; width: 100%; }
弹性盒子布局（Flexbox）
CSS3引入的弹性盒模型，通过display: flex实现动态空间分配和对齐。
- 特点：一维布局，适合均分布局或垂直居中。
- 缺点：不支持复杂多维布局。
- 示例：
1.container { 2 display: flex; 3 justify-content: space-between; 4}
网格布局（Grid）
CSS3的网格系统，通过display: grid定义行列结构，实现二维布局。
- 特点：强大的行列控制能力，适合复杂布局。
- 缺点：旧浏览器兼容性有限。
- 示例：
1.container { 2 display: grid; 3 grid-template-columns: 1fr 2fr; 4}
选择建议
- 简单页面：浮动或Flexbox。
- 复杂排版：Grid布局。
- 兼容老旧浏览器：表格或浮动布局（需谨慎使用）。
传统布局方式各有优劣，现代开发中推荐优先使用Flexbox和Grid，兼顾语义化和响应式需求。
HTML 中的块元素
块元素（Block Elements）在页面中以块的形式显示，独占一行，默认情况下会自动换行。常见的块元素包括 <div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<table> 等。
块元素的特点：
- 独占一行，前后会自动换行。
- 可以设置宽度（
width）、高度（height）、内边距（padding）和外边距（margin）。 - 默认宽度为父元素的 100%。
示例代码：
1<div style="background-color: lightblue; width: 200px; height: 100px;"> 2 这是一个块元素。 3</div> 4<p style="background-color: lightgreen;">这是另一个块元素。</p> 5
HTML 中的行内元素
行内元素（Inline Elements）不会独占一行，只占据内容所需的宽度。常见的行内元素包括 <span>、<a>、<strong>、<em>、<img>、<input> 等。
行内元素的特点：
- 不会独占一行，多个行内元素会排列在同一行。
- 无法直接设置宽度和高度，宽度和高度由内容决定。
- 可以设置水平方向的内边距和外边距，但垂直方向的外边距无效。
示例代码：
1<span style="background-color: yellow;">这是一个行内元素。</span> 2<a href="#" style="background-color: pink;">这是一个链接。</a> 3
HTML 中的行内块元素
行内块元素（Inline-Block Elements）结合了块元素和行内元素的特性，既可以设置宽度和高度，又不会独占一行。常见的行内块元素包括 <img>、<input>（默认情况下），也可以通过 CSS 的 display: inline-block 将其他元素设置为行内块元素。
行内块元素的特点：
- 不会独占一行，多个行内块元素会排列在同一行。
- 可以设置宽度、高度、内边距和外边距。
- 默认宽度由内容决定。
示例代码：
1<span style="display: inline-block; width: 100px; height: 50px; background-color: orange;"> 2 这是一个行内块元素。 3</span> 4<img src="example.jpg" style="width: 50px; height: 50px;"> 5
如何切换元素的显示类型
通过 CSS 的 display 属性可以切换元素的显示类型：
display: block：将元素设置为块元素。display: inline：将元素设置为行内元素。display: inline-block：将元素设置为行内块元素。
示例代码：
1<span style="display: block; background-color: lightgray;">原本是行内元素，现在显示为块元素。</span> 2<div style="display: inline; background-color: lightcoral;">原本是块元素，现在显示为行内元素。</div> 3
项目实战：
HTML 结构
以下是一个基础的个人博客 HTML 框架，包含标题、导航栏、文章列表和页脚：
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>我的个人博客</title> 7 <link rel="stylesheet" href="styles.css"> 8</head> 9<body> 10 <header> 11 <h1>我的个人博客</h1> 12 <nav> 13 <ul> 14 <li><a href="#">首页</a></li> 15 <li><a href="#">关于我</a></li> 16 <li><a href="#">文章</a></li> 17 <li><a href="#">联系</a></li> 18 </ul> 19 </nav> 20 </header> 21 22 <main> 23 <article> 24 <h2>文章标题1</h2> 25 <p class="meta">发布于 2023年5月1日</p> 26 <p>这里是文章摘要内容...</p> 27 <a href="#" class="read-more">阅读更多</a> 28 </article> 29 30 <article> 31 <h2>文章标题2</h2> 32 <p class="meta">发布于 2023年4月15日</p> 33 <p>这里是另一篇文章摘要内容...</p> 34 <a href="#" class="read-more">阅读更多</a> 35 </article> 36 </main> 37 38 <footer> 39 <p>© 2023 我的个人博客. 保留所有权利.</p> 40 </footer> 41</body> 42</html> 43
CSS 样式
以下是配套的CSS样式，为博客添加基本布局和美观效果：
1/* 基础样式重置 */ 2body { 3 font-family: 'Arial', sans-serif; 4 line-height: 1.6; 5 margin: 0; 6 padding: 0; 7 color: #333; 8 background-color: #f5f5f5; 9} 10 11/* 布局样式 */ 12header { 13 background: #2c3e50; 14 color: white; 15 padding: 1rem 0; 16 text-align: center; 17} 18 19nav ul { 20 list-style: none; 21 padding: 0; 22 display: flex; 23 justify-content: center; 24} 25 26nav ul li { 27 margin: 0 15px; 28} 29 30nav a { 31 color: white; 32 text-decoration: none; 33} 34 35main { 36 max-width: 800px; 37 margin: 2rem auto; 38 padding: 0 20px; 39} 40 41article { 42 background: white; 43 margin-bottom: 20px; 44 padding: 20px; 45 border-radius: 5px; 46 box-shadow: 0 2px 5px rgba(0,0,0,0.1); 47} 48 49.meta { 50 color: #7f8c8d; 51 font-size: 0.9rem; 52} 53 54.read-more { 55 display: inline-block; 56 background: #3498db; 57 color: white; 58 padding: 5px 10px; 59 border-radius: 3px; 60 text-decoration: none; 61} 62 63footer { 64 text-align: center; 65 padding: 1rem 0; 66 background: #2c3e50; 67 color: white; 68} 69
响应式设计
添加媒体查询使博客在移动设备上也能良好显示：
1@media (max-width: 600px) { 2 nav ul { 3 flex-direction: column; 4 } 5 6 nav ul li { 7 margin: 5px 0; 8 } 9 10 main { 11 padding: 0 10px; 12 } 13} 14
增强功能
可以为博客添加更多交互元素，以下是一个简单的CSS动画效果：
1.read-more:hover { 2 background: #2980b9; 3 transform: scale(1.05); 4 transition: all 0.3s ease; 5} 6 7article:hover { 8 box-shadow: 0 5px 15px rgba(0,0,0,0.1); 9} 10
教学要点
- HTML语义化标签的使用(header, nav, article, footer)
- CSS盒模型的基本应用
- Flex布局实现导航栏
- 响应式设计的实现方法
- 简单的交互效果
- 阴影和圆角的美化处理
这个示例包含了个人博客的基本元素，可以根据教学需求进一步扩展功能，如添加评论区域、分类标签或侧边栏等。
《前端基础：从0到1制作简单网页（三）》 是转载文章，点击查看原文。
