任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客 » HTML http://www.renniaofei.com 任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客 Fri, 30 Jul 2010 10:51:25 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 网站开发压缩工具收集整理 http://www.renniaofei.com/tools/wangzhan-kaifa-yasuo-gongju/ http://www.renniaofei.com/tools/wangzhan-kaifa-yasuo-gongju/#comments Tue, 13 Jul 2010 08:09:44 +0000 任鸟飞 http://www.renniaofei.com/?p=1385 影响网站打开时间有两个因素，一个是网页加载速度，另一个是网站页面的大小。网站加载速度与用户所处的网络环境及主机性能有关，而网站页面的大小则由网站开发者决定。本文的重点就是如何压缩网站页面，以减少页面加载时间。

1. 图片压缩

相对与文本来说，图片是相当占用空间的。压缩图片是重中之重。

图片压缩工具推荐：

2. Javascipt 压缩

为了增加页面的交互性及动画效果，很多页面大量使用 Javascript ，特别是 Jquery。

推荐工具：

3. CSS 压缩

由于 CSS 代码有很多缩写，所以使用压缩工具压缩一下，能大大的降低CSS文件的大小。

推荐工具：

4. HTML 压缩

推荐使用 Dreamweaver 的清理工具。

附：Google Chrome 插件 —— 网页加载速度分析工具  Speed Tracer (by Google)

]]> http://www.renniaofei.com/tools/wangzhan-kaifa-yasuo-gongju/feed/ 0 htm和html等同吗？ http://www.renniaofei.com/code/htm-equal-html/ http://www.renniaofei.com/code/htm-equal-html/#comments Sun, 20 Jun 2010 04:55:48 +0000 任鸟飞 http://www.renniaofei.com/?p=1178 在学习网页设计的过程中，对遇到的好多问题都没有深究，比如说html和htm的关系，今天特意整理了一下，希望对你也有所帮助。

包含HTML内容的文件最常用的扩展名是.html，但是像DOS这样的旧操作系统限制扩展名为最多3个字符，所以.htm扩展名也被使用。虽然现在使用的比较少一些了，但是.htm扩展名仍旧普遍被支持。

两种都是静态网页文件的扩展名，扩展名可以互相更换而不会引起错误（这是指打开而言，但是对于一个链接来说，如果它指向的是一个htm文件，而那个htm文件被更改为html文件，那么是找不到这个连接的）

  • html 比 htm 的载入速度快
  • htm 为DOS三字符文件扩展名时代而来
  • html 为Windows时代支持多字符扩展名
]]> http://www.renniaofei.com/code/htm-equal-html/feed/ 4 使用HTML5和CSS3制作的网站模板下载 http://www.renniaofei.com/freebies/a-free-html5-and-css3-theme/ http://www.renniaofei.com/freebies/a-free-html5-and-css3-theme/#comments Fri, 07 May 2010 02:51:27 +0000 任鸟飞 http://www.renniaofei.com/?p=961 做网站有6年时间了，刚开始的时候都是利用表格（table）来布局页面元素，后来因为CSS2.0的出现，而转变为利用div来布局，其最大的好处就是页面样式与内容数据的分离，这对网站重构（redesign）相当重要。而近来HTML5和CSS3开始大行其道，作为一名设计师，必须走在技术的最前沿，并尝试使用并推广HTML5和CSS3。

浏览器对HTML5的支持情况：

目前 Firefox、Google Chrome、Opera 及 Safari（版本 4 以上）已支援 HTML5 技术。

HTML 5 提供了一些新的元素和属性，新增加的一些标签有一定含义，例如<nav>（网站导航块）和<footer>（页脚） 。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。

HTML5与 HTML 4 的不同之处：

  • 新的解析顺序
  • 新的元素：section, video, progress, nav, meter, time, aside, canvas
  • input 元素的新属性：日期和时间，email, url
  • 新的通用属性：ping, charset, async
  • 全域属性：id, tabindex, repeat
  • 移除元素：center, font, u, strike, s, frameset, frame, applet

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

CSS3的一些特性

现在很多网站都已经开始使用CSS3了，利用CSS3可以制作投影，发光，渐变，圆角等效果。

使用HTML5和CSS3制作的网站模板下载 – A CSS3 Theme


使用html5和css3制作的网站模板下载

预览 下载

总结：

