HTML5 与 CSS3 前端开发全解析：从基础到高级

大家好！今天，我将基于一份详细的前端学习笔记，带大家深入探索 HTML5 和 CSS3 的核心内容。HTML5 是现代 Web 开发的骨架，提供了丰富的语义化标签和多媒体支持；CSS3 则是美化网页的魔法棒，赋予页面动态效果和响应式布局。无论你是初学者还是想复习进阶，这篇博客将从基础标签到高级布局技巧，全面覆盖笔记内容，助你快速上手现代前端开发。准备好了吗？让我们开始吧！🚀

---

一、HTML5：构建网页的基石

HTML5 是 HTML 的最新版本，于2014年由万维网联盟（W3C）标准化。它不仅增强了语义化，还引入了多媒体、表单验证等新特性，让网页开发更高效、更有表现力。以下是笔记中涉及的核心内容。

1.1 基础标签：标题、段落和文本

HTML5 的核心是标签，用于定义网页的结构。以下是一些基础标签：

• 标题标签：从 <h1> 到 <h6> 表示不同级别的标题，<h1> 最大，<h6> 最小。支持 align 属性（left、center、right）控制对齐，但现代开发推荐用 CSS 实现。

<h1>一级标题</h1>
<h6 align="right">六级标题</h6>

快捷键：在编辑器（如 VS Code）中，输入 h$*6 可快速生成 <h1> 到 <h6>。

• 段落标签：<p> 定义段落，内容会独占一行。
• 换行标签：<br> 强制换行，用于段落内分行。
• 水平线：<hr> 创建水平分割线，可设置 color、width、size、align 属性。

<p>这是一个段落<br>分行效果</p>
<hr color="blue" width="50%" size="2" align="center">

• 文本标签：用于修饰词汇，与段落不同，常用于强调或格式化：
  • <em>：斜体强调
  • <b>：粗体
  • <i>：斜体
  • <strong>：加重语气（语义上更强）
  • <sub>、<sup>：下标、上标
  • <del>：删除线
  • <span>：无特定语义，常用作样式容器

<p>这是<strong>重要</strong>内容，<em>强调</em>显示，E=mc<sup>2</sup></p>

1.2 图片与路径

图片通过 <img> 标签插入，支持以下属性：

• src：图片路径
• alt：替代文本（无图时显示，利于无障碍访问）
• title：鼠标悬停提示
• width、height：宽高

<img src="images/photo.jpg" alt="风景" title="点击查看" width="200" height="150">

路径类型：

• 绝对路径：如 E:\images\photo.jpg，完整文件路径。
• 相对路径：基于当前文件位置：
  • ./：同级目录
  • ../：上级目录
  • /：子级目录
• 网络路径：如 http://example.***/image.jpg。

1.3 超链接与锚点

超链接用 <a> 标签，href 指定目标地址，支持跳转到外部页面或页面内锚点。默认样式：未访问（蓝色带下划线）、已访问（紫色）、点击时（红色）。

<a href="https://example.***">访问网站</a>

锚点：用于页面内跳转，需设置目标元素的 id：

<a href="#section1">跳转到章节</a>
<p id="section1">目标内容</p>

1.4 列表

HTML5 支持三种列表类型：

• 有序列表（<ol>）：项目按数字或字母排序，type 属性可选 1（数字）、a/A（字母）、i/I（罗马数字）。

<ol type="A">
  <li>有序列表内容1</li>
  <li>有序列表内容2</li>
</ol>

• 无序列表（<ul>）：项目用符号标记，type 属性可选 disc（实心圆）、circle（空心圆）、square（方块）、none（无）。

<ul type="circle">
  <li>小米手机</li>
  <li>电视</li>
</ul>

• 自定义列表（<dl>）：包含术语 <dt> 和描述 <dd>，适合键值对展示。

<dl>
  <dt>自定义列表1</dt>
  <dd>自定义列表2</dd>
</dl>

快捷键：ul>li*3 生成含三个 <li> 的无序列表。

嵌套：列表可多层嵌套，常用于导航或复杂结构。

1.5 表格

