零基础学Java第二十七天之前端-HTML5详解

前端-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、有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于

1. 标签。每个列表项始于
2. 标签。

例如：

​

• 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属性：

1. class和id：用于定义元素的样式和标识元素，class属性可以为多个元素指定相同的样式，id属性用于唯一标识一个元素。
2. href：用于定义链接的目标地址，可以是URL或文档内的锚点。
3. src：用于定义嵌入的资源的地址，如图片、音频、视频等。
4. alt：用于定义当资源无法显示时的替代文本，提高网站的可访问性。
5. title：用于定义鼠标悬停在元素上时显示的文本，如链接的提示文本。
6. type：用于定义元素的类型，如表单中的输入框类型。
7. value：用于定义元素的值，如表单中的输入框的默认值。

五、应用场景

HTML5在网页开发中有广泛的应用，包括但不限于以下几个方面：

1. 视频和音频：通过和标签简化在网页中嵌入视频和音频的过程。
2. 绘图技术：Canvas和SVG允许开发者在网页上直接绘制图形、图表和动画。
3. 本地存储：通过Web Storage和IndexedDB等API实现在浏览器端持久化存储数据。
4. 响应式网页布局：通过引入新的语义化标签和媒体查询技术实现响应式网页设计。
5. 地理位置：通过Geolocation API获取用户的地理位置信息，为定位相关的应用提供便捷的开发途径。