HTML 基础学习笔记
一、学习前的比喻与概念
<!-- HTML：搭建页面结构 → 盖房子 CSS：修饰页面 → 装修房子 JavaScript：页面交互 → 智能家居 -->
核心要点：
- HTML：构建网页骨架
- CSS：定义网页样式
- JavaScript：实现交互功能
二、HTML 基本结构与语法
<!-- HTML基础：
- 常用标签约30-40种
- 标签语法：
- 单标签（自闭合）：
<tag>或<tag /> - 双标签：
<start></end>
- 单标签（自闭合）：
- 标签关系：
- 父子关系：直接包含（如html与head）
- 兄弟关系：同父元素（如head与body）
- 祖先后代：间接包含（如html与meta） -->
基本文档结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body></body> </html>三、标签完整写法
<!-- 完整标签格式：<tag attribute1 attribute2="value" attribute3="value"></tag>-->
四、DOCTYPE与根标签
<!-- DOCTYPE声明：
- 声明文档类型为HTML
- 确保浏览器按HTML规范解析
HTML根标签：
- 所有标签的祖先
- 每个文档只能有一个
- lang属性定义页面语言 -->
<!DOCTYPE html> <html lang="en">五、head标签详解
<!-- head标签功能：
- 配置网页基本信息
- 设置标题、描述等SEO相关元素 -->
meta标签与字符集
<!-- charset="UTF-8"：
- 指定字符编码
- 防止乱码问题 -->
<meta charset="UTF-8">视口配置
<meta name="viewport" content="width=device-width, initial-scale=1.0">优化配置
<meta name="description" content="页面描述..."> <meta name="keywords" content="关键词1,关键词2"> <title>页面标题</title> <link rel="icon" href="favicon.ico" type="image/x-icon">六、body主体内容
<!-- body标签：
- 包含网页主要内容
- 用户可见部分 -->
<body> 页面内容 <img src="" alt=""> </body>七、HTML实体（特殊符号）
<!-- HTML实体：
- 替代被HTML保留的字符
- 语法：
&entity_name; - 常用实体：
- 空格：
：
>- <:
< - >:
&rt; - ©:
©--> 示例：
- 空格：
5>4 4<3 ©八、HTML标签分类
块级标签（block）
- 独占一行
- 可设置宽高
- 默认宽度100%
- 示例：
<div>,<p>,<h1>-<h6>
行内标签（inline）
- 不独占一行
- 不可设置宽高
- 示例：
<a>,<span>,<em>
行内块标签（inline-block）
- 兼具两者特性
- 标签间有3px间距
- 示例：
<img>,<input>,<button>
九、标签关系总结
| 关系类型 | 示例 |
|---|---|
| 父子关系 | <html>是<head>的父元素 |
| 兄弟关系 | <head>与<body>是兄弟 |
| 祖先后代 | <html>是<meta>的祖先 |
十、学习总结
HTML是网页开发的基础，理解其结构和语义对后续学习CSS和JavaScript至关重要。写出语义化的HTML代码是专业前端开发的起点。
