HTML学习
HTML学习
一、HTML页面固定结构(编写规范)
1 | |
VSCODE使用技巧
1、一键部署结构
方法：1.新建html文件后输入“！”
2.html:5
2、注释
快捷键：Ctrl+/
3、一行向下复制
方法：点击一行Ctrl c、Ctrl v
4、同时选中多个相同元素
方法:选择一个元素后，Ctrl+D
二、HTML标签学习
1.排版标签
1.1、分类
双标签：有开始结束标签包裹中间部分内容
如：
单标签：自成一体，无法包裹内容
如： 换行
插入水平线
1.2、标签间关系
父子关系（嵌套关系）
兄弟关系（并列关系）
1.3、标题标签
代码：h系列标签（重要程度依次递减）
1级标签：
2级标签：
一共六级
特点：1.同markdown语法不同级别标签（字体大小）
2.标题单独占一行
1.4、段落标签
代码：
特点：两段中间有间隔
2.文本格式化标签
删除线 下划线
加粗 倾斜
用strong、ins、em、del表示强调语义更强烈（最终呈现效果为相同）
3.媒体标签
3.1图片标签
代码：
标签属性：
src(路径)
- 绝对路径：目录下的绝对位置，可直接到达目标位置，通常从盘符开始(或者是网址)
- 相对路径(常用):从当前文件开始出发找目标文件
- 同级目录: 直接写图片名字或者./图片名
- 下级目录：文件夹名/图片名
- 上级目录：返回到上一级目录 ../
alt(替换文本)
- 当图片加载不成功时，显示alt的文本
height width(设置图片大小)
- 如果只设置其中一个，会自动等比例缩放
title(提示文本)
- 当鼠标悬停时，才显示的文本
- title属性不仅仅可以用于图片标签，还可以用于其他标签
属性注意点：
1.标签上可以同时存在多个属性
2.属性之间用空格隔开
3.属性之间没有顺序之分
3.2.音频标签
代码:
3.3.视频标签
代码：
其他与音频完全相同
3.4链接标签
href中写跳转地址
例子
1 | |
当不知道跳转位置时，可以用空链接，即href中写#
1 | |
target属性(修改目标网页打开形式)
- target=”_self”(默认值)：在当前窗口中跳转
- target=”_blank”:在新窗口中跳转
三、基础
1.列表
1.1应用场景
列表的三种类型
- 无序列表
- 有序列表
- 自定义列表
应用在需要按行的方式，整齐显示内容部分
1.2无序/有序列表
标签组成
ul 表示无序列表的整体，用于包裹li标签
li 表示无序列表的每一项，用于包含每一行的内容
ol 表示有序列表的每一项
ul与li,ol与li两者关系为父子关系(嵌套关系)
显示特点
无序列表的每一项前默认有圆点标识
有序列表的每一项前有排序的序号
注意点
- ul标签只允许包含li标签
- li标签可以包含任意内容
例子
无序
- 香蕉
- 苹果
有序
- 香蕉
- 苹果
1.3自定义列表
标签组成
dl 表示自定义列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一项内容
显示特点
- dd前会默认显示缩进效果
注意点
- dl标签中只允许包含dt/dd标签
- dt/dl标签可以包含任意内容
例子
- 帮助中心
- 个人中心
- 订单中心
2.表格
2.1应用场景
在网页中以行+列的单元格的方式争气展示
2.2基本标签
table 表格整体，用于包裹多个tr
tr 表格每行，用于包裹td
td 表格单元格，用于包裹内容
注意点
- 嵌套关系：table>tr>td
| 姓名 | 成绩 |
| 小明 | 100 |
2.3相关属性(在table中加)
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
例子
| 姓名 | 成绩 |
| 小明 | 100 |
注意点：
实际开发中用CSS设置
2.4表格标题和表头单元格标签
结构标签
| 标签名 | 名称 | 说明 |
| caption | 表格大标题 | 表示表格整体大标题，默认在表格顶部居中显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗居中显示 |
注意点
- caption标签书写在table标签内部
- th标签书写在tr标签内部(用于替换td标签)
例子
| 姓名 | 成绩 |
|---|---|
| 熊猫 | 100 |
2.5表格结构标签
结构标签
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
注意点
- 表格结构标签内部用于包裹tr标签
- 表格结构标签可以省略
- 主要用于增加代码可读性，提高执行效率
例子
| 姓名 | 成绩 |
|---|---|
| 熊猫 | 100 |
2.6合并单元格
应用场景：
跨行合并(垂直合并)、跨列合并(水平合并)
结构标签
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并(上下) |
| colspan | 合并单元格的个数 | 跨列合并(左右) |
合并原则（左上原则）
- 上下合并—->只保留最上的，删除其他
- 左右合并—->只保留最左的
例子
| 姓名 | 成绩 |
|---|---|
| 熊猫 | 100 |
| 小明 |
注意点
- 只有在同一个结构标签中的单元格才能合并(并不能跨thead,tbody,tfoot)
3.表单
应用场景
登陆，注册，搜索等等需要输入场景(标签比较多，但是使用频率比较低)
3.1 input系列标签
标签
- 根据type属性值不同，展示不同效果
1 | |
占位符标签(提示文本)
type属性值:text
标签：placeholder(占位，提示用户输入内容的文本)
1 | |
单选功能和默认选中
type属性值： radio
标签属性
| 属性名 | 说明 |
| name | 分组，有相同name属性的单选框为一组,一组中只能选一个 |
| check | 默认选中 |
例子
1 | |
1.上传多个文件
1 | |
2.按钮
标签
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | submit | 提交数据给后端服务器 |
| input | reset | 重置 |
| input | button | 默认无功能，可配合js添加功能 |
表单用form包裹形成一个整体表单域，才能正常使用
1
<form action=""></form>(action为提交地址)
例子
1 | |
3.2 button按钮标签(类似于input中按钮)
标签
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交 |
| button | reset | 重置 |
| button | button | 默认无功能，可配合js实现功能 |
注意点
- 谷歌浏览器中button默认是提交按钮
- button是双标签，更便于包裹其他内容(文字，图片)
例子
1 | |
3.3下拉菜单
标签
- select标签： 下拉菜单的整体
- option标签： 下拉菜单的每一项
- 两者为父子嵌套关系
属性
- selected: 下拉菜单的默认选中
例子
1 | |
3.4文本域
应用场景：
在网页中提供可输入多行文本的表单控件
标签名：
textarea(双标签)
常见属性：
- cols: 规定了文本域内可见宽度
- rows: 规定了文本域内可见行数
注意点：
- 右下角可以拖拽改变大小
- 实际开发中针对样式效果用CSS,不用cols,rows设置
例子
1 | |
3.5 label标签
场景：
用于绑定内容与表单标签的关系(点内容也可以选择)
标签名：
label (双标签)
方法：
一。
- 用label标签把内容(文本，图片)包裹
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性
二。
- 用lable标签把整个内容和表单标签一起包裹
- 把label标签中的for属性删去
例子
1 | |
区别
第二种使用更加简单，但是第一种更加灵活多变
3.6语义化标签
一。没有语义的布局标签(div和span)
双标签
div标签：一行只显示一个
span标签：一行可以显示多个
例子
1 | |
二。有语义的布局标签(手机网页布局)
注意
- 都为双标签
- 以上标签显示特点与div一致，一行只显示一个，但比div多了不同语义
3.7字符实体
场景：
在网页中展示特殊傅好效果时，需要用字符实体替代
常见字符实体：
注意：
- 网页只能识别一个空格，内容中打多个空格只会识别到一个
例子
字 符实体案例