六、H5新特性

最新推荐文章于 2023-06-26 13:55:54 发布

永恒的宁静

最新推荐文章于 2023-06-26 13:55:54 发布

阅读量363

点赞数

分类专栏： HTML5+CSS 文章标签： HTML H5 H5新特性前端移动端

本文链接：https://blog.csdn.net/weixin_42710036/article/details/129059887

版权

HTML5+CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

一、H5的兼容
二、H5新增特性

一、H5的兼容

支持 HTML5的浏览器包括Firefox(火狐浏览器)，IE9及其更高版本，Chrome(谷歌浏览器)，Safari,Opera等，国内的遨游浏览器，以及基于IE或Chrominum所推出的360浏览器，搜狗浏览器等同样具备支持HTML5的能力。
HTML5是第五个版本
HTML5基本语法
1、文件类型依然是.html或都 .htm结尾
2、不区分大小写
3、指定字符集UTF-8
4、省略部分标签
    4.1单标签可以不写结束标签 /
       br,img,input,link,meta,hr
       <br /> 等价于<br>
    4.2双标签可以当做单标签使用
      p,li,…
    4.3 可以完全省略的标签
      html, head, tbody…

二、H5新增特性

2.1 语义化标签

语义化标签：见名知意，根据标签的名称就知道标签在布局当中的作用，优点，页面结构更清晰有利于搜索引擎检索和爬虫数据分析…
以前：

<div class="header"></div>
<div class="main">
    <div class="nav"></div>
</div>
<div class="footer"></div>

使用html5语义化标签定义页面结构

<heaer>头部</header>
<section>
    主体
    <nav>导航</nav>
</section>
<footer>尾部</footer>

常见的html5语义化标签：
header 头部
footer 尾部
section 主体
main 主要显示区域
nav导航
articl独立的文章区域
figure独立文档区域
figcaption独立的文档区域的标题
以上都是块标签，用起来跟div一样。

2.2 增强表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        
    </style>
</head>
<body>
    <form action="#" method="">
        拾色器: <input type="color"> <br>
        拨号盘(移动端): <input type="tel"> <br>
        滑块: <input type="range" min="0" max="1000" step="100"> <br>
        数值: <input type="number" min="30" max="50" step="10"> <br>
        搜索: <input type="search"> <br>
        日期: <input type="date"> <br>
        月份: <input type="month"> <br>
        周:   <input type="week"> <br>
        时间: <input type="time"> <br>
        获取本地时间: <input type="datetime-local"> <br>
        <!-- autofocus自动获取焦点 -->
        邮箱: <input type="email" autofocus="autofocus"> <br>
        网址: <input type="url"> <br>
        <!-- 可以通过正则表达式对文本框输入内容进行限制 -->
        文本框: <input type="text" pattern="[0-9]{2}[A-Z]{3}">
        <input type="submit" value="提交">
    </form>
</body>
</html>

在这里插入图片描述
文本搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        
    </style>
</head>
<body>
    <form action="#" method="">
        文本搜索框: <input type="text" list="name">
        <datalist id="name">
            <option value="电视">电视</option>
            <option value="电脑">电脑</option>
            <option value="电话">电话</option>
            <option value="电瓶车">电瓶车</option>
            <option value="电动汽车">电动汽车</option>
            <option value="深圳人民">深圳人民</option>
            <option value="深圳龙岗">深圳龙岗</option>
        </datalist>
    </form>
</body>
</html>

在这里插入图片描述

2.3 音频、视频

音频
语法：

<audio src="./music/cd.mp3" controls="controls" autoplay="autoplay" loop="loop" preload="auto"></audio>

取值：
src音频路径
controls显示空间
autoplay自动播放
loop循环播放
meted静音

视频
语法：

<video src=""></video>

取值：
src音频路径
controls显示空间
autoplay自动播放
loop循环播放
meted静音

永恒的宁静

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
六、H5新特性

HTML5版本的一些新特性
复制链接

扫一扫

专栏目录