我的收集 « Design4U

HTML5新标签解释及用法

HTML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。

HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似 <div> 和 <span> 标签，但有一定含义，例如 <nav>（网站导航块）和 <footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如 <audio> 和 <video> 标记。

一些过时的 HTML 4 标记将取消，其中包括纯粹用作显示效果的标记，如 <font> 和 <center>，因为它们已经被 CSS 取代。还有一些透过 DOM 的网络行为（via）。

下面我们来看一下HTML 5提供的一些新的标签用法以及和HTML 4的区别。

继续阅读

html5

30 十一

Meta标签详细参数——HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)

归类于 DIV+CSS 评论关闭

meta是用来在HTML文档中模拟HTTP协议的响应头报文，META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。
http-equiv属性详解

1、＜meta http-equiv=”Content-Type” content=”text/html”;charset=gb_2312-80″＞和＜meta http-equiv=”Content-Language” content=”zh-CN”＞用以说明主页制作所使用的文字以及语言，又如英文是ISO-8859-1字符集，还有BIG5、utf-8、 shift-Jis、Euc、Koi8-2等字符集；

2、＜meta http-equiv=”Refresh” content=”88;url=http://www.design4u.cn”＞定时让网页在指定的时间88秒内，跳转到页面http;//www.s027.cn；

3、＜meta http-equiv=”Expires” content=”Mon,12 May 2009 00:20:00 GMT”＞可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间

格式；

4、＜meta http-equiv=”Pragma” content=”no-cache”＞是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

5、＜meta http-equiv=”set-cookie” content=”Mon,12 May 2001 00:20:00 GMT”＞cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

6、＜meta http-equiv=”Pics-label” content=”"＞网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；

7、＜meta http-equiv=”windows-Target” content=”_top”＞强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

8、＜meta http-equiv=”Page-Enter” content=”revealTrans(duration=10,transtion=50)”＞和＜meta http-equiv=”Page-Exit” contect=”revealTrans(duration=20，transtion=6)”＞设定进入和离开页面时的特殊效果，这个功能即 FrontPage中的”格式/网页过渡”，不过所加的页面不能够是一个frame页面。

name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类。这其中description（站点在搜索引擎上的描述）和keywords（分类关键词）是最重要的，所以应该给每页加一个meta值。

参数：Keywords (关键字)
说明：为搜索引擎提供的关键字列表
举例：<meta name=”Keywords” Content=”关键词1,关键词2，关键词3,关键词4,……”>
提示：各关键词间用英文逗号”,”隔开。meta的通常用处是指定搜索引擎用来提高搜索质量的关键词。当数个meta元素提供文档语言从属信息时，搜索引擎会使用lang特性来过滤并通过用户的语言优先参照来显示搜索结果。
例如：<META NAME=”Keywords” CONTENT=”信用卡查询,信用卡进度查询,网银导航,招商信用卡,交通信用卡,民生信用卡,中信信用卡,浦发信用卡,光大信用卡,兴业信用卡”>

参数：Description (简介)
说明：Description用来告诉搜索引擎你的网站主要内容。
举例：<meta name=”Description” Content=”你网页的简述”>
提示：无
例如：<META NAME=”Description” CONTENT=”本站点是银行卡快速导航站点,能帮您快速进入各银行网站查询所需资料,减少记忆麻烦”>

参数：Robots (机器人向导)
说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
举例：<meta name=”Robots” Content=”All|None|Index|Noindex|Follow|Nofollow”>
提示：许多搜索引擎都通过放出robot/spider搜索来登录网站，这些robot/spider就要用到meta元素的一些特性来决定怎样登录。
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；(和 “noindex, no follow” 起相同作用)
index：文件将被检索；（让robot/spider登录）
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
例如：<META NAME=”Robots” CONTENT=”All”>

