html5 简单的新特性

html5的新特性
增加了一些新的标签,新的表单,新的表单属性

1.新增的语义化标签
header 头部标签
nav 导航标签
articel 内容标签
section 定义文档某个区域
aside 侧边栏标签
footer 尾部标签

这些语义化标准主要针对搜索引擎的
可以多次使用
再ie9中,需要转换成块级元素
再移动端更喜欢这些标签

2.新增的多媒体标签


2.1视频 video
只支持三种视频格式mp4 webm ogg,尽量使用mp4格式

语法:
<video src="文件地址" controls="controls"></video>
常见属性:
autoplay 自动播放
controls 向用户显示播放控件
loop 是否循环播放 loop="loop"
poster = "***.jpg" 预加载,视频没有播放出来先加载出来图片、

举例:
<video src="media/mi.mp4" muted="muted" controls="controls" poster="../taobao/jjt.jpg"></video>


2.2音频 audio
仅支持三种格式:mp3 wav ogg 尽量使用MP3
语法:
<audio src="文件地址" controles="controles"> </audio>
常见属性:
autoplay="autoplay" 自动播放
controls="controls" 显示播放控件
loop="loop" 结束后自动播放

3.html5 新增的input类型
属性值
type="email" 邮箱
type="url" url
* type="number" 数字
* type="tel" 电话
* type="search" 搜索框
type="color" 选择颜色

 

4.h5新增的表单属性
required="required" 必填
placehold="提示文本" 表单的提示信息,存在默认值将不显示
autofocus 自动获取焦点
multiple 提交多个文件

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!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>
        header,
        nav {
            height: 120px;
            background-color: pink;
            border-radius: 15px;
            width: 800px;
            margin: 15px auto;
        }
        
        section {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
        
        video {
            width: 100%;
        }
    </style>
</head>

<body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>某个区域</section>
    <video src="media/mi.mp4" muted="muted" controls poster="../taobao/jjt.jpg"></video>

    <audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>


    <form action="">
        <ul>
            <li>邮箱: <input type="email" /></li>
            <li>网址: <input type="url" /></li>
            <li>日期: <input type="date" /></li>
            <li>时间: <input type="time" /></li>
            <li>数量:<input type="number" /></li>
            <li>手机号码; <input type="tel" /></li>
            <li>搜索:<input type="search" /></li>
            <li>颜色:<input type="color" /></li>
            <li><input type="submit" value="提交"></li>
        </ul>
    </form>
    <form action="">
        <input type="text" required placeholder="必填">
        <input type="file" multiple>
        <input type="submit" value="提交">

    </form>
</body>

</html>
posted @ 2021-08-03 20:00  空城花开  阅读(70)  评论(0编辑  收藏  举报