HTML5+CSS3学习笔记（一）HTML5基础知识

一. 标题和段落

1.1 排版标签
1.1.1 标题标签：用来突出文章主题
h1~h6系列标签，重要程度依次递减，文字加粗程度减小，文字逐渐变小、并且独占一行，是一个块级标签。
1.1.2 段落标签
p标签在新闻和文章中使用，用于分段明显，段落之间存在间隙，独占一行。
1.1.3 换行标签
br单标签，让文字强制换行显示。
1.1.4 水平线标签
hr单标签实现在页面中显示一条直线，主题分割线

2.1文本格式化标签
需要让文字加粗、下划线、倾斜、删除线等效果

标签	说明
strong	加粗
em	倾斜
del	删除
ins	下划线

3.1媒体标签
3.1.1 图片标签
img单标签，<img src=" " alt=" " title=" " width=" " height=" ">
src是图片路径；
alt是替换文本，当图片加载不成功时替换文本才会显示；
title属性当鼠标悬停在图片上时显示文字;
width和height设置图片的宽度和高度，只设置一个属性时会自动等比例缩放图片，设置两个属性时都会生效，图片可能会变形；
3.1.2 音频标签
在页面中插入音频<audio src=" " controls></audio>
src是音频的路径；
controls是显示播放的控件；
autoplay是自动播放音频（部分浏览器不支持具有局限性）；
loop是循环播放音频；
音频标签支持三种模式：MP3、Wav、Ogg
3.1.3 视频标签
在页面中插入视频<video src=" " controls></video>
视频中属性与音频相似，autoplay自动播放需要配合muted实现静音播放；
视频支持的格式：MP4

4.1 链接标签
点击之后从一个页面跳转到另外一个页面<a href=" " target=" "></a>
target属性取值：
默认值是_self，在当前窗口中进行跳转（覆盖原网页）
_blank实现在新窗口跳转（保留原网页）

二. 列表标签

1.1无序列表**
在网页中表示一组无顺序之分的列表，例如：新闻列表
<ul></ul> 表示无序列表的整体，用于包裹li标签
<li></li> 表示无序列表的每一项，用于包含每一行的内容
列表的每一项默认显示圆点标识；
ul标签只能包含li标签，li标签可以包含任何标签
1.2有序列表
在网页中表示一组有顺序之分的列表，例如：排行榜
<ol></ol> 表示有序列表的整体，用于包裹li标签
<li></li> 表示无序列表的每一项，用于包含每一行的内容
列表的每一项默认显示序号标识；
ul标签只能包含li标签，li标签可以包含任何标签
1.3自定义列表
在网页的底部导航中通常会使用自定义列表实现
<dl></dl> 表示自定义列表的整体，用于包裹dt/dd标签
<dt></dt> 表示自定义列表的主题
<dd></dd> 表示自定义列表的针对主题的每一项内容
dd前会默认显示缩进效果
dl标签中只允许包含dt/dd标签，dt/dd标签可以包含任意内容

三. 表格标签

1.1 表格的基本标签
在网页中以行+列的 单元格方式整齐展示数据，例如：学生成绩单

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

1.2 表格属性

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

1.3 表格标题和表头单元格标签
在表格中表示整体大标题和一列小标题

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

caption标签书写在table标签中，th标签写在tr标签内部，替换掉td标签
1.4 表格的结构标签
让表格的内容结构分组，突出表格的不同部分，使语义更加清晰

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

1.5 合并单元格
将水平或垂直的多个单元格合并成一个单元格

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

只有同一个结构标签中的单元格才能合并，不能跨结构标签合并。

四.表单标签

1.1 input单标签系列标签的基本介绍
在网页中显示收集用户信息的表单效果，如：登录页、注册页
注意：按钮要实现功能，需要配合使用form标签，将整个表单的内容包裹起来。

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

1.1.1 input系列标签——文本框
placeholder属性：提示用户输入的内容
1.1.2 input系列标签——单选框
name属性：分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked属性：默认选中
1.1.3 input系列标签——文件选择
multiple属性：多文件选择

1.2 下拉菜单
在网页中提供多个选项得下拉菜单表单控件
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
selected属性：下拉菜单的默认选中

1.3 textarea文本域标签
在网页中提供可输入多行文本得表单控件
cols属性：规定了文本域内可见宽度
rows属性：规定文本域内课件行数

1.4 label标签
常用于绑定内容域表单标签的关系，可以实现点击文字或图片选中的效果。
使用方法1：label标签的for属性与相关元素的id属性值相同；
使用方法2：直接用label标签包裹相关元素，不需要for和id。

学习时间记录：2022/3/1下午~2022/3/2上午