HTML基础

一、列表标签

目标:能够使用无序列表、有序列表、自定义列表标签，实现网页中列表结构的搭建

学习路径:

1. 列表的应用场景

2.无序列表

3.有序列表

4.自定义列表

1.1应用

2.1无序列表

➢场景: 在网页中表示一组无顺序之分的列表，如:新闻列表。

➢标签组成:

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

➢显示特点:

●列表的每一项前默认显示圆点标识

➢注意点:

ul标签中只允许包含li标签

li标签可以包含任意内容

3.1有序列表

➢场景:在网页中表示一组有顺序之分的列表，如:排行榜。

➢标签组成:

标签名	说明
ol	表示有序列表的整体，用于包裹I标签
li	表示有序列表的每一项，用于包含每一行的内容

➢显示特点:

列表的每一项前默认显示序号标识

➢注意点:

ol标签中只允许包含li标签

li标签可以包含任意内容

4.1自定义列表

➢场景: 在网页的底部导航中通常会使用自定义列表实现。

➢标签组成:

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

➢显示特点:

dd前会默认显示缩进效果

➢注意点:

dl标签中只允许包含dt/dd标签

dt/dd标签可以包含任意内容

二、表格标签

目标:能够使用表格相关标签和属性，实现网页中表格结构的搭建

学习路径:

1. 表格的基本标签

2.表格相关属性

3.表格标题和表头单元格标签

4.表格的结构标签 (了解)

5.合井单元格

1.1表格的基本标签

➢场景:在网页中以行+列的单元格的方式整齐展示和数据，如:学生成绩表

➢基本标签:

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

➢注意点:

●标签的嵌套关系: table> tr> td

2.1表格相关属性

➢场景: 设置表格基本展示效果

➢常见相关属性:

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

➢注意点:

●实际开发时针对于样式效果推荐用CSS设置

3.1表格标题和表头单元格标签

➢场景: 在表格中表示整体大标题和一-列小标题

➢其他标签:

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

➢注意点:

caption标签书写在table标签内部

th标签书写在tr标签内部(用于替换td标签)

4.1表格的结构标签(了解)

➢场景: 让表格的内容结构分组，突出表格的不同部分(头部、主体、底部)，使语义更加清晰

➢结构标签:

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

➢注意点:

表格结构标签内部用于包裹tr标签

表格的结构标签可以省略

5.1合并单元格-思路

➢场景: 将水平或垂直多个单元格合并成一个单元格

➢合并单元格步骤:

1.明确合并哪几个单元格

2.通过左上原则，确定保留谁删除谁

上下合并-→只保留最上的，删除其他

左右合并-→只保留最左的，删除其他

3.给保留的单元格设置: 跨行合并(rowspan) 或者跨列合并(colspan)

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

➢注意点:

●只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨: thead、tbody、tfoot)

三、表单标签

目标:能够使用表单相关标签和属性，实现网页中表单类网页结构搭建

学习路径:

1. input系列标签

2. button按钮标签

3. select 下拉菜单标签

4. textarea文本域标签

5. label标签

1.1 input系列标签的基本介绍

➢场景:在网页中显示收集用户信息的表单效果，如:登录页、注册页

标签名: input

input标签可以通过type属性值的不同，展示不同效果

➢type属性值:

标签名	type	属性值说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框,用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择,用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

1.2 input系列标签文本框

➢场景: 在网页中显示输入单行文本的表单控件

➢type属性值: text

➢常用属性:

属性名	说明
placeholder	占位符。提示用户输入内容的文本

1.2 input系列标签密码框

1.4 input系列标签-单选框

➢场景:在网页中显示多选一的单选表单控件

➢type属性值: radio

➢常用属性:

属性名	说明
name	分组。有相同name属性值的单选框为- -组，- -组中同时只能有一一个被选中
checked	默认选中

➢注意点:

name属性对于单选框有分组功能

有相同name属性值的单选框为一组，一组中只能同时有一个被选中

1.5 input系列标签-复选框

1.6 input系列标签文件选择

➢场景: 在网页中显示文件选择的表单控件

➢type属性值: file

➢常用属性:

属性名	说明
multiple	多文件选择

1.7 input系列标签按钮

➢场景: 在网页中显示不同功能的按钮表单控件

➢type属性值:

标签名	type	属性值说明
input	submit	提交按钮。点击之后提交数据给后端服务器
input	reset	重置按钮。点击之后恢复表单默认值
input	button	普通按钮。默认无功能，之后配合js添加功能

➢注意点:

如果需要实现以上按钮功能，需要配合form标签使用

form使用方法:用form标签把表单标签-起包裹起来即可

2.1 button按钮标签

➢场景: 在网页中显示用户点击的按钮

➢标签名: button

➢type属性值 (同input的按钮系列) :

标签名type属性值说明

button	submit	提交按钮。点击之后提交数据给后端服务器
button	reset	重置按钮。点击之后恢复表单默认值
button	button	普通按钮。默认无功能，之后配合js添加功能

➢注意点:

谷歌浏览器中button默认是提交按钮

button标签是双标签，更便于包裹其他内容:文字、图片等

3.1 select下拉菜单标签

➢场景: 在网页中提供多个选择项的下拉菜单表单控件

➢标签组成:

select标签:下拉菜单的整体

option标签:‘下拉菜单的每一 -项

➢常见属性:

selected:下拉菜单的默认选中

4.1 textarea文本域标签

➢场景: 在网页中提供可输入多行文本的表单控件

➢标签名: textarea

➢常见属性:

cols:规定了文本域内可见宽度

rows:规定了文本域内可见行数

➢注意点:

右下角可以拖拽改变大小

实际开发时针对于样式效果推荐用CSS设置

5.1 label标签

➢场景: 常用于绑定内容与表单标签的关系

➢标签名: label

使用方法①:

1.使用label标签把内容 (如:文本)包裹起来

2.在表单标签 上添加id属性

3.在abel标签的for属性中设置对应的id属性值

➢使用方法②:

1. 直接使用labe|标签把内容(如:文本)和表单标签一 起包裹起来

2.需要把label标签的for属性 删除即可

四、语义化标签

目标:能够认识开发中常用的没有语义布局标签和有语义的布局标签

学习路径:

1. 没有语义的布局标签

2.有语义的布局标签 (了解)

1.1没有语义的布局标签- div和span

➢场景:实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

div标签: 一行只显示一个(独占一行)

span标签: 一行可以显示多个

2.1有语义的布局标签(了解）

➢场景:在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

➢标签:

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

➢注意点:

●以上标签显示特点和div一致,但是比div多了不同的语义

五、字符实体

目标:能通过字符实体在网页中显示特殊符号

学习路径:

1. HTML中的空格合并现象

2.常见字符实体

1. HTML中的空格合并现象

➢场景:如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格

2.常见字符实体

场景:在网页中展示特殊符号效果时，需要使用字符实体替代

➢结构:&英文;

➢常见字符实体:

空格