HTML 基础笔记
1. HTML 基本格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中文测试</title>
</head>
<body>
这里是测试body测试内容。
</body>
</html>
2. HTML 标签
常用标签
- <h1> 到 <h6>：标题标签，数字越大字体越小。
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
- <p>：段落标签，自动换行。
<p>这是一个段落。</p>
- <hr>：水平分割线。
<hr>
- <!-- -->：注释，不会显示在网页上。
<!-- 这是注释 -->
3. 元素的属性
常用属性
- align：对齐方式（left、right、center）。
<p align="center">居中对齐</p>
- bgcolor：背景颜色（已废弃，建议使用 CSS）。
<body bgcolor="#ff1234">
4. 文本元素属性
- <b>：加粗。
<b>加粗文本</b>
- <br>：换行。
这是第一行<br>这是第二行
- <i>：斜体。
<i>斜体文本</i>
- <del>：删除线。
<del>删除文本</del>
- <strong>：强调文本，效果类似 <b>。
<strong>强调文本</strong>
- <u>：下划线。
<u>下划线文本</u>
- <small>：小字体。
<small>小字体文本</small>
- <sub>：下标。
H<sub>2</sub>O
- <sup>：上标。
100m<sup>2</sup>
- <ruby>：拼音注释（部分浏览器不支持）。
<ruby>二姐<rt>(er) (jie)</rt></ruby>
- <mark>：黄色背景。
<mark>标记文本</mark>
5.超链接
5.1 超链接形式
1. 链接外部网站：
<a href="http://www.baidu.com">百度</a>
2. 链接本地文件：
<a href="1.html">本地文件</a>
3. 图片链接：
<a href="1.html"><img src="abc.jpg" alt="图片链接"></a>
4. 电子邮件链接：
<a href="mailto:123@13.com">联系我</a>
5. 下载文件链接：
<a href="abc.jpg" download>下载图片</a>
5.2 target 属性
- _self：在当前位置打开（默认值）。
- _blank：在新窗口中打开。
<a href="http://www.baidu.com" target="_blank">百度</a>
6. 图像标签 <img>
- src：图像来源。
- alt：图像无法显示时的替代文本。
- width 和 height：图像的宽度和高度。
<img src="abc.jpg" alt="美女" width="100" height="200">
<img src="abc.jpg" alt="美女" width="50%" height="200%">
注意：宽度和高度的百分比是相对于父元素的，高度百分比在某些情况下可能无效。
7. 列表
7.1 无序列表 <ul>
- type：列表项前的符号（disc、circle、square）。
<ul type="disc">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
7.2 有序列表 <ol>
- type：排序方式（1、A、a、I、i）。
- start：起始值。
<ol type="1" start="5">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
8. 表格
8.1 表格结构
- <table>：表格外框。
- <tr>：行。
- <td>：单元格。
<table border="1">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
8.2 表格属性
- border：边框粗细。
- <th>：表头单元格，自动居中加粗。
- colspan：横向合并单元格。
- rowspan：纵向合并单元格。
<table border="1">
<tr>
<th colspan="3">表头</th>
</tr>
<tr>
<td rowspan="2">合并列</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
9. HTML 实体
用于输出一些特殊字符，例如：
- <：小于号 <
- >：大于号 >
- &：与号 &
- "：双引号 "
- '：单引号 '
10. 表单
10.1 表单结构
<form action="submit.php" method="post">
<input type="text" name="username" placeholder="用户名" required>
<input type="password" name="password" placeholder="密码" required>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
10.2 表单属性
- action：指定表单提交的地址。
- method：提交方式（get 或 post）。
- get：数据附加在 URL 后面，适合小量数据。
- post：数据封装在请求体中，适合大量数据。
10.3 输入框 <input>
- type：输入框类型（text、password、submit、reset、button、email 等）。
- name：输入框名称，用于识别提交的数据。
- value：输入框的初始值。
- placeholder：提示文本。
- required：必填字段。