✨博客主页： https://blog.csdn.net/m0_63815035?type=blog
💗《博客内容》：大数据、Java、测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识
📢博客专栏： https://blog.csdn.net/m0_63815035/category_11954877.html
📢欢迎点赞 👍 收藏 ⭐留言 📝
📢本文为学习笔记资料，如有侵权，请联系我删除，疏漏之处还请指正🙉
📢大厦之成，非一木之材也；大海之阔，非一流之归也✨
一、Web 工作原理（快速回顾）
- HTTP（超文本传输协议）是浏览器与服务器之间的通信语言。
- 流程：输入 URL → DNS 解析 → 发送 HTTP 请求 → 服务器返回 HTML/CSS/JS → 浏览器渲染。
- URL ：统一资源定位符，例如
https://example.com/page.html。
二、HTML 文档基础
1. 文档类型声明（DOCTYPE）
- 作用：告诉浏览器使用哪种 HTML 标准解析页面。
- 推荐写法（HTML5）：
<!DOCTYPE html>
- 必须放在文档第一行，否则触发"怪异模式"，导致布局错误。
2. 基本结构模板
<!DOCTYPE html>
<html lang="zh-CN"> <!-- lang 属性有助于搜索引擎和读屏软件 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档标题</title>
<meta name="description" content="页面描述，用于SEO">
<meta name="keywords" content="关键词1,关键词2">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
3. <head> 中常用标签
| 标签 |
作用 |
<meta charset="UTF-8"> |
声明字符编码（推荐 UTF-8） |
<meta name="viewport"> |
控制移动端适配 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
强制 IE 使用最新渲染引擎 |
<title> |
浏览器标签页标题 |
<link> |
引入外部 CSS 或 favicon |
<style> |
内部 CSS |
<script> |
引入或编写 JS |
三、HTML 元素分类与显示模式
1. 块级元素（Block）
- 独占一行，默认宽度 100%，可设宽高、内外边距。
- 常见：
<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>、<table>、<form>、<header>、<footer>、<section>、<article>、<nav>、<aside>。
2. 行内元素（Inline）
- 不换行，宽高由内容决定，不可设上下边距。
- 常见：
<span>、<a>、<strong>、<em>、<img>（虽为替换元素，但默认为行内）、<br>、<i>、<b>。
3. 行内块元素（Inline-block）
- 不换行，但可设宽高、内外边距。
- 常见：
<img>、<input>、<button>、<select>、<textarea>。
💡 可通过 CSS 的 display 属性改变元素类型，如 display: inline-block。
四、常用标签详解（补充）
1. 文本格式化（补充）
| 标签 |
语义 |
<strong> |
重要文本（加粗） |
<em> |
强调（斜体） |
<mark> |
高亮标记 |
<small> |
小号字（如版权声明） |
<del> |
删除文本 |
<ins> |
插入文本 |
<sub> / <sup> |
下标 / 上标 |
2. 链接与锚点
<!-- 普通链接 -->
<a href="https://example.com" target="_blank" rel="noopener">新标签页打开</a>
<!-- 锚点跳转 -->
<a href="#section1">跳转到 section1</a>
<h2 id="section1">章节1</h2>
<!-- 返回顶部 -->
<a href="#">返回顶部</a>
<!-- 发送邮件 -->
<a href="mailto:someone@example.com">发送邮件</a>
<!-- 拨打电话（移动端） -->
<a href="tel:+123456789">拨打电话</a>
3. 多媒体元素
图片 <img>
<img src="photo.jpg" alt="描述文字" width="300" height="200" loading="lazy">
alt 必须写，提升可访问性。loading="lazy" 懒加载，优化性能。
视频 <video>
<video controls width="600" poster="preview.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
音频 <audio>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
嵌入外部内容 <iframe>
<iframe src="https://www.youtube.com/embed/xxx" width="560" height="315" allowfullscreen></iframe>
4. HTML5 语义化标签（布局利器）
| 标签 |
含义 |
<header> |
页眉或区域头部 |
<nav> |
导航链接 |
<main> |
页面主内容（一个页面唯一） |
<article> |
独立文章 |
<section> |
文档中的一个区块 |
<aside> |
侧边栏或附属信息 |
<footer> |
页脚 |
示例：
<body>
<header>网站标题</header>
<nav>导航菜单</nav>
<main>
<article>
<h1>文章标题</h1>
<p>内容...</p>
</article>
<aside>相关链接</aside>
</main>
<footer>版权信息</footer>
</body>
5. 列表进阶
- 定义列表
<dl> + <dt>（术语）+ <dd>（描述）
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
6. 表格进阶
- 合并单元格：
colspan（跨列）、rowspan（跨行）
<table border="1">
<tr>
<td colspan="2">合并两列</td>
</tr>
<tr>
<td rowspan="2">合并两行</td>
<td>单元格</td>
</tr>
<tr>
<td>另一行</td>
</tr>
</table>
- 表格结构：
<thead>、<tbody>、<tfoot>（提升语义和滚动时头部固定）
7. 表单增强（HTML5）
| 类型 |
示例 |
说明 |
email |
<input type="email"> |
内置邮箱格式验证 |
number |
<input type="number" min="1" max="10"> |
数字输入，带增减按钮 |
tel |
<input type="tel"> |
电话号码（不验证格式） |
url |
<input type="url"> |
网址格式验证 |
date |
<input type="date"> |
日期选择器 |
time |
<input type="time"> |
时间选择器 |
color |
<input type="color"> |
颜色选择器 |
range |
<input type="range" min="0" max="100"> |
滑块 |
search |
<input type="search"> |
搜索框（带清除按钮） |
常用新属性
| 属性 |
说明 |
placeholder="提示文字" |
输入框内灰色提示 |
required |
必填字段 |
autofocus |
页面加载时自动聚焦 |
autocomplete="on/off" |
是否启用自动完成 |
multiple |
允许多选（如文件上传） |
pattern="正则" |
自定义输入格式验证 |
表单分组
<fieldset>
<legend>个人信息</legend>
<label>姓名：<input type="text" name="name"></label>
<label>年龄：<input type="number" name="age"></label>
</fieldset>
8. 其他实用标签
| 标签 |
作用 |
<progress value="70" max="100">70%</progress> |
进度条 |
<meter value="0.6">60%</meter> |
度量条（如磁盘使用率） |
<details><summary>更多信息</summary>隐藏内容</details> |
可折叠面板 |
<dialog> |
对话框（需配合 JS 或 open 属性） |
五、字符实体（转义字符）
| 显示 |
实体名 |
数字形式 |
| 空格 |
|
  |
