HTML+CSS+JavaScript
文章平均质量分 59
HTML+CSS+JavaScript
漂流の少年
stay hungry, stay foolish.
展开
-
HTML5+CSS3目录
1.HTML5基础2.HTML5新增元素3.HTML5表单4.HTML5绘图5.在canvas中使用图像6.canvas像素操作7.HTML5音频和视频设计小球运动动画设计地球和月球公转动画8.CSS3选择器设计排行榜栏目列表样式点击超链接跳转到指定标题,并高亮显示设计表单样式9.CSS3文本模块+色彩模式...原创 2021-07-07 10:44:28 · 158 阅读 · 0 评论 -
JavaScript学习目录
1.认识JavaScript原创 2021-07-24 19:18:17 · 513 阅读 · 1 评论 -
设计地球和月球公转动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id="canvas" width="300" height="300"></canvas> <script>原创 2021-05-07 15:32:25 · 368 阅读 · 1 评论 -
设计一个视频播放器
视频播放器的功能:利用HTML+CSS制作一个播放控制条,放在视频最下方视频加载loading效果显示视频总时长和当前播放时长播放,暂停显示播放进度条可以全屏显示原创 2021-06-06 11:38:12 · 170 阅读 · 0 评论 -
canvas像素操作
1.ImageData对象ImageData对象表示图像数据,存储canvas对象真实的像素数据属性width:返回ImageData对象的宽度,单位:像素height:返回ImageData对象的高度,单位:像素data:返回一个对象,包含指定ImageData对象的图像数据图像数据是一个数组,包含RGBA格式的整型数据,范围值0-255,每个像素用4个值来表示,分别是红、绿、蓝、透明值。对于透明值,0是透明,255是完全可见数组格式:[r1,g1,b1,a1,r2,g2,b2原创 2021-07-02 10:41:15 · 183 阅读 · 0 评论 -
设计表单样式
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>设计表单样式</title> <style> form { padding: 1em 2em 0 2em; /*内边距:上 右 下 左*/ font-size: 12px; } ...原创 2021-06-29 00:14:42 · 203 阅读 · 0 评论 -
点击超链接跳转到指定标题,并高亮显示
display:block解释链接 a 元素,在默认情况下是是“行内元素”,因此对a元素设置高度、宽度等属性,都是无效的。而比如div,p,li,img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样:display:block;强制将它改成块元素...原创 2021-06-21 00:31:41 · 1326 阅读 · 0 评论 -
设计小球运动动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>小球运动</title> <style> #canvas{ border: solid 3px brown; } </style> &l原创 2021-04-30 23:06:57 · 349 阅读 · 1 评论 -
设计排行榜栏目列表样式
结构伪类主要包括以下几种:first-child 第一个子元素:last-child 最后一个子元素:nth-child() 按正序匹配特定子元素:nth-last-child() 按倒序匹配特定子元素:nth-of-type() 在同类型中匹配特定子元素:nth-last-of-type() 按倒序在同类型中匹配特定子元素:first-of-type 第一个同类型子元素:last-of-type 最后一个同类型子元素:only-child 唯一子元素:only-of-type原创 2021-06-18 21:44:28 · 395 阅读 · 0 评论 -
HTML5新增元素
新增结构化元素article:文章块section:区块,如章节、页眉、页脚nav: 导航条aside: 辅助栏main:主要区域,主要内容header: 页眉,页面标题栏hgroup: 标题组footer: 页脚栏(脚注)新增语义信息address: 联系信息,如作者,电子邮箱、地址time: 显示时间figure: 流媒体,如图像,图表,照片figcaption:表示figure元素的标题,一个figure元素内只能有一个details: 详细原创 2021-06-29 23:33:53 · 1763 阅读 · 0 评论 -
CSS3文本模块+色彩模式
1.文本溢出text-overflow属性,适用于块状元素取值clip:当内容溢出时,将溢出部分裁剪掉,为默认值ellipsis:当内容溢出时,将溢出部分替换为(...)目前W3C规范放弃了对该属性的支持2.文本换行word-break属性取值normal:默认值,允许亚洲语言和非亚洲语言字内换行keep-all:对于中文、韩文、日文不允许字断开break-all:和normal相同,允许非亚洲语言文本行的任意字内断开。3.书写模式...原创 2021-07-04 12:15:05 · 186 阅读 · 0 评论 -
HTML5绘图
1.canvas标签html5新增了canvas标签使用canvas<canvas id=”myCanvas”width=”200”height=”100”></canvas>在js中用getContext()方法获取画布的上下文,以获取允许进行绘制的2D环境var c=document.getElementById(“myCanvas”);var context=c.getContext(“2d”);2.绘制矩形canvas仅提供一种原生的图形...原创 2021-06-30 21:49:05 · 1756 阅读 · 0 评论 -
script标签到底该放在哪里
一般script标签会被放在头部或尾部头部就是<head>里面,但是将script放在头部,会让网页内容呈现滞后,导致用户感觉到卡。尾部一般指将script放在<body>里,浏览器解析HTML,发现script标签时,会先下载完所有这些script,再往下解析其他的HTML。将script放在尾部,优点是能加速网页加载。缺点:是浏览器只能先解析完整个HTML页面,再下载JS。而对于一些高度依赖于JS的网页,就会显得慢了。所以将script放在尾部也不是最优解,最优解是一边解析转载 2021-04-30 14:05:16 · 7103 阅读 · 0 评论 -
HTML5音频和视频
HTML5新增了两个多媒体元素:audio和video原创 2021-06-30 23:48:19 · 128 阅读 · 0 评论 -
CSS3选择器
1.元素选择器* 选定所有对象 E 匹配所有同类标签 .className 类选择器 #IDName ID选择器 2.关系选择器E,F 分组选择器,同时匹配E和F E F 包含选择器,匹配所有被E包含的F元素 E>F 子选择器,匹配E的所有子元素F(第一代后代) E+F 相邻选择器,匹配紧贴在E之后的F。E和F需属同一个父级 E~F 兄弟选择器,匹配紧贴在E之后的所有F。E和F需属同一个父原创 2021-07-04 11:14:30 · 77 阅读 · 0 评论 -
HTML5表单
1.HTML表单特性①新的控件类型,如URL输入框、Email输入框<input type=”url”/><input type=”email”/>②日期选择器和颜色选择器借助相关框架,如Dojo、YUI等类库<input type=”date”/><input type=”color”/>③改进文件上传控件一个控件可以上传多个文件,自行规定上传文件的类型,甚至设定每个文件最大的大小④内建表单校验系统如必填项requ原创 2021-06-30 10:02:46 · 190 阅读 · 0 评论 -
在canvas中使用图像
在canvas中导入图像步骤①确定图像来源②使用drawImage()方法将图像绘制到canvas中var img=new Image(); //使用脚本创建一个新的image对象img.οnlοad=function(){ //使用onload事件一边装载图像,一边执行drawImage函数//此处放置drawImage的语句}img.src="...";drawImage(img,sx,sy,swidth,s...原创 2021-07-02 09:34:22 · 3873 阅读 · 0 评论 -
HTML5基础
1.什么是HTML?HTML 指的是超文本标记语言 (Hyper Text MarkupLanguage)是用来描述网页的一种语言不是一种编程语言,而是一种标记语言,使用标记标签(markup tag)来描述网页2.HTML5特性HTML5的文件扩展名仍然是.html或者.htm,内容类型仍然为text/html①化繁为简定义文档类型在 HTML 4.01 中<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w原创 2021-06-16 23:58:14 · 461 阅读 · 0 评论 -
js练习8 --- 事件处理程序、表单脚本
目录1.第一题某网页中,假设有一个按钮,请完成下列操作,需要考虑跨游览器的情况。1.当把鼠标移到按钮上,按钮的颜色会发生变化,移走后消失;2.假设按钮点击后发生动态的改变了网页的背景颜色,并且弹出游览器的版本信息;3.假设按钮点击后默认操作是访问南林官网,现在需要将其行为阻止。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>&l.原创 2022-05-28 20:32:50 · 310 阅读 · 0 评论 -
js练习7 --- 操作样式表、节点树遍历、范围的选择和操作
JS原创 2022-05-28 20:27:00 · 244 阅读 · 0 评论 -
JS中的表单脚本
JS表单脚本原创 2022-05-28 21:45:39 · 380 阅读 · 0 评论 -
JS中的引用类型
目录1.Object创建 Object 的实例有两种方式。//使用new操作符let person = new Object();person.name = "Nicholas";person.age = 29;// 对象字面量let person = { name: "Nicholas", age: 29};访问对象属性:点语法或中括号,有的时候必须要用中括号(属性名中包含可能会导致语法错误的字符,或者包含关键字/保留字)person["first n.原创 2022-05-28 10:42:12 · 1125 阅读 · 0 评论 -
JS面向对象编程
JS面向对象编程原创 2022-05-28 00:18:40 · 200 阅读 · 0 评论 -
JS中的事件
JS事件原创 2022-05-27 13:05:56 · 194 阅读 · 0 评论 -
BOM(浏览器对象模型)
JS、BOM原创 2022-05-25 15:09:23 · 674 阅读 · 0 评论 -
DOM(文档对象模型)
JS,DOM原创 2022-05-23 14:39:39 · 473 阅读 · 0 评论 -
js练习6 --- DOM文本节点的操作、动态脚本、动态样式、操作表格
js原创 2022-05-20 22:43:51 · 242 阅读 · 0 评论 -
js练习5 --- DOM结点操作
js原创 2022-05-20 22:37:55 · 342 阅读 · 0 评论 -
js练习4 --- 对象继承、setTimeout、setInterval
第一题已知父对象Student,其属性有id,name,class,age,hobbies,方法showHobbies()和addHobbies()。请使用原型链,借用构造函数,组合继承三种方式创建对象UnderGraduate,其继承父对象的属性和方法,并增加属性university,major和方法showInform()。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&原创 2022-05-06 19:37:43 · 355 阅读 · 0 评论 -
js练习3 --- 函数构造
javascript原创 2022-04-30 08:44:46 · 420 阅读 · 0 评论 -
js练习2 --- 日期、正则、prototype、字符串
第一题题目:创建一脚本显示当前时间和日期,并根据当前时间和日期计算出七天后的时间和日期。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body> <div id="cDate"></div> <div id="fDate"></div&g原创 2022-04-06 09:32:15 · 1055 阅读 · 0 评论 -
js练习1 --- 函数、数组
index.html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script src="./problem.js"></script></head><body></body></html>第一题题目:实现函数的重载。以Array数据类型的s原创 2022-04-06 09:22:45 · 365 阅读 · 0 评论 -
原生JS实现雪花飘落的效果
1.代码index.html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- 设置网站图标favicon --> <link rel="shortcut icon" href="favicon.ico" type="image/x-con" /> <title>❄雪❄</title></head><s原创 2022-02-22 00:20:16 · 734 阅读 · 0 评论 -
js中的运算符
目录+、-、*、/、%除法运算会丢失精度console.log(0.1 + 0.2)console.log(0.07 * 100)原创 2021-08-01 01:04:07 · 88 阅读 · 0 评论 -
认识JavaScript
1.JavaScript是什么JavaScript是一种运行在客户端的脚本语言脚本语言:不需要编译,运行过程由js解释器(js引擎)逐行来进行解释和执行现在也可以基于node.js技术进行服务端编程HTML/CSS标记语言 - 描述类语言JS脚本语言 - 编程类语言2.JavaScript的作用表单动态验证(js最初的目的)网页特效服务端开发(node.js)桌面特效(Electron)App(Cordova)控制硬件-互联网(Ruff)游戏开发(coco原创 2021-07-24 18:02:38 · 610 阅读 · 0 评论