通过这个模板的源代码（HTML5和CSS3），我们大致可以对HTML5和CSS3有个大致的了解，希望对你有所帮助和启发。

]]> http://www.renniaofei.com/freebies/a-free-html5-and-css3-theme/feed/ 3 如何编写符合标准的XHTML代码 http://www.renniaofei.com/code/code-comply-with-xhtml-standards/ http://www.renniaofei.com/code/code-comply-with-xhtml-standards/#comments Sat, 27 Feb 2010 07:11:52 +0000 任鸟飞 http://www.renniaofei.com/?p=542 由于HTML版本以及浏览器类型不同，在编写HTML代码时须注意以下事项。

1.  DOCTYPE （文档类型定义）

DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。
DOCTYPE须定义在文档的开始位置，而且必须注意大小写问题（case sensitive）。
例如常见的DOCTYPE定义成如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
具体的DOCTYPE定义请参考 HTML <!DOCTYPE> 标签

2. 字符编码（Character Encoding）

对于中文网站，Character Encoding通常定义成如下形式：
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
charset=gb2312：代表此文档使用的字符集为gb2312。

3. 使用html标准中规定的标签及属性（tags or attributes）

减少使用html标准以外的标签，例如常见的<BLINK> 和 <MARQUEE>，以增加HTML文档的兼容性。

4. HTML语法格式（formatted HTML）

  • 属性值尽量使用引号（兼容新标准）
    <p style=”font-face: arial, geneva”>
  • 记得关闭标签（tag）
    例如<p><img src=”logo.jpg” alt=”logo” /></p>
  • 标签层级正确，关闭标签的位置必须对应准确。

5.  <img /> 标签增加alt属性

例如：<img src=”logo.jpg” alt=”logo” />

6.  使用 script type 及 <noscript>

例如：


<script type="text/javascript">
.... javascript 代码 ...
</script>
<noscript>
<P>访问 <A  href="http://renniaofei.com/">任鸟飞网页设计</A>
</noscript>

7. 标签及属性符号尽量使用小写字母

例如：<div style=”font-size:12px;”></div>

8. 样式定义尽量定义在单独的.css文件中,以使样式和数据分离。

尽量避免如下情况：

<a href="http://www.renniaofei.com" style="color: #000; text-decoration: none;">任鸟飞网页设计</a>

XHTML校验工具

]]> http://www.renniaofei.com/code/code-comply-with-xhtml-standards/feed/ 0 36个非常重要但常被遗忘的HTML标签 http://www.renniaofei.com/code/36-ge-feichang-zhongyao-dan-chang-bei-yiwang-de-html-biaoqian/ http://www.renniaofei.com/code/36-ge-feichang-zhongyao-dan-chang-bei-yiwang-de-html-biaoqian/#comments Thu, 07 Jan 2010 08:59:40 +0000 任鸟飞 http://www.renniaofei.com/?p=382 每一个HTML标签都有其用法，但我们在写HTML代码时，却常常舍近求远，忽略了很多非常重要且特别有用的标签。

既然HTML中定义了这么多标签，而且每种标签都有其用法，我们为什么不尽量去使用这些标签呢。下面收集并整理了36个常被我们遗忘却非常有用的HTML标签。

1. <!– –> :注释

2. <!DOCTYPE>：文档类型声明

文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTDs，将使网页进入一种混乱模式(quirks mode)。

示例：

  • XHTML过渡定义类型，此类型可以使用HTML4中的标签

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

  • XHTML严格定义类型，此文档只可以使用XHTML1中定义的标签

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

  • XHTML1.1版定义类型

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

  • XHTML框架定义类型。(可以使用框架)

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

3. <abbr>：缩写

示例：<abbr title=”Limited”>Ltd.</abbr>

说明：简称和缩写是对一个惯用词组的缩写表示，一般使用词组中每个单词的首字母，比如CSS(Cascading Style Sheets),而HTML(Hypertext Markup Language)就不是一种提取首字母的缩写.有时候缩写经常会在最后加一个。

4. <acronym>： 取首字母的缩写

示例：<acronym title=”Cascading Style Sheets”>CSS</acronym>

5. <area>： 定义图像点击区域

  • area标签是单独出现的，<area />
  • area标签必须使用在map标签中，而且必须配合img标签使用。
  • 属性：
    • Common — 一般属性
    • accesskey — 链接的快捷键访问方式
    • alt — 图像的提示文字
    • coords — 定义可点击区域图形的坐标
    • href — HTML链接源的URL
    • nohref — 图像点击排除的区域，当不使用href时应使用nohref
    • shape — 可点击区域的形状
    • tabindex — 使用”Tab”键的遍历顺序
    • target — 链接目标
  • area是client-side image map area的意思，区域

