Skip to content

Latest commit

 

History

History
473 lines (395 loc) · 15.4 KB

13.md

File metadata and controls

473 lines (395 loc) · 15.4 KB
Raw

第13节 H5新增特性

❤️💕💕HTML和CSS高级教程。更多的文章请移步博客Myblog:http://nsddd.top

[TOC]

新增语义化标签

  • IE8不兼容HTML5标签的。解决方案：可以通过html5shiv.js去处理。
标签 用法
header 头部标签
nav 导航标签
article 内容标签
section 块级标签
aside 侧边栏标签
footer 尾部标签

还有<figure>元素，为其添加标题

⚠️ 使用语义化标签需要注意：

  • 语义化标签主要针对搜索引擎。
  • 新标签可以使用一次或者多次。
  • 在 IE9 浏览器中，需要把语义化标签都转换为块级元素。
  • 语义化标签，在移动端支持比较友好。

语义化标签的优点

  • HTML结构清晰，易读性和维护性更好。
  • 代码可读性好
  • 无障碍阅读更友好，对于读屏器等设备，能够播报的更流畅准确。
  • 搜索引擎可根据标签的语言确定上下文和权重问题。更利于SEO优化，语义化标签能够提升页面质量，有利于爬虫爬取页面时获取更多的有效信息。
  • 移动设备能更完美的展示页面
  • 便于团队维护开发

💡简单的一个案例如下：

<!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>
    <style>
        /* 样式清除 */
        *{
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
        }

        header,footer{
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: orange;
        }

        section{
            /* 注意空格 */
            height: calc(100% - 100px);
        }

        nav,aside{
            width: 100px;
            height: 100%;
            background-color: #ccc;
            /* 注意浮动起来 */
            float: left;
        }
        main {
            /* 需要设置高度为100% */
            height: 100%;
            float: left;
            width: calc(100% - 200px);
            background-color: #fff;
        }
    
        aside,main p{
            font-size: 25px;
            color: aqua;
        }
        aside p{
            font-size: 8px;
            color: red;
        }
    </style>
</head>
<body>
    <!-- 这个是头部 -->
    <header>header</header>
    <section>
        <!-- 主体部分 -->
        <!-- 左边nav -->
        <nav>
            <!-- 可以用figure标签 -->
            <figure>nav</figure>
            <h4>nav</h4>
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
        </nav>
        <main>
            <p class="">我自己也将自己大学所做的笔记全部上传到了github和🏠<a href='http://nsddd.top'>我的博客</a></p>
            <p><a href='https://link.zhihu.com/?target=https%3A//github.com/3293172751/cs-awesome-Block_Chain'>github仓库地址github.com/3293172751/cs-awesome-Block_Chain </a>包含了下面系列：😎菜鸟成长手册🎈CS系列、web系列、区块链系列、Golang系列......</p>
            <p>CS 系列选自<a href='https://github.com/3293172751/awesome-cs-course'>🎉awesome-cs-course</a>，内容涵盖 计算机操作系统、csapp系列、算法和数据结构、计算机网络、<code>linux</code>、<code>java</code>、<code>python</code>、<code>C/C++</code>、<code>vuepress</code>、<code>gitbook</code>、<code>nodejs</code>、<code>vuejs</code>、<code>halo</code>、<code>redis</code>、<code>hugo</code>、<code>nginx</code>、<code>nosql</code>、<code>mysql</code>、<code>JavaScript</code>、<code>git</code>、<code>markdown</code>、<code>web</code>前端等笔记，更多移步到🚀<a href='https://github.com/3293172751/CS_COURSE'>awesome系列CS仓库地址</a></p>
            <hr />
            <p><strong>后期考虑做成docs-book类型，下面就是docs-book类型的docker笔记：</strong></p>
            <ul>
            <li><a href='https://3293172751.github.io/awesome-docker/markdown/'>docker-book在线书籍地址上线了😘😘</a></li>
            </ul>
        </main>
        <!-- 右边asize -->
        <aside>
            <figure>asize</figure>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum minima ab velit quidem et quod, accusamus debitis culpa sunt! Dolor aliquam dolorum libero veniam nisi facere, obcaecati mollitia ab voluptas!</p>
            
        </aside>
    </section>
    <footer>footer</footer>
</body>
</html>

🚀 编译结果如下：

image-20220928223508783

⚠️我们可以根据调试的情况来修改~

H5新增音频标签

<!--
 * @Description: Html音频标签
 * @Author: xiongxinwei 3293172751nss@gmail.com
 * @Date: 2022-09-29 22:19:48
 * @LastEditTime: 2022-09-29 22:24:27
 * @FilePath: \code\html\music.html
 * @Github_Address: https://github.com/3293172751/cs-awesome-Block_Chain
 * Copyright (c) 2022 by xiongxinwei 3293172751nss@gmail.com, All Rights Reserved. @blog: http://nsddd.top
