首页 > 其他分享 >vue学习 第十天(2) HTML5的新特性 ----- 语义化标签(布局标签)/ 多媒体标签(video、audio)/ 新增的input类型(email、number等)

vue学习 第十天(2) HTML5的新特性 ----- 语义化标签(布局标签)/ 多媒体标签(video、audio)/ 新增的input类型(email、number等)

时间:2023-05-03 21:12:16浏览次数:48  
标签:视频 vue 浏览器 第十天 标签 音频 特性 HTML5

目标:

  能够说出3~5个HTML5 新增布局和表单标签

  能够说出CSS3的新增特性有哪些

 

                  HTML5的新特性

 

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

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

声明:

  1。新特性增加了很多,但我们专注于开发常用的新特性。

 

1、HTML5新增的语义化标签

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

  布局标签: <header> 头部、 <nav>导航 、  <article>内容 、  <section> 、  <aside>侧边栏、  <footer>尾部

  

 

2、HTML5新增的多媒体标签

  1)视频<video>

  2)音频 <audio>

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

  HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播放, 但是支持的格式有限 (MP4、WebM、Ogg)

  1)video视频  

    a)视频<video> 元素支持3种视频格式。 mp4在各个浏览器都能用。推荐

    

 

     b)视频<video>-- 常见属性

     

 

  2)音频<audio> 

     a)支持的格式有限,多数都是支持 MP3格式的

    

     b)音频常见属性。谷歌浏览器将音频和视频的自动播放禁止了。

    

 

   3)多媒体标签总结

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

    浏览器支持情况不同

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

    我们可以给视频标签添加muted属性来静音播放视频,音频无法无妨。但可以通过js解决

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

 

                H5 新增的input类型

1、表单input标签新增type属性值,限制用户输入

  

 

2、 H5新增的表单属性

  

标签:视频,vue,浏览器,第十天,标签,音频,特性,HTML5
From: https://www.cnblogs.com/changdasheng/p/17316486.html

相关文章

  • vue学习 第十天(1) css高级技巧 ----CSS用户界面样式 / vertical-align属性应用
    用户界面样式 1)鼠标样式cursorli{cursor:pointer;}设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 2、轮廓线outline给表单添加outline:0;或者outline:none;样式之后,就可以去掉默认的蓝色边......
  • a标签download属性跨域问题
    1.如果是加载了非同源的内容,该属性将失效,等于导航功能2.在服务端设置Content-Disposition,使用HTTP响应头Content-disposition进行处理3.先下载数据文件,生成Blob对象,再使用URL.createObjectURL()创建一个非跨域的数据源,然后写入a标签支持下载......
  • vue学习 第九天(2) css高级技巧. ---- 精灵图 / 字体图片 / CSS三角
    学习目标:1)精灵图2)字体图标3)CSS三角4)CSS用户界面样式5)vertical-align属性应用6)溢出的文字省略号显示7)常见的布局技巧 1、精灵图1)需要精灵图的原因  (减少网页多张小图片的多次服务器请求)网页中有很多小的背景图,过多的图片。......
  • vue学习 第九天(1) 元素的显示与隐藏 display (不保留位置) / visibility (保留位置) /
    元素的显示与隐藏本质:让一个元素在页面中隐藏或者显示出来。1、display属性,隐藏后不保留位置1)display::none;隐藏对象2)display:block;除了转换为块级元素之外,同时还有显示元素的意思。display隐藏元素后,不再占有原来的位置。 2......
  • Vue2入门之超详细教程八-计算属性
    1、简介计算属性:1.定义:要用的属性不存在,要通过已有的属性计算得来2.原理:底层借助Object.defineproperty方法提供的getter和setter3.Get函数什么时候执行?(1) 初次读取时会执行一次(2) 当依赖的数据发生改变时会被再次......
  • Vue 前端设计模式梳理
    一、什么是设计模式?设计模式是一套被反复使用、多数人知晓、经过分类编目的、代码设计经验的总结。它是为了可重用代码,让代码更容易的被他人理解并保证代码的可靠性。   设计模式实际上是“拿来主义”在软件领域的贯彻实践,它是一套现成的工具,拿来即用。下面来看一下设计模......
  • mybatis控制动态SQL拼接标签之if test标签
    if标签通常用于WHERE语句、UPDATE语句、INSERT语句中,通过判断参数值来决定是否使用某个查询条件、判断是否更新某一个字段、判断是否插入某个字段的值。mybatis是一个天才设计,面向对象未必就是真理,相对于JPA等框架,具有更大的自由度和灵活度。简单示例selecthost_nameashos......
  • mybatis格式化输出标签之trim标签
    trim属性主要有以下四个prefix:前缀覆盖并增加其内容suffix:后缀覆盖并增加其内容prefixOverrides:前缀判断的条件suffixOverrides:后缀判断的条件其实这个很少用,因为有对应的标签做处理。查询等同where标签功能<selectid="getAgentList"resultType="com.wht.demo.dao.vo.A......
  • mybatis格式化输出标签之where 标签
    复制copy是程序员提高效能的核心方式,但是由于有些知识陈旧了,年复一年的复制,而没有系统的知识学习,并不晓得还有更合理或者更优雅的写法。1=1这种东西很多项目很常见,但是应该被放进历史的垃圾桶的。<selectid="getAgentList"resultType="com.wht.demo.dao.vo.AgentVo"> s......
  • java基于springboot+vue非前后端分离的影城管理系统、影院销售管理系统,附源码+文档+PP
    1、项目介绍本影城管理系统主要包括二大功能模块,即用户功能模块和管理员功能模块。(1)管理员模块:系统中的核心用户是管理员,管理员登录后,通过管理员功能来管理后台系统。主要功能有:首页、个人中心、用户管理、电影类型管理、放映厅管理、电影信息管理、购票统计管理、系统管理、订......