HTML入门核心知识汇总
1. HTML概述与基本结构
HTML是什么
HTML（HyperText Mark-up Language）是构建网页的基础语言，利用标签来描述页面内容。其文件扩展名为 .html 或 .htm，通过浏览器渲染后呈现为可视化网页。
基本文档结构
一个标准的HTML文档包含以下骨架：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
页面主体内容
</body>
</html><!DOCTYPE html> 声明文档类型为HTML5。 <html> 元素包裹整个文档，lang 属性声明页面语言（如中文用 "zh-CN"）。 <head> 包含元数据（如编码、标题、样式和脚本链接）。 <body> 存放用户可见内容。
文档类型对比
常见文档类型包括 XHTML 1.0 和 HTML5，后者更简洁且兼容旧版本。
XHTML 1.0 示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>XHTML 1.0 页面</title>
</head>
<body>
</body>
</html>HTML5 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 页面</title>
</head>
<body>
</body>
</html>主要区别：声明方式不同，HTML5 新增了语义标签和表单控件。
注释语法
为代码添加解释：<!-- 这是一个注释 -->，注释内容不会呈现到页面。
2. 标题标签
使用 <h1> 至 <h6> 标记6级标题，其中 <h1> 为最高级别。标题层级应合理组织以利于搜索引擎理解页面结构。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>3. 段落、换行与字符实体
段落标签
<p> 用于定义段落，浏览器会自动添加上下边距。
换行标签
在段落内使用 <br> 实现强制换行。
字符实体
HTML 中多个空格会被压缩，如需显示多个空格，使用 。尖括号等特殊字符需用实体表示：
- 小于号：
<显示为 < - 大于号：
>显示为 >
4. 块级与行内元素、语义化标签
块级与行内元素
<div> 是通用的块级容器；<span> 是行内容器，两者无特定语义。
语义化行内标签
<em>：强调语气<b>：关键字或产品名<strong>：重要内容
推荐优先使用语义化标签，有助于 SEO 和可访问性。
5. 图像标签与路径
插入图片
<img> 是自闭合标签，常用属性包括：
src：图片URLalt：加载失败时的替代文本，对无障碍和SEO至关重要
<img src="images/photo.jpg" alt="示例图片">路径类型
绝对路径从根目录开始定位文件，如 http://example.com/img/a.jpg 或本地磁盘路径。相对路径以当前文件为基准：
./：当前目录（可省略）../：上级目录
相对路径更灵活，便于迁移项目。
6. 链接标签
<a> 定义超链接，核心属性：
href：目标URL，#表示回到页面顶部title：悬停时显示提示target：打开方式，_self（默认，当前窗口）或_blank（新窗口）
<a href="https://example.com" title="前往示例站" target="_blank">示例链接</a>
<a href="#">返回顶部</a>7. 列表
有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>无序列表
最常用的列表，常用于导航或新闻条目。
<ul>
<li><a href="#">标题1</a></li>
<li><a href="#">标题2</a></li>
</ul>定义列表
用于术语描述。
<dl>
<dt>HTML</dt>
<dd>描述结构</dd>
<dt>CSS</dt>
<dd>描述样式</dd>
</dl>8. 表单
表单用于收集用户输入，常用元素如下：
<form>：定义表单区域，属性action指定提交地址，method为get或post<label>：为控件提供标签<input>：输入控件，类型由type决定：text：单行文本password：密码框radio：单选按钮（同名name实现互斥）checkbox：复选框file：文件上传submit：提交按钮reset：重置按钮hidden：隐藏字段
<textarea>：多行文本域<select>+<option>：下拉菜单
每个输入元素通常需设置 name 属性，作为提交数据的键名。
表单示例
<form action="/submit" method="post">
<p><label>用户名:</label><input type="text" name="username"></p>
<p><label>密码:</label><input type="password" name="pwd"></p>
<p><label>性别:</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</p>
<p><label>爱好:</label>
<input type="checkbox" name="hobby" value="read">阅读
<input type="checkbox" name="hobby" value="sport">运动
</p>
<p><label>个人简介:</label><textarea name="bio"></textarea></p>
<p><label>城市:</label>
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
</p>
<p><input type="submit" value="注册"><input type="reset" value="清空"></p>
</form>9. 表格
表格由以下标签构成：
<table>：定义表格，常用属性border、cellpadding、cellspacing、align<tr>：行<th>：表头单元格（加粗居中）<td>：普通单元格
单元格属性包括：align、valign（内容对齐）、colspan（跨列合并）、rowspan（跨行合并）。
表格示例
<table border="1" cellpadding="5">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>10. 页面布局概述
布局是将文字、图片等元素按设计要求排列。主要方式：
- Table布局：利用表格的单元格划分空间，适用于邮件页面（EDM）。
- DIV+CSS布局：通过CSS控制盒子模型、浮动、定位等，是目前主流方法。
Table布局技巧：将 border、cellpadding、cellspacing 设为0，隐藏边框，单元格内可嵌套表格实现复杂结构。
