OmniStack Lab

Appearance

1.概述 ​

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

2.语义化标签 (★★) ​

以前布局，我们基本用 div 来做。div对于搜索引擎来说，是没有语义的

html
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo(Search Engine Optimization，搜索引擎优化)，下面就是新增的一些语义化标签

标签名说明
<header>头部标签
<nav>导航标签
<article>内容标签
<section>定义文档某个区域
<aside>侧边栏标签
<footer>尾部标签
img16.png
html
<!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 {
            width: 500px;   
            height: 100px;
            background-color: pink;
            border-radius: 15px;
            margin: auto;
        }
        nav {
            width: 500px;   
            height: 100px;
            background-color: pink;
            border-radius: 15px;
            margin: 10px auto;
        }
        article {
            width: 500px;   
            height: 100px;
            background-color: pink;
            border-radius: 15px;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <header>头部标签</header>
    <nav>导航栏</nav>
    <article>内容标签</article>
</body>
</html>

img_16.png

注意:

  1. 这种语义化标准主要是针对搜索引擎的
  2. 这些新标签页面中可以使用多次
  3. 在IE9中,需要把这些元素转换为块级元素
  4. 移动端使用这些标签更多

3.多媒体标签 ​

多媒体标签分为音频 audio 和视频 video 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。
因为多媒体标签的 属性、方法、事件比较多，因此我们需要什么功能的时候，就需要去查找相关的文档进行学习使用。
img17.png

3.1 视频标签-video(★★★) ​

基本使用

当前 <video> 元素支持三种视频格式： 尽量使用 mp4格式

使用语法:

html
<video src="media/mi.mp4"></video>
浏览器MP4WebMOgg
Chrome是是是
Firefox是是是
Edge是是否
Safari是否否
Opera是是是
IE是否否

兼容写法
由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

html
<video  controls="controls"  width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持 <video> 标签播放视频
</ video >

上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

video 常用属性

属性值描述
autoplayautoplay视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controlscontrols向用户显示播放控件
width/height像素值设置播放器宽度/高度
looploop播放完是否继续播放该视频，循环播放
preloadauto/metadata/none规定是否预加载视频(如果有了autoplay 就忽略该属性)
srcurl视频url地址
posterimgurl加载等待的画面图片
mutedmuted静音播放

示例代码

html
<!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>
        video {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <video src="media/mi.mp4" 
    autoplay="autoplay" 
    muted="muted"  
    loop="loop" 
    poster="media/mi9.jpg" 
    controls="controls"></video>
</body>
</html>

img_17.png

3.2 音频标签-audio(★★★) ​

基本使用
当前 <audio> 元素支持三种视频格式： 尽量使用 mp3格式

使用语法:

html
<audio src="media/music.mp3"></audio>
浏览器MP3WavOgg
Chrome是是是
Firefox是是是
Edge是是否
Safari是是否
Opera是是是
IE是否否

兼容写法
由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

html
< audio controls="controls"  >
    <source src="happy.mp3" type="audio/mpeg" >
    <source src="happy.ogg" type="audio/ogg" >
    您的浏览器暂不支持 <audio> 标签。
</ audio>

上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

audio常用属性

属性值描述
autoplayautoplay音频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controlscontrols向用户显示播放控件
looploop播放完是否继续播放该音频，循环播放
preloadauto/metadata/none规定是否预加载音频(如果有了autoplay 就忽略该属性)
srcurl音频url地址
mutedmuted静音播放

示例代码

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

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

img_18.png

3.3 小结 ​

  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以(可以通过JavaScript解决)
  • 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

4.新增的表单元素(★★) ​

在H5中，帮我们新增加了很多类型的表单，这样方便了程序员的开发
课堂案例: 在这个案例中，熟练了新增表单的用法

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 我们验证的时候必须添加form表单域 -->
<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>
</html>

img_19.png

常见输入类型

aiignore
text password radio checkbox button file hidden submit reset image

新的输入类型

输入类型说明
email邮箱输入框
urlURL地址输入框
date日期选择器
time时间选择器
month月份选择器
week周选择器
number数字输入框
tel电话号码输入框
search搜索框
color颜色选择器
range滑块控件

新的表单属性

属性值说明
requiredrequired表单拥有该属性表示其内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
autocompleteon/off当用户在字段开始键入时，浏览器基于之前键入过的值显示选项
multiplemultiple可以多选文件提交
pattern正则表达式规定输入字段的值的模式或格式
min/max数值规定输入字段的最小/最大值
step数值为输入字段规定合法的数字间隔
html
<!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>
        input::placeholder{
            color: plum;
        }
    </style>
</head>
<body>
    <input type="search" name="serch" required="required" placeholder="请输入姓名" autofocus="autofocus"
    autocomplete="on"></input>
    <input type="submit"></input>
</body>
</html>

img_20.png

Released under the MIT License.

Copyright © 2024-present gqk