HTML5语义化元素

在HTML5之前,网站的分布层级有哪些呢?
nav,header,main,footer
这样做有一个弊端
我们往往过多的使用div,通过ID或class来区分元素

对于浏览器来说这些元素不够语义化
对于我来说搜索引擎来说,不利于seo优化

HTML5新增了语义化元素

        header:   头部元素nav:        导航元素section:  定义文档某个区域元素acticle:   内容元素aside:     侧边栏元素footer:   尾部元素

在这里插入图片描述
这里写了aside,浏览器不是渲染在右边而是独占一行(默认为块级元素),新增的元素浏览器自动设为

nav/article {
display:block
}

相当于新增了HTML元素名字,但是属性没有进行改变,这也就是为什么京东,淘宝等大型网站他们没有过多的使用div等元素,而是设置了新增的nav,footer等并且提高了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是不生效的

为什么呢?是因为对于浏览器(火狐,chrom,edge等)这些厂商是不愿意的,会牺牲很大的资源,对于用户而言,进入网站的一瞬间自动打开视频,有声音与画面对用户的体验是极为不好的!

如果想让视频自动播放,增加一个属性muted(前提是静音状态),但部分厂商还是禁止这些属性。

preload预加载,用户还没有进行点击播放按钮,后台自动预加载好!预习准备内部加载资源,预时间
poster海报,视频没有播放时,视频页面的照片/用户播放一半进行了暂停,设置此时一帧的画面。一般情况都是默认当前的画面!

浏览器的video并非支持所有的格式

常见的包括:

     MP4(H.264 编码)
            WebM(VP8 或 VP9 编码)Ogg(Theora 编码)ADTS,FLAC,MPEO-2

这些格式通常是浏览器默认支持的视频格式。然而,不同浏览器对视频格式的支持可能会有所差异,因此在开发网页时最好提供多种格式的视频文件以确保兼容性。

video的兼容性写法

<video src="./asset/fcs.mp4" width="600" controls muted><source src="./asset/fcrs.org"><source src="./asset/fcrs.webm>
</video>

浏览器加载时,内部预先解析MP4格式,发现不能播放,在进行找别的资源进行相对应,若mp4不能加载,那么org格式符合要求进行加载播放

如果都不能播放呢?
并且video都不支持,那么增加一个属性

<p>当前浏览器不支持播放此视频,请更换更好用的浏览器</p>

到时候它会自动切换

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/754698.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云原生部署手册01:构建k8s集群并配置持久化存储

写在前面&#xff1a;k8s弃用docker的影响其实没那么大 k8s通过dockershim对docker的支持从1.20版本后就已经移除&#xff0c;仅支持符合Container Runtime Interface(CRI)的容器运行环境&#xff0c;比如containerd。containerd本身就是docker底层的容器运行环境&#xff0c;…

海康威视相机SDK二次开发(JAVA语言)

目录 前言客户端创建虚拟相机示例代码保存图片程序运行结果修改需求 二次开发引入外部包对SaveImage.java文件进行修改保存图片saveDataToFile方法选择相机chooseCamera方法主方法 FileUtil类处理过期照片启动类与配置文件application.yml通过实体类读取yml启动类 SaveImage.ja…

供应链投毒预警 | 开源供应链投毒202402月报发布啦

概述 悬镜供应链安全情报中心通过持续监测全网主流开源软件仓库&#xff0c;结合程序动静态分析方式对潜在风险的开源组件包进行动态跟踪和捕获&#xff0c;发现大量的开源组件恶意包投毒攻击事件。在2024年2月份&#xff0c;悬镜供应链安全情报中心在NPM官方仓库&#xff08;…

Linux uucico命令教程:UUCP文件传输服务程序(附实例详解和注意事项)

Linux uucico命令介绍 uucico&#xff0c;全称UUCP文件传输服务程序&#xff0c;是用来处理uucp或uux送到队列的文件传输工具。uucico有两种工作模式&#xff1a;主动模式和附属模式。当在主动模式下时&#xff0c;uucico会调用远端主机&#xff1b;在附属模式下时&#xff0c…

快速搭建一个一元二次方程flask应用

新建flask_service目录、templates子目录 flask_service —— app.py —— templates —— —— index.html app.py from flask import Flask, request, jsonify, render_template import random import matplotlib.pyplot as plt from io import BytesIO import base64app F…

分布式 Session--一起学习吧之架构

一、定义 分布式Session是指在一个分布式系统中&#xff0c;多个服务器之间共享用户的会话信息。在Web应用中&#xff0c;Session通常用于跟踪用户的状态和会话数据。然而&#xff0c;在分布式系统中&#xff0c;由于用户请求可能被分发到不同的服务器上&#xff0c;因此需要一…

jenkins Pipeline接入mysql

背景&#xff1a; jenkin pipeline进化过程如下&#xff1a; Jenkins Pipeline 脚本优化实践&#xff1a;从繁琐到简洁 >>>>> Jenkins Pipeline脚本优化&#xff1a;为Kubernetes应用部署增加状态检测>>>>>> 使用Jenkins和单个模板部署多个K…

