1. HTML5的新特性

HTML5的新增特性主要是针对于以前的不足, 增了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持, 如果不考虑兼容性问题,可以大量使用这些新特性。

1.1 HTML5 新增的语义化标签

html 复制代码
●<header> : 头部标签
●<nav> : 导航标签
●<article> : 内容标签
●<section> : 定义文档某个区域
●<aside> : 侧边栏标签
●<footer> : 尾部标签


注意:

这种语义化标准主要是针对搜索引|擎的

●这些新标签 页面中可以使用多次

●在IE9中 ,需要把这些元素转换为块级元素

●移动端更喜欢使用这些标签

1.2 HTML5新增的多媒体标签

新增的多媒体标签主要包含两个:

1.音频 : < audio>

2.视频 : < video>

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

1.视频< video>

(1)当前< video>元素支持3种视频格式:尽量使用mp4格式

语法

html 复制代码
<video src="文件地址" controls="controls"></video>

另外一种写法(了解)

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

(2)< video>常见属性

2.音频< audio>

当前< audio>元素支持3种音频格式:mp3、Wav、Ogg
语法

html 复制代码
<audio src="文件地址" controls="controls"></ audio>

另外一种写法(了解)

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

(2)常见属性

●谷歌浏览器把音频和视频自动播放静止了

3.多媒体标签总结

●音频标签和视频标签使用方式基本一致

●浏览器支持情况不同

●谷歌浏览器把音频和视频自动播放禁止了

●我们可以给视频标签添加muted属性来静音播放视频, 音频不可以(可以通过JavaScript解决)

●视频标签是重点, 我们经常设置自动播放, 不使用controls控件, 循环和设置大小属性

1.3 HTML5新增的 input类型

●重点记住number tell search这 3个

【示例代码】

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>

1.4 HTML5新增的表单属性

可以通过以下设置方式修改placeholder里面的字体颜色:

html 复制代码
input::placeholder {
color:pink;
}
相关推荐
王景程3 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常26 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中31 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木35 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand1 小时前
Dhtmlx Gantt教程
前端