html - 随笔分类 - zoho

网页中的表单元素

摘要：网页中的表单元素用于向服务器提交数据。例如： Username: Password: 这样点击提交按钮后将会把用户名和密码提交并转到 http://example.com/signin.php。表单元素中包含的各种控件有如下这些：表单控件实际例子控件描述提交按钮提交提交表单中的各控件数据到服务器重置按钮重置清除表单中的各控件数据并重置为默认值推送按钮推送无默认操作，在按钮的事件处理函数中提交数据图片按钮提交所点击位置的 X 和 Y 坐标到服务器单选控件男女从若干选项中选择一个值多选控件苹果香蕉从若干选项中选择多个值下拉列表从下拉列表中选择一个值单行文本Us... 阅读全文

posted @ 2013-11-22 19:56 zoho 阅读(719) 评论(0) 推荐(0)

使用网络字体作为矢量图标

摘要：前面已经介绍过网络字体（Web Fonts），而网络字体也可以作为图标字体（Icon Fonts）来用。图标字体是指把每个图标制作为字体的一个字符，从而组成的字体。这些字符自然是矢量图形，因此可以适应不同的大小，也可以随意调整颜色等。以 Font Awesome 这个图标字体为例。既然是网络字体，自然需要先引入它：@font-face { font-family: "FontAwesome"; src: url("fontawesome.woff") format("woff"), url("fontawesome.svg# 阅读全文

posted @ 2013-11-19 13:05 zoho 阅读(609) 评论(0) 推荐(0)

SVG 矢量图形格式

摘要：SVG（Scalable Vector Graphics）是基于 XML 的一种矢量图形格式，它即可以作为单独的图形文件使用也可以嵌入到网页中并由 JavaScript 来操作，非常方便和灵活。SVG 在较新的浏览器中都支持，包括 Firefox 1.5，Opera 8.0，Safari 3.0.4，Chrome 1.0 和 IE 9 等。在 SVG 中可以直接画出直线，矩形，圆形，多边形等。或者可以用更加一般的路径（path）元素，画出用椭圆弧或者贝塞尔曲线连接的复杂形状。例如：参考资料：[1] 维基百... 阅读全文

posted @ 2013-11-15 20:14 zoho 阅读(1200) 评论(0) 推荐(0)

常用 Unicode 符号列表

摘要：Unicode 中包含了各种符号，我们可以作为图标来使用。这里整理一下常用的一些符号。一、拉丁字母补全（Latin-1 Supplement）：U+0080 至 U+00FFUnicode 编号字符描述字符形状HTML 编码U+00A4CURRENCY SIGN¤¤U+00ABLEFT-POINTING DOUBLE ANGLE QUOTATION MARK««U+00B1PLUS-MINUS SIGN±±U+00BBRIGHT-POINTING DOUBLE ANGLE QUOTATION MARK 阅读全文

posted @ 2013-11-10 13:01 zoho 阅读(9269) 评论(0) 推荐(0)

DOM 的选择器 API

摘要：在刚开始的时候，我们只能用 getElementById，getElementsByClassName，getElementsByTagName 这几个 DOM 方法查找 DOM 树中的元素。后来，在 W3C 的选择器 API 标准中[1]，提供了 querySelector 和 querySelectorAll 这两个利用 CSS 选择器查找元素的方法。它们的语法如下：element = document.querySelector(selectors);elementList = document.querySelectorAll(selectors);其中，document.queryS 阅读全文

posted @ 2013-06-27 20:35 zoho 阅读(351) 评论(0) 推荐(0)

HTML 的 iframe 元素

摘要：在 HTML 中， iframe 元素用于在网页中嵌入其它网页的内容，例如：其中，iframe 的 src 属性指明要显示的其它网页的地址，而标签中的内容仅在浏览器不支持 iframe 时显示。对于 iframe 元素，有一些需要注意的问题。首先，从它的名称（inline frame）中可以知道，它是 inline 元素，因此如果要让它填满整个 block 元素，需要设置 iframe 的样式为 display: block。比如下面的例子：这个例子中，由于 iframe 默认是 inline 元素，默认它会放在基线之上，而基线之下还有一定高度（即 descender 部分）所以它会溢出了。因阅读全文

posted @ 2013-06-23 16:39 zoho 阅读(687) 评论(0) 推荐(0)

HTML5 的 history API

摘要：在使用 AJAX 方式更新页面内容后，页面的 URL 并没有改变，因此用浏览器的前进和后退无法切换这些不同的页面状态。这个问题利用 HTML5 的 history API 可以完美地解决。HTML5 history API最简单的例子如下：if (history.pushState) { var state = {page: 2 }; history.pushState(state, "title", location.href + '#2'); window.onpopstate = function(event) { console.log(event. 阅读全文

posted @ 2013-06-11 20:44 zoho 阅读(377) 评论(0) 推荐(0)

浏览器检测与特征检测

摘要：由于各个浏览器的各种差别很多，为使网页能兼容各个浏览器，我们开始使用的是浏览器检测的方式：即通过 navigator.userAgent 字符串来判断浏览器的类型和版本。这种方法现在看来有不少问题，例如：userAgent 字符串容易被修改和伪装，从而导致这种方法不可靠当浏览器的新版本支持某个新功能时，需要修改原有代码遇到新的浏览器时，需要修改原有代码以支持它们因此，这种方法应该尽量少使用，而改用新的方法：特征检测。特征检测通过检测某功能对应的函数或对象是否可用，来判定浏览器是否支持该功能。使用这种方法，就能克服前面的浏览器检测的几个问题。因此特征检测越来越受人们重视。例如，要检测浏览器是否支阅读全文

posted @ 2013-02-02 18:16 zoho 阅读(723) 评论(0) 推荐(0)

DOM 节点的类型及判定

摘要：浏览器在解析 HTML 文档后，会将它转化为一个由各种节点组成的文档树。例如下面的 HTML 文档<!DOCTYPE html><html> <head> <title>hello this</title> </head> <body> <h1>some heading</h1> <div> <p>some content</p> </div> </body></html>转化的 DOM 文档树基本是这样的（忽略一些阅读全文

posted @ 2013-02-01 21:06 zoho 阅读(864) 评论(0) 推荐(0)

屏幕大小与视区大小

摘要：对于桌面浏览器，通常我们用 screen.width 和 screen.height 得到屏幕的大小，然后用 window.innerWidth 和 window.innerHeight（对于标准浏览器）或者document.documentElement.clientWidth 和 document.documentElement.clientHeight（对于 IE8-）取得视区（viewport）的大小。知道了视区大小我们就可以让页面占满整个显示区域且不会出现窗口滚动条。对于桌面浏览器，默认视区大小一般总是小于屏幕大小的，因为还有操作系统和浏览器本身都要占用一定的空间。而对于手机浏览器，阅读全文

posted @ 2012-06-20 11:36 zoho 阅读(838) 评论(0) 推荐(0)

HTML5 的全屏显示功能

摘要：要全屏显示窗口，如果是新窗口可以用 window.open 方法指定 "fullscreen" 参数。但是出于安全考虑，现在大多数浏览器都会在全屏时显示地址栏或者状态栏，因此只能得到伪全屏的效果。如果是当前窗口，以前并没有好办法做到，只能提醒用户按 F11 键了。目前，在 HTML5 中已经有全屏显示 API 的草案了，而且 Chrome 15，Safari 5.1 和 Firefox 10 都支持它。但是，具体的写法还是稍有不同的。例如：// chrome and safarielement.webkitRequestFullScreen();document.webki 阅读全文

posted @ 2012-06-10 18:00 zoho 阅读(1178) 评论(0) 推荐(0)

在浏览器中保存本地文件2

摘要：利用 W3C 草案中的 Blob，我们有了新的方法来保存本地文件。例如（查看效果）：function doSave(value, type) { var blob; if (typeof window.Blob == "function") { blob = new Blob([value], {type: type}); } else { var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlo... 阅读全文

posted @ 2012-05-27 20:20 zoho 阅读(4811) 评论(0) 推荐(1)

在浏览器中打开本地文件2

摘要：在 W3C 草案中的 File API 中，提供了 FileReader 对象。利用 FileReader，不和服务器交互我们也可以在浏览器中打开本地文件，而且这种方法更加优雅。我们来看最简单的例子（查看效果）：<html><body><input type="file" id="openselect"/><textarea id="showresult"></textarea><script>function doOpen(evt) { var files = 阅读全文

posted @ 2012-05-27 19:10 zoho 阅读(2405) 评论(0) 推荐(1)

浏览器的用户代理字符串

摘要：每个浏览器都有它自己的用户代理（user agent）字符串，里面包含了浏览器和操作系统等信息。通过使用这个字符串，我们可以处理跨浏览器的差异。用户代理字符串保存在 JavaScript 的 navigator.userAgent 变量中。我们先来看看各个主流浏览器在各个平台的用户代理字符串的例子。1. IE 和 IE Mobile 浏览器系统平台浏览器用户代理字符串WindowsIE 9Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)WindowsIE 10Mozilla/5.0 (compatibl 阅读全文

posted @ 2012-04-06 15:30 zoho 阅读(7815) 评论(0) 推荐(0)

在浏览器中保存本地文件1

摘要：更新：大部分浏览器的最新版本都支持通过 Blob 来保存本地文件，具体方法见这里。前一篇已经总结了在浏览器中打开本地文件的方法，现在接着总结保存本地文件的方法，同样以保存 textarea 的内容到本地文件为例。首先还是 IE，IE 的 document.execCommand 函数中可以使用 SaveAs 参数来将当前网页保存到本地文件。我们利用 iframe 就可以实现保存 textarea 内容到文件的目的。例子如下：<html><body><textarea id="areaid">hello this!</textarea 阅读全文

posted @ 2012-04-04 18:31 zoho 阅读(952) 评论(0) 推荐(0)

在浏览器中打开本地文件1

摘要：更新：大部分浏览器的最新版本都支持通过 FileReader 来打开本地文件，具体方法见这里。为着安全起见，在 JavaScript 中是不允许直接访问本地文件的。但有时候又需要打开和保存本地文件，在目前的情况之下就只能用一些特殊的方法来实现了。最麻烦的是，这些方法大多都不能适用于各个主要浏览器，很费事但也只能如此。这一篇总结一下各种打开本地文件的方法，下一篇总结保存本地文件的方法。首先是 IE 浏览器。IE 有自己独有的 ActiveX，实现文件的是容易的。在下面的例子中，首先选择好要打开的文件路径名，点击"Read"按钮后将把该文件的内容读入 textarea 区域：阅读全文

posted @ 2012-04-04 18:31 zoho 阅读(5203) 评论(0) 推荐(0)

网页的文档对象模型

摘要：要制作网页，首先必不可少的是了解文档对象模型（DOM）。DOM 就是对网页的各个元素之间的包含关系以及每个元素的属性的描述，例如<html> <head> <title>Hello This!</title> </head><body> <h1>Header</h1> <div> <p>Paragraph</p> </div></body></html>对于一个网页文档来说，html 是最顶级的元素，它包含 head 和 bod 阅读全文

posted @ 2012-04-04 18:28 zoho 阅读(271) 评论(0) 推荐(0)

网页设计学习笔记

随笔分类 - html