HTML5学习

最新推荐文章于 2024-09-30 21:15:00 发布

21cv

最新推荐文章于 2024-09-30 21:15:00 发布

阅读量258

点赞数

分类专栏： html 文章标签： html5 学习 javascript

本文链接：https://blog.csdn.net/weixin_73800442/article/details/130673465

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

WEB学习之html5新特性

关于html5

关于html5

什么是html

html5是新一代html标准,广义上指整个前端.

HTML5 优势

针对 JavaScript ，新增了很多可操作的接口。
新增了一些语义化标签、全局属性。
新增了多媒体标签，可以很好的替代 flash 。
更加侧重语义化，对于 SEO(搜索引擎优化) 更友好。
可移植性好，可以大量应用在移动设备上。
*注:*ie浏览器需要9以上版本才支持

新增语义化标签

布局标签

关于 article 和 section ：

artical 里面可以有多个 section 。
section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元
素。
article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用
article 元素。
一篇文章用acrtical 一个章节用section

新增状态标签

meter标签
progress标签

新增列表标签

<input type="text" list="mydata">
<datalist id="mydata">
<option value="陈奕迅">陈奕迅</option>
<option value="周杰伦">周杰伦</option>
</datalist>
<details>
<summary>如何一夜变秃？</summary>
<p>学前端!</p>
</details>

新增文本标签

文本注音
文本标记

<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
<div>这是一个<mark>标记</mark></div>
</ruby>

新增表单属性

表单控件新增属性

 <form action="">
        账号：<input 
                type="text" 
                name="account" 
                placeholder="请输入账号" 
                required 
                autofocus 
                autocomplete="on"
                pattern="\w{6}"
              >
        <br>
        密码：<input type="password" name="pwd" placeholder="请输入密码" required pattern="\w{6}">
        <br>
        性别：
            <input type="radio" value="male" name="gender" required>男
            <input type="radio" value="female" name="gender">女
        <br>
        爱好：
            <input type="checkbox" value="basketball" name="hobby" >打球
            <input type="checkbox" value="study" name="hobby" required>学习
        <br>
        其他：<textarea name="other" placeholder="请输入密码" required pattern="\w{6}"></textarea>
        <br>
        <button>提交</button>
    </form>

*注:*其中parrten需要配合js使用这里

pattern=“\w{6}”

是指长度不超过6位

input 新增属性值

    <form action="" novalidate>
        邮箱：<input type="email" required name="email"> 
        url：<input type="url" required name="url">
         数值：<input type="number" required name="number" step="2" max="80" min="20"> 
         搜索：<input type="search" required name="keyword" autocomplete="off"> 

       电话：<input type="tel" required name="phone"> -->
        光照强度：<input type="range" name="range" max="80" min="20" value="11">
        颜色：<input type="color" name="color">
        日期：<input type="date" required name="date">
        月份：<input type="month" required name="month">
        周：<input type="week" required name="week">
        时间：<input type="time" required name="time">
        日期+时间：<input type="datetime-local" required name="time2">
        <br>
        <button>提交</button>
    </form>

其中 novalidate 是form标签新增属性表示表单提交不再需要验证

新增多媒体标签

视频标签

*需注意:*视频自动播放需要静音才能完成但是如果浏览器与用户的交互频繁(多次点击该资源) 就可以实现非静音自动播放
音频标签

实现非静音自动播放同 video一样

新增全局属性

在这里插入图片描述
其中 data-* 可以通过js实现对数据的打包和检索
hidden 是会把元素内容和大小隐藏同 display: none

兼容性问题

添加元信息，让浏览器处于最优渲染模式。

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">

使用 html5shiv 让低版本浏览器认识 H5 的语义化标签。

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

扩展:
lt 小于
lte 小于等于
gt 大于
gte 大于等于
! 逻辑非

音频小案例

<head>
    <meta charset="UTF-8">
    <title>03_音频案例</title>
    <style>
        audio {
            width: 600px;
        }
        .mask {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.7);
        }
        .dialog {
            position: absolute;
            width: 400px;
            height: 400px;
            background-color: green;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            font-size: 40px;
            text-align: center;
            line-height: 400px;
        }
        span {
            border: 1px solid white;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <audio id="music" src="./小曲.mp3" controls></audio>
    <div class="mask" id="mask">
        <div class="dialog">
            <span>点我登录</span>
            <span onclick="go()">随便听听</span>
        </div>
    </div>

    <script>
        function go (){
            music.play()
            mask.style.display = 'none'
        }
    </script>
    </body>