-->
<!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>
</head>
<body>
    <p>
        之前的flash,由于安全性、计算资源使用效率低下等问题，逐渐被HTML5取代。HTML5的出现，使得网页可以直接播放音频和视频，而不需要安装插件。HTML5的音频标签有两个，分别是audio和video，其中audio用于播放音频，video用于播放视频。
    </p>
    <h2>音频标签</h2>
    <audio src = "../music/1.mp3" controls = "controls" autoplay = "autoplay" loop = "loop" preload = "auto" >
        <!-- 用于浏览器不支持audio标签的情况 -->
        <embed src = "../music/1.mp3" autostart = "true" hidden = "true" loop = "true">
    </audio>
    <!--controls 控制栏
        loop: 循环播放
        autoplay: 自动播放
        preload: 预加载
        muted: 静音
        src: 指定音频文件的路径
    -->
</body>
</html>

📜 对上面的解释：

之前的flash,由于安全性、计算资源使用效率低下等问题，逐渐被HTML5取代。HTML5的出现，使得网页可以直接播放音频和视频，而不需要安装插件。HTML5的音频标签有两个，分别是audio和video，其中audio用于播放音频，video用于播放视频。

  • controls 控制栏
  • loop: 循环播放
  • autoplay: 自动播放（谷歌浏览器取消了自动播放）
  • preload: 预加载
  • muted: 静音
  • src: 指定音频文件的路径

Html新增视频标签

<!--
 * @Description: view标签
 * @Author: xiongxinwei 3293172751nss@gmail.com
 * @Date: 2022-09-29 22:28:55
 * @LastEditTime: 2022-09-29 22:37:21
 * @FilePath: \code\html\view.html
 * @Github_Address: https://github.com/3293172751/cs-awesome-Block_Chain
 * Copyright (c) 2022 by xiongxinwei 3293172751nss@gmail.com, All Rights Reserved. @blog: http://nsddd.top
-->
<!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>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height: 100%;
        }
        dev video{
            width:50%;
            height:50%;
        }
    </style>
</head>
<body>
    <h2>view标签</h2>
    <div>
        <video src="http://cub.nsddd.top/MP4.mp4" content loop></video>
        <video src="../view/b.mp4" content loop></video>
    </div>
    <!--content:控制栏
        loop:循环播放
        autoplay:自动播放
        muted:静音
        preload:预加载
     -->
</body>
</html>

🚀 编译结果如下：

image-20220929224122773

📜 对上面的解释：

  • content：控制栏
  • loop：循环播放
  • autoplay：自动播放
  • muted：静音
  • preload：预加载
  • poster：海报–提供路径

Html增强表单

💡简单的一个案例如下：

<!--
 * @Description: html增强表单
 * @Author: xiongxinwei 3293172751nss@gmail.com
 * @Date: 2022-09-29 22:45:31
 * @LastEditTime: 2022-09-29 22:50:49
 * @FilePath: \code\html\type.html
 * @Github_Address: https://github.com/3293172751/cs-awesome-Block_Chain
 * Copyright (c) 2022 by xiongxinwei 3293172751nss@gmail.com, All Rights Reserved. @blog: http://nsddd.top
-->
<!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>
</head>
<body>
    <h2>html增强表单</h2>
    <ul>
    <li>Type="color" 生成一个颜色的表单</li>
    <li>Type="date" 生成一个日期的表单</li>
    <li>Type="datetime-local" 生成一个日期和时间的表单</li>
    <li>Type="email" 生成一个email的表单</li>
    <li>Type="month" 生成一个月份的表单</li>
    <li>Type="number" 生成一个数字的表单</li>
    <li>Type="range" 生成一个范围的表单</li>
    <li>Type="search" 生成一个搜索的表单</li>
    <li>Type="tel" 生成一个电话的表单</li>
    <li>Type="time" 生成一个时间的表单</li>
    <li>Type="url" 生成一个url的表单</li>
    <li>Type="week" 生成一个周的表单</li>
    </ul>
    <!-- 
    Type="color" 生成一个颜色的表单
    Type="date" 生成一个日期的表单
    Type="datetime-local" 生成一个日期时间的表单
    Type="email" 生成一个邮箱的表单
    Type="month" 生成一个月份的表单
    Type="number" 生成一个数字的表单
    Type="range" 生成一个范围的表单
    Type="search" 生成一个搜索的表单
    Type="tel" 生成一个电话的表单
    Type="time" 生成一个时间的表单
    Type="url" 生成一个url的表单
    Type="week" 生成一个周的表单 
