• 周四. 12月 1st, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

html5 简单的新特性

admin

11月 28, 2021

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;
             800px;
            margin: 15px auto;
        }
        
        section {
             500px;
            height: 300px;
            background-color: skyblue;
        }
        
        video {
             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>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注