本文介绍了HTML的基础知识，包括标题标签（h1-h6）、段落标签、文本格式标签、图片标签、路径、音频和视频标签、超链接的使用。详细讲解了列表、表格、表单的创建及各种元素的属性，并提到了语义化标签的重要性和字符实体的使用。内容适合HTML初学者，帮助理解网页结构和元素交互。
1.1 HTML认知
1、标题标签
只有h1~h6
特点：重要程度一次递减
独占一行、加粗、字从大到小
2、段落标签
独占一行、段落之间有空隙
3、文本格式标签
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
| 标签 | 说明 |
|---|---|
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
下面的突出重要性的强调语境
4、图片标签
<img src="" alt="" width="">
src：图片路径
alt：规定在图像无法显示时的替代文本
title：悬停显示文字
5、路径
（1）绝对路径（了解）
指目录下的绝对位置，从盘符开始
（2）相对路径（掌握）
从当前文件开始出发找目标文件
-
同级目录
-
下级目录
-
上级目录
./表当前目录，也可以不写./
../：上级目录
6、音频标签
<audio src="" controls></audio>
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
7、视频标签
<video src=""></video>
| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放） |
| loop | 循环播放 |
8、超链接
<a href="http://www.baidu.com" target="_blank" style="text-decoration: none;">跳转百度</a>
href：跳转地址
target：规定在何处打开链接文档。
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
1.2 HTML基础
1、列表
（1）无序列表：ul只包含li标签，li包含其它内容
（2）有序列表：ol只包含li标签
（3）自定义列表：dl包含dt和dd，dt为主题，dd为内容
2、表格
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包含多个tr |
| tr | 表格每行，可用于包含td |
| td | 表格单元格，可用于包裹内容 |
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认居中 |
| th | 表头单元格 | 表示一小列小标题，加粗 |
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主题 |
| tfoot | 表格底部 |
合并单元格：跨行合并（rowspan）和跨列合并（colspan）
3、表单
（1）input
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
| 属性名 | 说明 |
|---|---|
| placeholder | 占位符，提醒用户输入内容 |
单选功能
| 属性名 | 说明 |
|---|---|
| name | 分组，有相同name属性值的单选框为一组 |
| checked | 默认选中 |
（2）select
select是整体
option是下拉菜单的每一项
selected默认选中
（3）textarea
cols：规定了文本域的可见宽度（不用）
rows：规定了文本域的可见行数（不用）
（4）label
场景：常用于绑定内容与表单标签的关系
使用方法1：
-
使用label标签把内容包裹起来
-
在表单标签上添加id属性
-
在label标签的for属性中设置对应的id属性值
使用方法2：
-
直接使用label标签把内容和表单标签一起包裹起来
-
需要把label标签的for属性删除即可
4、语义化标签
（1）没有语义的标签
div：一行只显示一个
span：一行可显示多个
（2）有语义的标签（移动端）
| 标签 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
5、字符实体
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 |  ； | |
| < | 小于号 | <； |
| > | 大于号 | >； |
| & | 和号 | &； |
| “ | 引号 | "； |
| ‘ | 撇号 | &apos；（IE不支持） |
| ¥ | 元 | ¥； |
| § | 小节 | §； |
| © | 版权 | ©； |
扫一扫
3005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
