2023_深入学习HTML5

H5

基于html5和 css3和一部分JS API 结合的开发平台(环境)

语义化标签

header : 表示头部，块级元素

footer ： 表示底部，块级元素

section ：区块

nav ： 表示导航链接

aside ： 表示侧边栏

output ： 标签表示计算或用户操作的结果

新增表单

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input

  1. fieldset 标签

表单集合 ，有一个 标题

视频和音频

video/ audio

video

      <video src="视频地址"></video>

      <video>
        <source src="视频源" type="video/mp4">
        <source src="视频源" type="video/ogg">
        <source src="视频源" type="video/avi">
      </video>

audio标签属性

  1. controls 显示控件

  2. autoplay 自动播放

  3. loop 循环播放

  4. width/height 设置宽度/高度

audio

      <audio src="音频源地址"></audio>

      <audio>
        <source src="音频源地址" type="audio/mp3">
        <source src="音频源地址" type="audio/ogg">
      </audio>

属性和video是一样的

事件

  1. canplay 事件

    1. 会在音频加载完毕可以播放后执行

  2. timeupdate 事件

    1. 会在播放改变时间触发

  3. ended 事件

    1. 会在播放结束了触发

属性

  1. paused 是否暂停

    1. 返回 boolean类型

  2. currentTime 当前播放时间

    1. 是一个读写属性 ，单位 秒

  3. volume 当前播放的音量

    1. 是一个读写属性 ，范围 0 - 1

  4. muted 获取当前音量是否静音

    1. 是一个读写属性，返回 true 或 false ，设置也是 true或false

  5. duration 当前视音频的总播放时间

    1. 只读属性 单位秒

方法

  1. play()

    1. 调用的时候会让音乐播放

  2. pause()

    1. 调用的时候会让音乐暂停

背景

  1. 设置背景图片
background-image: url(地址);
  1. 设置背景尺寸
background-size:  ；

可以设置 px 百分比 contain cover

  1. 设置背景原点
background-origin:  ;

默认值 padding-box 从左上角边框开始填充

border-box 从边框开始填充

content-box 从内容开始填充

  1. 背景图片裁切
background-clip:   ;

默认值 border-box : 表示超出边框部分隐藏

padding-box : 表示超出padding部分隐藏

content-box : 表示超出内容部分隐藏

  1. 背景图片位置

bgacground-position: 0px ,0px;

  1. 背景图片定位

background-attachment: ;

默认值：不写，默认按照盒子的位置定位

fixed 表示根据浏览器可视窗口定位，盒子不动，图片也是不动的

  1. 复合属性

background: 背景颜色 图片源 是否平铺 图片位置 / 图片大小

渐变

阴影

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

3D

给元素设置：

transform-style: preserve-3d;

再给body设置：

perspective: 800px;

image

animation-name: 动画名称(默认值为none)

animation-duration: 持续时间(默认值为0)

animation-timing-function: 时间函数(默认值为ease)

animation-delay: 延迟时间(默认值为0)

animation-iteration-count: 循环次数(默认值为1)

animation-direction: 动画方向(默认值为normal)

animation-play-state: 播放状态(默认值为running)

animation-fill-mode: 填充模式(默认值为none)

1〉animation-name: 动画名称(默认值为none)

@keyframes 动画规定名称

语法

animation-name: keyframename|none;

值 描述

keyframename 规定需要绑定到选择器的 keyframe 的名称。

none 规定无动画效果（可用于覆盖来自级联的动画）。

2〉animation-duration: 持续时间(默认值为0)

定义动画完成一个周期需要多少秒或毫秒

语法

animation-duration: time;

值 说明

time 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

3〉animation-timing-function: 时间函数(默认值为ease)

规定动画的速度曲线(指定动画将如何完成一个周期)

语法

animation-timing-function: value;

animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。

值 描述

linear 动画从头到尾的速度是相同的。

ease 默认。动画以低速开始，然后加快，在结束前变慢。

ease-in 动画以低速开始。

ease-out 动画以低速结束。

ease-in-out 动画以低速开始和结束。

steps(int,start|end)

指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：

start：表示直接开始。

end：默认值，表示戛然而止。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4〉animation-delay: 延迟时间(默认值为0)

定义动画什么时候开始。

animation-delay 值单位可以是秒（s）或毫秒（ms）

语法

animation-delay: time;

值 描述

time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0

5〉animation-iteration-count: 循环次数(默认值为1)

定义动画的播放次数。

语法

animation-iteration-count: n|infinite;

值 描述

n 一个数字，定义应该播放多少次动画

infinite 指定动画应该播放无限次（永远）

6〉animation-direction: 动画方向(默认值为normal)

定义是否循环交替反向播放动画。

语法

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

值 描述

normal 默认值。动画按正常播放。

reverse 动画反向播放。

alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。

alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

initial 设置该属性为它的默认值。请参阅 initial。