| < |
< |
< |
| > |
> |
> |
| & |
& |
& |
| © |
© |
© |
| ® |
® |
® |
| " " |
" " |
“ ” |
六、全局属性（所有标签通用）
| 属性 |
说明 |
id |
唯一标识符（用于 CSS/JS / 锚点） |
class |
类名（用于 CSS 或 JS 批量控制） |
style |
内联样式 |
title |
鼠标悬停时显示的提示文本 |
data-* |
自定义数据属性，如 data-user-id="123" |
hidden |
隐藏元素 |
tabindex |
控制 Tab 键切换顺序 |
lang |
定义元素语言 |
七、路径写法
- 相对路径 （推荐用于同网站）
image/photo.jpg -- 当前目录下的 image 文件夹../photo.jpg -- 上一级目录
- 绝对路径
https://example.com/photo.jpg -- 完整 URL/photo.jpg -- 从网站根目录开始
八、注释与代码规范
- 注释：
<!-- 这是注释，不会显示在页面中 -->
- 注释的作用：解释代码、标记待办、临时禁用代码。
- 规范建议 ：
- 标签名、属性名一律小写。
- 属性值始终加引号（双引号优先）。
- 自闭合标签（如
<img>、<br>、<hr>）在 HTML5 中可不写斜杠，但写 / 更安全（兼容 XHTML）。
- 合理缩进，提高可读性。
九、SEO 基础（补充）
除了 <title>、<meta name="description">、<meta name="keywords"> 外：
- 使用语义化标签 （
<article>、<section> 等）帮助搜索引擎理解结构。
- 图片添加
alt 属性。
- 为链接写有意义的描述（不要用"点击这里"）。
- 保证页面有清晰的
h1 ~ h6 层级。
- 使用
canonical 标签避免重复内容：<link rel="canonical" href="主链接">。
十、浏览器兼容性提示
- 使用 HTML5 新标签时，对于老旧 IE 浏览器可引入
html5shiv.js 使其支持。
- 表单新类型（如
date）在不同浏览器中显示样式不同，可使用 polyfill 或统一 UI 组件库。
- 使用 CSS 前缀或自动化工具（如 Autoprefixer）处理兼容性。
十一、扩展：HTML 与 CSS、JS 的关系
- HTML：结构（骨架）
- CSS：表现（外观）
- JavaScript：行为（交互）
最佳实践：结构、样式、行为分离，尽量不使用内联样式和内联事件。
十二、案例作业：完善人物简历
在原有吴彦祖简历基础上，要求：
- 将导航区
<div id="navigation"> 改为 <nav> 标签，内部列表改为语义化。
- 为主体内容添加
<main> 标签，各部分用 <section> 包裹。
- 在获奖记录部分制作一个完整表格（至少包含年份、奖项名称、结果）。
- 为联系表单增加
email 类型的输入框，并添加 required 属性。
- 在页面底部添加一个
<details> 标签，展示参考资料来源。
今天这篇文章就到这里了，大厦之成，非一木之材也；大海之阔，非一流之归也。感谢大家观看本文
