HTML5基础

最新推荐文章于 2022-09-03 16:51:57 发布

晚风yY

最新推荐文章于 2022-09-03 16:51:57 发布

阅读量79

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/m0_55689351/article/details/115573647

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是HTML5？

HTML5 是最新的 HTML 标准。

HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。

HTML5 拥有新的语义、图形以及多媒体元素。

HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

HTML5新特性

HTML5 的一些最有趣的新特性：

新的语义元素，比如 <header>, <footer>, <article>, and <section>。

新的表单控件，比如数字、日期、时间、日历和滑块。

强大的图像支持（借由 <canvas> 和 <svg>）

强大的多媒体支持（借由 <video> 和 <audio>）

强大的新 API，比如用本地存储取代 cookie。

HTML5被删元素：

以下 HTML 4.01 元素已从 HTML5 中删除：

<acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt>

HTML5兼容浏览器：

所有现代浏览器都支持 HTML5。

此外，所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理。

正因如此，您可以帮助老式浏览器处理”未知的“ HTML 元素。

注：您甚至可以教授石器时代的 IE6 如何处理未知的 HTML 元素。

把 HTML5 元素定义为块级元素

HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。

您可以把 CSS display 属性设置为 block，以确保老式浏览器中正确的行为

header, section, footer, aside, nav, main, article, figure {
      display: block; 
}

此外你还可以通过浏览器 trick 向 HTML 添加任何新元素

向 HTML 添加了一个名为 <myHero> 的新元素，并为其定义 display ：block

Internet Explorer 的问题

上述方案可用于所有新的 HTML5 元素，但是：

注意：Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式。

幸运的是，Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript", "the shiv"：

<!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

引用 shiv 代码的链接必须位于 <head> 元素中，因为 Internet Explorer 需要在读取之前认识所有新元素。

以上代码是一段注释，但是 IE9 的早期版本会读取它（并理解它）。

HTML5新元素：

HTML5 提供的新元素可以构建更好的文档结构：

<article> 定义页面独立的内容区域。

<aside> 定义页面的侧边栏内容。

<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。

<details> 用于描述文档或文档某个部分的细节

<dialog> 定义对话框，比如提示框

<summary> 标签包含 details 元素的标题

<figure> 规定独立的流内容（图像、图表、照片、代码等等）。

<figcaption> 定义 <figure> 元素的标题

<footer> 定义 section 或 document 的页脚。

<header> 定义了文档的头部区域

<mark> 定义带有记号的文本。

<meter> 定义度量衡。仅用于已知最大和最小值的度量。

<nav> 定义导航链接的部分。

<progress> 定义任何类型的任务的进度。

<ruby> 定义 ruby 注释（中文注音或字符）。

<rt> 定义字符（中文注音或字符）的解释或发音。

<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。

<section> 定义文档中的节（section、区段）。

<time> 定义日期或时间。

<wbr> 规定在文本中的何处适合添加换行符。具体使用参考：https://www.runoob.com/html/html5-new-element.html

HTML5新的表单元素：

<datalist> 定义输入控件的预定义选项。

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<form action="#">
     <input list="browsers" name="browser">
     <datalist id="browsers">
         <option value="Internet Explorer">
         <option value="Firefox">
         <option value="Chrome">
         <option value="Opera">
         <option value="Safari">
     </datalist>
     <input type="submit">
</form>

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <form action="#">
        <input type="text" list="lang">
        <datalist id="lang">
            <option value="HTML5">HTML5</option>
            <option value="CSS3">CSS3</option>
            <option value="Bootstrap">Bootstrap</option>
            <option value="ES6">ES6</option>
        </datalist>
    </form>
</body>
</html>

HTML5媒体元素：

<audio> 定义音频内容

<video> 定义视频（video 或者 movie）