参数：Author (作者)
说明：标注网页的作者或制作组
举例：<meta name=”Author” Content=”Design4u，QQ:66383210，admin@design4u.cn,”>
提示：Content可以是：你或你的制作组的名字,或Email
例如：<meta name=”Author” Content=”D4U STUDIO，admin@design4u.cn”>

参数：Copyright (版权)
说明：标注版权
举例：<meta name=”Copyright” Content=”本页版权归design4u.cn所有。All Rights Reserved”>
提示：无
例如：<META NAME=”Copyright” CONTENT=”本站版权归D4U STUDIO版权所有。All Rights Reserved”>

参数：Generator (编辑器)
说明：编辑器的说明
举例：<meta name=”Generator” Content=”PCDATA|FrontPage|”>
提示：Content=”你所用编辑器”
例如：<meta name=”Generator” Content=”PCDATA|FrontPage|”>

参数：Language (语言)
说明：网页语言的说明
举例：<META NAME=”Language” CONTENT=”zh-CN”>
提示：无
例如：<META NAME=”Language” CONTENT=”zh-CN”>

参数：Designer(设计者)
说明：网页设计者的说明
举例：<META NAME=”Designer” CONTENT=”your name”>
提示：一般而言，发布者为个人信息
例如：<META NAME=”Designer” CONTENT=”design4u”>

参数：Publisher(发布者)
说明：网站发布者的说明
举例：<META NAME=”Publisher” CONTENT=”your name”>
提示：一般而言，发布者为发布公司信息
例如：<META NAME=”Publisher” CONTENT=”D4U STUDIO”>

参数：Title(主题)
说明：网站主题说明
举例：<META NAME=”Title” CONTENT=”your title”>
提示：通常这里的值是网页的内容标题
例如：<META NAME=”Title” CONTENT=”Design4U个人站点”>

参数：Subject(内容的主题)
说明：主要是指这篇文章的主题是什么，核心内容是什么。
举例：<META NAME=”Subject” CONTENT=”your Subject”>
提示：无
例如：<META NAME=”Subject” CONTENT=”Design4U个人站点”>

参数：Abstract(摘要)
说明：网页页面说明
举例：<META NAME=”Abstract” CONTENT=”本网站为Design4U个人站点”>
提示：对页面内容进行简短的描述，常见于内容页面中，可以加强搜索引擎对页面内容的保存，便于用户搜索。
例如：<META NAME=”Abstract” CONTENT=”本网站为Design4U个人站点”>

参数：Expires(期限)
说明：网页页面期限
举例：<META NAME=”Expires” CONTENT=”time”>
提示：必须是GMT标准时间，定义过期时间，超过时间后即不能从cache中掉出。
例如：<META NAME=”Expires” CONTENT=”Wed, 11 Feb 2010 00:51:09 EST”>

参数：Distribution(分配目标)
说明：META NAME在那些页面有效
举例：<META NAME=”Distribution” CONTENT=”Global”>
提示：是指网站都在哪些地区范围出现，一般设置为Global即为全球范围。
例如：<META NAME=”Distribution” CONTENT=”Global”>

参数：Revisit-After(重访时间)
说明：一般大型网站，蜘蛛爬行频率相当频繁，导致服务器重压。因此做这样的限制是让蜘蛛在限定日期内重访，例如7 days就是七天访问一次
举例：<META NAME=”Revisit-After” CONTENT=”N Days”>
提示：是指网站都在哪些地区范围出现，一般设置为Global即为全球范围。
例如：<META NAME=”Revisit-After” CONTENT=”7 days”>

11 七

有用的HTML5学习资源

归类于 HTML5+CSS3 参与评论

虽然HTML5还是很新，没有被所有主要浏览器支持，但现在还是有许多设计师和开发人员使用。毫无疑问，几年下来，HTML5将对web开发起着很重要的作用。我注意到很多人都在使用它，但也有许多人还没有接触过HTML5。为了帮助学习这个任务，我们收集了7个有用的HTML5学习资源。

继续阅读

html5

11 七

学习HTML5不可错过的12家国外网站

