HTML5新增标签及API

标签：function 标签表单 API grid HTML5 error

之前有一天看到了这样的一段代码，居然可以使用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();

标签：function,标签,表单,API,grid,HTML5,error
From： https://www.cnblogs.com/caroline2016/p/17916678.html

相关文章

赞助商

阅读排行