上一篇
html制作静态网页
HTML通过标签构建网页基础结构，配合CSS实现样式设计，结合JavaScript添加交互功能，最终以.html文件形式
基础结构搭建
HTML文档由<!DOCTYPE html>声明开头，包含<html>根元素，内部分为<head>和<body>两部分：
| 作用 | 示例代码 | |
|---|---|---|
<!DOCTYPE> | 声明文档类型（HTML5） | <!DOCTYPE html> |
<html> | 根元素 | <html lang="zh"> |
<head> | 元数据（非可见内容） | <head><meta charset="UTF-8"></head> |
<body> | 页面主体内容 | <body><h1>欢迎</h1></body> |
处理
通过标签控制文本样式和结构：
| 功能 | 示例效果 | |
|---|---|---|
<h1>-<h6> | （h1最大） | |
<p> | 段落 | 普通文本段 |
<br> | 换行 | 文本强制换行 |
<hr> | 水平分割线 |
列表与链接
实现信息分组和超链接跳转：
| 类型 | 标签组合 | 示例代码 |
|---|---|---|
| 无序列表 | <ul><li>...</li></ul> | • 项目一 • 项目二 |
| 有序列表 | <ol><li>...</li></ol> | 第一步 第二步 |
| 定义列表 | <dl><dt>术语</dt><dd>解释</dd></dl> | 术语: 详细解释 |
| 超链接 | <a href="地址">链接文本</a> | 百度 |
图片与表格
嵌入图像和创建表格布局：
| 功能 | 标签属性 | 示例代码 |
|---|---|---|
| 图片 | <img src="路径" alt="描述"> | |
| 表格 | <table><tr><th>表头</th></tr><tr><td>数据</td></tr></table> | 姓名 |
样式控制
通过内联/内部样式调整显示效果：
| 方式 | 语法示例 | 作用 |
|---|---|---|
| 内联样式 | <p style="color:red;">红色</p> | 直接设置元素样式 |
| 内部样式表 | <style>p{font-size:16px;}</style> | 统一管理页面样式 |
| 外部样式表 | <link rel="stylesheet" href="style.css"> | 分离结构与样式 |
常见问题解答
Q1: HTML5相比旧版本有哪些新特性？
A1: 新增<section>/<article>等语义化标签、多媒体标签<video>/<audio>、本地存储API、更严格的语法解析等。
Q2: 如何优化静态网页加载速度？
A2: 1. 压缩图片尺寸并使用合适格式（如WebP）；2. 合并CSS/JS文件；3. 启用浏览器缓存；4.
