明月看潮生
明月看潮生

编程笔记 html5&css&js 031 HTML视频

编程笔记 html5&css&js 031 HTML视频

  • 一、`
  • 二、属性
  • 三、事件
  • 四、嵌入视频页面
  • 五、练习
  • 小结

视频应用广泛，当前的互联网应用中，视频越来越重要，比如抖音、快手、腾讯视频等应用。

一、: 视频元素

HTML 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 标签用于音频内容，但是 元素可能在用户体验上更合适。
和 元素的使用类似，在 src 属性里加入一个我们需要展示的视频地址，同时也可以用其他属性来指定视频的宽度和高度、是否自动或者循环播放、是否展示浏览器默认的视频控件等。

二、属性

类似于所有其他 HTML 元素，video 元素也支持 全局属性。
autoplay
布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。
备注： 自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如何正确使用自动播放，可参见我们的 自动播放指南。如果使用 autoplay=“false” 来关闭视频的自动播放功能，会不起作用；只要 标签中有 autoplay 属性，视频就会自动播放。要移除自动播放，需要完全删除该属性。
controls
加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
controlslist 实验性非标准
当浏览器显示视频底部的播放控制面板（例如，指定了 controls 属性）时，controlslist 属性会帮助浏览器选择在控制面板上显示哪些控件。
允许的值有 nodownload、nofullscreen 和 noremoteplayback。
如果要禁用画中画模式（和控件），请使用 disablePictureInPicture 属性。
crossorigin
该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源 可在 元素中被重用，而不会被污染。允许的值如下：
anonymous
在发送跨域请求时不携带凭证（credential）信息。也就是说，浏览器在发送 Origin: HTTP 请求首部时将不会携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任（也就是说没有设置 Access-Control-Allow-Origin: HTTP 响应首部），图像会被 污染，并且它的使用会受到限制。
use-credentials
在发送跨域请求时携带凭证（credential）信息。也就是说，浏览器在发送 Origin: HTTP 请求首部时将会携带 cookie、安全令牌、并且执行 HTTP 基本身份验证。如果服务器没有给予源站点信任（通过设置 Access-Control-Allow-Credentials: HTTP 响应首部），图像会被 污染，并且它的使用会受到限制。不加这个属性时，获取资源不会使用 CORS 请求（即不会发送 Origin: HTTP 请求首部），保证其在 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。查看 CORS 设置属性 (en-US) 获取更多信息。
disablepictureinpicture 实验性
防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。该属性可以禁用 video 元素的画中画特性，右键菜单中的“画中画”选项会被禁用
disableRemotePlayback 实验性
布尔属性，用于在使用有线（HDMI、DVI 等）和无线技术（Miracast、Chromecast、DLNA、AirPlay 等）连接设备时，禁用远程播放功能。在 Safari 中，你可以使用 x-webkit-airplay=“deny” 作为兜底方案。
height
视频显示区域的高度，单位是 CSS 像素（仅限绝对值；不支持百分比）。
loop
布尔属性；指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。
muted
布尔属性，指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。
playsinline
布尔属性，指明视频将内联（inline）播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。
poster
海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。
preload
该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：
none: 表示不应该预加载视频。
metadata: 表示仅预先获取视频的元数据（例如长度）。
auto: 表示可以下载整个视频文件，即使用户不希望使用它。
空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为 metadata。
备注： autoplay 属性的优先级比 preload 高。如果制定了 autopaly属性，浏览器显然需要开始下载视频以便回放。规范没有强制浏览器去遵循该属性的值，这仅仅只是个提示。
src
要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 元素来指定需要嵌到页面的视频。
width
视频显示区域的宽度，单位是 CSS 像素（仅限绝对值；不支持百分比）。

三、事件

事件名	触发时机
audioprocess (en-US)已弃用	The input buffer of a ScriptProcessorNode is ready to be processed.
canplay	浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容。
canplaythrough	浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束。
complete	OfflineAudioContext 渲染完成。
durationchange	duration 属性的值改变时触发。
emptied (en-US)	媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它。
ended	视频停止播放，因为 media 已经到达结束点。
loadeddata	media 中的首帧已经完成加载。
loadedmetadata	已加载元数据。
pause	播放已暂停。
play	播放已开始。
playing	由于缺乏数据而暂停或延迟后，播放准备开始。
progress	在浏览器加载资源时周期性触发。
ratechange (en-US)	播放速率发生变化。
seeked (en-US)	跳帧（seek）操作完成。
seeking (en-US)	跳帧（seek）操作开始。
stalled (en-US)	用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现。
suspend (en-US)	媒体数据加载已暂停。
timeupdate	currentTime 属性指定的时间发生变化。
volumechange (en-US)	音量发生变化。
waiting (en-US)	由于暂时缺少数据，播放已停止。

使用说明
浏览器并不是都支持相同的视频格式 (en-US)，所以你可以在 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。
其他的使用注意事项：
如果你没有指定 controls 属性，那么视频不会展示浏览器自带的控件，你也可以用 JavaScript 和 HTMLMediaElement API 来创建你自己的控件。HTMLMediaElement 会激活许多不同的事件 ，以便于让你可以控制视频（和音频）内容。
你可以用 CSS 属性 object-position 来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式。
如果想在视频里展示字幕或者标题，你可以在 元素和 WebVTT 格式的基础上使用 JavaScript 来实现。

四、嵌入视频页面

还可以把其他视频网站的视频嵌入到网页。看下面练习中的例子，嵌入了腾讯视频的播放页面。

五、练习

DOCTYPE html>
<html lang="zh-cn">
    <title>编程笔记 html5&css&js HTML视频title>
    <meta charset="utf-8" />
    <style>
        body {
            color: cyan;
            background-color: teal;
        }
        .container {
            width: 500px; /* 设置容器的宽度 */
            margin: 0 auto; /* 将左右边距设置为自动 */
            line-height: 2;
        }
    style>
    <body>
        <div class="container">
            <h1>视频：青少年成长管理 引言h1>
            <video width="320" height="240" controls="controls">
                <source src="mp4/00 青少年成长管理 引言 (1).mp4" type="video/mp4" />
            video>
        div>
        <div class="container">
            <h1>腾讯视频：斗破苍穹第4季h1>
            <p style="text-align: center">
                
                <iframe
                    class="video_iframe"
                    style="z-index: 1"
                    src="http://v.qq.com/iframe/player.html?vid=i0043frto05&width=500&height=375&auto=0"
                    allowfullscreen=""
                    frameborder="0"
                    height="375"
                    width="500"
                >iframe>
            p>
        div>
    body>
html>

小结

需要时再详细掌握。

你可能感兴趣的:(#,html5,css3,javascript,少年工程师)

  • 探索Pebble时代遗留的瑰宝：Slate框架简介 宣苓滢Rosa
    探索Pebble时代遗留的瑰宝：Slate框架简介项目介绍随着技术迭代的脚步，Slate——曾经为Pebble智能手表应用提供强大支持的前端框架，虽然已被Clay取而代之，但其在移动配置页面开发领域的创新精神值得回顾。它以简洁高效的设计理念，让开发者能够快速创建美观且用户友好的配置界面，曾是众多Pebble应用背后的功臣。技术深度剖析Slate基于轻量级的JavaScript库Zepto.js构建
  • 第二届睡眠脑电专题班（直播：2023.5.13~5.14） 茗创科技
    茗创科技专注于脑科学数据处理，涵盖（EEG/ERP,fMRI,结构像,DTI,ASL,,FNIRS）等，欢迎留言讨论及转发推荐，也欢迎了解茗创科技的脑电课程，数据处理服务及脑科学工作站销售业务，可添加我们的工程师（微信号MCKJ-zhouyi或17373158786）咨询。★课程简介★睡眠占据了人生命的三分之一，充足良好的睡眠也是健康不可或缺的条件之一。为什么有的人睡眠质量如此高？为什么有的人饱受
  • Node.js基础用法 Komorebi_9999 node.js
    一、基础用法与核心模块1.运行Node.js脚本bash#运行JS文件nodescript.js#进入交互式环境（REPL）node2.核心模块示例文件系统（fs模块）javascriptconstfs=require('fs').promises;//异步Promise版本constpath=require('path');//读取文件asyncfunctionreadFile(){try{co
  • 科技照亮童心|激光院与跳伞塔社区开展公益活动 亚财动态 科技
    7月11日，激光院联合跳伞塔社区开展“科娃讲堂”青少年科普公益活动，进一步推进激光院属地化发展，履行央企担当，助力科技人才培养。30余名青少年走进“科娃讲堂”，与激光院优秀青年人才一起共话激光科技。此次活动通过“知识讲解+观察实践”的方式，让青少年近距离感受激光技术的原理和应用。活动现场，激光院青年工程师为青少年们带来精彩纷呈的知识讲解，从激光院的历史沿革到前沿激光技术的发展，从激光雷达的主要应用
  • 【天地诗心】七律·少年游 诗枭李二浪
    铭《少年游》柴门溪曲白云渡，沙上蹄痕鸟作诗。正爱蜻蜓伏野树，又摸蝌蚪放清池。霞光晚照湿衣处，月色初深起灶时。美丽流星如雨落，从前年少不曾知。（中华新韵十三支）我年少时无忧无虑，爱在家乡溪水边玩乐，玩到很晚才回家吃饭。我常常觉得，那些逝去的彩色的时光，根本就是我一厢情愿的梦。可事实是我的的确确经历了。我曾机缘之下看过一场美丽的流星雨。那时没有特别在意，以为只要到了晚上都会有。后来发现，人生太多事物需
  • 迎新春 修源正本
    迎新春（嶰管变青律）作者：[宋]柳永迎新春1嶰管变青律，帝里阳和新布2。晴景回轻煦3。庆佳节、当三五。列华灯、千门万户4。遍九陌、罗绮香风微度5。十里燃绛树6。鳌山7耸，喧天箫鼓。渐天如水8，素月当午9。香径里、绝缨掷果无数10。更阑竹影花阴下，少年人、往往奇遇11。太平时、朝野多欢民康阜12。随分13良聚。堪对此景，争忍独自归去。注释：1《迎新春》：为柳永自制曲，盖因写新春元宵盛况而得名。《乐章
  • NOIP2013提高组复赛数据详细分析与应用指南 欧学东
    本文还有配套的精品资源，点击获取简介：2013年的NOIP提高组复赛数据，涉及C++编程、算法设计、数据结构、问题分析、时间空间复杂度优化、调试测试、比赛策略、历年试题分析等多个知识点。这些数据对于参赛者、教练和信息技术教育研究者具有重要参考价值，有助于提升信息技术能力和竞赛准备的有效性。1.NOIP竞赛概览全国青少年信息学奥林匹克竞赛（NationalOlympiadinInformaticsi
  • 前言 | 围巾哥萧尘 | Trae AI 从小白到大神的学习之路 [特殊字符] 围巾哥萧尘 经验分享
    前言大家好！我是围巾哥萧尘，一名Rails全栈工程师，也是TraeAI的超级体验官！欢迎拿起这本《TraeAI从小白到大神的学习之路》，与我一起踏上AI编程的奇妙旅程！无论你是刚刚接触编程的新手，还是已经在代码世界摸爬滚打多年的老兵，这本书都将为你打开一扇通往AI驱动开发的大门。TraeAI不仅是一款工具，更是一个让你从零到一、从平凡到卓越的编程伙伴。在这篇前言中，我将分享我的故事、TraeAI的
  • optimist 情绪垃圾站
    我知道人生是个悲剧一生不断消耗着生命，从聪明果敢朝气，变成愚钝衰老阴沉，从满格一步步归零马克吐温说人生最悲哀的莫过于在年轻时候做一个乐天派悲剧是人生的底色每个人都爱少年仿佛一个人只能活18岁我只怀念16岁，之后的人生是行尸走肉被捆绑着前行我很讨厌现在还有人把我忧郁的原因归于我父母，以后我可能要和自己对话了生命是个悲剧
  • 车载传统ECU---MCU软件架构设计指南 汽车电子实验室 电子电器架构开发流程车载电子与软件框架单片机网络架构嵌入式硬件汽车中央控制单元HPC软件架构汽车
    我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是系统思考、大胆设计、小心求证；三是“一张纸制度”，也就是无论多么复杂的工作内容，要在一张纸上描述清楚；四是要坚决反对虎头蛇尾，反对繁文缛节，反对老
  • Day14: Spring代理大提速：深入JDK Proxy与CGLIB性能之战 —— 像赛车调校般优化你的动态代理 zhysunny Springjavaspring后端
    目录一、Spring代理车间：两种改装方案的选择1.1JDK动态代理的机械原理1.2CGLIB的暴力改装方案二、性能对决场：实测数据说话2.1启动速度对比测试2.2运行时性能较量三、Spring的调校手册：ProxyFactory的优化策略3.1智能选型机制3.2缓存优化机制四、调优实战技巧：赛车工程师的秘籍4.1强制指定代理类型4.2启动加速黑科技五、源码层级调校：FastClass的秘密5.1
  • JavaScript设计模式之状态模式 27亿光年中的小小尘埃
    什么是状态模式？状态模式是一种非同寻常的优秀模式，它也许是解决某些需求场景的最好方法。虽然状态模式并不是一种简单到一目了然的模式（它往往还会带来代码量的增加），但你一旦明白了状态模式的精髓，以后一定会感谢它带给你的无与伦比的好处。状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。初识状态模式我们来想象这样一个场景：有一个电灯，电灯上面只有一个开关。当电灯开着的时候，此
  • vue2 面试题及详细答案150道（121 - 130）
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录121.Vue2中如何实现组件的动态样式绑定？122.Vue2中如何处理跨域请求
  • 车载通信架构 --- DoIP协议通信 汽车电子实验室 车载DoIP协议总览架构电子电气架构电气电子架构开发的应对策略开发语言ECU刷写与busoff原则
    我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：钝感力的“钝”，不是木讷、迟钝，而是直面困境的韧劲和耐力，是面对外界噪音的通透淡然。生活中有两种人，一种人格外在意别人的眼光;另一种人无论别人如何，他们始终有自己的节奏。过度关注别人的看法，会搅乱自己的步调，让自己更加慌乱。与其把情绪的开关交到别人手中，不如把有限的精力用在提升自己上
  • Python PyV8: 在Python中运行JavaScript的利器 莱财一哥
    本文还有配套的精品资源，点击获取简介：PythonPyV8是一个在Python环境中执行JavaScript代码的库，基于Google的V8JavaScript引擎，实现Python与JavaScript之间的互操作性。本文将详细讨论PyV8的安装方法，包括通过pip安装和自行编译安装特定版本的步骤，以及如何在Python程序中使用PyV8执行JavaScript代码。1.PythonPyV8库介
  • 无与谁在一起，请记住这几句话 祉言心语
    好文摘录有一位少年去拜访一位年长的智者，他问智者：“如何才能变成一个自己快乐，也能给别人带去快乐的人？”智者笑了笑，回答：“无我；慈悲；智慧；自在。”何为“无我”？无我就是——要把自己当成别人。何为“慈悲”？慈悲就是——要把别人当成自己。何为“智慧”？智慧就是——要把别人当成别人。何为“自在”？自在就是——要把自己当成自己。把自己当成别人有个关于烂面条的故事，曾经刷爆了朋友圈。一对老夫妻，相濡以沫
  • wap页面和html5,WAP网站、3G网站、html5触屏版有什么区别？
    目前手机上的网站主要就分为WAP格式和3G格式，从脚本语言来讲，我们通常喜欢说用WML开发的网站就是WAP网站，用XHTML开发的网上3G网站。WML是当初专门为2.5G时代开发的一个脚本，他的功能挺简单的，页面形式呢主要是文字居多，因为那个时候的网速带宽还有机型的限制，所以WAP网站不能用CSS，字体颜色也只有普通文字的黑色和链接文字的蓝色，至于页面背景什么的是不能设置的。3G网站，也就是我们所
  • html5这什么意思,html5是什么意思？html5和html的区别介绍 wiles super html5这什么意思
    一、HTML5是什么？HTML5是HyperTextMarkupLanguage5的缩写，HTML5是超文本标记语言的最新版本，也就是描述网页的代码，html5实际上是三种代码形式，首先是HTML提供结构，其次是层叠样式表(CSS)负责网站的样式和布局，最后是JavaScript是给网站添加动态功能。二、html5和html的区别1、定义上区别HTML5是应用超文本标记语言(HTML)的第五次修改
  • HTML和HTML5的区别 半生凉忆 htmlhtml5
    HTML和HTML5的区别什么是HTML？HTML全称为超文本标记语言(HyperTextMarkupLanguage)，它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。什么是HTML5?HTML5是HTML的第五个版本，HTML5已经远远超越了标记语言的范畴，它的设计目的是在移动设备上支持多媒体，和HTML比起来，深度和广度上都做了进一步
  • 精选好文//朗读小队日报（带音频） 2021.7.6之一 结子青莲
    时间：2021.7.6日晚8点朗读者：知心爱人朗读文章：《梦回大宋朝》文章作者：离九思作者少年时代由于受评书、戏曲和电视剧的影响，宋代在她的眼中，是一个颠倒黑白、忠奸混淆的暗黑时代。无论是含冤屈死的岳飛、罢官而终的狄青，殒身殉国的杨业、从容就义的文天祥，似乎都难以善终。而臭名昭著如蔡京、童贯、秦桧、梁师成、贾似道等却能升官发财权势滔天。以邪压正成为两宋的常态。随着时光荏苒，大学时代再看宋代，看到的
  • 如何在HTML5页面中嵌入视频
    在HTML5中嵌入视频主要使用标签，这是一种简单且标准的方式。以下是详细步骤和示例：基础实现视频嵌入示例您的浏览器不支持HTML5视频标签。核心属性说明controls添加播放控件（播放/暂停、进度条、音量等）width和height设置播放器尺寸（单位：像素）标签提供多个视频格式源以提高兼容性（浏览器会选择第一个支持的格式）：MP4(H.264)-兼容性最好WebM-开源格式，Chrome/Fi
  • Python爬虫实战：高效提取与解析JSON格式数据 Python爬虫项目 python爬虫宽度优先数据库json深度优先开发语言
    1.JSON数据爬取概述在当今互联网时代，JSON(JavaScriptObjectNotation)已成为最流行的数据交换格式之一。相比传统的HTML页面，JSON格式数据具有结构清晰、体积小、解析方便等优势，使得它成为API接口的首选数据格式。1.1为什么选择JSON数据爬取数据结构化：JSON数据本身就是结构化的，不需要像HTML那样进行复杂的解析传输高效：JSON通常比HTML体积小，传输
  • Spring - BeanFactory 和 ApplicationContext 有什么区别 撸帝
    学习完整课程请移步互联网Java全栈工程师BeanFactory可以理解为含有bean集合的工厂类。BeanFactory包含了种bean的定义，以便在接收到客户端请求时将对应的bean实例化。BeanFactory还能在实例化对象的时生成协作类之间的关系。此举将bean自身与bean客户端的配置中解放出来。BeanFactory还包含了bean生命周期的控制，调用客户端的初始化方法（initia
  • 漂亮是被爱的前提吗？ 小愿望
    被爱的前提是爱自己漂亮很重要但活出自己去爱自己才是根本如果你自己都不爱自己还会指望着谁去爱你呢？有人会说母爱是无私，父爱是伟大的。但这世上不配为人父母的太多太多了，我们能获得父母的爱已经是世界上极少的幸运了。试想一下那些没有被父母爱着的那些人，又会是什么滋味呢？不是所有人都有能力去爱别人的。你至少要经过懵懵懂懂的幼年、少年甚至有些人的一辈子去明白爱、懂得爱、学会爱。才能值得，去得到别人真正的爱。如
  • 痛苦与不甘，也许是通往成功殿堂的钥匙(八十一) 风之舞555
    十年前，一个巴西人背起了小他七岁的阿根廷少年，恣意地向诺坎普球场的10万球迷分享的他的喜悦；十年后，曾经那个青涩的阿根廷少年已经成为这里新的主人，他身着巴西人留下的10号球衣，背起了小他五岁的巴西人。这就是传承，这就是体育赛场上的传承！在梅西内心里，非常想把当年小罗对待自己的故事在内马尔身上重演。而随着2014年夏天乌拉圭人苏亚雷斯加盟巴萨，巴萨一条全新的锋线组合正式成形。这条大杀四方、威震赛场的
  • 2025年前端 Vue 开发工程师完整技术路线 Mr.小海 前端vue.jsjavascript前端框架html5node.js正则表达式
    文章目录前端Vue开发工程师完整技术路线一、基础阶段（入门级）1.基础语言与工具2.Vue3基础3.实践项目二、进阶阶段（中级）1.Vue深度掌握2.工具链与工程化3.网络请求与接口联调4.实践项目三、高级阶段（专家级）1.高级Vue技术2.性能与安全优化3.微前端与架构设计4.实践项目四、资深阶段（架构师/技术负责人）1.技术领导力2.行业深度3.工具链与自动化4.实践项目五、技术栈总结六、建议
  • 【基础篇】Docker 容器操作 FOUR JAVA和人工智能 持续集成：Docker篇docker
    嘿，小伙伴们！我是小竹笋，一名热爱创作的工程师。在上一篇文章中，我们探讨了Docker镜像管理的相关知识。今天，让我们一起深入了解一下Docker容器的操作吧！运行、停止和删除容器Docker容器就像是虚拟化的“乐高积木”，你可以轻松地构建、运行和销毁它们。下面我们来看看如何管理这些容器。运行容器:使用dockerrun命令来启动一个容器。•示例:dockerrun-d-p8080:80nginx
  • JS 表达式和操作符-解构 坚定的小辣鸡在努力 前端javascript开发语言
    JavaScript的解构（Destructuring）语法是一种从数组或对象中快速提取值并赋值给变量的方式。它能让代码更简洁、清晰，常用于函数参数、变量赋值等场景。ThedestructuringsyntaxinJavaScriptisapowerfulfeaturethatmakesitpossibletounpackvaluesfromarraysorpropertiesfromobject
  • Web开发 03
    今天在学习JavaScript，我其实需要很多练习才可以巩固一点！需要更多！1const用于声明常量的规则在JavaScript中，const用于声明常量，其核心规则是：声明时【必须】同时初始化（赋值），且后续无法重新赋值。关键知识点拆解const声明规则用const声明变量时，必须直接赋初始值，否则会触发SyntaxError:Missinginitializerinconstdeclarati
  • Web开发 02 im_AMBER 前端学习
    今天梳理出的HTML+CSS核心知识点，涵盖基础结构、布局、样式优化等实用技巧：总结1一、HTML核心知识1.基础结构文档声明：定义文档为HTML5标准。基本标签：：根元素，包裹整个页面。：元数据（标题、样式、脚本等），不显示在页面。：设置网页标题（浏览器标签显示）。：页面内容容器，所有可见内容写在这里。2.常用标签文本与标题：~：标题标签，自动加粗且有默认层级样式。：段落标签，默认有上下边距。图
  • 二分查找排序算法 周凡杨 java二分查找排序算法折半
    一：概念 二分查找又称 折半查找（ 折半搜索/ 二分搜索），优点是比较次数少，查找速度快，平均性能好；其缺点是要求待查表为有序表，且插入删除困难。因此，折半查找方法适用于不经常变动而 查找频繁的有序列表。首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表 分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步
  • java中的BigDecimal bijian1013 javaBigDecimal
            在项目开发过程中出现精度丢失问题，查资料用BigDecimal解决，并发现如下这篇BigDecimal的解决问题的思路和方法很值得学习，特转载。         原文地址：http://blog.csdn.net/ugg/article/de
  • Shell echo命令详解 daizj echoshell
    Shell echo命令 Shell 的 echo 指令与 PHP 的 echo 指令类似，都是用于字符串的输出。命令格式： echo string 您可以使用echo实现更复杂的输出格式控制。 1.显示普通字符串: echo "It is a test" 这里的双引号完全可以省略，以下命令与上面实例效果一致： echo Itis a test 2.显示转义
  • Oracle DBA 简单操作 周凡杨 oracle dba sql
    --执行次数多的SQL select sql_text,executions from (      select sql_text,executions from v$sqlarea order by executions desc      ) where rownum<81;  &nb
  • 画图重绘 朱辉辉33 游戏
      我第一次接触重绘是编写五子棋小游戏的时候，因为游戏里的棋盘是用线绘制的，而这些东西并不在系统自带的重绘里，所以在移动窗体时，棋盘并不会重绘出来。所以我们要重写系统的重绘方法。   在重写系统重绘方法时，我们要注意一定要调用父类的重绘方法，即加上super.paint(g)，因为如果不调用父类的重绘方式，重写后会把父类的重绘覆盖掉，而父类的重绘方法是绘制画布，这样就导致我们
  • 线程之初体验 西蜀石兰 线程
    一直觉得多线程是学Java的一个分水岭，懂多线程才算入门。 之前看《编程思想》的多线程章节，看的云里雾里，知道线程类有哪几个方法，却依旧不知道线程到底是什么？书上都写线程是进程的模块，共享线程的资源，可是这跟多线程编程有毛线的关系，呜呜。。。 线程其实也是用户自定义的任务，不要过多的强调线程的属性，而忽略了线程最基本的属性。 你可以在线程类的run()方法中定义自己的任务，就跟正常的Ja
  • linux集群互相免登陆配置 林鹤霄 linux
    配置ssh免登陆 1、生成秘钥和公钥    ssh-keygen -t rsa 2、提示让你输入，什么都不输，三次回车之后会在~下面的.ssh文件夹中多出两个文件id_rsa 和 id_rsa.pub    其中id_rsa为秘钥，id_rsa.pub为公钥，使用公钥加密的数据只有私钥才能对这些数据解密    c
  • mysql : Lock wait timeout exceeded; try restarting transaction aigo mysql
    原文：http://www.cnblogs.com/freeliver54/archive/2010/09/30/1839042.html   原因是你使用的InnoDB   表类型的时候, 默认参数:innodb_lock_wait_timeout设置锁等待的时间是50s, 因为有的锁等待超过了这个时间,所以抱错.   你可以把这个时间加长,或者优化存储
  • Socket编程 基本的聊天实现。 alleni123 socket
    public class Server { //用来存储所有连接上来的客户 private List<ServerThread> clients; public static void main(String[] args) { Server s = new Server(); s.startServer(9988); } publi
  • 多线程监听器事件模式(一个简单的例子) 百合不是茶 线程监听模式
        多线程的事件监听器模式   监听器时间模式经常与多线程使用,在多线程中如何知道我的线程正在执行那什么内容,可以通过时间监听器模式得到        创建多线程的事件监听器模式 思路:    1, 创建线程并启动,在创建线程的位置设置一个标记     2,创建队
  • spring InitializingBean接口 bijian1013 javaspring
    spring的事务的TransactionTemplate，其源码如下： public class TransactionTemplate extends DefaultTransactionDefinition implements TransactionOperations, InitializingBean{ ... } TransactionTemplate继承了DefaultT
  • Oracle中询表的权限被授予给了哪些用户 bijian1013 oracle数据库权限
            Oracle查询表将权限赋给了哪些用户的SQL，以备查用。 select t.table_name as "表名", t.grantee as "被授权的属组", t.owner as "对象所在的属组"
  • 【Struts2五】Struts2 参数传值 bit1129 struts2
    Struts2中参数传值的3种情况 1.请求参数绑定到Action的实例字段上 2.Action将值传递到转发的视图上 3.Action将值传递到重定向的视图上   一、请求参数绑定到Action的实例字段上以及Action将值传递到转发的视图上 Struts可以自动将请求URL中的请求参数或者表单提交的参数绑定到Action定义的实例字段上，绑定的规则使用ognl表达式语言
  • 【Kafka十四】关于auto.offset.reset[Q/A] bit1129 kafka
    I got serveral questions about  auto.offset.reset. This configuration parameter governs how  consumer read the message from  Kafka when  there is no initial offset in ZooKeeper or
  • nginx gzip压缩配置 ronin47 nginx gzip 压缩范例
    nginx gzip压缩配置 更多 0 nginx gzip 配置   随着nginx的发展，越来越多的网站使用nginx，因此nginx的优化变得越来越重要，今天我们来看看nginx的gzip压缩到底是怎么压缩的呢？ gzip(GNU-ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用
  • java-13.输入一个单向链表，输出该链表中倒数第 k 个节点 bylijinnan java
    two cursors. Make the first cursor go K steps first. /* * 第 13 题：题目：输入一个单向链表，输出该链表中倒数第 k 个节点 */ public void displayKthItemsBackWard(ListNode head,int k){ ListNode p1=head,p2=head;
  • Spring源码学习-JdbcTemplate queryForObject bylijinnan javaspring
    JdbcTemplate中有两个可能会混淆的queryForObject方法： 1. Object queryForObject(String sql, Object[] args, Class requiredType) 2. Object queryForObject(String sql, Object[] args, RowMapper rowMapper) 第1个方法是只查
  • [冰川时代]在冰川时代,我们需要什么样的技术? comsci 技术
         看美国那边的气候情况....我有个感觉...是不是要进入小冰期了?      那么在小冰期里面...我们的户外活动肯定会出现很多问题...在室内呆着的情况会非常多...怎么在室内呆着而不发闷...怎么用最低的电力保证室内的温度.....这都需要技术手段...   &nb
  • js 获取浏览器型号 cuityang js浏览器
    根据浏览器获取iphone和apk的下载地址 <!DOCTYPE html> <html> <head>     <meta charset="utf-8" content="text/html"/>     <meta name=
  • C# socks5详解 转 dalan_123 socketC#
    http://www.cnblogs.com/zhujiechang/archive/2008/10/21/1316308.html  这里主要讲的是用.NET实现基于Socket5下面的代理协议进行客户端的通讯，Socket4的实现是类似的，注意的事，这里不是讲用C#实现一个代理服务器，因为实现一个代理服务器需要实现很多协议，头大，而且现在市面上有很多现成的代理服务器用，性能又好，
  • 运维 Centos问题汇总 dcj3sjt126com 云主机
    一、sh 脚本不执行的原因 sh脚本不执行的原因 只有2个 1.权限不够 2.sh脚本里路径没写完整。   二、解决You have new mail in /var/spool/mail/root 修改/usr/share/logwatch/default.conf/logwatch.conf配置文件 MailTo = MailFrom   三、查询连接数
  • Yii防注入攻击笔记 dcj3sjt126com sqlWEB安全yii
    网站表单有注入漏洞须对所有用户输入的内容进行个过滤和检查，可以使用正则表达式或者直接输入字符判断，大部分是只允许输入字母和数字的，其它字符度不允许；对于内容复杂表单的内容，应该对html和script的符号进行转义替换：尤其是<,>,',"",&这几个符号 这里有个转义对照表： http://blog.csdn.net/xinzhu1990/articl
  • MongoDB简介[一] eksliang mongodbMongoDB简介
    MongoDB简介 转载请出自出处：http://eksliang.iteye.com/blog/2173288 1.1易于使用        MongoDB是一个面向文档的数据库，而不是关系型数据库。与关系型数据库相比，面向文档的数据库不再有行的概念，取而代之的是更为灵活的“文档”模型。        另外，不
  • zookeeper windows 入门安装和测试 greemranqq zookeeper安装分布式
    一、序言       以下是我对zookeeper 的一些理解：      zookeeper 作为一个服务注册信息存储的管理工具，好吧，这样说得很抽象，我们举个“栗子”。       栗子1号：       假设我是一家KTV的老板，我同时拥有5家KTV，我肯定得时刻监视
  • Spring之使用事务缘由(2-注解实现) ihuning spring
      Spring事务注解实现   1. 依赖包：     1.1 spring包：           spring-beans-4.0.0.RELEASE.jar           spring-context-4.0.0.
  • iOS App Launch Option 啸笑天 option
    iOS 程序启动时总会调用application:didFinishLaunchingWithOptions:，其中第二个参数launchOptions为NSDictionary类型的对象，里面存储有此程序启动的原因。   launchOptions中的可能键值见UIApplication Class Reference的Launch Options Keys节 。 1、若用户直接
  • jdk与jre的区别（_） macroli javajvmjdk
    简单的说JDK是面向开发人员使用的SDK，它提供了Java的开发环境和运行环境。SDK是Software Development Kit 一般指软件开发包，可以包括函数库、编译程序等。  JDK就是Java Development Kit JRE是Java Runtime Enviroment是指Java的运行环境，是面向Java程序的使用者，而不是开发者。 如果安装了JDK，会发同你
  • Updates were rejected because the tip of your current branch is behind qiaolevip 学习永无止境每天进步一点点众观千象git
    $ git push joe prod-2295-1 To [email protected]:joe.le/dr-frontend.git ! [rejected] prod-2295-1 -> prod-2295-1 (non-fast-forward) error: failed to push some refs to '[email protected]
  • [一起学Hive]之十四-Hive的元数据表结构详解 superlxw1234 hivehive元数据结构
    关键字：Hive元数据、Hive元数据表结构   之前在 “[一起学Hive]之一–Hive概述，Hive是什么”中介绍过，Hive自己维护了一套元数据，用户通过HQL查询时候，Hive首先需要结合元数据，将HQL翻译成MapReduce去执行。 本文介绍一下Hive元数据中重要的一些表结构及用途，以Hive0.13为例。   文章最后面，会以一个示例来全面了解一下，
  • Spring 3.2.14，4.1.7，4.2.RC2发布 wiselyman Spring 3
      Spring 3.2.14、4.1.7及4.2.RC2于6月30日发布。   其中Spring 3.2.1是一个维护版本(维护周期到2016-12-31截止)，后续会继续根据需求和bug发布维护版本。此时，Spring官方强烈建议升级Spring框架至4.1.7 或者将要发布的4.2 。   其中Spring 4.1.7主要包含这些更新内容。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他