之前有一天看到了这样的一段代码，居然可以使用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 if (isset($_FILES['file']['name'])) { foreach ($_FILES['file']['name'] as $index => $name) { if ($_FILES['file']['error'][$index] == 0) { move_uploaded_file($_FILES['file']['tmp_name'][$index], $name); } } } echo json_encode($_POST);
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();
