前端-HTML5详解
一、概述
HTML5是HTML的第五个版本,它对HTML进行了许多改进和扩展,使得网页开发更加丰富和便利。HTML5是Web标准的重要组成部分,旨在提高浏览器兼容性,统一网页开发标准。HTML5不仅包括了HTML的基本元素和标签,还新增了许多功能和API,为网页开发提供了更多的可能性。
二、基本用法
1、初步了解
HTML5的基本语法包括标签的组成和关系。标签由
<
、>
、/
、英文单词或字母组成,其中<
和>
用于标识标签的开始和结束,/
用于标识结束标签。HTML5中的标签分为双标签和单标签,双标签由开始标签和结束标签组成,例如
,单标签则只有一个标签。例如
2、基本骨架
HTML5的骨架通常包括,和
三个标签。
其中HTML标签是HTML文档的根元素,标签用于包含文档的元数据,如字符集、标题、样式表链接等,
标签则用于包含网页的主体内容。
三、常用标签
1、段落标签
p标签 :
。P标签定义HTML段落
2、链接标签
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获取用户的地理位置信息,为定位相关的应用提供便捷的开发途径。