22、HTML5的基础知识

最新推荐文章于 2026-01-06 22:03:14 发布

原创最新推荐文章于 2026-01-06 22:03:14 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文详细介绍了HTML5在移动游戏和应用开发中的应用，包括新的语义化标签如<header>、<nav>等，以及音频和视频元素的使用。此外，还提及了HTML5的表单验证方法，如Placeholder、Required和Pattern属性。同时，文章讨论了音频和视频的控制属性，如autoplay、loop和preload等。

HTML5应用场景
移动
游戏
应用开发
 
HTML是用于取代HTML和XHTML的标准版本
新特性
新的语义化标签，比如header footer nav 
新的表单空间呢，比如email、url search
用于绘画的canvas元素
用于媒介回放 

HTML5新增结构元素

header 页面或页面中某个区块的页眉，通常是一些引用
nav  可以作为页面导航的链接组

section页面中的一个内容区块，通常由内容及其标题组成
article 代表一个独立的完整的相关内容块，可独立于页面其他内容使用
aside  非正文的内容，与页面的主要内容是分开的
footer


<div></div> 模块  写在<body></body>中

<mark>标记标签</mark>

音频播放标签 <audio src="音频路径"></audio>
例子：<audio src="音频路径" autoplay="autoplay"></audio>
<audio src="音频路径" autoplay="autoplay" controls="controls"</audio>
audio 元素允许多个source元素
source元素 可链接不同的视频文件


视频标签 <video  src="视频路径"></video>
例：<video  src="视频路径" controls="controls"></video>
例; <video  src="视频路径" controls="controls" loop="loop"></video> 循环播放

.containe{width:600px;margin:50px auto;}  .containe类格式 只要有class就按照这个格式定义
containe前面的点是类选择器
* 全局属性

标签的属性:
audio 定义音频，如音乐或其他音频流
video 定义视频，如电影片段或其他视频流 


html5表单初级验证方法
(1)Placeholder：input类型的文本框提供一种提示，可以描述文本框期待用户输入的内容，提示语默认显示，当文本框中输入内容时提示语消失；适合于input标签：text、search、url、email和password等类型
(2)Required：规定文本框填写内容不能为空，否则不允许用户提交表单；适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型；
(3)Pattern：用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单；

HTML5的属性
controls（属性） controls（值）	如果出现该属性，则向用户显示控件，比如播放按钮
autoplay autoplay  如果出现该属性，则视频在就绪后马上播放
loop  loop 如果出现该属性，则视频结束时重新开始播放
preload auto 如果出现该属性，则视频在页面加载时进行加载，并预备播放
width/height    length(px)	设置视频播放器的宽度和高度