HTML 宝典
系统介绍整个 HTML 体系,全面涵盖 HTML4 和 HTML5, 让零基础web前端工程师从入门到完全精通 HTML。内容由浅入深,逐步深入。
ixygj197875
十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、Sass、Less、JavaScript、jQuery、JSON、Python、PHP、Bootstrap、Django等,著有《HTML宝典》、《揭秘CSS》、《Sass简明教程》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,多个开源项目托管在 GitHub。
展开
-
HTML5 保存画布
保存画布好不容易在画布中绘制出酷炫的图形,应该把它保存起来吧。但不幸的是,画布中的这些图形本身不是真正的图片,不能直接保存。不幸中的万幸,Canvas API提供了toDataURL()方法,可以把画布中的图形转换为图片。默认情况下,toDataURL()方法把图形转变成base64编码格式的png,然后返回Data URL数据。可以给toDataURL()传入MIME类型的参数,将画布转变成其它...原创 2018-04-25 22:00:37 · 1194 阅读 · 1 评论 -
JavaScript 存储Cookie
Cookiecookie是存储在客户端的计算机中的少量数据,如果服务器需要记录该用户状态,就向客户端浏览器颁发一个cookie,客户端浏览器会把cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该cookie提交给服务器。服务器检查该cookie,以此来辨认用户状态。服务器可以保存、读取、修改、删除cookie的内容。操作cookie的API很早就已经定义并实现,但是,由于这些A...原创 2018-04-25 22:01:53 · 795 阅读 · 0 评论 -
HTML5 Canvas中绘制矩形
绘制矩形上一节,我们使用lineTo()方法绘制一个封闭的矩形。其实,canvas的API提供了rect()方法可以绘制矩形。rect()方法是路径方法,它会把指定的矩形添加到当前路径的子路径中。它只添加路径,绘制图形还是由stroke()或fill()方法完成。除了rect()方法之外,Canvas 的API还提供了三个直接处理矩形的方法:fillRect(x, y, width, height...原创 2018-04-22 21:50:42 · 3798 阅读 · 0 评论 -
HTML5 Canvas中 绘制圆弧
绘制圆弧圆弧被定义为假想的圆周上任意两点之间的部分。Canvas的API提供了两个绘制圆弧的方法:arc()和arcTo()方法。arc()方法使用arc()方法绘制圆弧时,假想的圆由圆心和半径来定义,两个点由起始角度和结束角度来定义,还需要一个参数来定义绘制方向。故,arc()方法的格式为:arc(x, y, radius, startAngle, endAngle [, anticlockwi...原创 2018-04-22 21:51:33 · 13771 阅读 · 0 评论 -
HTML5 Canvas中绘制文本
绘制文本画布中不仅可以绘制图形,还可以绘制文本。绘制文本,既可以使用填充方法,也可以使用勾勒方法:fillText(text, x, y, [maxWidth]) strokeText(text, x, y, [maxWidth])表示在(x,y)的位置,绘制text的内容。可选参数maxWidth为文本的最大宽度,单位为像素。如果设置了该属性,当文本内容宽度超过该参数值,则...原创 2018-04-23 22:05:14 · 32149 阅读 · 0 评论 -
HTML5 Canvas中处理图像和视频
处理图像和视频除了绘制矢量图形和文本之外,canvas还提供了极为丰富的图像支持。开发者可以选择绘制某幅图像的全部或某个部分,在绘制时可以进行缩放或保持原样,可以把图像绘制到画布的任何地方。同时,还允许开发人员直接访问画布的像素数据。数据访问是双向的,既可以获取画布中的像素数据,也可以把像素重新绘制到画布中。Canvas的API提供了如下4个用于绘制及操作图像的方法:drawImage():把图像...原创 2018-04-23 22:05:59 · 5807 阅读 · 0 评论 -
HTML5 Canvas操作图像像素
操作图像像素如果要对图像进行进一步的处理,就可以先通过getImageData()方法获取图像像素,进行处理后再通过putImageData()方法,把处理后的像素重新绘制到画布中。1)getImageData()方法该方法用于获取画布上指定区域的图像像素数据。调用格式如下:var data = context.getImageData(sx, sy, sWidth, sHeight)其中,sx、...原创 2018-04-23 22:06:42 · 4972 阅读 · 0 评论 -
HTML5 Canvas中创建图像数据
创建图像数据如果想预先生成一组空的canvas数据,则可调用context.createImageData(sw, sh),这个函数可以创建一组图像数据并绑定在canvas对象上。这组数据可以像先前那样处理,只是在获取canves数据时,这组图像数据不一定会反映canvas的当前状态。关于作者歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuer...原创 2018-04-23 22:07:15 · 1124 阅读 · 0 评论 -
HTML5 装饰Canvas中图形
装饰图形Canvas为图形提供了一些默认样式,如线条、填充的默认颜色为黑色等。但是,这些默认样式无法满足所有用户的需求,也无法体现Canvas的灵活性,故Canvas为图形定义了一些属性,以便用户自定义图形的样式。线条的样式在绘制线段时,可以通过上下文对象的一些属性来控制线条的宽度、线条的颜色、线条连接点的样式、线帽样式等,各属性的含义见表 4‑2:表 4‑2 线条的样式属性及含义属性含义line...原创 2018-04-23 22:07:53 · 518 阅读 · 0 评论 -
HTML5 颜色及透明度
颜色及透明度在Canvas绘图时,可以通过绘制上下文的strokeStyle属性和fillStyle属性来设置图形的描边颜色和填充颜色。默认颜色为不透明的黑色。strokeStyle属性和fillStyle属性可以被设置为任意有效的CSS颜色字符串,可以使用颜色名称、十六进制RGB颜色、RGB、RGBA、HSL、HSLA颜色中的任意一种。在使用RGBA或HSLA颜色时,可以原创 2018-04-24 17:45:35 · 9102 阅读 · 0 评论 -
HTML5 渐变和图案
渐变和图案除了CCS颜色外,Canvas还支持渐变(CanvasGradient)和图案(CanvasPattern)。把strokeStyle和fillStyle属性设置为渐变或图案,就可以实现多样化的绘制效果。渐变在Canvas中,CanvasGradient对象表示一个颜色渐变。将画笔上下文对象的fillStyle或strokeStyle属性设置为一个CanvasGr原创 2018-04-24 17:46:33 · 2874 阅读 · 0 评论 -
HTML5 canvas 阴影
阴影在canvas中进行绘制时,不管是文本、图形、还是图像,也不管是描边还是填充,都可以通过设置上下文对象的相关属性,来为它们设置阴影。这些属性及含义见表 4‑4:表 4‑4 阴影的属性及含义属性含义shadowColor阴影的颜色,其默认值为完全透明的黑色。因此,如果没有把该属性设置为不透明,则阴影是不可见的。该属性只能原创 2018-04-24 17:47:35 · 2491 阅读 · 0 评论 -
HTML5 Canvas 裁剪区域
裁剪区域Canvas中的剪辑区域,是由路径所定义的一块区域,浏览器会把所有的绘图操作都限制在该区域内执行。Canvas中,使用clip()方法来设定剪辑区域,一旦设定好裁剪区域,则只有落在裁剪区域内的图形才能绘制出来,在裁剪区域以外进行绘制将没有任何效果。默认的剪辑区域是整个画布。由于剪辑区域是由路径所定义的区域,所以,必须先调用beginPath()方法绘制一个路径,然后原创 2018-04-24 17:48:30 · 5635 阅读 · 1 评论 -
HTML5 Canvas 图形组合
图形组合在canvas中绘制复杂图形时,经常会出现图形交叉的情况,canvas把图形交叉的情况称作组合。通过上下文对象的globalCompositeOperation属性来设置图形的组合方式,该属性的取值及其含义见表 4‑5。其中,source指新绘制的图形,而destination指原有的图形,默认值是source-over。表 4‑5 globalComposit原创 2018-04-24 17:49:18 · 1425 阅读 · 0 评论 -
HTML5 画布变换
画布变换Canvas中,默认的坐标系统是以画布的左上角为坐标原点(0, 0),水平向右为X轴,垂直向下为Y轴,以像素为单位。Canvas在坐标系统上的每个点,都与图形上的一个像素点相对应。如图 4‑30 所示:图4-30 Canvas的默认坐标系如果改变Canvas坐标系统的原点,图形也会随之发生改变。针对这一特点,可以通过变换坐标系统来间接操作图形,实现对图形的移动、缩放、旋转。Canvas的...原创 2018-04-25 21:58:19 · 676 阅读 · 0 评论 -
HTML5 Canvas save 保存恢复状态
保存恢复状态在绘画的时候,经常会有这种情况,本来正在用绿色笔画,突然需要用红色笔画几笔,但画完了之后又要换成绿色笔。如果是在现实中作画,可以把笔蘸上不同的墨水,画了之后又蘸上之前的墨水,或者准备几只笔,要用哪只就选哪只。在Canvas中也可以这样,不过Canvas中的画笔永远只有一只。所以,如果要更换画笔的颜色,就需要保存和恢复状态。状态其实就是画布当前属性的一个快照,包括:图形的属性值,如str...原创 2018-04-25 21:59:17 · 3047 阅读 · 0 评论 -
HTML5 绘制动画
绘制动画虽然canvas的API并未直接提供支持动画的方法,但就其本身而言,在canvas中实现动画效果也很简单:只需要持续的更新并重绘画布就行了。这种持续的更新并重绘就叫做动画循环,它是所有动画的核心逻辑。在canvas中实现动画,首先需要初始化画布上的对象。然后,启动一个动画循环来更新画布、清除画布、重绘画布,再请求下一个新的动画帧。Canvas动画的基本原理如图 4‑36 所示:图4-36 ...原创 2018-04-25 21:59:58 · 1058 阅读 · 0 评论 -
HTML autofocus
autofocusautofocus属性可以让页面加载完成后,就有一个表单元素自动获得焦点,这样用户就可以立即开始输入。autofocus属性是布尔类型属性,无需专门把它设置为 true,只需将它添加到标签中即可。如:User ID: 在任何时刻,只能有一个表单元素获得焦点。因此,一个页面上只允许有一个表单元素拥有 autofocus属性。如果有多个元素拥有 autofocu原创 2018-04-19 21:14:23 · 924 阅读 · 0 评论 -
HTML required
requiredrequired属性表明该控件为必填项。required特性可用于任何类型的输入元素。required属性是布尔类型属性,无需专门把它设置为true,只需将它添加到标签中即可。一个表单中,可以有多个元素拥有required属性。 for="userid">User ID: type="url" name="userid" id="userid" autofocus r原创 2018-04-19 21:15:34 · 5030 阅读 · 0 评论 -
HTML placeholder
placeholderplaceholder属性指定文本框的占位符,当用户还没有输入值的时候,向用户显示默认的描述性说明或提示信息,为用户填写表单提供提示和额外指导。基本的文本输入框, type 属性值为search、url、tel、email、number 的文本输入框,以及 textarea 等其他类型的文本输入框都支持 placeholder属性。 for="site">原创 2018-04-19 21:16:25 · 1146 阅读 · 0 评论 -
HTML pattern
patternpattern属性规定用于验证输入内容的正则表达式,要求用户必须按正则表达式的规则输入信息,防止输入错误。text、search、url、telephone、email、password等类型的文本输入框都支持pattern属性。如,这个文本框要求用户必须输入数字。 name="pattern" type="text" pattern="[0-9]"/>提交表单时原创 2018-04-19 21:17:03 · 3873 阅读 · 0 评论 -
HTML list
listlist属性为文本框指定一个可用的选项列表,当用户在文本框中输入信息时,会根据输入的字符,自动显示下拉列表提示,供用户从中选择。大多数输入类型都支持 list属性,list属性要跟一个 datalist元素结合使用,datalist元素用来定义一个选项列表。datalist元素自身不会显示在页面上,而是为其他元素的 list属性提供数据。当用户在文本框中输入信息时,原创 2018-04-19 21:17:57 · 6039 阅读 · 0 评论 -
HTML5 Canvas的基本用法
基本用法使用 标签在页面上创建画布元素,画布一旦创建,就可以使用Javascript提供的一套强大的Canvas API编写代码,在画布中绘制任意图形,甚至加入高级动画。在Canvas中绘制图形,一般需要五步,依次为:1)创建画布在HTML代码的body中,使用标签创建画布元素。创建时,要为该元素定义id属性,因为Javascript需要根据该id来获取画布元素。原创 2018-04-19 21:19:10 · 718 阅读 · 0 评论 -
HTML5 canvas中使用路径
如何使用路径在Canvas中绘图,其实就是先按照一定顺序定义一些坐标点,再通过指定的方式,用画笔将这些坐标点连接起来,就形成我们所需要的图形。Canvas中的所有基本图形,包括线段、矩形、圆弧、贝塞尔曲线等,都是基于路径进行绘制的。Canvas中,把从绘制起点到绘制终点所经过的这些点,就称为路径。一个路径可以包含多个子路径,子路径又是由两个或多个点组成。在某一时刻,canvas中只能有一条路径存在...原创 2018-04-22 21:47:21 · 2960 阅读 · 0 评论 -
HTML5 Canvas中绘制线段
绘制线段调用lineTo()方法绘制线段。lineTo(x, y)方法把当前点和lineTo()方法指定的点(x, y)用线段连接起来。如果要绘制多条线段,可以重复调用该方法。第一次调用,当前点为子路径的起点,以后每次调用,都会把上一次的终点作为本次的起点。我们使用lineTo()方法绘制两条平行线,代码如下:context.lineWidth = 10;context.strokeStyle =...原创 2018-04-22 21:49:30 · 2354 阅读 · 0 评论 -
HTML5 Canvas中绘制贝塞尔曲线
绘制贝塞尔曲线贝塞尔曲线于1959年,由法国物理学家与数学家Paul de Casteljau所发明,于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,并用于汽车的车身设计。贝赛尔曲线为计算机矢量图形学奠定了基础,它的主要意义在于无论是直线或曲线都能在数学上予以描述。贝塞尔曲线分为两种:二次贝塞尔曲线和三次贝塞尔曲线。quadraticCurveTo()方法绘制二次...原创 2018-04-22 21:52:22 · 7076 阅读 · 0 评论 -
HTML 普通按钮
普通按钮把 input 元素的 type 属性设置为“button”,可以创建普通按钮。按钮上显示的文本是value 属性的值,如果没有提供 value 属性,则只创建一个空按钮。如:<input type="button" value="立即购买">上述按钮的运行结果如图 3‑33 所示:图3-33 普通按钮默认情况下,在普通按钮上点击,是没有任何反应的。因此,需要为普通按钮注册事...原创 2018-04-16 21:18:59 · 16928 阅读 · 0 评论 -
HTML 表单特性
表单特性表单特性就是通过表单元素的一些属性,来对表单的改进,有了这些特性,开发人员就不必花费的额外时间,通过编写Javascript 来增强表单的行为。HTML4中的表单特性主要有 size、minlength、maxlength、readonly、disable,HTML5又增加了很多新的特性,包括 autocomplete、autofocus、required、placeholder、patt...原创 2018-04-16 21:19:40 · 493 阅读 · 0 评论 -
HTML min/maxlength
min/maxlengthminlength属性和maxlength属性用来指定文本框或 textarea 中,允许输入的最少字符数和最大字符数。一个汉字被看作一个字符。如,在以下文本框中,用户最少要输入 5 个字符,最多可输入 10 个字符:用户名:<input type="text" name="user" minlength="5" maxlength="10" />当用户输入的...原创 2018-04-16 21:20:21 · 5959 阅读 · 0 评论 -
HTML readonly
readonlyreadonly属性让一个控件成为只读控件。当设置 readonly 属性后,文本框可以获得焦点,但用户不能改变文本框的值,即用户不能编辑文本框的 value 属性值。如:用户名:<input type="text" name="user" placeholder="请输入用户名" readonly/>大多数浏览器会为只读文本框应用灰色背景,以提示用户不能编辑。运行结果...原创 2018-04-16 21:21:00 · 1003 阅读 · 0 评论 -
HTML disabled
disableddisabled属性用来禁用某个控件。在某些情况下,你可能不想让用户使用表单中的某些部分,就可以使用这个特性。当某个控件被禁用时,它不能获得焦点,如果使用键盘选择控件时,它也会被跳过。当按钮被禁用时,该按钮不能被点击。如:<input type="submit" value=" 提 交 " disabled />运行结果如图 3‑36 所示:图3-36 禁用提交按钮当...原创 2018-04-16 21:21:35 · 976 阅读 · 0 评论 -
HTML autocomplete
autocompleteautocomplete属性规定自动完成功能,以帮助用户输入。该特性规定浏览器是否保存用户的输入值,以备将来使用。如果开启该特性,则允许浏览器保存用户的输入,在用户开始输入时,浏览器会根据之前输入过的值来预测用户本次的输入。默认情形下,该属性处于打开状态。为了保护敏感数据(如用户账户信息),避免本地浏览器对它们进行不安全存储,需要设置 autocomplete=off,来显...原创 2018-04-16 21:22:08 · 1248 阅读 · 0 评论 -
HTML progress控件
progress控件progress控件用来定义一个进度条,用来表示页面中某个任务完成的进度。progress控件可以是确定的进度,则当前进度是介于某个最小值与最大值之间的值。这种情况下,进度条处于一个静止状态。<progress min="0" max="100" value="35"></progress>则表示进度值介于0到100之间,当前进度是35。则进度条静止在3...原创 2018-04-13 20:09:05 · 1008 阅读 · 0 评论 -
HTML meter控件
meter控件meter控件用来表示已知范围,且可度量的等级标量或分数值,如考试成绩等。<meter value="85" min="0" max="90" low="10" high="90" optimum="10">85</meter>其中,value属性规定标量的实际测量值,如果不指定,默认为0;min属性规定标量的最小值,如原创 2018-04-13 20:10:24 · 478 阅读 · 0 评论 -
HTML fieldset控件
fieldset控件如果一个表单上有很多信息需要填写,可以使用 fieldset控件将相关的元素组合在一起,使表单更容易理解。表单越容易理解,访问者就越有可能正确地填写表单。fieldset即field set,顾名思义,就是表单中field的集合。从名称就能知道,它会生成 field 的集合,用于对表单中的元素进行分组。一个表单中可以有多个fieldset控件。为了识别每个 fieldset控件...原创 2018-04-13 20:11:05 · 2403 阅读 · 1 评论 -
HTML 表单按钮
表单按钮表单按钮一般分为三类,分别是提交按钮、重置按钮和普通按钮。提交按钮、重置按钮只能在表单中使用,普通按钮则可以在网页的任何地方使用。从本质上讲,表单按钮也是表单控件,之所以把它分离出来,单独介绍,是因为它的功能比较特别。提交按钮用于把表单数据发送到服务器,重置按钮用于重置整个表单的数据,普通按钮则需要开发者赋予它功能。当用户点击提交按钮和重置按钮时,就有动作发生,一般不需要添加动作;而普通按...原创 2018-04-13 20:11:53 · 18559 阅读 · 0 评论 -
HTML 重置按钮
重置按钮有时候,用户填完表单信息后,发现填写错误,希望将表单数据还原为页面加载时的状态。为此,可以在表单上创建一个重置按钮(reset按钮)。把 input 元素的 type 属性设置为“reset”,来创建重置按钮。value 属性的值,为按钮上显示的文本。如果没有提供 value 属性,则按钮上默认显示“重置”。如:<input type="reset" value="取消">上述...原创 2018-04-13 20:12:27 · 27382 阅读 · 0 评论 -
HTML 图像
图像可以在网页中放置各种各样的图像,当访问者浏览网页时,浏览器会自动加载图像。不过,加载的时间跟访问者的网络速度、图像尺寸、页面中的图像个数等相关。HTML中,通过 img 元素向网页嵌入一幅图像。img 元素是一个空元素,需要加“/”来正确关闭。在 img元素中,通过 src 属性来指定图像的URL,可以是绝对URL,也可以是相对URL。事实上,img 元素并不会将图像本身插入到网页中,而是创建...原创 2018-04-11 22:23:34 · 394 阅读 · 0 评论 -
HTML 网页
网页iframe元素用于向网页嵌入一个网页资源。出于安全的考虑,iframe仅用来展示被嵌入资源的内容,相当于被嵌入资源的所有内容被放入一个单独的沙盒中,所以,iframe也被称作沙盒。如:<iframe src="img.html" width="346" height="268" scrolling="auto" frameborder="1">其中,src 属性指示ifram原创 2018-04-11 22:24:20 · 431 阅读 · 0 评论 -
HTML 视频和音频
视频和音频在页面上添加视频、声音、动画等,可以增强用户体验。在HTML5之前,为网页添加多媒体的唯一办法,就是使用第三方的插件(如,Adobe Flash等)。HTML5中,提供了对多媒体的原生支持,只需通过 video元素,就可以向网页嵌入视频、电影或音频资源,通过 audio元素向网页嵌入音频资源,省时省力。视频早就听说HTML提供了对视频的原生支持,你可能已经迫不及待想体验一下了。在HTML...原创 2018-04-11 22:25:00 · 2282 阅读 · 0 评论