表格由 <table>、<tr>（行）、<td>（单元格）组成，常用属性包括：

• border：边框
• width、height：尺寸
• cellpadding：内容与边框距离
• cellspacing：单元格间距

其他标签：

• <caption>：表格标题
• <thead>、<tbody>、<tfoot>：结构化表格
• <th>：表头单元格

合并单元格：

• colspan：水平合并
• rowspan：垂直合并

<table border="1" width="100%">
  <caption>学生信息</caption>
  <thead>
    <tr><th>姓名</th><th>年龄</th></tr>
  </thead>
  <tbody>
    <tr><td colspan="2">张三</td></tr>
  </tbody>
</table>

快捷键：table>tr*2>td{单元格} 生成两行表格。

1.6 表单

表单（<form>）用于用户输入，属性包括 action（提交地址）、method（get/post）、name（表单名）。控件包括：

• 文本框：<input type="text">
• 密码框：<input type="password">
• 单选框：<input type="radio">，name 相同为一组
• 复选框：<input type="checkbox">
• 文件上传：<input type="file">
• 按钮：<input type="submit/reset/button"> 或 <button>
• 下拉列表：<select> 和 <option>，支持 <optgroup> 分组
• 多行文本：<textarea rows="10" cols="30">

HTML5 新增类型：

• email、url、search、tel、color、number、range、date、month、week

新增属性：

• autofocus：自动聚焦
• placeholder：提示文本
• required：必填

<form action="/submit" method="post">
  <input type="email" name="email" placeholder="请输入邮箱" required>
  <input type="submit" value="提交">
</form>

1.7 实体字符

实体字符用于显示 HTML 保留字符（如 <、>）或特殊符号：

符号	实体名称	实体编号
<	&lt;	&#60;
>	&gt;	&#62;
©	&copy;	&#169;
¥	&yen;	&#165;

<p>显示小于号：&lt;</p>

注意：实体名称大小写敏感。

1.8 块元素与行内元素

HTML5 之前，元素分为：

• 块元素：独占一行，可设置宽高，如 <div>、<p>、<table>。
• 行内元素：不独占一行，宽高无效，如 <span>、<a>、<em>。
• 行内块：不换行但可设置宽高，如 <img>、<input>。

HTML5 引入内容模型分类（如元数据型、文档流型），但初学者仍可用块/行内分类简化理解。

1.9 容器与语义化标签

<div> 是通用块级容器，用于页面分区布局：

<div class="container">
  <div class="header">头部</div>
  <div class="main">主要内容</div>
</div>

HTML5 新增语义化标签：

• <header>：页面或区域头部
• <nav>：导航
• <section>：章节或区域
• <aside>：侧边栏
• <footer>：底部
• <article>：独立内容（如文章、帖子）

这些标签取代传统 div+class 布局，提升语义化和搜索引擎友好性。

<header>网站头部</header>
<nav>导航</nav>
<section>主要内容</section>
<footer>底部</footer>

1.10 多媒体支持

HTML5 原生支持音视频，无需 Flash：

• 视频：<video>，属性包括 src、controls、autoplay、loop、muted、poster（封面）。
• 音频：<audio>，类似属性。
• Source：<source> 支持多格式选择。

<video src="movie.mp4" controls poster="cover.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  浏览器不支持视频
</video>

1.11 其他新增标签

• <figure> 和 <figcaption>：图片与说明组合。
• <details> 和 <summary>：折叠面板，默认隐藏内容，open 属性展开。
• <mark>：高亮文本。
• <meter>：度量衡，显示范围值。
• <progress>：进度条。
• <datalist>：为 <input> 提供下拉建议。
• <canvas>：绘图（需 JavaScript 配合）。

<figure>
  <img src="img.jpg" alt="示例">
  <figcaption>图片说明</figcaption>
</figure>
<progress value="50" max="100"></progress>

---

二、CSS3：赋予网页灵魂

CSS3 是 CSS 的最新版本，模块化设计带来了更强大的样式控制，从字体背景到动画和响应式布局。以下是笔记中的核心内容。

2.1 CSS 基础

