HTML5新增标签及API
之前有一天看到了这样的一段代码，居然可以使用dom的id直接调用方法和获取属性，真是刷新了我的认知了。
<div>
<p id="content">aa</p>
<button onclick="console.log(content.innerText)">打印内容</button>
</div>
点击按钮，控制台就可以打印出 aa 字符串
习惯写后端的我前端知识总是落后不知多少，花了一点时间，补充下HTML5新增的标签和API，顺便简单使用下之前学的grid布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* ----------布局--------- */
.container {
min-height: 100vh;
height: auto;
display: grid;
grid-template-rows: 50px auto 25px;
grid-template-columns: auto 150px;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-auto-flow: row;
justify-content: stretch;
align-content: stretch;
justify-items: stretch;
align-items: stretch;
}
.header {
grid-area: header;
}
.sidebar {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
/* -------页面样式------ */
.header,
.sidebar,
.main,
.footer {
padding: 0.5rem;
}
ul li {
padding: 0.25rem;
}
.flex-row {
display: flex;
flex-direction: row;
list-style: none;
}
article {
margin-bottom: 2rem;
}
dialog#test {
width: 50vw;
min-height: 30vh;
padding: 1rem;
margin: auto;
}
dialog#test:modal {
background-color: rgb(160, 242, 242);
}
dialog#test::backdrop {
background: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="container">
<!--header 规定文档或节的页眉 块级元素 -->
<header class="header">
<!--nav 定义导航链接 块级元素 -->
<nav>
<ul class="flex-row">
<li><a href="#control">控件标签</a></li>
<li><a href="#text">文本标签</a></li>
<li><a href="#media">多媒体标签</a></li>
<li><a href="#api">HTML5 API</a></li>
</ul>
</nav>
</header>
<!--aside 定义页面内容以外的内容，侧边栏 块级元素 -->
<aside class="sidebar">
<!--menu 列表或菜单 块级元素 -->
<menu>
<ul style="list-style: none">
<li><a href="#control">控件标签</a></li>
<li><a href="#text">文本标签</a></li>
<li><a href="#media">多媒体标签</a></li>
<li><a href="#api">HTML5 API</a></li>
</ul>
</menu>
</aside>
<!--main 规定文档的主内容 -->
<main class="main">
<!--article 定义文章 块级元素 -->
<article id="control">
<h2>控件标签</h2>
<br />
<!--section 定义文档中的节 块级元素 -->
<section>
<h3>meter</h3>
<p style="color: blue">meter 定义已知范围内的标量测量 行内块标签</p>
<meter min="0" max="100" value="50"></meter>
<meter min="0" max="100" value="10" low="20" high="90"></meter>
<meter min="0" max="100" value="10" low="20" high="70" optimum="85"></meter>
</section>
<br />
<section>
<h3>progress</h3>
<p style="color: blue">progress 进度条 行内块标签</p>
<progress max="100" value="10"></progress>
</section>
<br />
<section>
<h3>datails</h3>
<p style="color: blue">datails 定义用户能够查看或隐藏的额外细节 块级标签</p>
<details>
<summary>摘要</summary>
<p>内容</p>
</details>
<details open>
<summary>摘要</summary>
<p>内容</p>
</details>
</section>
<br />
<section>
<h3>dialog</h3>
<p style="color: blue">dialog 描述文档或者文档某个部分的细节 块级标签</p>
<button onclick="test.showModal()">显示模态框</button>
<dialog id="test">
<form method="dialog" id="form">
<h4>新增input类型</h4>
email:<input type="email" name="email" /><small>表单提交时验证格式，输入为空则不验证</small><br />
url:<input type="url" name="url" /><small>表单提交时验证格式，输入为空则不验证</small><br />
number<input type="number" name="number" /><small>表单提交时验证格式，输入为空则不验证</small><br />
search:<input type="search" name="search" /><small>表单提交时不验证格式</small><br />
tel:<input type="tel" name="tel" /><small>表单提交时不验证格式</small><br />
range:<input type="range" name="range" /><small>默认值为50,表单提交时不验证格式</small><br />
color:<input type="color" name="color" /><small>默认值为黑色,表单提交时不验证格式</small><br />
date:<input type="date" name="date" /><small>默认值为空,表单提交时不验证格式</small><br />
month:<input type="month" name="month" /><small>默认值为空,表单提交时不验证格式</small><br />
week:<input type="week" name="week" /><small>默认值为空,表单提交时不验证格式</small><br />
time:<input type="time" name="time" /><small>默认值为空,表单提交时不验证格式</small><br />
datetime-local:<input type="datetime-local" name="datetime-local" /><small>默认值为空,表单提交时不验证格式</small><br />
<br />
<h4>新增属性</h4>
<input type="text" name="name" required autofocus placeholder="请输入用户名" /> <br />
<input type="file" name="file[]" multiple accesskey="s" /><small>快捷键,alt+字母触发</small><br />
<input list="cities" name="cities" /><br />
<datalist id="cities">
<option value="BJ">北京</option>
<option value="SH">上海</option>
</datalist>
</form>
<button value="ok" onclick="submitFormData()">确定</button>
<button onclick="this.parentNode.close()">取消</button>
<script>
async function submitFormData() {
const formData = new FormData(document.querySelector("#form"));
for (let [name, value] of formData) {
console.log(name, value);
}
let response = await fetch("./demo.php", {
method: "post",
body: formData,
});
let res = await response.json();
console.log(res);
}
</script>
</dialog>
</section>
</article>
<article id="text">
<h2>文本标签</h2>
<br />
<section>
<h3>ruby</h3>
<p style="color: blue">ruby标签 用于文本注音，搭配rt标签使用 都是行内元素</p>
<ruby> 漢 <rt>Kan</rt> 字 <rt>ji</rt></ruby>
</section>
<br />
<section>
<h3>mark</h3>
<p style="color: blue">mark标签 定义重要的或强调的文本 行内元素</p>
<p><mark>HTML</mark>是一种<mark>超文本标记语言</mark></p>
</section>
</article>
<article id="media">
<h2>多媒体标签</h2>
<br />
<section>
<h3>canvas</h3>
<p style="color: blue">canvas 元素使用 JavaScript 在网页上绘制图像</p>
<canvas id="myCanvas" width="200" height="100" style="border: 1px solid silver"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.fillRect(0, 0, 150, 75);
</script>
</section>
<br />
<section>
<h3>svg</h3>
<p style="color: blue">SVG 指可伸缩矢量图形 (Scalable Vector Graphics), 用于定义用于网络的基于矢量的图形</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill: lime; stroke: purple; stroke-width: 5; fill-rule: evenodd" />
</svg>
</section>
<br />
<section>
<h3>figure</h3>
<p style="color: blue">figure 规定自包含内容，比如图示、图表、照片、代码清单等 块级标签</p>
<figure>
<figcaption>图片</figcaption>
<img src="../images/1.jpg" alt="" style="height: 100px" />
</figure>
</section>
<br />
<section>
<h3>video</h3>
<p style="color: blue">video标签 视频</p>
<pre>
muted:视频静音
loop:循环播放
autoplay:自动播放,只有设置muted才生效
poster:视频封面图片的url地址
preload:视频预加载
preload:none 不预加载视频
preload:metadata 预加载视频的元数据
preload:auto 让浏览器自动选择
controls:显示视频控件的其它功能：如播放 进度条、音量大小、全屏化等功能
disablepictureinpicture:禁用 画中画 功能
controlslist:禁用视频控件的一些功能
nodownload 不要视频下载按钮
nofullscreen 不要视频全屏播放按钮
noremoteplayback 不要远程回放按钮
noplaybackrate 不要播放速度按钮
</pre>
<video src="../images/1.jpg" controls muted autoplay preload="metadata" controlslist="nofullscreen,noremoteplayback,nodownload"></video>
<video controls preload="metadata">
<source src="../images/1.jpg" />
<source src="../images/1.jpg" />
<p>浏览器不支持视频播放，请下载最新浏览器</p>
</video>
</section>
<br />
<section>
<h3>audio</h3>
<p style="color: blue">audio标签 音频</p>
<pre>
muted:音频静音
loop:循环播放
autoplay:取决于浏览器
controls:显示音频控件的其它功能：如播放\进度条、音量大小等功能
preload:音频预加载
preload:none 不预加载音频
preload:metadata 预加载音频的元数据
preload:auto 让浏览器自动选择
</pre>
<audio src="../images/1.jpg"></audio>
<audio controls preload="metadata">
<source src="../images/1.jpg" />
<source src="../images/1.jpg" />
<p>浏览器不支持音频播放，请下载最新浏览器</p>
</audio>
</section>
</article>
<article id="api">
<h2>HTML5 API</h2>
<section>
<h3>HTML5 地理定位</h3>
<p style="color: blue">HTML5 Geolocation（地理定位）用于定位用户的位置</p>
<p>位置:<span id="loc"></span></p>
<button onclick="getLocation()"></button>
<script>
const locEl = document.querySelector("#loc");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
locEl.innerText = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
locEl.innerText = "Latitude: " + position.coords.latitude + " , Longitude: " + position.coords.longitude;
}
function showError(error) {
let error_msg = "";
switch (error.code) {
case error.PERMISSION_DENIED:
error_msgL = "User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
error_msg = "Location information is unavailable.";
break;
case error.TIMEOUT:
error_msg = "The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
error_msg = "An unknown error occurred.";
break;
}
locEl.innerText = "error:" + error_msg;
}
getLocation();
</script>
</section>
<br />
<section>
<h3>HTML5 拖放</h3>
<p style="color: blue">
拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。<br />
拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。
</p>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="height: 100px; border: 1px solid silver"></div>
<img id="drag1" src="../images/1.jpg" draggable="true" ondragstart="drag(event)" height="100" />
</section>
<br />
<section>
<h3>HTML 本地存储</h3>
<p style="color: blue">
通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。<br />
HTML 本地存储提供了两个在客户端存储数据的对象：<br />
window.localStorage - 存储没有截止日期的数据<br />
window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）
</p>
<p><span id="name"></span></p>
<script>
// 存储
localStorage.setItem("name", "rose");
// 取回
document.getElementById("name").innerHTML = localStorage.getItem("name");
// 删除
localStorage.removeItem("name");
</script>
</section>
<br />
<section>
<h3>HTML5 应用程序缓存</h3>
<p style="color: blue">使用应用程序缓存，通过创建 cache manifest 文件，可轻松创建 web 应用的离线版本。</p>
<pre>
HTML5 引入了应用程序缓存（Application Cache），这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们;
速度 - 已缓存资源加载得更快;
减少服务器负载- 浏览器将只从服务器下载更新过或更改过的资源
启用应用程序缓存,在文档的html标签中包含 manifest 属性：
manifest 文件的建议文件扩展名是：".appcache"。
注意：manifest 文件需要设置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件有三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
</pre>
<p>完整的 Cache Manifest 文件</p>
<pre>
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
</pre>
</section>
<br />
<section>
<h3>HTML Web Workers</h3>
<p style="color: blue">Web worker 是运行在后台的 JavaScript，不会影响页面的性能。</p>
<p>Count numbers: <output id="worker_result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var w;
function startWorker() {
if (typeof Worker !== "undefined") {
if (typeof w == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("worker_result").innerHTML = event.data;
};
} else {
document.getElementById("worker_result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</section>
<br />
<section>
<h3>HTML Server-Sent 事件</h3>
<p style="color: blue">Server-Sent 事件允许网页自动从服务器获得更新。</p>
<div id="sse_result">a</div>
<script>
var source = new EventSource("demo_sse.php");
source.onopen = function (event) {
console.log("建立连接");
};
source.onmessage = function (event) {
document.getElementById("sse_result").innerHTML = event.data + "<br>";
};
source.onerror = function (event) {
console.log("error");
};
</script>
</section>
</article>
</main>
<!--footer 定义文档或节的页脚 块级元素 -->
<footer class="footer">
<menu style="text-align: center">
<!--small 一小段文本 行内元素 -->
<small>联系我们</small>
<small>意见反馈</small>
</menu>
</footer>
</div>
</body>
</html>
demo.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
demo_sse.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
demo_workers.js
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()", 500);
}
timedCount();
浙公网安备 33010602011771号