WEB之HTML5 系列笔记

WEB之HTML5 系列笔记

HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML

  • 是一个新版本的 HTML 语言，定义了新的标签、特性和属性
  • 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5

HTML5 新增标签

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

使用语义化标签的注意

  • 语义化标签主要针对搜索引擎
  • 新标签可以使用一次或者多次
  • 在 IE9 浏览器中，需要把语义化标签都转换为块级元素
  • 语义化标签，在移动端支持比较友好，
  • 另外，HTML5 新增的了很多的语义化标签，随着课程深入，还会学习到其他的

多媒体音频标签

多媒体标签有两个, 分别是:

  • 音频 - audio
  • 视频 - video

说明

  • 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
  • 但是：播放格式是有限的

audio支持的音频格式

​

格式 IE9 Firefox3.5 Oprea10.5 Chrome3.0 Safari3.0
Ogg Vorbis O O O
MP3 O O O
Wav O O O

audio 的参数

属性 值 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放
controls controls 如果出现该属性, 则向用户显示空间, 比如播放按钮
loop loop 如果出现该属性,则每当音频结束时重新开始播放
src url 要播放的音频的URL

  • 例如:

    <body>
    <!-- 注意: 在chrome 浏览器中已经禁用了 autoplay 属性 -->
    <!-- 
        <audio src="/media/snow.mp3" controls autoplay>
        </audio>
	-->
     <!-- 
        因为不同浏览器支持不同的格式，所以我们采取的方案是这个		音频准备多个文件
   	-->
    <audio controls>
    	<source src="./media/snow.mp3" type="audio/mpeg" />
    </audio>
</body>

多媒体视频标签

video视频标签

格式 IE Firefox Opera Chrome Safri
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

语法格式

<video src="./media/video.mp4" controls="controls">
</video>

video 参数

属性 值 描述
autoplay autoplay 视频就绪自动播放(谷歌浏览器需要加muted来解决自动播放问题)
controls controls 向用户显示播放控件
width pixels(像素) 设置播放器宽度
height pixels(像素) 设置播放器高度
loop loop 播放完是否继续播放该视频,循环播放
preload auto(预先加载视频)
none(不应加载视频)		 规定是否预加载视频(如果有autopay 就忽略该属性)
src url 视频url地址
poster Imgurl 加载等待的画面图片
muted muted 静音播放

例如:

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

多媒体标签总结

  • 音频标签与视频标签使用基本一致
  • 多媒体标签在不同浏览器下情况不同，存在兼容性问题
  • 谷歌浏览器把音频和视频标签的自动播放都禁止了
  • 谷歌浏览器中视频添加 muted 标签可以自己播放
  • 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册

新增input标签

属性值 type = " " 说明
email 限制用户输入必须为 Email类型
url 限制用户输入必须为 URL类型
date 限制用户输入必须为 日期类型
time 限制用户输入必须为 时间类型
month 限制用户输入必须为 月类型
week 限制用户输入必须为 周类型
number 限制用户输入必须为 数字类型
tel 手机号码
search 搜索框
color 生成一个颜色选择表单

新增表单属性

属性 值 说明
required required 表单拥有该属性时表示内容不能为空, 必填
placeholder 提示文本(占位符) 表单的提示信息, 存在默认值将不再显示
autofocus autofocus 自动聚焦属性, 页面
autocomplete off/on 记录已经提交过的信息 默认值为打开
multiple multiple 可以多选文件提交

posted @ 2020-09-30 20:01  Hac_Zhang  阅读(98)  评论(0)  编辑  收藏  举报