CSS 规则：选择器 + 声明（属性: 值;）。

h1 {
  color: blue;
  font-size: 24px;
}

引入方式：

• 内联：<p style="color: red;">，不利于维护。
• 内部：<style> 标签，适合单页。
• 外部：<link rel="stylesheet" href="style.css">，推荐。
• 导入：@import url("style.css");，加载较慢，少用。

特性：

• 继承性：子元素继承父元素的样式（如 font、color），但 border、margin 等不继承。
• 层叠性：后定义的样式覆盖前者。
• 优先级：行内（1000） > ID（100） > 类（10） > 元素（1）。
• 注释：/* 注释内容 */。

2.2 选择器

选择器用于定位元素：

• 基础选择器：

  • 全局：* { margin: 0; }
  • 元素：p { color: red; }
  • 类：.class { font-size: 16px; }
  • ID：#id { border: 1px solid; }
  • 合并：h1, p { color: blue; }

• 关系选择器：

  • 后代：div p {}（所有后代）
  • 子代：div > p {}（直接子元素）
  • 相邻兄弟：h1 + p {}（紧邻的第一个）
  • 通用兄弟：h1 ~ p {}（所有后续兄弟）

• 伪类选择器：

  • 链接相关：:link、:visited、:hover、:active（需按此顺序，“爱恨准则”）。
  • 结构相关：:first-child、:last-child、:nth-child(n)（如 odd、even）、:only-child。
  • 其他：:focus（聚焦）等。

a:hover { color: green; }
li:first-child { background: yellow; }
p:nth-child(even) { color: blue; }

2.3 属性详解

• 字体：

  • color：颜色（如 red、#ff0000、rgba(255,0,0,0.5)）
  • font-size：大小（最小 12px in Chrome）
  • font-weight：粗细（normal、bold、100-900）
  • font-style：斜体（italic）
  • font-family：字体（多字体用逗号分隔，如 "Arial", sans-serif）

• 背景：

  • background-color：背景色
  • background-image：背景图
  • background-repeat：平铺（repeat、no-repeat、repeat-x/y）
  • background-position：定位（如 center、10px 20px）
  • background-size：尺寸（cover、contain、百分比）
  • background-attachment：固定或滚动（fixed、scroll）
  • background：简写

.box {
  background: url("img.jpg") no-repeat center/cover;
}

• 文本：

  • text-align：水平对齐（left、center、right）
  • text-decoration：修饰（underline、overline、line-through）
  • text-transform：大小写（uppercase、lowercase、capitalize）
  • text-indent：首行缩进（如 50px）

• 列表：

  • list-style-type：标记类型（disc、circle、decimal等）
  • list-style-image：自定义标记图片
  • list-style-position：标记位置（inside、outside）
  • list-style：简写

• 表格：

  • border：边框
  • border-collapse：折叠边框
  • width、height：尺寸
  • text-align、vertical-align：对齐
  • padding：填充

• 其他：

  • letter-spacing：字符间距
  • line-height：行高
  • overflow：内容溢出（visible、hidden、scroll、auto）
  • white-space：空白处理（pre、nowrap）
  • vertical-align：垂直对齐（middle、text-top等）
  • opacity：透明度（0-1）

2.4 布局技术

• 浮动：float: left/right; 用于多列布局，需清除浮动：

.container::after {
  content: "";
  display: block;
  clear: both;
}

• 定位：
  • relative：相对自身偏移
  • absolute：相对最近定位父元素
  • fixed：固定在视口
  • z-index：控制层叠顺序

.box {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 10;
}

• Grid 布局：最强大的布局方案，将容器分为网格：
  • display: grid;
  • grid-template-columns/rows：定义列/行尺寸
  • grid-gap：行/列间距
  • grid-template-areas：命名区域
  • grid-auto-flow：排列顺序（row 或 column）

#container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

• 响应式布局：通过媒体查询适配不同设备：

@media screen and (max-width: 768px) {
  body { background: red; }
}

Viewport：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

• 栅格系统：将页面分为12列，使用类如 .col-md-4 实现响应式布局。

2.5 CSS3 新特性