area标签示例：

<img src=”http://www.renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>

6. <base>: 定义基URL用于页面的链接与引用

  • base标签是单独出现的，<base />
  • base标签只能放置在head标签内
  • 当使用相对路径定义链接时，可以使用base标签定义基URL解析所有文档中定义的相对路径的URL
  • 属性：
    • href — 基URL
    • target — 链接目标
  • base是document base URI的意思

base标签示例

<head> <base href=”http://www.renniaofei.com/” target=”_blank”> </head>

使用上面示例代码的html页面中的相对链接，将直接指向基URL http://www.renniaofei.com/，并且使用弹出窗口。

base标签在框架中的使用

base标签通常可以使用在框架链接中，例如
<frameset cols=”20%, *”> <frame src=”list.html”> <frame src=”http://www.renniaofei.com/” name=”mainTarget”> </frameset>

链接页list.htm

l<head> <base target=”mainTarget”> </head> <a href=”http://www.renniaofei.com/category/design/”>design</a> <a href=”http://www.renniaofei.com/category/graphic/”>graphic</a> <a href=”http://www.renniaofei.com/category/inspiration/”>inspiration</a> <a href=”http://www.renniaofei.com/category/freebies/”>freebies</a>

通过上面示例可以避免在每个链接中写入target=”mainTarget”

7. <blockquote>：表示引用块

  • blockquote标签是成对出现的，以<blockquote>开始，以</blockquote>结束
  • 属性：
    • Common — 一般属性
    • cite — 被引用内容的URI

示例：

<blockquote cite=”http://www.renniaofei.com/xhtml/”> <p>标准网页设计要区分内容与表现，学习标准网页设计。</p> </blockquote>

8. <button> ：定义按钮

  • button标签是成对出现的，以<button>开始，</button>结束
  • 可以定义比input内容更丰富的按钮。
  • 属性：
    • Common — 一般属性
    • accesskey — 快捷键访问方式
    • disabled — 禁止使用
    • name — 标签名称
    • tabindex — 使用”Tab”键的遍历顺序
    • type — 按钮类型
      • button — 普通按钮
      • reset — 重置表单按钮
      • submit — 提交按钮
    • value — 通过表单传递到服务器端的数据
  • button是push button的意思，按钮

button标签示例：

<button type=”submit”>提交</button>

一个使用文字的普通的提交按钮

<button type=”reset”> 从<strong>任鸟飞</strong>提交表单 </button>

改变按钮内加重文字的button标签

<button type=”button”> <img src=”renniaofei.png” alt=”提交” /></button>

说明：使用图片的button标签，注意有alt的提示文字。

9. <caption>：HTML表格的标题

  • caption标签是成对出现的，以<caption>开始。</caption>结束
  • 属性：
    • Common — 一般属性
  • caption:标题

示例：

<table width=”80%”> <caption> 域名数量介绍 </caption> <tr> <th>www.renniaofei.com</th> <th>.com域名的数量</th> <th>.cn域名的数量</th> <th>.net域名的数量</th> </tr> <tr> <td>2003年</td> <td>1000</td> <td>2000</td> <td>3000</td> </tr> <tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> <tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> </table>

说明：

  • caption标签可以为表格提供一个描述，和图像的说明alt比较类似.默认情况下，浏览器显示表格标题在表格的上方。
  • CSS里的caption-side属性用来控制表格标题显示的位置。

10. <cite>引用

  • cite标签是成对出现的，以<cite>开始，以</cite>结束
  • 属性：
    • Common — 一般属性
    • cite — 引用内容的URI
  • cite是citation的缩写

示例：

<cite cite=”http://www.renniaofei.com/”>一步步的教我学会HTML与XHTML</cite>

11. <col> 可以对HTML表格结构化分区后的一个或几个区域使用同样的样式行

  • col标签是单独出现的，<col />
  • 属性：
    • Common — 一般属性
    • span — 定义一个col跨越的列数,默认值为1

12. <colgroup>表示对HTML表格进行结构化的分区,在此分区中可以通过使用col定义每列表格的样式

  • colgroup标签是成对出现的，以<colgroup>开始，以</colgroup>结束
  • 属性：
    • Common — 一般属性
    • span — 定义一个colgroup跨越的列数,默认值为1

13. <dd>代表HTML自定义列表描述

  • dd标签是成对出现的，,以<dd>开始，</dd>结束
  • 属性：
    • Common — 一般属性
  • dd是definition description的缩写

