1、标题标签 Heading
h1~h6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
特点:
- 独占一行
- 文字加粗
- 文字变大
h1->h6 文字逐渐变小
2、段落标签 Paragraph
<p>内容</p>
内容
特点:
段落之间存在间隙
独占一行
3、排版标签
(1)换行符 Line Break
第一行文本<br />第二行文本
第一行文本
第二行文本
特点
单标签
让文字强制换行
(1)水平分割线 Horizontal Rule
<hr />
4、文本格式化标签
推荐使用后者
b/strong 加粗
u/ins 下划线
i/em 倾斜
s/del 删除线
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>
加粗
加粗
下划线
下划线
倾斜
倾斜
删除线
删除线
5、媒体标签
(1)图片标签 Image
<img
src="图片地址"
alt="替换文本"
title="提示文本"
width="宽度"
height="高度"
/>
标签属性:属性名=属性值
6、资源路径
(1)当前路径
<`img src="image.png" />`
<!-- 推荐使用./ -->
<img src="./image.png" />
(2)下级路径
<img src="./img/image.png" />
(3)上级路径
<img src="../image.png" />
7、音频标签
<audio
src="音频地址"
controls 显示播放控件
autoplay 自动播放(部分浏览器不支持)
loop 循环播放
</audio>
支持的格式 mp3 wav
8、视频标签
<video src="视频地址"
controls 显示播放控件
autoplay 自动播放(谷歌浏览器需要配合muted静音播放)
muted 静音播放
loop 循环播放
</video>
支持的格式 mp4
9、链接标签 Anchor
<a href="目标地址">文字内容</a>
<a href="https://www.baidu.com/">百度</a>
百度
属性:
target: _self 当前窗口打开(默认) / _blank 新窗口打开
Tips: chrome 地址栏双击可以看到完整地址
网站的默认首页 index.html
10、列表
无序列表
有序列表
自定义列表
(1)无序列表 Unordered List
列表项 List Item
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
</ul>
- 苹果
- 香蕉
- 桃子
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
</ol>
- 苹果
- 香蕉
- 桃子
(3)自定义列表 Description List
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>桃子</dd>
</dl>
-
水果
- 苹果
- 香蕉
- 桃子
dt Description Term
dd Description Details
11、表格
(1)基本元素
标签含义
tr Table Row
th Table Header
td Table Data
table 属性:
border 边框宽度
width 表格宽度
height 表格高度
<table border="1">
<caption>
表格大标题
</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Tom</td>
<td>23</td>
</tr>
<tr>
<td>Jack</td>
<td>24</td>
</tr>
</table>
(2)表格结构,可以省略
thead 表格头部
tbody 表格主体
tfoot 表格底部
<table border="1">
<caption>
表格大标题
</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>23</td>
</tr>
<tr>
<td>Jack</td>
<td>24</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>求和</td>
<td>57</td>
</tr>
</tfoot>
</table>
(3)合并单元格
跨行合并(垂直)rowspan
跨列合并(水平)colspan
左上原则
上下合并,保留最上
左右合并,保留最左
Tips: 不能跨结构合并
<table border="1">
<caption>
表格大标题
</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td rowspan="2">23</td>
</tr>
<tr>
<td>Jack</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">求和: 57</td>
</tr>
</tfoot>
</table>
12、表单
输入框 input
type 属性 输入框类型
text 文本框
password 密码框
radio 单选框
checkbox 多选框
file 文件选择
submit 提交按钮
reset 重置按钮
button 普通按钮
(1)text 文本框
placeholder 占位符
<input type="text" placeholder="文本框内的文字" />
文本框占位符
(2)password 密码框
placeholder 占位符
<input type="password" placeholder="密码框占位符" />
密码框占位符
(3)radio 单选框
name 属性分组,一个分组只能有一个值被选中
checked 默认选中
<input type="radio" name="sex" value="1" />男
<input type="radio" name="sex" value="2" checked />女
男
女
(4)checkbox 多选框
checked 默认选中
<input type="checkbox" name="city" value="beijing" />北京
<input type="checkbox" name="city" value="shanghai" checked />上海
北京
上海
(5)file 文件选择
multiple 多选(按住 ctrl 多选)
<input type="file" /> <input type="file" multiple />
(6)按钮
submit 提交按钮
reset 重置按钮
button 普通按钮
需要配合 form 表单域使用
属性 value 修改按钮显示的值
<input type="submit" />
<input type="reset" />
<input type="button" value="普通按钮" />
button 按钮标签
type 取值
submit 提交按钮
reset 重置按钮
button 普通按钮(默认)
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
<button>普通按钮</button>
提交按钮 重置按钮 普通按钮 普通按钮
select 下拉菜单
<select>
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
<select></select>
</select>
广州
option 选项
默认选中第一项,可以指定默认选中 selected
textarea 多行文本域
属性
cols 宽度 列数
rows 高度 行数
<textarea></textarea>
label 标签
点击文字也可选中选项
两种使用方式等效
<input type="radio" name="sex" id="man" />
<label for="man">男</label>
<label><input type="radio" name="sex" />女</label>
男 女
无语义标签
div 块级标签,独占一行
span 行内标签
语义化标签
手机端常用
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章
以上标签和 div 等效,多了语义化
字符实体
在网页中显示特殊字符
空格