• 圆角：border-radius 设置元素圆角，支持多值控制四个角。

.box {
  border-radius: 15px 50px 30px 5px;
}

• 阴影：
  • box-shadow：盒子阴影（h-shadow v-shadow blur spread color inset）
  • text-shadow：文本阴影

.box {
  box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
}

• 渐变：linear-gradient(direction, color1, color2) 创建颜色过渡。

.box {
  background: linear-gradient(to right, red, blue);
}

• 转换（transform）：支持 translate（移动）、rotate（旋转）、scale（缩放）、skew（倾斜）、3D 转换（如 rotateX）。

.box {
  transform: translate(50px, 100px) rotate(30deg);
}

• 过渡（transition）：平滑改变样式，设置属性、持续时间、缓动函数、延迟。

.box {
  transition: width 2s ease 1s;
}
.box:hover { width: 500px; }

• 动画：用 @keyframes 定义关键帧，animation 执行。

@keyframes breathe {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}
.box {
  animation: breathe 2.7s ease-in-out infinite alternate;
}

• 多列布局：column-count、column-gap、column-rule 等，类似报纸排版。

div {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid lightblue;
}

• 绘制特殊图形：用 border 绘制三角形或梯形。

.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 50px solid red;
}

2.6 实用技巧

• 雪碧图：将小图标合并为一张大图，用 background-position 定位，减少 HTTP 请求。

.icon {
  background: url(sprite.png) no-repeat -20px 0;
  width: 45px;
  height: 70px;
}

• 字体图标：如阿里图标库，加载快、支持 CSS 样式调整。

<link rel="stylesheet" href="iconfont.css">
<span class="iconfont icon-add-circle" style="font-size: 35px; color: red;"></span>

• 滑动门：动态导航效果，利用背景或伪元素实现宽度自适应。

.slide li:hover > .slide-list { display: block; }

• 粘性定位：position: sticky; 结合 top 实现滚动吸附效果，需注意父元素限制。

.head {
  position: sticky;
  top: 0;
}

---

三、实战案例：响应式导航栏

让我们结合笔记内容，创建一个响应式导航栏，展示 HTML5 和 CSS3 的应用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式导航</title>
  <style>
    * { margin: 0; padding: 0; }
    .nav {
      background: #333;
      height: 50px;
      line-height: 50px;
    }
    .nav ul {
      list-style: none;
      display: flex;
      justify-content: center;
    }
    .nav li {
      padding: 0 20px;
    }
    .nav a {
      color: white;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    .nav a:hover { color: #ff6700; }
    .search input {
      border-radius: 50px;
      padding: 5px 10px;
    }
    @media screen and (max-width: 768px) {
      .search { display: none; }
      .nav ul { flex-direction: column; }
    }
  </style>
</head>
<body>
  <nav class="nav">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于</a></li>
      <div class="search">
        <input type="search" placeholder="搜索...">
      </div>
    </ul>
  </nav>
</body>
</html>

解析：

• 使用 HTML5 的 <nav> 标签，语义清晰。
• CSS3 的 flex 布局和 transition 实现平滑交互。
• 媒体查询适配手机屏幕，隐藏搜索框并调整导航为垂直。

---

四、总结与学习建议

HTML5 和 CSS3 是前端开发的双翼。HTML5 提供了语义化标签、多媒体支持和表单增强，让网页结构更清晰；CSS3 通过选择器、动画、响应式布局等，让页面美观且动态。以下是学习建议：

1. 动手实践：用 CodePen 或 VS Code 实现笔记中的代码。
2. 项目驱动：尝试构建个人主页或小应用（如导航、表单）。
3. 深入探索：学习 Flexbox、JavaScript，与 HTML5/CSS3 结合。
4. 参考资源：MDN Web Docs、W3Schools、阿里图标库。

这份笔记内容丰富，从基础到高级，涵盖了现代前端开发的核心。希望这篇博客能让你对 HTML5 和 CSS3 有更全面的理解！有疑问欢迎留言，继续编码，未来可期！🌟
注：本笔记由个人笔记整理，如有错误或需要添加内容，欢迎评论区讨论！！！