HTML
文章平均质量分 82
会飞的Pikachu
前端开发手册:https://github.com/dwqs/fedHandlebook
展开
-
HTML中文本框的区别
在HTML中,有两种方式来表现文本框:一种是使用元素的单行文本框,另一种是使用《原创 2014-05-11 11:31:33 · 2597 阅读 · 0 评论 -
怎么对HTML 5的特性做检测?
原译文地址:http://www.ido321.com/1116.html原文:Detect HTML5 Features译文:HTML5特性检测译者:dwqs随着HTML 5的流行,现在HTML 5占据了主要的市场份额,HTML 5增加了很多的新功能,这些新功能可以让Web体验变得更好。大多数特性在现代的主流浏览器中获得了支持,因此我们可以放心使用这些新特性来增加Web体验。但是,当有新版本的浏览器发布时,我们不要忘记一些旧版本或者老的浏览器。目前的另外一个事实是,用户想用旧版本的浏览翻译 2014-10-31 11:59:33 · 1163 阅读 · 0 评论 -
杂谈:HTML 5页面可视性API
译文来源:http://www.ido321.com/1126.html原文:HTML5 Page Visibility API译文:HTML 5的页面可视性API译者:dwqs 在早期,浏览器并没有提供选项卡,但是现在基本所有浏览器都提供了这个功能。作为一个程序员,我一般会同时打开10到15个选项卡,甚至有些时候会在25到30.为什么介绍Page Visibility API呢?之前,是不可能确定哪个选项卡是激活的,哪个没有激活,但是在HTML 5 Visibility API翻译 2014-11-02 09:55:54 · 1277 阅读 · 0 评论 -
百家搜索:在网站中添加Google、百度等搜索引擎
来源:http://www.ido321.com/1143.html看到一些网站上添加了各种搜索引擎。如Google、百度、360、有道等,就有点好奇,这个怎么实现?研究了一各个搜索引擎怎么传送关键字,找到了小窍门,于是乎,自家弄了一个百家搜索:效果:演示地址戳此:http://sousuodaquan.sinaapp.com/ps:在列表中添加了糯米汇(http://www.nuomihui.com)的站内搜索,仅用于演示,别无它用,特此声明。HTML代码:<div class="原创 2014-11-05 09:13:44 · 1987 阅读 · 0 评论 -
杂谈:HTML 5的消息通知机制
译文来源:http://www.ido321.com/1130.html原文:HTML 5 Notification译文:HTML 5 的消息通知机制译者:dwqs HTML 5 已经被应用到Web开发中。跟平常一样,任何一个软件新版本的发布都期待一些新的特性,这对HTML 5也不例外。为了仅仅通过HTML提高用户交互,HTML 5已经提供了很多新的API。是不是非常有趣呢?并且HTML 5已经和CSS 3结合的非常棒了。 因此,我也开始写一系列与HTML 5的API相关翻译 2014-11-03 09:25:55 · 1208 阅读 · 0 评论 -
关于坛友的一个布局问题的解答
来源:http://www.ido321.com/1147.html需求:让select、ul、文字、button、text显示在一行中,效果戳:http://bbs.csdn.net/topics/390915380?page=1#post-398415668 我的实现如下HTML:<!DOCTYPE html><html> <head> <title>Test</title> <meta http-equiv="Content-Type" content原创 2014-11-06 14:23:41 · 1248 阅读 · 0 评论 -
利用HTML 5中的Menu和Menuitem元素快速创建菜单
原文:Introducing the HTML5 “Menu” and “Menuitem” Elements译文:HTML 5中Menu和Menuitem的元素介绍译者:dwqs今天向你介绍HTML 5中的两个元素:Menu和Menuitem,这两个元素是W3C交互元素中的一部分。现在Web的演变已经不仅仅局限于文档之间的链接,在APPs中,页面的行为越来越多,因此,是时候形成一个Web交互的标准了。Menu和Menuitem是在开发者中谈论最热门的两个元素,可能是由于主流浏览器对其缺乏足翻译 2014-12-03 10:46:08 · 3364 阅读 · 0 评论 -
HTML 5:你必须知道的data属性
原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可以让你给元素自定义数据。这篇文章就是思考怎么更好的使用Data属性。 介绍 HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突。而HTML 5 Data属性翻译 2014-12-06 09:59:43 · 2315 阅读 · 1 评论 -
HTML 5:绘制旋转的太极图
HTML:<!DOCTYPE><html><head> <meta charset="utf-8" /> <title>Canvas绘制旋转太极</title></head><body> <canvas id="face" width="200" height="200"></canvas></body></html> JavaScript:var canvas = document.getElementById("face");var cxt = ca原创 2014-12-07 01:17:46 · 3584 阅读 · 2 评论 -
DOM笔记(二):Node接口
所有的节点都使用Node接口来表示,可以使用很多方法去获取节点,如document.getElementsByTagName()、document.getElementsByName()等均返回一个NodeList对象,然后获取其中的节点。 节点对应的属性和放大均在Node接口予以定义: 1、Node接口常见的属性列表属性名 数据类型 说明nodeName DOMString 返回节点名nodeValue DOMString 返回节点值nodeType int 返回节点类型原创 2014-12-09 09:19:50 · 1291 阅读 · 0 评论 -
DOM笔记(一):HTMLDocument接口
操作HTML文档的第一步就是获取对文档元素的引用,每一个元素在DOM中就是一个节点,所有的元素在DOM中构成一个节点树。用于获取元素节点定义的方法定义于HTMLDocument接口,window.document方法用于实现该接口,其定义的常用方法和属性如下: 属性或方法 返回值类型 说明[getter] 任何类型 根据元素的name属性获取所有元素节点all HTMLAllCollection 文档中所有元素组成的集合,已不推荐使用body HTMLElement 获取<body>元素节点原创 2014-12-08 14:56:22 · 1519 阅读 · 0 评论 -
DOM笔记(三):Element接口和HTMLElement接口
一、Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法。 Element接口常见的属性比较少,常用的就是一个只读的tagName属性,该属性返回元素名,数据类型是DOMString。 Element接口定义的方法也主要是针对属性操作,常见方法如下:方法名 数据类型 说明getAttribute DOMString 返回对应属性getAttributeNode Attr 返回对原创 2014-12-10 08:24:35 · 3435 阅读 · 0 评论 -
DOM笔记(四):HTML 5 DOM复杂数据类型
HTML 5 DOM定义了一下集合、列表等复杂的数据类型用于实现便捷的操作。相对于HTML 4 DOM,HTML 5 DOM增加了HTMLCollection、DOMTokenList、DOMStringMap、HTMLAllCollection、HTMLFormControlsCollection等。一、HTMLCollection、HTMLAllCollection和HTMLFormControlsCollection 三个接口均用于表示一组元素组成的列表。HTMLAllCollecti原创 2014-12-11 08:21:27 · 1690 阅读 · 0 评论 -
二次利用Canvas的绘图
对于Canvas绘图,可以使用toDataURL()方法保存绘出的图像,然后在提供给object元素二次使用。<p>Canvas绘图</p><canvas id="mycanvas" width="300" height="150"></canvas><p>还原绘图</p><object type="image/png" id="myimage"></object>js处理<script type="text/javascript"> var canvas = document.g原创 2015-03-08 10:57:27 · 1697 阅读 · 0 评论 -
响应式菜单制作
看看效果:PC端:QQ截图20150327215831移动端:QQ截图20150327215915一、HTML<div id="demo"> <span class="icon-menu" id="icon"></span> <ul class="nav"> <li>首页</li> <li>前端开发 <ul class="submenu">原创 2015-03-31 13:33:52 · 1234 阅读 · 0 评论 -
Trick:不用table,怎么等分DIV
在SF上,有人提出一个问题:不用table,如何把Div分成3行*3列。提供了三种思路:第一种方式html:<div id="box"> <div> <span>1</span> <span>2</span> <span>3</span> </div> <div> <span>4</span>原创 2015-06-01 13:17:50 · 1812 阅读 · 0 评论 -
trick::target实现选项卡切换
:target是什么?MDN是这样描述的::target The :target pseudo-class represents the unique element, if any, with >an id matching the fragment identifier of the URI of the document.在document中,可以设置锚链接,举个粟子:<a href="原创 2015-06-01 13:18:27 · 2112 阅读 · 0 评论 -
HTML5: Screen Orientation API
媒体查询允许网站根据智能手机和平板的方向来调整布局。但有时候你希网站锁定到一个特定的方向,横屏或竖屏,此时,原生应用的格式是可以被指定的。APP只在预设格式下显示—独立于实际的设备方向。通过使用HTML5的 Screen Orientation API, 可以在JavaScript定义屏幕方向。 为一个文档定义屏幕方向通过screen.orientation属性的lock()方法可以调整屏幕方向,翻译 2015-06-08 09:37:44 · 2957 阅读 · 0 评论 -
Canvas入门(3):图像处理和绘制文字
9个JQuery和5个JavaScript经典面试题原创 2014-10-14 00:06:27 · 4245 阅读 · 6 评论 -
Canvas入门(2):图形渐变和图像形变换
来源:http://www.ido321.com/986.html一、图形渐变(均在最新版Google中测试)1、绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = document.getElementById('canvas'); 3: if (canvas == null) 4: { 5: return false; 6: } 7: // 获取上下文原创 2014-10-13 12:42:51 · 1767 阅读 · 0 评论 -
Jquery+bootstrap实现静态博客主题
Jquery+bootstrap实现静态博客主题来源:个人博客下载链接: Fork Git: https://github.com/dwqs/theme1 CSDN: http://download.csdn.net/detail/u011043843/7806307 百度云:http://pan.baidu.com/s/1kThzlS7原创 2014-08-23 13:43:22 · 2955 阅读 · 0 评论 -
问题:关于贴友的一个书本页面简单布局(html+css)的实现
贴友需求:以html+css仿照书本的页面实现布局效果(见图)html代码: 1: <!-- 我的博客:http://www.ido321.com --> 2: <!DOCTYPE HTML> 3: <html> 4: <head> 5: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6: <title>Test</title>原创 2014-09-08 01:27:01 · 3881 阅读 · 0 评论 -
HTML的奇葩嵌套规则
1、块级元素 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签: address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul原创 2014-08-11 18:59:20 · 1218 阅读 · 1 评论 -
如何给超链接设置宽度和高度
3、对a设置padding 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <meta charset="utf-8" /> 5: <title>a设置宽度和高度</title> 6: <style> 7: .abc a{ 8: padding:10px 20px; 9: width:150px; 10: height:50px; 11: border:1p原创 2014-09-23 13:06:36 · 2641 阅读 · 0 评论 -
仿照某商城首页的源代码及效果
导航的js,用了一种比较笨的方法 1: $("#ananshi").hover( 2: function(){ 3: $(this).parent().css({border:"1px solid #DBD1D1",backgroundColor:"#DBD1D1"}); 4: /*$('#nanshi').show();*/ 5: $('#nanshi').show(); 6: $('#nvshi').hide原创 2014-09-26 09:00:04 · 2566 阅读 · 0 评论 -
Google Maps API显示地图的小示例
来源:http://www.ido321.com/1089.html效果(新版Firefox中测试):代码:<!DOCTYPE><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Google Map</title> <script type="text/javascript" src="http://maps.google.com/maps/ap原创 2014-10-24 08:35:37 · 1308 阅读 · 0 评论 -
HTML 5 History API的”前生今世”
原文:An Introduction To The HTML5 History API译文:关于HTML 5 History API 的介绍译者:dwqsHistory是有趣的,不是吗?在之前的HTML版本中,我们对浏览历史记录的操作非常有限。我们可以来回使用可以使用的方法,但这就是一切我们能做的了。但是,利用HTML 5的History API,我们可以更好的控制浏览器的历史记录了。例如:我们可以添加一条记录到历史记录的列表中,或者在没有刷新时,可以更新地址栏的URL。 为什么介绍翻译 2014-10-21 09:58:30 · 1339 阅读 · 1 评论 -
某网站静态首页的实现小结
在IE中,数字1,2,3不能居中,所以后来加个span(之前没有),用IE hacks解决 1: <!--[if IE]> 2: <style type="text/css"> 3: .circle span 4: { 5: display:block; 6: padding-top:12px; 7: font-weight:bold; 8: } 9: </原创 2014-09-29 12:19:19 · 1363 阅读 · 0 评论 -
CSS快速制作图片轮播的焦点
演示地址:http://jsfiddle.net/m/qet/代码: 1: <!DOCTYPE html> 2: <html lang="en"> 3: <head> 4: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 5: <title>图片轮播的焦点</title> 6: <style type="text/css"> 7:原创 2014-10-01 19:35:56 · 2123 阅读 · 0 评论 -
IE 8兼容:X-UA-Compatible的解释
来源:http://www.ido321.com/940.html来自StackOverFlow问题描述: 1: <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />1、这个到底是什么意思?2、一些示例使用”,”分离IE的版本,而一些使用”;“,哪个正确?3、我想知道IE=9; IE=8; IE=7; IE=EDGE顺序的含义。在文档中使用了<!DOCTYPE>答复:对于IE翻译 2014-10-11 13:00:13 · 1740 阅读 · 0 评论 -
初识HTML 5:关于它的三个三
来源:http://www.ido321.com/949.html一、HTML 5受欢迎的三个理由1、IE、Google、Firefox、Safari、Opera等主流浏览器的支持1.1 微软:2010年3月16日,微软在拉斯维加斯举行的MIX10技术大会上推出IE9预览版,更多支持CSS3、SVG和HTML 5等互联网通用标准。1.2 Google:2010年2月19日,谷歌Gears的项目经理伊安-费特通过博客宣布,谷歌将放弃Gears,重点开发HTML 5。1.3 苹果:20原创 2014-10-12 09:42:42 · 1218 阅读 · 2 评论 -
select的option异常的总结
来源:http://www.ido321.com/1189.html昨天,在项目中碰到了option显示异常的原因,截图如下:Firefox中用css控制之后效果chrome和IE中css不奏效代码:<div class="controls"> <select name="ksname" id="ksname"> <?php while (!!$rowDK = fetchAssoc($resultDK))原创 2014-11-15 10:47:51 · 2500 阅读 · 0 评论 -
问题:关于贴友分类菜单的实现
贴友需求,实现图示菜单的分类我对于这个问题的实现,不足之处,请求指正。html: 1: <body> 2: <div class="test"> 3: <h3>所有分类</h3> 4: <div class="fenlei"> 5: <h4>精美包包</h4> 6: <ul> 7: <li>双肩包</li> 8:原创 2014-10-02 08:27:31 · 1190 阅读 · 0 评论 -
Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形
来源:http://www.ido321.com/968.html一、Canvas的基础知识Canvas是HTML 5中新增的元素,专门用于绘制图形。canvas元素就相当于一块“画布”,一块无色的透明区域,需要利用JavaScript编写在其中进行绘画的脚本。在页面放置canvas元素很简单,利用<canvas>标签,同时指定几个基本的属性:id,width和height。接下来通过几个小案例,跟我入门canvas吧~~~^_^~~~二、Canvas小案例(测试结果来自Google最新版本原创 2014-10-12 19:51:48 · 2973 阅读 · 2 评论 -
博客收录集的源代码分享,需要那就快来吧
原文:http://www.ido321.com/1112.html之前的博客收录集只是初版,还在修改,所以就不拿出来分享了。现在博客收录集的终版已经敲定:http://www.ido321.com/daohang/改版说明如下:1、增加了“我要上榜”板块:根据随机筛选和博主在本博客的活跃度匹予以展示,增加各收录博客的展示机会。2、统计每个分类的博客数目:每个分类在首页显示20个,超出部分已链接形式链接到对应的页面(文件名以类别前缀+more自动生成)。(见上图的Web开发)3、可以再博原创 2014-10-28 22:46:01 · 1295 阅读 · 2 评论 -
问题:关于一个坛友的html布局实现
这个跟上次贴友分类菜单的实现类似html: 1: <body> 2: <div class="test"> 3: <div> 4: <img src="my.jpg" alt="test"> 5: <h3>图片标题</h3> 6: <span><a href="#">编辑</a> <a href="#">删除</a></span> 7:原创 2014-10-03 11:45:49 · 1188 阅读 · 0 评论