canvas元素只是为了充当绘图环境对象的容器而存在的,该环境对象提供了全部的绘图功能。常见的绘图环境就是2d绘图环境和3d绘图环境。
DOM是HTML文档的编程接口。它提供了对文档结构化的表达,并且定义了一种方式可以从程序中对该结构进行访问,从而改变文档
这篇涉及到HTML DOM的节点类型、节点层级关系、DOM对象的继承关系、操作DOM节点和HTML元素还用到HTML5
input标签作为页面与用户交互的重要入口,了解掌握input的属性,至为重要。
canvas,就是画布,是HTML5和核心技术之一,结合JavaScript,可以绘制各种各样的图形,比如矩形、曲线、圆形等等。另外,canvas可以绘制图表、动画效果、游戏开发。基本图形汇中有直线和曲线。常见的直线图形是直线、矩形和多边形。
css的基本原理
效果图:代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
原图:grayscale滤镜(灰度滤镜)彩色图片通过滤镜实现图片转变灰色.sub02{ width: 330px; float: right; background: grey; filter: grayscale(80%); -webkit-filter: grayscale(80%); -moz-filter:grayscale(80%); heigh
如图:代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
给文字添加阴影语法:text-shadow:length(x) length(y) length(r) color;length(x):表示阴影在横向上与文字的距离;length(y):表示阴影在纵向上与文字的距离;length®:表示阴影模糊半径大小color:阴影的颜色如果需要添加多个颜色的话:text-shadow:20px 20px 20px red, 30px 30
浏览器的内核分成两个部分,一个渲染引擎,另一个是JS引擎。不同的浏览器的渲染引擎不同(不同的浏览的内核不同)。浏览器工作的流程:1)浏览器解析内容:HTML/SVG/XHTML,解析这三种文件会生成一个DOM Tree(DOM 树)CSS,解析CSS,产生了CSS规则树JavaScript脚本,主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree。2)解析
一个页面由基本结构体构成:框架、模块、原件。 框架:是构成页面的基础结构,是页面的骨架。框架就可以描述出一个页面的基本轮廓了。如:index.html最外围有一个div(.g-index),页头(.g-hd),主体(.g-bd)。页脚(.g-ft) 模块:是页面上数量最多的,也是最重要的一部分,是代码复用的主体部分,模块就是按照功能划分的,如:导航栏、轮播图、登录窗口等。模块之
存储数据: window.localStorage.setItem('key', score1); window.localStorage.setItem('key1', zhi1); window.localStorage.setItem('key2', zhi2); window.localSto...
</body>) &l...
<!doctype html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>展云</title> <meta name="keywords" content="关键...
span 标签: <span> 标签被用来组合文档中的行内元素。 注:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化 <p><span>span标签:</span>... ... ...</p> 运行如下:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化...
1、p标签里面一般用span 2、span一般用于替换内容,span标签只有在样式下,才会产生视觉上的变化 3、要改变P标签里的某句话的样式 4、p 标签定义段落 5、p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。 段落标签属性:<p></p> <p align="left" (左对齐
表格 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。 字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等 语法 <table border="1"> <tr>
<select>标签: select 元素可创建单选或多选菜单 注:当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项 将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name 属性 语法如下: <form> <select name="" id=""> <option value="1"&
表单的动作属性(Action)和确认按钮 HTML标签 - Action和确认按钮: 当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。 由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。 语法如下: <form action="html.do" method="get"> user
ol有序列表 HTML标签 - 有序列表: start属性:改变开始值(如start='10',则序号从10开始) reserved属性:reversed="reversed" 从html5开始 序号倒序排列 和无序列表一样,有序列表是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签; 每个列表项始于 <li> 标签(列表项内部可...
弹性布局可以简洁、完整、响应式的实现各种页面布局。Flexbox主要功能:屏幕和浏览器窗口大小变化也可以灵活调整布局指定伸缩元素沿着主轴或者侧轴,按照一定比例分配额外的空间,调整伸缩元素的大小指定伸缩元素沿着主轴或者侧轴,把伸缩元素额外空间分配到伸缩元素之前、之后和之间控制元素在页面上的布局方向指定如何将垂直于元素布局轴的额外空间分配到该元素的周边按照不同文档对象模型(DOM),指定排序方式对屏幕
父元素没有固定宽高水平垂直居中html: <div class="wrapper"> <div class="info"> 垂直居中 </div> </div>css://绝对定位水平垂直居中,方法1.info { position: absolute; width: 500
语法@media 设备类型 and (设备特性){样式}制定设备的值设备类型all所有设备screen电脑显示器print打印用纸或者打印预览视图handheld便携设备tv电视类型设备speech语音和音频合成器braille盲人用点字法触觉回馈设备embossed盲文打印机projection各种投影设备tty使用固定密度字母删格的媒介,比如电打字机和终端css中13中设备特性:特性特性值使
background-color:transparent;
CSS3选择器分类css3常见常用的选择器选择器类型说明*通配选择器选择文档中所有的HTMl元素E元素选择器选择指定类型的HTMl元素...
背景的 基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示的方式)background-attachment(背景图片滚动还是固定)background-position(背景图片定位)简写为:background: background-color background-image b...
Canvas基础知识:Canvas属于行内元素,使用Canvas绘制图形步骤:1、获取Canvas对象2、获取上下文环境对象context。3、开始绘制图形在Canvas对象中常用属性属性 说明 width Canvas的宽度 height Canvas的高度 Canvas常用的方法属性 说明 getContext("2d") ...
采用CSS实现元素隐藏的方法有很多种,比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。元素样式设置为display:none当元素样式设置为display:none时,则该元素和它的子元素都会隐藏,不占据文档流(就是元素原本占据的空间会释放出来)。给元素样式设置display:none<div class...
在PC端,视口指的是浏览器的可视区域,其宽度和浏览器的宽度一致,在css标准文档中,视口是所有CSS百分比宽度计算基础,为CSS布局限制了一个最大的宽度。viewport在移动端是一个很重要的概念,涉及到三个视口:布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)。常见的设置如下:<meta name="v...
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号