BootScrap详细教程

文章目录 前言一、BootScrap入门二、导航三、栅格系统四、container五、面板六、媒体对象七、分页八、图标九、实现动态效果 前言 BootScrap是别人帮我们写好的CSS样式。如果想要使用BootScrap&#xff0c;需要先下载下来&#xff0c;在页面上引入&#xff0c;编写HTML需要按照…

Ubuntu 23.10 tar包安装和配置Elasticsearch kibana 7.13.3

目录 一、环境说明 二、准备工作 三、安装elasticsearch 3.1 安装elasticsearch 3.2 添加服务和设置开机启动 四、安装kibana 4.1. 安装kibana 4.2 添加服务和设置开机启动 出于工作需要&#xff0c;需要在Ubuntu 23.10系统上通过tar包方式安…

QT 商品入库与出库(库存管理系统)

商品入库 void GoodsWarehousing::InitComboBoxFunc() // 初始化Combo box控件 {int i0;QSqlQuery sqlQuery;sqlQuery.exec("SELECT * FROM commoditydatatable");QString StrId;while(sqlQuery.next()){StrIdsqlQuery.value(0).toString();ui->comboBox_Id->…

华岳M9制造企业管理软件业务流程 1/4

华岳M9制造企业管理软件业务流程 1/4 版本特征主控概念步骤1 部署一、服务器端二、客户端 步骤2 基础一、填写授权信息及操作权限分配二、设置业务期间三、账套参数设置四、设置分类目录五、其他基础设置六、功能模块管理 华岳M9制造企业管理软件业务流程&#xff0c;贯彻存货总…

Android 开发环境搭建(Android Studio 安装图文详细教程)

Android Studio 下载 https://developer.android.google.cn/studio?hlzh-cn Android Studio 安装 检查电脑是否启用虚拟化 如果没有开启虚拟化&#xff0c;则需要进入电脑的 BIOS 中开启 直接 next选择安装的组件&#xff0c;Android Studio 和 Android 虚拟设备&#xff…

(学习日记)2024.03.18:UCOSIII第二十节:移植到STM32

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

注册个人小程序

访问地址 https://mp.weixin.qq.com/ 立即注册 选择小程序 注册 填写信息 登录邮箱 访问邮箱的链接激活账号 选择个人&#xff0c;填写信息 注册完成&#xff0c;即可登录进入填写信息

使用jenkins-pipeline进行利用项目文件自动化部署到k8s上

Discard old builds:丢弃旧的构建,目的是管理存储空间、提升性能以及保持环境整洁 Do not allow concurrent builds: 禁止并发构建是指同一时间内只允许一个构建任务执行,避免多个构建同时运行可能带来的问题 Do not allow the pipeline to resume if the controller resta…

深度学习实战模拟——softmax回归(图像识别并分类)

目录 1、数据集&#xff1a; 2、完整代码 1、数据集&#xff1a; 1.1 Fashion-MNIST是一个服装分类数据集&#xff0c;由10个类别的图像组成&#xff0c;分别为t-shirt&#xff08;T恤&#xff09;、trouser&#xff08;裤子&#xff09;、pullover&#xff08;套衫&#xf…

蓝桥杯-24点-搜索

题目 思路 --暴力递归全组合的方法。只有4个数&#xff0c;4种计算方式&#xff0c;共有4 * 3 * 2 * 1 * 4种不同的情况&#xff0c;可以写递归来实现。 --每次计算都是两个数之间的运算&#xff0c;因此4个数需要3次计算&#xff0c;第一次计算前有4个数&#xff0c;第二次有…

面向对象【interface接口、抽象类与抽象方法】

文章目录 interface接口定义接口接口的格式与举例静态方法私有方法接口的多继承接口的默认方法冲突解决接口与抽象类之间的对比 抽象类与抽象方法抽象类抽象类的定义抽象方法使用抽象类 参考链接 interface接口 接口是一种抽象的数据类型&#xff0c;它定义了一组方法&#xff…

c语言基础~函数详解

前言 今天我们来学习一波函数的概念,帮助各位理解函数,本次博客取自一些书籍以及各大网站的讲解,把它整合在一起并且详细讲解 1函数的理解 我们得知道什么是函数&#xff0c;函数的作用是什么,好不会表述没关系&#xff0c;我们翻书 c primer plus 是这么说的"函数是指…

科技云报道:第五次工业革命,中国AI企业如何打造新质生产力?

科技云报道原创。 人类历史的叙述与技术进步的影响深深交织在一起。 迄今为止&#xff0c;每一次工业革命都彻底改变了我们社会的轮廓&#xff0c;引入了机械化、大规模生产和数字化&#xff0c;并重新定义了人类生存的规范。 自2022年11月30日OpenAI发布ChatGPT以来&#x…