HTML
一、基础认知
1、注释
1.1、注释的作用和写法
1.1.1、作用
为代码添加解释性,描述性的信息,主要用来帮助开发人员理解代码,浏览器执行代码时回忽略所有注释。
1.1.2、注释的快捷键
在VS Code中:Ctrl + /
2、HTML标签的结构
2.1、结构说明
- 标签由<、>、/、英文单词或者字母组成。并且把标签中<>包括起来的英文单词或者字母称为标签名
- 常见的标签由两部分组成,我们称之为双标签。前半部分叫做开始标签,后半部分叫做结束标签,两部分之间包裹内容
- 少数标签由一部分组成,我们称之为:单标签,自成一体,无法包裹内容
2.2、HTML标签与标签之间的关系
2.2.1、父子关系(嵌套关系)
<head>
<title></title>
</head>
2.2.2、兄弟关系(并列关系)
<head></head>
<body></body>
二、HTML标签学习
1、排版标签
1.1、标题标签
场景
在新闻和文章页面中,都离不开标题,用来突出显示文章主题
代码
h系列标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
语义
一到六级标题,重要程度一次递减
特点
- 文字都有加粗
- 文字都有变大,从h1到h6逐渐变小
- 独占一行
1.2、段落标签
场景
在新闻文章页面中,用于分段显示
代码
<p>第一个段落</p>
<p>第二个段落</p>
语义
段落
特点
- 段落之间有间隙
- 独占一行
1.3、换行标签
场景
让文字强制换行显示
代码
<br>
语义
换行
特点
- 但标签
- 让文字强制换行
1.4、水平线标签
场景
分割不同主题内容的水平线
代码
<hr>
语义
主题的分割转换
特点
- 但标签
- 在页面中显示一条水平线
2、文本格式化标签
2.1、介绍
场景
需要让文字加粗、下划线、倾斜、删除线等效果
代码
标签 | 说明 |
---|---|
b或者strong | 加粗 |
u或者ins | 下划线 |
i或者em | 倾斜 |
s或者del | 删除线 |
语义
突出重要性的强调语境
3、媒体标签
3.1、图片标签
场景
在网页中显示图片
代码
<img src="" alt="">
图片标签的alt属性
属性值:替换文本
- 当图片加载失败时,才显示alt文本
- 当图片加载成功时,不会显示alt文本
图片标签的title属性
属性值:提示文本
当鼠标悬停时才显示文本
图片标签的width和height属性
属性值:宽度和高度
注意点
- 如果只设置width和height中的一个,另一个没有设置的会自动等比例缩放(此时图片不会变形)
- 如果同时设置了,且比例不当时图片就会变形
属性注意点:
- 标签的属性写在开始标签内部
- 标签可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性名必须以空格隔开
- 属性之间没有顺序之分
特点
- 单便签
- img标签需要展示对应的效果,需要对标签的属性进行设置
3.2、音频标签
场景
在页面中插入音频
代码
<audio src="" controls></audio>
常见属性
属性名 | 说明 |
---|---|
src | 音频路径 |
controls | 显示播放的控件 |
autoplay | 自动播放 |
loop | 循环播放 |
3.3、视频标签
场景
在页面中插入视频
代码
<video src="" controls></video>
常见属性
属性名 | 说明 |
---|---|
src | 视频路径 |
controls | 显示播放控件 |
autoplay | 自动播放 |
loop | 循环播放 |
4、链接标签
场景
点击之后,从一个页面跳转到另一个页面
称呼
a标签、超链接、锚链接
代码
<a href="">链接文字</a>
连接标签的target属性
属性值
目标网页的打开形式
取值 | 效果 |
---|---|
_self | 默认值,在当前窗口中跳转(覆盖原来的网页) |
_blank | 在新窗口中显示(保留原网页) |
特点
双标签,可以包含内容
如果需要a标签点击之后去指定页面,需要设置a标签的href属性
5、列表标签
5.1、无序列表
场景
在网页中表示一组无顺序之分的列表
便签组成
标签 | 说明 |
---|---|
ul | 表示无序列表的整体,用于包裹li标签 |
li | 表示无序列表的每一项,包含每一行的内容 |
注意
- ul标签中只允许包含li标签
- li标签中可以包含任意内容
5.2、有序列表
场景
在网页中,表示一组有顺序之分的列表
标签组成
标签 | 说明 |
---|---|
ol | 表示有序列表的整体,用来包裹li标签 |
il | 表示有序列表的每一项 |
5.3、自定义列表
场景
在网页的底部导航栏中通常会使用自定义列表
标签组成
标签 | 说明 |
---|---|
dl | 表示自定义列表的整体,由于包含dd/dt标签 |
dt | 表示自定义列表的主题 |
dd | 表示自定义列表针对主题的每一项内容 |
三、表格标签
1、表格的基本标签
场景
在网页中以行+列的单元格方式整齐展示数据
基本标签
标签 | 说明 |
---|---|
table | 表格整体,用于包含多个tr |
tr | 表格每行,用于包含td |
td | 表格单元格,由于包裹内容 |
2、表格的相关属性
场景
这只表格基本展示效果
常见想过属性
属性名 | 属性值 | 效果 |
---|---|---|
border | 数字 | 边框宽度 |
width | 数字 | 表格宽度 |
height | 数字 | 表格高度 |
3、表格的标题和表头的单元格标签
场景
在表格中表示整体大标题和一列小标题
标签
标签名 | 名称 | 说明 |
---|---|---|
caption | 表格大标题 | 表示表格整体大标题,默认在表格顶部居中位置显示 |
th | 表头单元格 | 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中 |
注意
- caption标签写在table标签内部
- th标签写在tr标签内部
4、合并单元格
步骤
明确合并哪几个单元格
通过左上原则,确定保留谁删除谁
给保留的单元格设置跨行合并(rowspan)或者跨列合并(colspan)
属性名 | 属性值 | 说明 |
---|---|---|
rowspan | 合并单元格的个数 | 跨行合并,将多行单元格垂直合并 |
colspan | 合并单元格的个数 | 跨列合并,将多列单元格水平合并 |
四、表单标签
1、input系列标签
1.1、场景
在网页中显示收集用户信息的表单效果,标签名为input
1.2、type属性值
标签名 | type属性值 | 说明 |
---|---|---|
input | text | 文本框,用于输入单行文本 |
input | password | 密码框,用于输入密码 |
input | radio | 单选框,用于多选一 |
input | checkbox | 多选框,用于多选多 |
input | file | 文件选择,用于上传文件 |
input | submit | 提交按钮,用于提交表单内容 |
input | reset | 重置按钮,用于重置 |
input | button | 普通按钮 |
1.3、文本框
场景
在网页中输入单行文本的表单控件
type属性值:text
常用属性
属性名 | 说明 |
---|---|
placeholder | 占位符,提示用户输入内容的文本 |
1.4、单选框
场景
在网页中显示多选一的单选表单控件
type属性值:radio
常用属性
属性名 | 说明 |
---|---|
name | 分组,有相同name属性的单选框为一组,一组中同时只能由一个被选中 |
checked | 默认选中 |
1.5、文件选择
场景
在网页中显示文件选择的表单控件
type属性值:file
常用属性
属性名 | 说明 |
---|---|
multiple | 多文件选择 |
2、表单标签
2.1、select下拉菜单标签
场景
在网页中提供多个选则的下拉菜单表单控件
标签组成
- select标签:下拉菜单的整体
- option标签:下拉菜单的每一项
常见属性
selected:下拉菜单的默认选中
2.2、testarea文本域标签
场景
在网页中提供可以输入多行文本的表单控件
标签名:textarea
常见属性
cols:规定文本域内可见宽度
rows:规定文本域内可见行数
2.3、lable标签
场景
常用于绑定内容与表单标签的关系
标签名:lable
使用方法
方法一
- 使用lable标签把内容包裹起来
- 在表单标签上添加id属性
- 在lable标签的for属性中设置对应的id属性
方法二
- 直接使用lable标签把内容和表单标签一起包裹起来
- 需要把lable标签的for属性删除即可
五、语义化标签
1、没有语义的布局标签div和span
场景
实际开发网页时会大量的使用到div和span两个没有语义的布局标签
div标签
独占一行
span标签
一行可以显示多个
selected:下拉菜单的默认选中
2.2、testarea文本域标签
场景
在网页中提供可以输入多行文本的表单控件
标签名:textarea
常见属性
cols:规定文本域内可见宽度
rows:规定文本域内可见行数
2.3、lable标签
场景
常用于绑定内容与表单标签的关系
标签名:lable
使用方法
方法一
- 使用lable标签把内容包裹起来
- 在表单标签上添加id属性
- 在lable标签的for属性中设置对应的id属性
方法二
- 直接使用lable标签把内容和表单标签一起包裹起来
- 需要把lable标签的for属性删除即可
五、语义化标签
1、没有语义的布局标签div和span
场景
实际开发网页时会大量的使用到div和span两个没有语义的布局标签
div标签
独占一行
span标签
一行可以显示多个
标签:lable,常用,场景,网页,标签,表单,html,属性 From: https://blog.csdn.net/weixin_63323754/article/details/139896307