web前端学习第十三天

2024-02-01 02:38

本文主要是介绍web前端学习第十三天,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

HTML5 的新特性

1,HTML5 新增的语义化标签

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

注意:
1,这种语义化标签主要是针对搜索引擎的
2,这些新标签页面中可以使用多次
3,在 IE9中,需要把这些元素转换为块级元素
4,其实,我们移动端更喜欢使用这些标签
5,HTML5 还增加了很多其他标签

2,HTML5新增的多媒体标签

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

1,视频<video>
2, 音频<audio>

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

1,视频 video

1.1当前元素支持三种视频格式:
mp4
webm
ogg
尽量使用mp4格式

1.2 视频video——常见属性

属性:autoplay 值:autoplay 描述:视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)

属性:controls 值:controls 描述:向用户显示播放控件

属性:width 值:(像素) 描述:设置播放器宽度

属性:height 值:(像素) 描述: 设置播放器高度

属性:loop 值:loop 描述:播放完是否继续播放该视频,循环播放

属性:preload 值:auto(预先加载视频)none(不应加载视频) 描述:规定是否预加载视频(如果有了autoplay 就忽略该属性)

属性:src 值:url 描述:视频url地址

属性:poster 值:lmgurl 描述:加载等待的画面图片

属性:muted 值:muted 描述:静音播放

2 音频audio
当前元素支持三种音频格式:

mp3
wav
ogg
尽量使用mp3格式

常见属性
属性:autoplay 值:autoplay 描述:如果出现该属性,则音频在就绪后马上播放

属性:controls 值:controls 描述:如果出现该属性,则向用户显示控件,比如播放按钮。

属性:loop 值:loop 描述:如果出现该属性,则每当音频结束时重新开始播放。

属性:src 值:src 描述:要播放的音频的URL。

为了兼容低版本的浏览器,可以使用这种格式:
视频和音频都是以下的写法:

<video controls><source  src="mp4.mpf" type="video/mp4"><source  src="ogg.mpf" type="video/ogg">
</video>

多媒体标签总结:
1,音频标签和视频标签使用方式基本一致
2,浏览器支持情况不同
3,谷歌浏览器把音频和视频自动播放禁止了
4,我们可以给视频标签添加muted属性来静音播放视频,音频不可以(可以通过javascript解决)
5,视频标签是重点,我们经常设置自动播放,不使用controls控件,循环和设置大小属性。

3,HTML5新增的input类型
属性值:type=“email” 说明:限制用户输入必须为email类型

属性值:type=“url” 说明:限制用户输入必须为URL类型

属性值:type= “date” 说明:限制用户输入必须为日期类型

属性值:type = “time” 说明:限制用户输入必须为时间类型

属性值:type=“month” 说明:限制用户输入必须为月类型

属性值:type

这篇关于web前端学习第十三天的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/665824

相关文章

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Web服务器-Nginx-高并发问题

《Web服务器-Nginx-高并发问题》Nginx通过事件驱动、I/O多路复用和异步非阻塞技术高效处理高并发,结合动静分离和限流策略,提升性能与稳定性... 目录前言一、架构1. 原生多进程架构2. 事件驱动模型3. IO多路复用4. 异步非阻塞 I/O5. Nginx高并发配置实战二、动静分离1. 职责2

SpringBoot通过main方法启动web项目实践

《SpringBoot通过main方法启动web项目实践》SpringBoot通过SpringApplication.run()启动Web项目,自动推断应用类型,加载初始化器与监听器,配置Spring... 目录1. 启动入口:SpringApplication.run()2. SpringApplicat

Unity新手入门学习殿堂级知识详细讲解(图文)

《Unity新手入门学习殿堂级知识详细讲解(图文)》Unity是一款跨平台游戏引擎,支持2D/3D及VR/AR开发,核心功能模块包括图形、音频、物理等,通过可视化编辑器与脚本扩展实现开发,项目结构含A... 目录入门概述什么是 UnityUnity引擎基础认知编辑器核心操作Unity 编辑器项目模式分类工程

Python学习笔记之getattr和hasattr用法示例详解

《Python学习笔记之getattr和hasattr用法示例详解》在Python中,hasattr()、getattr()和setattr()是一组内置函数,用于对对象的属性进行操作和查询,这篇文章... 目录1.getattr用法详解1.1 基本作用1.2 示例1.3 原理2.hasattr用法详解2.

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指

Python Web框架Flask、Streamlit、FastAPI示例详解

《PythonWeb框架Flask、Streamlit、FastAPI示例详解》本文对比分析了Flask、Streamlit和FastAPI三大PythonWeb框架:Flask轻量灵活适合传统应用... 目录概述Flask详解Flask简介安装和基础配置核心概念路由和视图模板系统数据库集成实际示例Stre