个人博客网站开发背景论文,余姚市城乡建设局网站,平台借钱哪个利息最低,企业做网站用dedeCMS免费吗在HTML5之前#xff0c;网站的分布层级有哪些呢#xff1f; nav#xff0c;header#xff0c;main#xff0c;footer 这样做有一个弊端 我们往往过多的使用div#xff0c;通过ID或class来区分元素 对于浏览器来说这些元素不够语义化 对于我来说搜索引擎来说#xff0c;不…在HTML5之前网站的分布层级有哪些呢 navheadermainfooter 这样做有一个弊端 我们往往过多的使用div通过ID或class来区分元素 对于浏览器来说这些元素不够语义化 对于我来说搜索引擎来说不利于seo优化 HTML5新增了语义化元素 header: 头部元素nav: 导航元素section: 定义文档某个区域元素acticle: 内容元素aside: 侧边栏元素footer: 尾部元素这里写了aside浏览器不是渲染在右边而是独占一行默认为块级元素)新增的元素浏览器自动设为 nav/article { display:block } 相当于新增了HTML元素名字但是属性没有进行改变这也就是为什么京东淘宝等大型网站他们没有过多的使用div等元素而是设置了新增的navfooter等并且提高了seo性能的能力
代码: 这里我们来看一下新属性浏览器渲染出来他是怎么排布的: 还是按照左边进行排布独占一行所以说对于我们开发而言和之前的属性没有什么区别但是有利于搜索引擎的优化seo优化
web端一直希望可以嵌入音频和视频
在HTML5是通过flash或者其他插件实现的但是会出现很多问题 比如:无法很好的支持HTML和css特性兼容性问题等
HTML增加了对媒体类型的支持 音频audio 视频video 一方面我们可以通过直接使用video和autio 另一方面我们可以直接通过JavaScript对api对其进行控制。 后面JS获取video和audio这些元素可以进行监听使他们暂停/改变进度条等 行内替换元素
video用法 src可以是本地地址也可以是远程地址 会发现打开不能播放只有图片 是因为没有设置播放条所以不是视频
video常见的属性
src URL 视频播放的URL地址 width pixels像素 设置video宽度 height pixels 设置高度 controls Boolean类型 显示控制栏包括音量 跨帧暂停恢复播放
Autoplay Boolean类型 是否视频自动播放 muted Boolean类型 是否静音播放 preload none/Metadata/auto 是否需要预加载视频metadata预加载数据
poster URL地址 一海报帧的URL
大部分公司美工是没有给播放进度条这些东西因为默认的不好看需要我们开发人员自己开发 这个开发我们和导航栏思路是一样的无非是增加了一些图标两种方式 1.video 2.JavaScript进行控制/监听 为什么加入Autoplay自动播放视频呢 是因为这个属性与liveserve有点关系做了一个局部的刷新这里会存在两个问题 但是用户一般会自己打开 并且大多数浏览器的Autoplay是不生效的 为什么呢?是因为对于浏览器火狐chromedge等这些厂商是不愿意的会牺牲很大的资源对于用户而言进入网站的一瞬间自动打开视频有声音与画面对用户的体验是极为不好的
如果想让视频自动播放增加一个属性muted前提是静音状态但部分厂商还是禁止这些属性。
preload预加载用户还没有进行点击播放按钮后台自动预加载好预习准备内部加载资源预时间 poster海报视频没有播放时视频页面的照片/用户播放一半进行了暂停设置此时一帧的画面。一般情况都是默认当前的画面
浏览器的video并非支持所有的格式
常见的包括 MP4H.264 编码WebMVP8 或 VP9 编码OggTheora 编码ADTSFLACMPEO-2这些格式通常是浏览器默认支持的视频格式。然而不同浏览器对视频格式的支持可能会有所差异因此在开发网页时最好提供多种格式的视频文件以确保兼容性。
video的兼容性写法
video src./asset/fcs.mp4 width600 controls mutedsource src./asset/fcrs.orgsource src./asset/fcrs.webm
/video浏览器加载时内部预先解析MP4格式发现不能播放在进行找别的资源进行相对应若mp4不能加载那么org格式符合要求进行加载播放
如果都不能播放呢 并且video都不支持那么增加一个属性
p当前浏览器不支持播放此视频请更换更好用的浏览器/p到时候它会自动切换