inherit 从父元素继承该属性。请参阅 inherit。

7〉animation-play-state: 播放状态(默认值为running)

指定动画是否正在运行或已暂停

语法

animation-play-state: paused|running;

值 描述

paused 指定暂停动画

running 指定正在运行的动画

8〉animation-fill-mode: 填充模式(默认值为none)

规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

语法

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

值 描述

none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。

forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。

backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。

both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

initial 设置该属性为它的默认值。请参阅 initial。

inherit 从父元素继承该属性。请参阅 inherit。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

二叉搜索树(BSTree)

二叉搜索树(BSTree)

目录 一、二叉搜索树 二、二叉搜索树的接口及实现 1、二叉搜索树的查找 2、二叉搜索树的插入 3、二叉搜索树的删除 三、二叉搜索树的递归版本 本期博客主要分享二叉搜索树的底层实现。(主要是笔记&#xff0c;供自己复习使用&#x1f602;) 一、二叉搜索树 二叉搜索树(B…
阅读更多...
MybatisPlus主键策略

MybatisPlus主键策略

Mybatis默认主键策略是TableId(type IdType.ASSIGN_ID) 这是默认策略雪花算法 此时主键类型可以是String 数据表字段类型可以是bigint int varchar 无需数据表主键自增 TableId(type IdType.ASSIGN_AUTO) 是主键自增策略:该策略为跟随数据库表的主键递增策略&…
阅读更多...
一致性框架设计方案

一致性框架设计方案

补充组件依赖 前言 对于供应链业务&#xff0c;一般对数据一致性要求高。且由于业务复杂&#xff0c;可能会存在一个业务功能触发几个异步操作的场景&#xff0c;且要保证相关操作同时触发或不触发。 为了降低技术设计难度、代码编写难度&#xff0c;特意设计最终一致性框架&a…
阅读更多...
ChatGPT+Ai绘图【stable-diffusion实战】

ChatGPT+Ai绘图【stable-diffusion实战】

ai绘图 stable-diffusion生成【还有很大的提升空间】 提示词1 Picture a planet where every living thing is made of light. The landscapes are breathtakingly beautiful, with mountains and waterfalls made of swirling patterns of color. What kind of societies m…
阅读更多...
程序员跳槽，要求涨薪50%过分吗？

程序员跳槽，要求涨薪50%过分吗？

如果问在TI行业涨工资最快的方式是什么&#xff1f; 回答最多的一定是&#xff1a;跳槽&#xff01; 前段时间&#xff0c;知乎上这样一条帖子引发了不少IT圈子的朋友的讨论 &#xff0c;有网友提问 “程序员跳槽要求涨薪50%过分吗&#xff1f;” 截图来源于知乎&#xff0c;…
阅读更多...
摄影知识整理

摄影知识整理

目录 焦距 焦距分类 对焦 相机的MF与AF 自动对焦操作 自动对焦方式 镜头防抖 防抖模式 景深 景深的作用 影响景深的因素 景深预览 摄影三大元素 光圈 光圈的作用 光圈与景深的关系 感光度&#xff08;ISO) 注意 感光度的作用 快门 B门与T门 快门速度 闪…
阅读更多...
【SSM】SpringMVC(三：SpringMVC拦截器)

【SSM】SpringMVC(三：SpringMVC拦截器)

文章目录 1. 登录案例2. 拦截器2.1 应用2.2 拦截器的执行原理2.3 拦截器执行的时机2.4 拦截器的实现方法2.5 拦截器的实现步骤2.6 开发拦截器 1. 登录案例 【login.jsp】 <%--Created by IntelliJ IDEA.User: BeyongDate: 2023/4/17Time: 11:43To change this template use…
阅读更多...
SQL的函数

SQL的函数

文章目录 一、SQL LCASE() 函数二、SQL MID() 函数三、SQL LEN() 函数四、SQL ROUND() 函数五、SQL NOW() 函数六、SQL FORMAT() 函数总结 一、SQL LCASE() 函数 LCASE() 函数把字段的值转换为小写。 SQL LCASE() 语法 SELECT LCASE(column_name) FROM table_name;用于 SQL …
阅读更多...
入行IC选择国企、私企还是外企？（内附各IC大厂薪资福利情况）

入行IC选择国企、私企还是外企？（内附各IC大厂薪资福利情况）

不少人想要转行IC&#xff0c;但不知道该如何选择公司&#xff1f;下面就来为大家盘点一下IC大厂的薪资和工作情况&#xff0c;欢迎大家在评论区补充。 一&#xff0e;老 牌 巨 头 在 IC 设计领域深耕许久&#xff0c;流程完善、技术扎实&#xff0c;公司各项制度都很完善、前…
阅读更多...
IT知识百科：什么是暴力破解？

IT知识百科：什么是暴力破解？

暴力破解是一种常见的网络安全攻击方法&#xff0c;它利用计算机程序自动尝试大量的密码组合来破解密码。这种攻击方法通常用于获取未经授权的访问权限&#xff0c;如入侵网络系统或个人账户。在本文中&#xff0c;我们将探讨暴力破解的原理、工具和防范方法。 暴力破解的原理 …
阅读更多...
TCP/UDP协议 (详解)

TCP/UDP协议 (详解)

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了 博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点!人生格言&#xff1a;当你的才华撑不起你的野心的时候,你就应该静下心来学习! 欢迎志同道合的朋友一起加油喔&#x1f9be;&am…
阅读更多...
Linux搭建SVN服务器详细教程

Linux搭建SVN服务器详细教程

前言 本文讲解 Linux 系统下如何搭建 SVN 服务器&#xff0c;详细说明各配置项的功能&#xff0c;最终实现可管控多个项目的复杂配置。 SVN 是 subversion 的缩写&#xff0c;是一个开放源代码的版本控制系统&#xff0c;通过采用分支管理系统的高效管理&#xff0c;实现最终集…
阅读更多...
HANA SDA连接外部数据库到BW的步骤

HANA SDA连接外部数据库到BW的步骤

咱都知道&#xff0c;我们不能直接从BW连接到外部数据库。第一步得从HANA database通过SDA去建一个到外部DB的连接。 数据库连接好了&#xff0c;那么接下来别忘了&#xff0c;还得建一个源系统。 也就是说第一步&#xff0c;我们要用HANA SDA通过Linux ODBC driver去连接外部…
阅读更多...
PHP快速入门05-时间日期与时区，附30个常用案例

PHP快速入门05-时间日期与时区，附30个常用案例

文章目录 前言一、时间日期与时区1.1 时间与日期1.2 时区 二、 30个日期时间函数的用法示例2.1 获取当前的时间戳2.2 将时间戳格式化为日期时间2.3 获取当前的日期2.4 获取当前的时间2.5 获取当前年份2.6 获取当前月份2.7 获取当前日期的第几天2.8 计算两个日期之间的天数差2.9…
阅读更多...
【生活工作经验 十】ChatGPT模型对话初探

【生活工作经验 十】ChatGPT模型对话初探

最近探索了下全球大火的ChatGPT&#xff0c;想对此做个初步了解 一篇博客 当今社会&#xff0c;自然语言处理技术得到了迅速的发展&#xff0c;人工智能技术也越来越受到关注。其中&#xff0c;基于深度学习的大型语言模型&#xff0c;如GPT&#xff08;Generative Pre-train…
阅读更多...
Java：MybatisPlus--条件构造器

Java：MybatisPlus--条件构造器

1、条件构造器类别 ①wrapper&#xff1a;抽象类&#xff0c;条件类的顶层&#xff0c;提供了一些获取和判断相关的方法。 ②AbstractWrapper&#xff1a;抽象类&#xff0c;Wrapper的子类&#xff0c;提供了所有的条件相关方法。 ③AbstractLambdaWrapper&#xff1a;抽象类…
阅读更多...
Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等

Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等

先放张效果图 第一步&#xff1a;安装依赖 npm install tinymce5.0.12 第二步&#xff1a;在项目中的public文件夹中新建tinymce文件夹&#xff08;因为我的项目是脚手架创建的&#xff0c;所以公共文件夹是public&#xff09;&#xff1b;在node_modules中找到skins文件夹复制…
阅读更多...
Java day11

Java day11

第11章 在用户界面上排列组件 11.1 基本的界面布局11.1.1 布置界面11.1.2 顺序布局11.1.3 方框布局11.1.4 网格布局11.1.5 边框布局 11.2 使用多个布局管理器11.3 卡片布局11.3.1 在应用程序中使用卡片布局11.3.2 单元格内边距和面板内边距 11.1 基本的界面布局 11.1.1 布置界…
阅读更多...
社科院与杜兰大学中外合作办学金融管理硕士项目——比起过往，前路更值得期待

社科院与杜兰大学中外合作办学金融管理硕士项目——比起过往，前路更值得期待

当结束一天工作陷入沉思时&#xff0c;你有没有特别遗憾的事情呢&#xff0c;人生有太多的不确定性&#xff0c;比起过往&#xff0c;未知的人生更值得我们期待。与其懊恼没完成的遗憾&#xff0c;不如珍惜当下&#xff0c;努力创造未来。人生没有太晚的开始&#xff0c;在职读…
阅读更多...
macOS设置环境变量和别名

macOS设置环境变量和别名

因为我的mac所用shell是bash&#xff0c;所以本文中涉及的环境变量和别名配置均在~/.zshrc文件中,且在每次配置完成后&#xff0c;需要执行source ~/.zshrc命令使配置文件生效 环境变量 通过配置环境变量&#xff0c;我们可以将某个路径暴露到全局&#xff0c;这样可以在全局…
阅读更多...
最新文章

Copyright @ 2022~2023