Tagged

HTML

A collection of 9 posts

HTML

meta标签常用属性整理

在segmentfault看到这篇文章,觉得整理的很详细,所以转载过来和大家分享一下。 原文地址:http://segmentfault.com/blog/ciaocc/1190000002407912 作者:ciaocc 版权贵ciaocc所有,转载请注明版权。 概要 标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 —— W3School 必要属性 属性值描述contentsome text定义与http-equiv或name属性相关的元信息**可选属性** 属性值描述http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。nameauthor / description / keywords / generator / revised / others把 content 属性关联到一个名称。contentsome text定义用于翻译 content 属性值的格式。### SEO优化 参考文档 页面关键词,每个网页应具有描述该网页内容的一组唯一的关键字。

HTML

HTML特殊字符大全

HTML的特殊字符我们并不常用,但是有的时候却要在页面中用到这些字符,甚至有时候还需要用这些字符来实现某种特殊的视觉效果。现在,国外的设计师Neal Chester整理了一份很全的特殊字符集,我觉得这很赞~~,共享出来供大家查阅吧。 使用方法: 这些字符属于unicode字符集,所以,你的文档需要声明为UTF-8; 下面符号列表的后面有两列编号,它们并不太一样,第一列是用于HTML的,你需要在前面加上&#符号; 第二列可以用于CSS文件中,但是需要用反斜杠\转义; 第二列也可以用于JavaScript,和CSS用法一样,不过要用\u来转义。 需要主意的是: 有的字符在不同的浏览器下表现不太一样;比如小雪人 ☃ 在Firefox和Chrome下不太一样,钻石 ◆ 在IE下要比Chrome下要大一点儿; 有的字符在某个浏览器下不会显示;当然原因并不是字符代码的问题,而是浏览器的bug,比如,–在Chrome下。。。 但是,98%的字符都能在所有浏览器下正常显示的,不过如果你真的要使用,最好仔细在各个浏览器下验证一番。 经测试这些字符在Android/iOS等智能终端的识别度比较差,所以,使用的时候要特别注意移动浏览器~~ 各种箭头 .character{display:inline-block;width:

PPT:HTML5 表单——为体验而生
HTML

PPT:HTML5 表单——为体验而生

