HTML基础
一、HTML注释和标签
1.注释的作用：
（1）为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
（2）浏览器执行代码会忽略所有的注释
(3)注释的快捷键 ctrl + /
2.HTML标签关系
(1)父子关系（嵌套）
<head>
<title></title>
</head>
(2)兄弟关系(并列关系)
<head></head>
<body></body>
3.HTML标签学习路径
(1)排版标签
标题标签
段落标签
换行标签
水平线标签
(2)文本标签化标签
(3)媒体标签
(4)链接标签
二、HTML常用标签
1.标题标签
1
2
3
4
5
6
(1)标签标题一共有几个？
h1-h6分别表示一到六级标题
(2)标题标签有那些特点？
文字都有加粗
文字都有变大，但是从h1-h6文字逐渐减小
独占一行
2.段落标签
(1)使用场景
在新闻和文章的页面中，用于分段显示
(2)代码：
独占一行
(3)语义：段落 (4)特点： 段落之间存在间隙 独占一行3.换行标签
(1)使用场景
让文字强制换行显示
(2)代码
(3)语义：换行
(4)特点：
单标签
让文字强制换行
4.水平线标签
1)使用场景
分割不同主题内容的水平线
(2)代码
(3)特点： 单标签 在页面中显示一条水平线
5.文本格式化标签
| 标签 | 说明 |
|---|---|
| strong | 加粗 |
| ins | 下滑线 |
| em | 倾斜 |
| del | 删除线 |
6.图片标签
1)使用场景
在网页找到你显示图片
(2)代码
(3)特点：
单标签
img标签需要展示对应的效果，需要借助属性进行设置
(4)属性注意点：
标签的属性写在开始标签内部
标签
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分
(5)属性名：alt
属性值：替换文本
当图片加载失败的时候，才显示alt文本
(6)属性名：title
属性值：提示文本
当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
(7)属性名：width和height
属性值：宽度和高度(数字)
注意点：
如果只设置width和height中的一个，另一个没设置的会自动等比例缩放(此时图片不会变形)
如果同时设置width和height两个,若设置不当此时图片可能会变形
三、绝对路径+相对路径
1.绝对路径
(1)绝对路径
指目录下的绝对位置，可直接到达目标位置，通常以盘符开始的路径
(2)例如：
盘符开头:D:\day01\images\1.jpg
完整的网络地址：https://www.baidu.com.cn//
(3)相对路径(常用)
(1)概念：
当前文件：当前的html网页
目标文件：要找到的图片
(2)相对路径：从当前文件开始出发找目标文件的过程
(3)相对路径分类：
同级目录
下级目录
上级目录
(4)同级写法
(5)下级写法
<img src = “img/cat.jpj”
(6)上级写法
四、HTML其他标签
1.音频标签
(1)使用场景：
在页面中插入音频
(2)代码
(3)常见属性:
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放 |
| loop | 循环播放 |
2.视频标签
(1)使用场景：
在页面中插入视频
(2)代码：
(3)常见属性:
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(谷歌浏览器中需要配合muted实现静音播放) |
| loop | 循环播放 |
3.链接标签
(1)使用场景：
点击之后，从一个页面跳转到另一个页面
(2)称呼：a标签、超链接
(3)代码：
超链接
(4)特点：
双标签,内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a 标签的hred属性
4.链接-新窗口
(1)属性名：target
(2)属性值：目标网页的打开形式
| 取值 | 效果 |
|---|---|
| _blank | 在新窗口跳转(保留原网址) |
| self | 默认值，在当前窗口跳转(覆盖原网址) |
五、列表
1.无序列表
(1)使用场景：
在网页中表示一组无顺序之分的列表（如新闻列表）
(2)标签组成
| 标签名 | 说明 |
|---|---|
| ul | 表示无序列表的整体用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
(3)显示特点：
列表的每一项前默显示圆点标识
(4)注意点：
ul标签中只允许包含li标签
li标签可以包含任意内容
2.有序列表
(1)使用场景：
在网页中表示一组有顺序之分的列表（如排行榜）
(2)标签组成：
| 标签名 | 说明 |
|---|---|
| ol | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
(3)显示特点：
列表的每一项前默认显示序号标识
(4)注意点
ol标签中只允许包含li标签
li标签可以包含任意内容
3.自义定列表
(1)使用场景：
在网页的底部导航中通常会使用自定义列表实现
(2)标签组成
| 标签名 | 说明 |
|---|---|
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
(3)显示特点：
dd前会默认显示缩进效果
注意点：
dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
六、表格
1.基本使用
(1)使用场景：
在网页中以行+列的单元格的方式整齐展示和数据(如学生成绩表)
(2)基本标签：
| 标签名： | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行,可用于包裹td |
| td | 表格单元格,可用于包内容 |
(3)注意点：
标签的嵌套关系：table > tr > td
2.相关属性
(1)使用场景：
设置表格基本展示效果
(2)常见相关属性：
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
(3)注意点：
实际开发时针对样式效果推荐用css设置
3.表格标题和表头单元格标签
(1)使用场景：
在表格中表示整体大标题和一列小标题
(2)其他标签
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
4.表格结构标签
(1)使用场景：让表格的内容结构分组，突出表格的不同部分(头部、主体、底部),使语义更加清晰
(2)结构标签：
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
(3)注意点：
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
5.合并单元格
(1)使用场景：
将水平或垂直多个单元格合并成一个单元格
(2)合并单元格步骤：
明确合并那几个单元格
通过左上原则，确定保留睡删除谁
*上下合并 > 只保留最上的，删除其他
*左右合并 > 只保留最左的，删除其他
给保留的单元格设置：跨行合并(rowspan)或者跨合并(colspan)
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
(3)注意点：
只有用一个结构标签中的单元格才能和并(不能跨：thead、tboday、tfoot)
七、表单
1.input系列标签的基本
(1)使用场景：
在网页中显示收集用户信息的表单效果(如、登陆页、注册页、)
(2)标签名：input
input标签可以通过type属性值的不同,展示不同效果
(3)type属性值：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框用于输入密码 |
| input | radio | 选框，用于多选一 |
| input | checkbox | 选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 通按钮，默认无功能，之后配合js添加功能 |
2.表单（input）占位符
使用场景：在网页中显示输入单行文本的表单控件
type属性值：text
常用属性：
| 属性名 | 说明 |
|---|---|
| placeholder | 占位符。提示用户输入内容的文本 |
3.单选功能和默认选中
(1)使用场景：在网页中显示多选一的单选表单控件
(2)type属性值： radio
(3)常用属性：
| 属性名 | 说明 |
|---|---|
| name | 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中 |
| checked | 默认选中 |
(4)注意点：
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中
4.input系列标签-文件选择
4.1 使用场景：
在网页中显示文件选择的表单控件
4.2 type属性值：file
4.3 常用属性：
| 属性名 | 说明 |
|---|---|
| multiple | 多文件选择 |
5.按钮-inpu
5.1 使用场景：在网页中显示不同功能的按钮表单控件
5.2 type属性值：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | submit | 提交按钮。（点击之后提交数据给后端服务器） |
| input | reset | 重置按钮（点击之后恢复表单默认值） |
| input | button | 普通按钮(默认无功能,之后配合js添加功能) |
5.3注意点：
(1)如果需要实现以上按钮功能，需要配合form标签使用
(2)form使用方法：用form标签把表单标签一起包裹起来即可
6.button按钮标签
6.1 使用场景：在网页中显示用户点击的按钮
6.2 标签名：button
6.3 type属性值
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮。（点击之后提交数据给后端服务器） |
| button | reset | 重置按钮（点击之后恢复表单默认值） |
| button | button | 普通按钮(默认无功能,之后配合js添加功能) |
6.4 注意点：
(1)谷歌浏览器中button默认是提交按钮
(2)button标签是素双标签,更便于包裹其他内容：文字、图片等
7.下拉菜单
7.1使用场景：在网页中提供多个选择项的下拉菜单
7.2标签组成：
(1)select标签：下拉菜单的整体
(2)option标签：下拉菜单的每一项
7.3常见属性：
selected：下拉菜单的默认选中
8.文本域
8.1 使用场景：在网页中提供可输入多行文本的表单控件
8.2标签名：textarea
8.3常见属性：
cols:规定了文本域内可见宽度
rows:规定了文本域内可见行数
8.4注意点：
(1)右下角可以拖拽改变大小
(2)实际开发时针对与样式效果推荐CSS设置
9.label标签
9.1使用场景：常用于绑定内容于表单标签的关系
9.2 标签名：label
9.3 使用方法1
(1)使用lable标签把内容(如：文本)包裹起来
(2) 在表单标签上添加id属性
(3)在label标签的for属性中设置对应的id属性值
使用方法2
(1)直接使用leabel标签把内容(如：文本)和表单标签一起包裹起来
(2)需要把label标签的for属性删除即可
八、综合案例
1.没有语义的布局标签-div和span
1.1使用场景：实际开发网页是回有大量频繁的使用到div和span这两个没有语义的布局标签
1.2 div标签：一行只显示一个(独占一行)
1.3 span标签：一行可以显示多个
2.手机端常用的有语义标签
2.1标签：
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
2.2 注意点：
以上标签显示特点和div一致但是比div多了不同的语义
3.字符实体
3.1 使用场景：在网页中展示特殊符号显示效果时,需要使用字符实体替代
3.2 结构：&英文
表单标签一起包裹起来
(2)需要把label标签的for属性删除即可
八、综合案例
1.没有语义的布局标签-div和span
1.1使用场景：实际开发网页是回有大量频繁的使用到div和span这两个没有语义的布局标签
1.2 div标签：一行只显示一个(独占一行)
1.3 span标签：一行可以显示多个
2.手机端常用的有语义标签
2.1标签：
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
2.2 注意点：
以上标签显示特点和div一致但是比div多了不同的语义
3.字符实体
3.1 使用场景：在网页中展示特殊符号显示效果时,需要使用字符实体替代
3.2 结构：&英文
3.3 常见字符实体
8177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