14. del 标签 — 定义被删除的文本

  • del标签是成对出现的,以<del>开始，</del>结束
  • del通常应连同ins标签一同使用，表示被删除与被插入的文本
  • 通过del与ins定义文档可以帮助了解文档内容的修改过程，利于多人编辑系统
  • 使用del定义的文本通常带有删除线
  • 属性：
    • Common — 一般属性
    • cite — 引用网址，定义为何删除的引用网址
    • datetime — 删除的时间与日期
    • title — 定义删除的目的或提示
  • del是deleted text的缩写，删除文本

del标签示例：

<p>任鸟飞网页设计网址 <del title=”del url” cite=”http://www.renniaofei.com/”> http://www.renniaofei.com/ </del> <ins>http://www.renniaofei.com/</ins> ，原先 <del>http://www.renniaofei.com/</del> 网址已经删除。 </p>

15. <dir> 定义多层目录列表

  • 不符合标准网页设计的理念，不赞成使用.
  • dir标签是成对出现的，以<dir>开始，</dir>结束
  • 属性：
    • Common — 一般属性
  • dir是directory lists的缩写，目录列表

16. <dfn> – 定义标签

  • dfn标签是成对出现的，以<dfn>开始，以</dfn>结束
  • 属性：
    • Common — 一般属性
  • dfn是defining instance的缩写

示例： <dfn>任鸟飞</dfn>网页设计网!

17. <dl> 代表HTML自定义列表

  • dl标签是成对出现的，以<dl>开始，</dl>结束
  • 自定义列表的开始使用<dl>标签，列表中每个元素的标题使用<dt>(definition term)定义，后面跟随<dd>(definition description)用于描述列表中元素的内容.
  • 属性：
    • Common — 一般属性
  • dl是definition lists的英文缩写

示例：

<dl> <dt>www</dt> <dd>World Wide Web的缩写.</dd> <dt>renniaofei</dt> <dd>任鸟飞</dd> <dd>www的:).</dd> <dt>com</dt> <dt>com.cn</dt> <dt>cn</dt> <dd>这都是域名的后缀.</dd> </dl>

说明：

不一定每个dt标签要对应一个dd，可以一对多或多对一(就像上面的例子)

18. <dt>代表HTML自定义列表组

  • dt标签是成对出现的，以<dt>开始，</dt>结束
  • 属性：
    • Common — 一般属性
  • dt是definition term的缩写

19. <em> 强调标签

  • em标签是成对出现的，以<em>开始，以</em>结束
  • 属性：
    • Common — 一般属性
  • em是emphasis的缩写

示例： 强调一下,<em>不要</em>和我开玩笑!

20. <ins> 定义被插入的文本

  • ins标签是成对出现的，以<ins>开始，</ins>结束
  • ins通常应连同del标签一同使用，表示被插入与被删除的文本
  • 通过ins与del定义文档可以帮助了解文档内容的修改过程，利于多人编辑系统
  • 使用ins定义的文本通常带有下划线
  • 属性：
    • Common — 一般属性
    • cite — 引用网址，定义为何插入的引用网址
    • datetime — 插入的时间与日期
    • title — 定义插入的目的或提示
  • ins是inserted text的缩写，插入文本

ins标签示例：

<p>任鸟飞网页设计网址 <del title=”del url” cite=”http://www.renniaofei.com/”> http://www.renniaofei.com/ </del> <ins>http://www.renniaofei.com/</ins> ，原先 <del>http://www.renniaofei.com/</del> 网址已经删除。 </p>

21. <kbd>标签表明使用者输入的文字

  • kbd标签是成对出现的，以<kbd>开始，以</kbd>结束
  • 属性:
    • Common — 一般属性

示例： To exit, type <kbd>QUIT</kbd>.

22. <map>定义图像点击区域的集合

  • map标签是成对出现的,以<map>开始，</map>结束
  • map标签必须配合area标签使用
  • map标签中name与id属性指定的值必须与定义图像点击区中图像(img)的usemap属性指定的值一致
  • 属性
    • Common — 一般属性
    • id — 定义map的名称。
    • name — 定义map的名称。
  • map是client-side image map的意思

map标签示例：

<img src=”http://www.renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>

23. <menu> 定义菜单列表

  • 不符合标准网页设计的理念，不赞成使用。
  • menu标签是成对出现的,以<menu>开始，</menu>结束
  • 属性
    • Common — 一般属性
  • menu:菜单

