1. H5新增语义化标签

1.新增语义化标签

- <header>:头部标签
- <nav>:导航标签
- <article>:内容标签
- <section>:块级标签
- <aside>:侧边栏标签
- <footer>:尾部标签

注意：

这种语义化的标签主要针对搜索引擎
这些新标签，页面中可以重复使用
在IE9中，需要把这些元素转换为块级元素，否则不可以使用，在IE9中，这些元素都默认是行内元素，给大小是没有用的。
在移动端更喜欢使用这些标签，在PC端很少使用这些标签。
H5还增加了很多其他标签，后面再学。

2.新增多媒体标签

多媒体标签包含两个，具体如下：

- 音频：<audio>
- 视频：<video>

使用它们，可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件。

2.1 音频格式

当前，audio元素支持三种音频格式：Ogg、MP3、Wav

audio的几个属性：

<body>
    <audio src="media/lost_star.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
    <!-- controls向用户显示播放控件，不同浏览器显示的控件样式不一样，且不可修改 -->
    <!-- 谷歌浏览器把autoplay自动播放功能给禁用了 -->
    <!-- loop不写则默认播放一遍，写上loop="loop"则表示无限循环播放 -->
</body>

body>
    <!-- 由于不同浏览器支持不同格式，我们采取的解决方法：我们为这个音频准备多个格式 -->
    <audio controls="controls" autoplay="autoplay" loop="loop">
        <source src="media/lost_star.mp3" type="audio/mpeg">
        <source src="media/lost_star.ogg" type="audio/ogg">
            <!-- 若以上两种格式都不支持，则会显示下面这句话 -->
        您的浏览器太low了 不支持audio播放！
    </audio>
</body>

2.2 视频格式

当前，video元素支持三种音频格式：Ogg、MPEG4、WebM

video几个属性

<body>
    <video src="media/video-03.mp4" controls="controls" autoplay="autoplay" loop="loop"></video>
</body>

<body>
    <!-- 为了针对不同浏览器采用不同格式 -->
    <!-- 谷歌浏览器无法自动播放，但是可以通过添加静音muted属性来解决这个问题 -->
    <video autoplay="autoplay" muted="muted" loop="loop">
        <source src="media/video-03.mp4" type="video/mp4">
        <source src="media/video-03.ogg" type="video/ogg">

    </video>
</body>

poster 属性：用于没有autoplay的情况下，等待视频加载的时候显示指定图片

<body>
    <!-- 为了针对不同浏览器采用不同格式 -->
    <video muted="muted" loop="loop" controls="controls" poster="media/6.jpg">
        <source src="media/video-03.mp4" type="video/mp4">
        <source src="media/video-03.ogg" type="video/ogg">

    </video>
</body>

3.新增input表单、表单属性

这些新增的类型和属性主要运用于手机端(图片中标红的内容算重点)

新增类型：

<body>
    <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>
</body>

新增属性：

<body>
    <form action="">
        用户名：<input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="小猪佩奇" autocomplete="on"> <input type="submit" value="提交">
        <!-- placeholder比value要好用 -->
        <!-- placeholder默认显示灰色文字，当用户输入文字的时候，灰色文字就会消失，当用户删除输入的文字的时候 ，灰色文字又会出现 -->
        <!-- autocomplete的使用的前提要求有两点：
        1：这个input含有name这个属性
        2：这个表单被提交过
        至此之后，下次讲光标一定到表单中，曾经的输入内容就会显示出来，因为autocomplete默认on
        若将其改为off,则下次将光标定过来就不会有之前输入内容的提示了。
        实际工作中，off用的多一点 -->
        <br> 上传头像：
        <input type="file" name="" id="" multiple="multiple">
        <!-- 添加multiple该属性之后，可以多选文件，否则只可以选一个文件 -->
        <!-- 按ctrl和shift都可以加选 -->
    </form>
</body>

posted @ 2019-12-23 18:41 deer_cen 阅读(226) 评论(0) 收藏举报

刷新页面返回顶部

deer_cen