Documentation
HTML 基础笔记
HTML 语法规范、常用标签、表格与表单元素速查。
本页目录
HTML 基础
- 网站是网页的集合，网页是 HTML 格式文件，通过浏览器阅读，是构成网站的基本元素。
- HTML（超文本标记语言）是一套标记标签。
- 核心思想：结构、样式、行为相分离。
语法规范
标签之间只有两种关系：包含关系（父子）与并列关系（兄弟）。
文档结构
| 标签 | 说明 |
|---|---|
<html> | 根标签 |
<head> | 文档头部 |
<title> | 文档标题 |
<body> | 主体标签 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>文档标题</title>
</head>
<body></body>
</html>
<!DOCTYPE>：文档类型声明标签。lang：语言种类，en为英文、zh-CN为中文。charset：字符集。
常用标签
| 标签 | 含义 |
|---|---|
<h1> ~ <h6> | 标题标签，head 缩写 |
<p> | 段落标签 |
<br/> | 换行 |
<strong> / <b> | 加粗 |
<em> / <i> | 倾斜 |
<del> | 删除线 |
<ins> | 插入内容，默认渲染为下划线 |
<div> | 块级盒子（分区） |
<span> | 行内盒子 |
图像标签
<img> 是 image 的缩写。属性写在标签名后面，可以同时拥有多个。
| 属性 | 说明 |
|---|---|
src | 图片路径，必须属性 |
alt | 图像无法显示时替换的文字 |
title | 鼠标悬停时显示的文字 |
width | 图像宽度 |
height | 图像高度 |
border | 图像边框粗细 |
路径规则
- 相对路径：同级或下一级用
./，上一级用../ - 绝对路径：具体盘符，或完整的网络地址
超链接
<a href="https://example.com" target="_blank">新窗口打开</a>
href：URL 地址target="_blank"：在新窗口跳转
常见用法：
- 内部链接：站内页面之间跳转
- 下载链接：地址指向
.exe、.zip等文件 - 锚点链接：快速定位到页面中的某个位置
<a href="#id">跳转</a>
<h3 id="id">目标位置</h3>
网页中各种元素都可以添加超链接。
特殊字符
| 字符 | 实体 |
|---|---|
| 空格 | |
| 小于号 | < |
| 大于号 | > |
表格
用于显示、展示数据。
| 标签 | 说明 |
|---|---|
<table> | 表格 |
<tr> | 定义行 |
<td> | 定义单元格 |
<th> | 表头单元格 |
<thead> | 表头区域 |
<tbody> | 主体区域 |
属性
| 属性 | 说明 |
|---|---|
align | 表格元素的对齐方式：left / center / right |
border | 单元格边框，默认没有 |
cellpadding | 单元格内容与边框的空白 |
cellspacing | 单元格之间的空白，默认 2 像素 |
width | 表格宽度 |
这几个是 HTML4 的表现型属性，在 HTML5 中已废弃，现代开发一律改用 CSS 控制。
合并单元格
- 跨行
rowspan="合并单元格的个数"，在最上侧写合并代码 - 跨列
colspan="合并单元格的个数"，在最左侧写合并代码 - 合并之后要删除多余的单元格
列表标签
也可以用来布局。
<!-- 无序列表 -->
<ul><li>列表项</li></ul>
<!-- 有序列表 -->
<ol><li>列表项</li></ol>
<!-- 自定义列表：一个 dt 可对应多个 dd -->
<dl>
<dt>名词</dt>
<dd>名词解释</dd>
</dl>
表单
作用是收集信息。
表单域
<form> 把它范围内的表单信息提交给服务器。
<form action="url地址" method="get/post" name="表单域名称"></form>
表单元素
<input> 是输入表单元素，type 决定它的形态：
| 值 | 说明 |
|---|---|
text | 文本框，用户可以输入任何文字 |
radio | 单选按钮，name 值相同即可实现多选一 |
checkbox | 复选框，可以实现多选 |
submit | 提交按钮，把表单域内所有表单元素的值提交给后台服务器 |
reset | 重置按钮，还原表单元素的初始默认值 |
button | 普通按钮 |
file | 文件域，上传文件 |
其他常用属性：
| 属性 | 说明 |
|---|---|
value | 规定 input 元素的值 |
checked | 页面打开时默认选中 |
maxlength | 输入字符的最大长度 |
其他表单元素
<label>：绑定一个表单元素，点击后自动聚焦<select>：下拉表单元素，选项用selected设为默认选中<textarea>：文本域表单元素
所有表单元素都要包含在
<form>表单域里面，并且需要有name属性。
HTML5 新增元素
video、audio、canvas、svg。
其中 <canvas> 有两个容易踩坑的地方：
- 默认宽 300px、高 150px，画布默认是透明的。
width/height属性和 CSS 设置的宽高不是一回事。JS 读到的是 DOM 节点上的属性值，而用 CSS 改尺寸只是把已绘制的内容拉伸，会导致图像变形。
绘制方案的选型与具体 API 见 Canvas 与 SVG 绘图方案选型，WebSocket 见 WebSocket 基础。