HTML5(一)

HTML5的简介

HTML5是 HTML的第五个版本,于2008年正式发布。相比于之前的版本,HTML5 引入了许多新特性和改进,尤其是在多媒体、图形、应用程序支持和移动设备优化方面。本接下来将带您全面了解 HTML5 的新特性。

HTML5的新特性

一、语义化标签

HTML5 提供了一系列新的语义化标签,使网页结构更加清晰,同时增强了搜索引擎对内容的理解能力。语义化标签通俗的来说,就是这些标签我们一看到就能知道大概是什么用途。这些标签包括:

  • <header>

  • <nav>

  • <section>

  • <article>

  • <aside>

  • <footer>

    以上语义化标签组合使用时的网页结构:

使用这些语义化标签不仅有助于提升网页的可读性,还能改进搜索引擎优化(SEO),使网页更易被检索。

二、增强型表单

HTML5 有以下新的表单元素:

  • <datalist>
  • <keygen>
  • <output>
1.datalist
html 复制代码
<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

option里规定了输入域的选项列表。

2.output
html 复制代码
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

<output> 元素用于不同类型的输出,比如计算或脚本输出

HTML5 有以下新的表单属性:

<form>新属性:

  • autocomplete
  • novalidate

<input>新属性:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height 与 width
  • list
  • min 与 max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step
1.<form> / <input> autocomplete 属性
html 复制代码
<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

填写并提交表单,然后重新刷新页面查看如何自动填充内容。

2.<input> autofocus 属性
html 复制代码
First name:<input type="text" name="fname" autofocus>

autofocus 属性规定在页面加载时,input将自动地获得焦点

3.<input> form 属性
html 复制代码
<form action="demo-form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>
 
Last name: <input type="text" name="lname" form="form1">

位于form表单外的 input 字段通过form属性指定了所属的表单 (该 input 表单仍然属于form表单的一部分)

4.<input> height 和 width 属性
html 复制代码
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

5.<input> min 和 max 属性
html 复制代码
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。

注意: min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。

6.<input> multiple 属性
html 复制代码
Select images: <input type="file" name="img" multiple>

multiple 属性规定<input> 元素中可选择多个值。

7.<input> placeholder 属性
html 复制代码
<input type="text" name="fname" placeholder="First name">

placeholder 属性提供一种提示(hint),描述输入域所期待的值。

8.<input> required 属性
html 复制代码
Username: <input type="text" name="usrname" required>

required 属性规定必须在提交之前填写输入域(不能为空)。

9.<input> step 属性
html 复制代码
<input type="number" name="points" step="3">

step 属性为输入域规定合法的数字间隔。如 step="3",则合法的数是 -3,0,3,6 等

三、多媒体支持

Video(视频)

使用:

html 复制代码
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

视频格式

格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

video支持的属性

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 如果出现该属性,视频的音频输出为静音。
poster URL 规定视频正在下载时显示的图像,直到用户点击播放按钮。
preload auto metadata none 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src URL 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

Audio(音频)

使用:

html 复制代码
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

音频格式的MIME类型

Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

audio支持的属性:

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
muted muted 如果出现该属性,则音频输出为静音。
preload auto metadata none 规定当网页加载时,音频是否默认被加载以及如何被加载。
src URL 规定音频文件的 URL。
相关推荐
某公司摸鱼前端9 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~11 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程17 分钟前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏18 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头2 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim3 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心3 小时前
vben 之 axios 封装
前端·javascript·学习