前端-HTML5详解
一、概述
HTML5是HTML的第五个版本，它对HTML进行了许多改进和扩展，使得网页开发更加丰富和便利。HTML5是Web标准的重要组成部分，旨在提高浏览器兼容性，统一网页开发标准。HTML5不仅包括了HTML的基本元素和标签，还新增了许多功能和API，为网页开发提供了更多的可能性。
二、基本用法
1、初步了解
HTML5的基本语法包括标签的组成和关系。标签由
，单标签则只有一个标签。例如<、>、/、英文单词或字母组成，其中<和>用于标识标签的开始和结束，/用于标识结束标签。HTML5中的标签分为双标签和单标签，双标签由开始标签和结束标签组成，例如
2、基本骨架
HTML5的骨架通常包括,和
三个标签。其中HTML标签是HTML文档的根元素，标签用于包含文档的元数据，如字符集、标题、样式表链接等，标签则用于包含网页的主体内容。
三、常用标签
1、段落标签
p标签 ：
。P标签定义HTML段落
2、链接标签
a标签：。a标签 定义HTML链接，通过
href属性指定链接的目标地址。
3、图像标签
img标签：<img src=“这里填图片的路径” alt=" 提供图像无法显示时的替代文本。 “> 。img标签定义HTML图像，通过
src属性指定图像的文件路径，通过alt属性提供图像无法显示时的替代文本。
4、音频标签
video和audio标签,. 用于在网页中嵌入视频和音频内容，无需依赖第三方插件。
5、标题标签
h1~h6标签，表示1到6级标签
一级标签
二级标签
三级标签
四级标签
五级标签
六级标签
6、语义化标签
标签 描述 头部标签 导航标签 内容标签 块级标签 侧边栏标签 尾部标签
7、列表-列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于
- 标签。每个列表项始于
- 。
列如：
- Coffee
- Milk
8、有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于
- 标签。每个列表项始于
- 标签。
例如：
- Coffee
- Milk
扩展：更换标记–>type (1 、A、a、i、I)
9、表格
表格由
标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由
标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 完整的表格：
cellspacing=“20px” ：规定单元格之间的空白
cellpadding=“5px” ：规定单元格边沿与其内容的空白
th：定义表头
tr：行
td：列
例如：
---- 表头
Header
— 表内容
Data
– 表末尾
Data
10、表单
HTML 表单用于收集用户输入。
元素定义 HTML 表单：例如：
form elements
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
四、常用属性
HTML5中的标签可以包含多个属性，用于指定标签的行为和样式。以下是一些常用的HTML5属性：
class和id：用于定义元素的样式和标识元素，class属性可以为多个元素指定相同的样式，id属性用于唯一标识一个元素。href：用于定义链接的目标地址，可以是URL或文档内的锚点。src：用于定义嵌入的资源的地址，如图片、音频、视频等。alt：用于定义当资源无法显示时的替代文本，提高网站的可访问性。title：用于定义鼠标悬停在元素上时显示的文本，如链接的提示文本。type：用于定义元素的类型，如表单中的输入框类型。value：用于定义元素的值，如表单中的输入框的默认值。
五、应用场景
HTML5在网页开发中有广泛的应用，包括但不限于以下几个方面：
- 视频和音频：通过
和标签简化在网页中嵌入视频和音频的过程。- 绘图技术：Canvas和SVG允许开发者在网页上直接绘制图形、图表和动画。
- 本地存储：通过Web Storage和IndexedDB等API实现在浏览器端持久化存储数据。
- 响应式网页布局：通过引入新的语义化标签和媒体查询技术实现响应式网页设计。
- 地理位置：通过Geolocation API获取用户的地理位置信息，为定位相关的应用提供便捷的开发途径。
