HTML 笔记

目录

一、标题标签

示例

1
2
3
4
5
6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

快捷输入：

  • h1+Tab/Enter 自动补全
  • h$*6 生成 h1-h6

属性说明：

  • align 设置位置：center（默认）、left、right

二、段落标签

示例

1
2
3
<p>这是段落</p>
<p>段落中<br />加换行</p>
<hr color="" width="" size="" align="">

快捷输入：

  • p+Tab/Enter
  • br+Tab/Enter
  • hr+Tab/Enter

属性说明：

  • <hr>属性
    • color 颜色
    • width 宽度（px 或 %）
    • align 位置：center（默认）、left、right

三、图片标签

示例

1
<img src="1.png" alt="壁纸" width="300px" height="200px" title="壁纸"/>

快捷输入：

  • img+Tab/Enter

属性说明：

  • src 路径（绝对/相对/网络）
  • alt 图片信息（图片加载异常时显示）
  • width 宽度
  • height 高度（建议只指定宽度防止比例失调）
  • title 鼠标悬停提示

四、超文本链接标签

示例

1
<a href="https://yuanbao.tencent.com/chat/">里面可以是文本或嵌套图片</a>

快捷输入：

  • a+Tab/Enter

属性说明：

  • href 指向网站链接

五、文本标签

示例

1
2
3
4
5
6
<em>加重语气+斜体效果</em>
<i>斜体效果</i>
<b>加粗文本</b>
<strong>强调语气+加粗文本</strong>
<span>普通文本</span>
<del>删除的文本</del>

快捷输入：

  • em/i/b/strong/span/del + Tab/Enter

六、列表标签

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ol type="1">
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	<li>列表项4</li>
	<li>列表项5</li>
</ol>
<ul type="disc">
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	<li>列表项4</li>
	<li>列表项5</li>
</ul>

快捷输入：

  • ol/ul+Tab/Enter
  • ol>li*5/ul>li*5 一键生成列表

属性说明：

  • <ol> type：1（数字）、a（小写字母）、A（大写字母）、i（小写罗马）、I（大写罗马）
  • <ul> type：disc（默认实心圆）、circle（空心圆）、square（小方块）、none（不显示）

七、表格标签

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<table border="1px" width="50%" height="100%">
	<tr>
		<td>表格单元格1</td>
		<td>表格单元格2</td>
	</tr>
	<tr>
		<td>表格单元格3</td>
		<td>表格单元格4</td>
	</tr>
	<tr>
		<td>表格单元格5</td>
		<td>表格单元格6</td>
	</tr>
</table>

<table border="1px">
	<tr>
		<td colspan="2">单元格1和2</td>
		<td rowspan="2">单元格3和8</td>
		<td>单元格4</td>
		<td>单元格5</td>
	</tr>
	<tr>
		<td>单元格6</td>
		<td>单元格7</td>
		<td>单元格9</td>
		<td>单元格10</td>
	</tr>
	<tr>
		<td>单元格11</td>
		<td>单元格12</td>
		<td>单元格13</td>
		<td>单元格14</td>
		<td>单元格15</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">单元格16 17 20 21</td>
		<td>单元格18</td>
		<td>单元格19</td>
		<td>单元格20</td>
	</tr>
	<tr>
		<td>单元格23</td>
		<td>单元格24</td>
		<td>单元格25</td>
	</tr>
</table>

快捷输入：

  • table/tr/td+Tab/Enter
  • table>tr*5>td*5{单元格} 一键生成

属性说明：

  • <table>
    • border 边框粗细（px/%）
    • width 宽度（px/%）
    • height 高度（px/%）
  • <td>
    • colspan 向右合并（数字）
    • rowspan 向下合并（数字）

八、表单标签

示例

1
2
3
4
5
6
<form action="" method="" name="">
	username: <input type="text">
	<br />
	password: <input type="password">
	<input type="submit" value="提交">
</form>

快捷输入：

  • form/input+Tab/Enter

属性说明：

  • <form>
    • action 服务器地址（url）
    • method 方式：get、post
    • name 表单名字
  • <input>
    • type：text（文本）、password（密码）、submit（提交）
    • value 自定义提交按钮文本

九、块元素与内联元素

常见块元素

独占一行，可设置宽高

div、form、h1-6、hr、p、table、ul、ol 等

常见内联元素

只占自身大小，不可设置宽高

a、b、em、i、span、strong 等

内联块元素

不换行，可设置宽高

button、img、input

十、容器元素

用于封装网站结构

旧版：使用 div 标签

1
2
3
4
5
6
7
<div id="header"></div>
<div id="nav"></div>
<div id="article">
	<div id="section"></div>
</div>
<div id="silder"></div>
<div id="footer"></div>

新版：使用语义化标签（利于SEO）

1
2
3
4
5
6
7
<header></header>
<nav></nav>
<article>
	<section></section>
</article>
<aside></aside>
<footer></footer>