-->
    <form action="">
        <input type="color" name="" id=""><br>
        <input type="date" name="" id=""><br>
        <input type="datetime-local" name="" id=""><br>
        <input type="email" name="" id=""><br>
        <input type="month" name="" id=""><br>
        <input type="number" name="" id=""><br>
        <input type="range" name="" id=""><br>
        <input type="search" name="" id=""><br>
        <input type="tel" name="" id=""><br>
        <input type="time" name="" id=""><br>
        <input type="url" name="" id=""><br>
        <input type="week" name="" id=""> <br>
</body>
</html>

🚀 编译结果如下：

image-20220929225231293

📜 对上面的解释：

  1. Type="color" 生成一个颜色的表单
  2. Type="date" 生成一个日期的表单
  3. Type="datetime-local" 生成一个日期时间的表单
  4. Type="email" 生成一个邮箱的表单
  5. Type="month" 生成一个月份的表单
  6. Type="number" 生成一个数字的表单
  7. Type="range" 生成一个范围的表单（也可以叫做滑块）
    1. min = "100" 设置最左边
    2. max = "200" 设置最右边
  8. Type="search" 生成一个搜索的表单
  9. Type="tel" 生成一个电话的表单
  10. Type="time" 生成一个时间的表单
  11. Type="url" 生成一个url的表单
  12. Type="week" 生成一个周的表单

我们可以设置一个提交的标签<input type = "submit">

搜索框选项列表

上面我们使用Type = "url"生成一个表单

💡简单的一个案例如下：

<!--
 * @Description: HTML表单选项列表
 * @Author: xiongxinwei 3293172751nss@gmail.com
 * @Date: 2022-09-29 23:09:58
 * @LastEditTime: 2022-09-29 23:18:40
 * @FilePath: \code\html\表单选项列表.html
 * @Github_Address: https://github.com/3293172751/cs-awesome-Block_Chain
 * Copyright (c) 2022 by xiongxinwei 3293172751nss@gmail.com, All Rights Reserved. @blog: http://nsddd.top
-->
<!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>
</head>
<body>
    <input type="url" value="http://nsddd.top" list="mylist" autofocus>
    <!-- autofocus自动获取焦点 -->
    <!-- 
        list是下拉列表的id，下拉列表的id是mylist，下拉列表的内容是下面的option，option的value是下拉列表的值
     -->
    <datalist id="mylist">
        <option value="手机"></option>
        <option value="电脑"></option>
        <option value="电视"></option>
        <option value="冰箱"></option>
        <option value="洗衣机"></option>
        <option value="http://nsddd.top">
        <option value="http://cub.nsddd.top">
        <option value="http://cub.nsddd.top/MP4.mp4">
    </datalist>
</body>
</html>

🚀 编译结果如下：

image-20220929231937894

📜 对上面的解释：

下拉列表的id是mylist，下拉列表的内容是下面的option，option的value是下拉列表的值。

  • value表示默认值
  • autofocus表示自动获取焦点

其他的表单增强属性

  • autofocus属性：自动获取焦点
  • required属性：必填项,表示验证码不可以为空
  • multiple属性：多选，可以输入一个或者多个值，中间用逗号隔开
  • pattern属性：正则表达式，表示输入的值必须符合正则表达式的规则

💡简单的一个案例如下：

<body>   
    <!-- 
        autofocus属性：自动获取焦点
        required属性：必填项,表示验证码不可以为空
        multiple属性：多选，可以输入一个或者多个值，中间用逗号隔开
        pattern属性：正则表达式，表示输入的值必须符合正则表达式的规则
     -->
     <form action=""></form>
     
        用户名:<input type="text" name="username" autofocus required multiple pattern="^[a-zA-Z0-9_]{6,16}$">
        <!-- 
            pattern="^[a-zA-Z0-9_]{6,16}$"表示用户名必须是6-16位的字母数字下划线
         -->
        密码:<input type="password" name="password" required pattern="^[a-zA-Z0-9_]{6,16}$">
        <!-- 
            pattern="^[a-zA-Z0-9_]{6,16}$"表示密码必须是6-16位的字母数字下划线
         -->
        验证码:<input type="text" name="code" required pattern="^[a-zA-Z0-9_]{4}$">
        <!-- 
            pattern="^[a-zA-Z0-9_]{4}$"表示验证码必须是4位的字母数字下划线
         -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

📜 对上面的解释：

  • pattern="^[a-zA-Z0-9_]{6,16}$"表示密码必须是6-16位的字母数字下划线
  • pattern="^[a-zA-Z0-9_]{4}$"表示验证码必须是4位的字母数字下划线

END 链接