归类于 HTML5+CSS3 参与评论

HTML5 是下一代 Web 语言，它不单单是一种标记语言，更为下一代 Web 提供了全新功能，并将引领下一代 Web 实现类似桌面的应用体验。本文提供了学习HTML5不可错过的十二家国外的网站，供大家参考。
继续阅读

html5

11 七

html5Gallery：专门收集HTML5网站设计

归类于 HTML5+CSS3 参与评论

html5Gallery是专门收集使用HTML标记创建的网站设计。如果你正准备学习HTML5，可以从这些网站里面查看各种实例，提高你对HTML的认知和使用。

html5

30 七

css hack_IE下内容显示不完整

归类于 DIV+CSS 参与评论

IE下内容显示不完整

/*\*/* html .rBox .title { height: 1%;}/**/

hack

01 七

WAP2.0介绍和使用规范

归类于 wap2.0 参与评论

—— XHTML MP and WCSS
一、WAP的常识（省略）
二、XHTML MP
（一）XHTML MP 介绍
XHTML MP（eXtensible HyperText Markup Language Mobile Profile）
WAP2.0
与WCSS（WAP CSS /WAP Cascading Style Sheet）配套使用
是XHTML的子集
XHTML Basic (XHTML子集)+另外的一些XHTML的元素和属性
WAP浏览器与互联网之间
以前WAP网站（WML and WMLScript ）
更多的展示表现（presentation control ）
继续阅读

wap

24 六

高品质的网页设计

归类于网络大杂绘参与评论

提升网页和博客设计品质的一些实例和技巧

“高品质”是所有人追求的目标，在网页设计的世界中也不例外。不过何为“品质”，如何判断一项设计的品质是好还是坏？笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里，你就掌握了让自己的设计更趋完美的大量技巧。

接下来我会给大家列一些要点，并附上相应的例子，与大家分享一下我在别人的网页设计中寻找“高品质”的过程。

01. 留白

在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式，能让你的设计的整体感官大不一样，从而提升设计的品质。

我觉得处理好留白的关键是从整体上感知设计元素。把设计稿缩小观看会是个好办法。
继续阅读

web

13 五

flash中关于导入FLV无法显示的问题解决

归类于网络大杂绘参与评论

一：flash如何实现flv循环播放？

我的做法是:
1.拖动MediaDisplay 组件到舞台！
2.打开组件检查器，选择"Flv"格式的媒体,在url处输入相同目录下的".flv"文件。
3. CTRL+ENTER预览。这一步。Flv文件载入播放就成功了。把flash文件和flv文件都拷贝到同一网站目录下，在页面上插入flash文件，就可以实现web数据流的视频播放了。但是我们会发现：".flv"文件在 flash里面只能自动播放一次。如果让视频文件在页面上循环播放，那效果会更好。
怎么样才能实现这一点呢？我们可以这样子做：把MediaDisplay实例命名为"myMedia" 在时间轴第一针加如下代码：
var myListener = new Object();
myListener.complete = function(eventObject)
{ myMedia.play(); };
myMedia.addEventListener("complete", myListener); 这样子flash就可以循环播放了！

二：FLASH导入FLV视频后传到服务器上无法显示，如何解决“虚拟主机不支持Flv格式文件”的问题！

我的做法是:

比如你的Flv文件名称是video.flv,在虚拟主机上建一个名为“video.flv”的目录，在此目录下放你的Flv格式文件，将其改名为：index.htm,这样就行了，播放器中的文件名保持原样不动

flv

23 四

meta是用来在HTML文档中模拟HTTP协议的响应头报文，META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。 http-equiv属性详解

name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类。这其中description（站点在搜索引擎上的描述）和keywords（分类关键词）是最重要的，所以应该给每页加一个meta值。

提升网页和博客设计品质的一些实例和技巧

01. 留白

meta是用来在HTML文档中模拟HTTP协议的响应头报文，META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。
http-equiv属性详解