24. <noframes>对不支持框架的设备进行提示

  • noframes标签是成对出现的，以<noframes>开始，</noframes>结束
  • 由于frameset内不能包含body标签，因此noframes内部必须包含body标签

示例

<frameset cols=”50%,25%,25%”> <frame src=”http://www.renniaofei.com/category/design/”> <frame src=”http://www.renniaofei.com/graphics/”> <frame src=”http://www.renniaofei.com/inspiration/”> <noframes> <body> <p>任鸟飞网页设计网使用了框架技术，但是您的浏览器不支持框架，请升级您的浏览器以便正常访问。</p> </body> </noframes> </frameset>

25. <noscript>无法加载脚本时的提示文字

  • noscript标签是成对出现的，以<noscript>开始,以</noscript>结束

示例

<noscript>此页面无法加载js脚本代码。</noscript>

26. <q>

表示一个行引用

  • q标签是成对出现的，以<q>开始，以</q>结束。
  • 属性:
    • Common — 一般属性
    • cite — 引用内容的URI
  • q是quoted text的缩写

示例：

<cite>古人</cite>云：<q>良言一句三冬暖，恶语伤人六月寒。</q>

27. <s>定义删除线的文字

  • 不符合标准网页设计的理念，不赞成使用。
  • s标签是成对出现的，以<s>开始，以</s>结束
  • 属性：
    • Common — 一般属性
  • s是strikethrough的缩写

28. <sub>表示下标

  • sub标签是成对出现的，以<sub>开始。以</sub>结束
  • 属性：
    • Common — 一般属性
  • sub是subscript的缩写

29. <sup>表示上标

  • sup标签是成对出现的，以<sup>开始，以</sup>结束
  • 属性：
    • Common — 一般属性
  • sup是superscript的缩写

30. <tbody> 表示HTML表体

浏览器显示表格时，通常是完全下载表格后，再全部显示，所以当表格很长时,可以使用tbody分段显示。

31. <tfoot>表示HTML表脚

表格的表脚tfoot，可以使用单独的样式定义表脚，并且在打印时可以在分页的下部打印表脚。

32. <th>代表HTML表格中的表头

  • th标签是成对出现的,以<th>开始，</th>结束
  • 属性：
    • Common — 一般属性
    • abbr — 代表表头的简写
    • axis — 对单元格在概念上分类
    • colspan — 一行跨越多列
    • headers — 连接表格的数据与表头
    • rowspan — 一列跨越多行
    • scope — 定义行或列的表头
    • align — 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
    • valign — 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
  • th是table header cell的缩写

示例：

<table width=”80%” border=”1″> <tr> <th>www.renniaofei.com</th> <th>.com域名的数量</th> <th>.cn域名的数量</th> <th>.net域名的数量</th> </tr> <tr> <th>2003年</th> <td>1000</td> <td>2000</td> <td>3000</td> </tr> <tr> <th>2004年</th> <td>4000</td> <td>5000</td> <td>6000</td> </tr> <tr> <th>2005年</th> <td>7000</td> <td>8000</td> <td>9000</td> </tr> </table>

33. <thead>表示HTML表头

表格的头部thead，可以使用单独的样式定义表头，并且在打印时可以在分页的上部打印表头

34. l 标签 — 表示一段语句

  • l标签是成对出现的，以<l>开始,以</l>结束
  • 属性：
    • Common — 一般属性
  • l是line of text的缩写

示例： <l>一行实实在在的文字!</l>

35. <Code>代码标签

code标签是成对出现的，以<code>开始，以</code>结束，常用于显示源代码。

36. <fieldset> 表单分组

如果一个页面的表单项太多，我们最好把它们分组显示，就像使用p标签分开段落一样，可以使用fieldset与legend标签对表单内容分组。

  • fieldset标签是成对出现的，以<fieldset>开始，以</fieldset>结束
  • 一个表单可以有多个<fieldset>，每对<fieldset>为一组，每组内容的描述可以使用legend标签说明

示例：

<fieldset> <legend>我最喜爱的：</legend> <label for=”computer”>计算机</label> <input type=”checkbox” value=”1″ id=”fav” name=”fav” /> <label for=”trval”>旅游</label> <input type=”checkbox” value=”2″ id=”fav” name=”fav” /> <label for=”buy”>购物</label> <input type=”checkbox” value=”3″ id=”fav” name=”fav” /> </fieldset>

]]> http://www.renniaofei.com/code/36-ge-feichang-zhongyao-dan-chang-bei-yiwang-de-html-biaoqian/feed/ 0