零基础学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. classid:用于定义元素的样式和标识元素,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获取用户的地理位置信息,为定位相关的应用提供便捷的开发途径。
相关推荐
在下不上天23 分钟前
Flume日志采集系统的部署,实现flume负载均衡,flume故障恢复
大数据·开发语言·python
陌小呆^O^37 分钟前
Cmakelist.txt之win-c-udp-client
c语言·开发语言·udp
儿时可乖了1 小时前
使用 Java 操作 SQLite 数据库
java·数据库·sqlite
ruleslol1 小时前
java基础概念37:正则表达式2-爬虫
java
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
重生之我是数学王子1 小时前
QT基础 编码问题 定时器 事件 绘图事件 keyPressEvent QT5.12.3环境 C++实现
开发语言·c++·qt
xmh-sxh-13141 小时前
jdk各个版本介绍
java
Ai 编码助手1 小时前
使用php和Xunsearch提升音乐网站的歌曲搜索效果
开发语言·php