<source> 定义多媒体资源 <video> 和 <audio>

 <!-- <audio>	定义音频内容 -->
    <!-- controls显示控件 -->
    <!-- autoplay 自动播放 -->
    <audio src="./source/清水er - 大天蓬 (女生版) .mp3" controls autoplay></audio>
    <!-- <video>	定义视频（video 或者 movie）-->
    <video src="./source/RÉCORD站姐最新更新｜朴彩英(rosé)cover.太阳《眼,鼻,嘴》18082.mp4" controls autoplay></video>
    <audio controls>
        <source src="./source/清水er - 大天蓬 (女生版) .mp3"/>
        <source src="./source/苏名哲 - 好运来.mp3"/>
    </audio>
    <!-- <embed>	定义嵌入的内容，比如插件。 -->
    <embed src="./source/清水er - 大天蓬 (女生版) .mp3" type="">
    <embed src="./03-HTML5新的表单元素.html" type="">

cookie：

<body>
    <!-- 
        Cookie 是一些数据, 存储于你电脑上的文本文件中。
        当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
        Cookie 的作用就是用于解决 "如何记录客户端的用户信息":
            当用户访问 web 页面时，他的名字可以记录在 cookie 中。
            在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
     -->

</body>
<script>
    // JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie
    // 创建cookie
    document.cookie = 'name=张三'
    // 为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
    // document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
    // 您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
    // document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";


    // 修改（覆盖）
    document.cookie = 'name=李四'
    // 删除（设置过期时间）
    document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    // 读取cookie
    var x = document.cookie;
    console.log(x);
</script>

HTML5 Web 存储：

HTML5 web 存储,一个比cookie更好的本地存储方式。

什么是 HTML5 Web 存储?

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以键/值对存在, web网页的数据只允许该网页访问使用。

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

注意: Internet Explorer 7 及更早IE版本不支持web 存储.

客户端存储数据的两个对象：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage：

<body>
    <div id="result"></div>
</body>
<script>
    if (typeof (Storage)) {
        // 添加
        localStorage.name = "张三"
        // 添加 key-value
        localStorage.setItem('sex','男')
        // 获取 key
        var sex= localStorage.getItem('sex')
        console.log(sex);
        // 移除
        // localStorage.removeItem('name')
        // 删除所有
        // localStorage.clear()
        // 得到某个索引的key
        var value = localStorage.key(0)
        console.log(value);
        console.log(localStorage);
        document.getElementById('result').innerHTML = localStorage.name
    } else {
        console.log('不支持');
    }
</script>

<body>
    <div id="result"></div>
    <button onclick="counter()">+1</button>
</body>
<script>

    function counter() {
        if (typeof (Storage)) {
            if (localStorage.num != 'NaN') {
                localStorage.num = Number(localStorage.num) + 1
            } else {
                localStorage.num = 1
            }
            console.log(localStorage.num);
            document.getElementById('result').innerHTML = localStorage.num
        } else {
            console.log('不支持');
        }
    }
</script>

sessionStorage：

<body>
    <div id="result"></div>
</body>
<script>
    if (typeof (Storage)) {
        // 添加
        sessionStorage.name = "张三"
        // 添加 key-value
        sessionStorage.setItem('sex','男')
        // 获取 key
        var sex= sessionStorage.getItem('sex')
        console.log(sex);
        // 移除
        // sessionStorage.removeItem('name')
        // 删除所有
        // sessionStorage.clear()
        // 得到某个索引的key
        var value = sessionStorage.key(0)
        console.log(value);
        console.log(sessionStorage);
        document.getElementById('result').innerHTML = sessionStorage.name
    } else {
        console.log('不支持');
    }

    
</script>

<body>
    <div id="result"></div>
    <button onclick="counter()">+1</button>
</body>
<script>

    function counter() {
        if (typeof (Storage)) {
            if (sessionStorage.num != 'NaN') {
                sessionStorage.num = Number(sessionStorage.num) + 1
            } else {
                sessionStorage.num = 1
            }
            console.log(sessionStorage.num);
            document.getElementById('result').innerHTML = sessionStorage.num
        } else {
            console.log('不支持');
        }
    }
</script>

晚风yY

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础

什么是HTML5？HTML5 是最新的 HTML 标准。HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。HTML5 拥有新的语义、图形以及多媒体元素。HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。HTML5新特性HTML5 的一些最有趣的新特性：新的语义元素，比如 <header>, <footer>, <a
复制链接

扫一扫

专栏目录