网站首页 > 知识剖析正文

HTML5新特性

nixiaole 2024-11-27 18:38:05 知识剖析 12 ℃

新的文档类型(New Doctype)

第一行声明文档类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

改成

<!DOCTYPE html>

脚本和链接无需 type(No More Types for Scripts and Links)

<link rel="stylesheet" href="style/stylesheet.css" type="text/css" />
<script type="text/javascript" src="js/script.js"></script>

改成

<link rel="stylesheet" href="style/stylesheet.css" />
<script src="js/script.js"></script>

语义 Header 和 Footer

<div id="header"></div>
<div id="footer"></div>

改成

<header></header>
<footer></footer>

Hgroup

主标题下面紧跟着一个子标题，我可以用h1和h2标签来分别定义。然而，这种定义没有说明这两者之间的关系。在 HTML5 中，我们可以用 hgroup 元素来将它们分组。

<hgroup>
  <h1> Recall Fan Page </h1>
  <h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>

标记元素(Mark Element)

你可以把它当做高亮标签。被这个标签修饰的字符串应当和用户当前的行动相关。比如说，当我在某博客中搜索 “Open your Mind” 时，我可以利用一些 JavaScript 将出现的词组用 < mark > 修饰一下。

<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark> </p>

图形元素(Figure Element)

<img src="image/image" alt="About image" />
<p>Image of Mars </p>

上述代码没有将文字和图片内在联系起来，所以加了figure

<figure>
    <img src="path/to/image" alt="About image" />
    <figcaption>
        <p>This is an image of something interesting.</p>
    </figcaption>
</figure>

重新定义 small (Small Element redefined)

Small 被用来定义小字，如版权信息

占位符 (Placeholder)

以前，你需要用 JavaScript 来给文本框添加占位符，当用户开始输入时，文本框中的文字就消失。而在 HTML5 中，新的 “placeholder” 就简化了这个问题。

必要属性 (Required Attribute)

<form method="post" action="">
    <label for="someInput"> Your Name: </label>
    <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
    <button type="submit">Go</button>
</form>

如果输入内容空且表格被提交，输入框将被高亮显示

Autofocus 属性 (Autofocus Attribute)

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

Audio 支持 (Audio Support)

<audio autoplay="autoplay" controls="controls">
     <source src="file.ogg" />
     <source src="file.mp3" />
     <a href="file.mp3">Download this file.</a>
</audio>

用于渲染音频，FireFox 想要. ogg 格式的文件，而 Webkit 浏览器则需要. mp3 格式

Video 支持 (Video Support)

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> Your browser is old. <.a href="cohagenPhoneCall.mp4">.Download this video instead.</a> </p>
</video>

用于渲染视频，Safari 和 Internet Explorer9 可以支持 H.264 格式的视频，Firefox 和 Opera 是坚持开源 Theora 和 Vorbis 格式。因此，指定 HTML5 的视频时，你必须提供这两种格式。video标签的preload指视频预加载，当用户访问页面时视频就加载。controls指的是显示视频控制条

正则表达式 (Regular Expressions)

<form action="" method="post">
    <label for="username">.Create a Username: </label>
    <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required>
    <button type="submit">.Go </button>
</form>

Range Input

HTML5 引用的 range 类型可以创建滑块

<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”"> 
input[type=range]:before { 
  content: attr(min); padding-right: 5px; 
} 
input[type=range]:after { 
  content: attr(max); padding-left: 5px;
}

新增接口

媒体标签 video 和 audio 的播放流程控制、同步多个媒体标签、字幕等接口
表单限制验证接口（如 setCustomValidity）
引入应用缓存机制，允许 Web App 离线的 API
允许 Web App 注册为对应协议或媒体类型的处理应用的 APP 的 API。（即 registerProtocolHandler 和 registerContentHandler）
引入 contenteditable 属性，允许编辑任意元素的接口
暴露会话历史、允许使用脚本无刷新更新页面 URL（History 接口）
base64 转换 API（atob() 及 btoa()）
处理搜索服务提供方的接口（AddSearchProvider() 及 IsSearchProviderInstalled()）
External 接口
打印文档的接口（print()）
暴露文档 URL、允许使用脚本切换、刷新页面的接口（Location 接口）
基于时间的回调接口（setTimeout() 及 setInterval()）
提供给用户的提示接口（alert()，confirm()，prompt()）
Window 接口
Navigator 接口

上一篇： HTML5 向网页嵌入视频和音频
下一篇：【完结】Flutter3+Getx仿微信桌面端exe聊天程序

网站首页 > 知识剖析 正文