这是之前组内分享的一个PPT,关于HTML5的表单,本来想整理成文字的,由于精力有限,终于决定放弃,偷个懒,直接把PPT放上来~~ 个人认为表单是HTML5的最大改进之一,它也被业界称为web form 2.0,这种称呼是名副其实的,从HTML3.2(1997年1月)到HTML4(1997年12月),旧的表单陪伴了我们十几年,始终没有太大的改进。HTML5表单不仅仅大大的改进了表单的功能,改进了表单的语义化,同时也是对用户体验的一次增强,而对前端开发者来说,HTML5表单也可以大大增加工作效率。 不多说了,看PPT: **[Html5 表单](http://www.slideshare.net/mienflying/html5-4921810 "Html5 表单")**### 关于HTML 5表单的几个要点: 浏览器遇到不支持的input type的时候,会将其解析为默认的text,所以在项目中可以大胆的使用相应的type; mobile webkit对range type的支持不完善,可能是因为它对css appearance的支持不足; W3C只规范了HTML 5表单的内容,

HTML

移动网站开发——标记语言

移动互联网被称为“第五次科技革命”,而随着iPhone和Android等智能手机的日渐流行和iPad等平板电脑的出现,移动互联网的潜力和趋势也愈发显现,针对移动设备的网站开发越来越受到关注,国内很多公司也开始重视面向所有移动设备的网站开发。 一般来说,对于移动网站可以采取两种方式: 专门开发一个独立的移动版本 使用media type和media query控制网站在移动浏览器的表现 本文和下一篇文章将介绍第一种方案,后面的文章将介绍第2种方案。 本文我们先了解一下移动网站的标记语言。 移动网站标记语言的演进 我们先看一下 @AdrianF2E 分享的一张《移动web相关标记语言的演进》的图表,一目了然: 这张图形象的展示了标记语言的发展历程,包括移动网站标记语言。 移动网站开发要比普通的网站开发复杂的多,选择一种用于移动网站的标记语言同样相当纠结。 在最初,WAP论坛(后来和NTT合并,组成OMA,Open Mobile Alliance)创建了一种基于XML的语言,称为WML,这是用于WAP网站的标记语言。它并不是理想的方案,因为它将网站分割为两部分:普通页面使用(X)HTML,而移动网站使用WML。网站开发者想要做一个移动网站也不得不学习一种新的语言而不是转换技术,“一站式”的信条也被打破,用户不能访问他们喜欢的网站并且不得不发现这个网站的WAP版本——如果它们存在的话。另外日本的NTT创建了他们自己的语言cHTML(compact HTML)

2010年最新的100个免费HTML模板
HTML

2010年最新的100个免费HTML模板

译自:[100 Fresh And Free xHTML Templates Of Year 2010](http://www.1stwebdesigner.com/freebies/fresh-free-xhtml-templates-2010/) 中文原文:[2010年最新的100个免费HTML模板](http://www.qianduan.net/fresh-free-html-templates-2010.html) 请尊重版权,转载请注明来源,多谢! - - - - - - #### 1. Aquatic 预览 | 直接下载 2. HTML5 预览 | 直接下载 3. BizGroup 预览 | 直接下载 4. IT Website 预览 | 直接下载

Aptana

Zen Coding: 一种快速编写HTML/CSS代码的方法

译自:Smashing Magazine 中文:Zen Coding: 一种快速编写HTML/CSS代码的方法 请尊重版权,转载请注明来源! 在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。 你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间?如果你的编辑器有代码提示功能,你编写的时候就会容易些,但即便如此你还是要手动敲入很多代码。 在JavaScript方面,当我们想要在一个页面上获取某个特定的元素时,我们就会遇到同样的问题,我们必须写很多代码,这就变得难于维护和重用。JavaScript框架应运而生,它们同时引入了CSS选择器引擎。现在,你可以使用简单的CSS表达式来获取DOM元素,这相当酷。 但是,如果你不仅仅可以用CSS的选择器布局和定位元素,还能生成代码会怎么样?比如,如果你这样写: div#content>h1+p …然后就可以看到这样的输出: <div id="content">

HTML

重新发现HTML表格

中文原文:重新发现HTML表格 整理自:Woork 请尊重版权,转载请注明来源,多谢! 根据我最近的一些实践以及在和一些读者进行关于HTML表格的使用问题沟通之后,决定写这篇文章。总的来说,我注意到由于误导性信息,他们对于table的使用有种先入为主的厌恶。事实上很多人会说”我看到永远不应该使用表格”的说法,但是这绝对是错误的!这个建议只是针对使用HTML表格来定义网页的布局,但是表格在方便的排列数据信息行和列方面非常完美,而且如果你一定要在一个页面上显示表列数据,你就不得不使用它们!为什么不呢?然而,在这种情况下,一些人无视了用于table的某些HTML标签的存在并且不知道该如何正确的使用它们。 HTML有10个表格相关标签。下面是一个带有简介的列表,但是首先,文档要被正确的定义在HTML 4.01/XHTML 1或HTML 5下面: <caption> 定义表格标题(4, 5) <col> 为表格的列定义属性(4, 5) <colgroup> 定义表格列的分组(4,

HTML

HTML5视觉手册

HTML5视觉手册由知名的意大利前端工程师Woork(Antonio Lupetti)制作的一个HTML5参考手册,与其它的参考手册不同的是,该手册用不同的颜色和方式将HTML5标签加以区分,使我们更方便的查找标签的用法及标准支持情况。 需要或者感兴趣的童鞋可以查看官方介绍(须翻墙),或在Flickr预览,或从Box下载(须翻墙),或从Ziddu下载。 HTML视觉手册已经发布更新,需要的童鞋可以到官方站点去下载:http://woorkup.com/2009/12/16/html5-visual-cheat-sheet-reloaded/。另外,作者将个人博客从Blogspot搬了出来做成了独立博客 woorkup.com ,如此我们再访问就无需翻墙了。UPDATED @ 12-23-2009

HTML

你必须知道的10个不常用的HTML标签

译自:TutsPlus 原文:你必须知道的10个不常用的HTML标签 版权所有,转载请注明出处,多谢! 网页开发人员常常希望能够了解并掌握多种语言,结果是,学习一门语言的所有内容是棘手的,但是却很容易发现你并没有完全利用那些比较特殊却很有用的标签。 不幸的是我们到现在还没有涉足的那些比较不知名的HTML标记所有潜力。但它永远不会太晚重新进入领域,并开始编写代码来发掘这些未开发的标签的能量。 这里是10个未被充分利用或被误解的HTML标签。或许它们不太广为人知,但是在特定情况下他们却非常有用。 1. 貌似每个人都比较熟悉 标签,但是你可知道的小弟弟? 允许你定义元素内的文字作为一种参考。一般,浏览器会用斜体来显示 标签内的文字,但是这可以用一点CSS来改变。 标签对于引用目录或其它网站的参考非常有用。这里是一个在段落中使用cite标签的例子: David Allen的突破性组织性的图书*完成你的工作*给忘了带来了一场风暴。 2. 标签是定义select标签中的选项分组的一种很好的方法。比如,你需要按时间来分组电影列表,那么就可以这样做: 上映时间泰坦尼克号贫民窟的百万富翁怪物史瑞克狮子王全民超人 演示: 上映时间 泰坦尼克号贫民窟的百万富翁怪物史瑞克 狮子王全民超人 它可以在视觉上区分电影列表。 3. 是一种定义或更多解释一组文字的方法。当你用鼠标放到使用标签的文字时,一个显示title标签的内容的框框将会出现在下边。比如: 微博客网站 Twitter