麥町 | 乌冬' » HTML http://udonmai.com Life hacking ' Sat, 21 Apr 2012 12:57:13 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 iphone web开发前端最基础框架 http://udonmai.com/work/iphone-web%e5%bc%80%e5%8f%91%e5%89%8d%e7%ab%af%e6%9c%80%e5%9f%ba%e7%a1%80%e6%a1%86%e6%9e%b6.html http://udonmai.com/work/iphone-web%e5%bc%80%e5%8f%91%e5%89%8d%e7%ab%af%e6%9c%80%e5%9f%ba%e7%a1%80%e6%a1%86%e6%9e%b6.html#comments Sun, 10 Apr 2011 09:04:44 +0000 udonmai' http://udonmai.com/?p=23932 突然用了框架这个概念，感觉自己很高级的样子。。。

其实我的这个算不上成型的框架。。因为代码量太小（安慰下:有代码就算框架啊。。）平时大家无论在用什么语言写程序的时候，为了更敏捷地开发，到了一定阶段运用框架是很必要的，大至javaEE的3大框架Struts Hibernate Spring(一点也没看过。。不过在某些领域是行业标准啊啊啊) RoR， .Net等，小至前端开发的一些css js开发框架。说到框架，可以说的太多，其实自己也不是很明白，后续补上吧。。

 

回到正题。说下我的这个小东西。

话说上学期给前辈做过很简单的基于iphone显示的网页，因为是在iphone这种特殊的移动终端上显示，所以必须考虑很多发生大的变动的因素，譬如网页的大小，布局，事件反应等等，css和js都是有所区别于正常pc上的浏览器的。

做了几个静态的iphone网页之后，今天把代码翻了下，删减掉每次的特殊的部分，留下的共用的html和css（js暂时没有写，它和pc浏览器的区别在于事件捕捉增加和一些在移动终端无效的属性的去除，以后再说吧~）总结下来，就是我所谓的框架了（脸皮挺厚。。）

下面都拿出来和大家分享（怎么好意思拿出来。。。）


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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>webapp</title>
<link rel="StyleSheet" href="style.css" type="text/css" media="screen" id="orient_css">

</head>

<body  onorientationchange="orient();"><!--js  感应控制-->

<div id="wrap">

</div>

</body>
</html>
//css
body
{
	margin-top:-0px;
	margin-left:-0px;
	text-decoration:none;
}

#wrap
{
	overflow:auto;
	width:320px;
	height:480px;
	background-color:#98989c;
}

@media only screen and (orientation:landscape)//对横竖屏转换的监控
{

body
{
	margin-top:-0px;
	margin-left:-0px;
	text-decoration:none;
}

#wrap
{
	overflow:auto;
	width:480px;
	height:320px;
	background-color:#98989c;
}

}

大致是这样，横竖屏转换是个关键点，开始头部的声明部分也很关键~

再提供一些参数：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
device-width：视图宽度与设备同宽。
<link rel="apple-touch-icon" href="/yourIcon.png"/>
指定在iPhone主屏上所显示的图标为yourIcon.png
<link rel="apple-touch-startup-image" href="/startupImage.png">
指定web应用启动时的显示图片。
<meta name="apple-mobile-web-app-capable" content="yes">
指定显示特征为web应用，不显示浏览器的特征。
01	// navigator.standalone
03	if ("standalone" in navigator){
04	 if (navigator.standalone){
05	 alert("Started from homescreen");
06	 }else{
07	 alert("Started in browser");
08	 }
09	}else{
10	 alert("Not supporting standalone property");
11	}
在script中用window.navigator.standalone属性判断是否是Web应用程序（是否是以homescreen方式启动的）。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

指定iphone的状态条（status bar）的显示为透明，透明状漂浮在web应用视图的上面。也可以是default或black值。


如：

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

或者

<meta name="apple-mobile-web-app-status-bar-style" content="default" />

但是确实有很多东西没有考虑，我准备如果可能的话会放在Git上版控呵呵。。积少成多呀~~

还有，如果想对iphone web开发深入下去的话，推荐国内唯一较好的译本《iphone开发实战》，里面讲述的是web开发和传统SDK开发基于iphone内嵌Safari的应用，主题都是web，很明确，难能可贵啊~什么高级WebKit开发，Canvas的HTML5开发，用开源控件库开发等等等等~

还有一个不错的开发总结，中文的能找到的不多，就先推荐下~

这里！！！！！！！！！！！！ 还有这里~~~~~~~~~

 

好了，大言不惭地把很傻的东西拿出来，也许是安慰自己多一点吧，这个所谓的框架真的只是最最最最最最最基本的设置了。。。哈哈   然后呢，靠大家自己添加了~~

:)

（框架？下一篇吧 嘿嘿~）

]]> http://udonmai.com/work/iphone-web%e5%bc%80%e5%8f%91%e5%89%8d%e7%ab%af%e6%9c%80%e5%9f%ba%e7%a1%80%e6%a1%86%e6%9e%b6.html/feed 0 当天的落魄总结 http://udonmai.com/work/summury.html http://udonmai.com/work/summury.html#comments Sat, 14 Aug 2010 12:58:33 +0000 udonmai' http://udonmai.com/?p=495 今天一天可以说是围绕着昨天的问题展开的，不可谓一事无成，但都是小事吧。

昨晚上豆瓣的时候，无意间又瞟到了被抓取显示的自己的博文，但很可惜格式丧失的问题还在（本来就没解决的。。。），不禁觉得不能放着不管了，于是乎准备着手处理它。

第一想到的自然是搜索。一阵google 百度，毫无收获，键入的“抓取博文 格式丧失”几个关键字，看来很少甚至没怎么被提到过。。。心中很是纳闷啊，这下该怎么办呢？是关键字问题？我于是想了些近似的关键字拿去搜，依然颗粒无收。当时确实很失落的。

随后我想到求助于前辈。豆瓣上的相关人士还是很多的，我就给几个做web开发或者准程序员们发了豆邮，当然了，我还发给了豆瓣的帮助中心以及豆瓣老大–阿北。发完之后，新生希望了。于是辗转人人，竟偶遇alswl前辈。自然，我不会放过这个询问的好机会的。

前辈给的提示是如果博客的格式都是由css全权决定而css是外联的话，rss输出的博客就是无格式的了，因为它无法自动读取，至少在没有其他脚本的帮助下是这样。而且这种情况是文章的段落结构连基本的html标准语义都不存在的时候艹会发生的，难道我的东东如此落魄？当时我想的是不可能吧。。。于是去看了下，一开始没看明白，css确实是外联的（现在推崇的形式），但是否全文无html标识我还没明白，和前辈到了声晚安，倦意把我拖上了床。

第二天我 起的不早。。。兴奋地开豆瓣看回信，不料只有一封回音。是key4ever前辈的，他的意思一开始是说没设定全文输出（其实上个月初我去他的博客留言他回的也是这个只是当时不知道为什么没有回复提醒我也就把这是忘记了，这次重复问，前辈的耐心我很感动啊），我调了之后，问题还是存在的，在他的提示下我看了IE中自己博客的feed输出，竟然是有格式还带图的！GoogleReader上也是可以看到格式的！我就纳闷了，Firefox中开feed源地址看到的可是一篇荒芜啊，chrome也是，九点抓到豆瓣显示的自然还是！那究竟是为什么啊~~~

前辈们可能都自己忙着呢，我决定自己想想办法。来到wp后台，从发布新文章里看可视化和HTML源码的切换，才发现，原来直接在可视化里码字，切到HTML格式连段落标识符都没有的，<p>啊<h>啊等等都没有，空空的！怎么会这样啊！后台管理器的问题？还是插件TinyMCE Advanced在作怪？这是个增加后台文章编辑功能的plugin，我心想，问题估计和他有点关系。。

于是我搜到了一篇文章WordPress 编辑器和代码高亮 。。之后的事都偏离了我要解决的问题。。。

我这才发现，自己的博客很多地方一点都不完善，仔细审视下来，大概有这么几点：1.页面宽度不够，在读产长篇文章时显得很不给力   2.没有页数导航，wp自带的单页反动极其被动，十分不方便   3.文章页面很空洞，不像很多网站有起码的相关文章   4.前辈们的博客充斥着代码且代码格式比较特别（就是代码高亮的说法吧）

“问题大致这些，先解决了这些再说”（当时确实来劲之后把老问给忘了。。。）

1     遂先调整页面吧，这个相对比较死，也最简单。犹豫用的是Firefox，有写扩展对于web开发者来说十分方便，比如这个–Firebug。只需利用它，我就知道了我的index页中的content框是哪些各项属性值又是怎么样的，之后进入后台的外观选项中的Editor中更改便可以了。这个没几分钟变调试成功了。

2   之后先处理了代码高亮的问题。经过一番搜索，我放弃了上文某个链接中提到的Google Syntax Highlighter for WordPress 转向使用了Syntax Highlighter and Code Colorizer for WordPress，原因是因为前辈翻译的文章WordPress代码高亮插件指南[译文]。

文章写得很清楚各个插件的利弊，大家不妨一读。（使用方法）这个为不久之后的代码发布点奠定了基础。hohoho~

3    再是页数导航，也就是大家常见的页面地步的一串链接到其他页面的数字（）这个问题其实也就是一个插件的问题，选择的余地也不大，一般都使用的是wp-pagenavi。同样，安装后简单设置之后（其实不用设，都很傻瓜的），在你想要添加这个分页的地方加上如下的代码：

 <?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>

一切就好了~样式可以自己去调它的css文件。

4 最后就是相关文章了，原理都差不多的。给出原文吧。是国人做的哦~适用于中文。不再赘述了。

好了，博客完善告一段落了，其实以前很多完善也都是某几天突然来劲了一点点累计的，插件好与坏，用了才知道的。博客成长是我的最终愿望啊，可是由于没有亮点，博客还不是一般的落寞，希望以后自己好好经营了，多多代码！

哦，差点忘了，我的rss输出问题，怎么办啊啊啊啊！！！！！这几天就得搞定，就这样！

后记：今天在搜资料的时候，看到有好多技术牛人呢，自己要好好学习，天天学术啊…

一天后续：早上开qq发现Key4ever来说九点抓到图了，我表示万分欣慰啊~~前辈也是很照顾的~继续折腾吧。。。（此事又遇到了single页面的导航无法显示的问题，解决中。。。文章尾部的相关info的添加也需处理）

]]> http://udonmai.com/work/summury.html/feed 0 HTML学习笔记 http://udonmai.com/work/html%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.html http://udonmai.com/work/html%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.html#comments Wed, 26 May 2010 10:33:46 +0000 udonmai' http://www.udonmai.com/?p=180 10/5/26

HTML标签

段落使用 <p> 标签进行定义。   HTML 会自动在段落前后添加一个额外的空行。

不要忘记关闭标签：我们可能注意到了，在编写段落时可以不带有 </p> 标签：

<p>This is a paragraph
<p>This is another paragraph

上面的例子在大多数浏览器中都可以工作，但是不要依赖这种做法。HTML 未来的版本不允许省略任何结束标签。通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。

当你打算结束一行，而又不想开始一个新段落时，<br> 标签就派上用场了。无论你将它置于何处，<br> 标签都会产生一个强制的换行。

<!– This is a comment –>     —–      注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。您可以使用注释对您的代码进行解释，这么做在以后的日子里会对您的代码编辑产生帮助。

对 HTML 元素的重新认识

  • 每个 HTML 元素都有一个元素名（比如 body、h1、p、br）
  • 开始标签是被括号包围的元素名
  • 结束标签是被括号包围的斜杠和元素名
  • 元素内容位于开始标签和结束标签之间
  • 某些 HTML 元素没有内容
  • 某些 HTML 元素没有结束标签

 

HTML 会裁掉文本中所有的空格。任何数量的空格都被按一个空格计数。另外，在 HTML 中，一个空行也被当作一个空格。

使用空的段落标记 <p> 去插入一个空行是个坏习惯。用 <br> 标签代替它！

HTML 会自动地在某些元素前后添加一个额外的空行，比如段落、标题元素前后。

使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

HTML会忽略你输入的文本格式，非所见即所得。

基本的 HTML 标签

标签 描述
<html> 定义 HTML 文档。
<body> 定义文档的主体。
<h1> to <h6> 定义标题 1 至标题 6。
<p> 定义段落。
<br> 插入折行。
<hr> 定义水平线。
<!–> 定义注释。

 

HTML属性

HTML 标签拥有属性。属性为 HTML 元素提供附加信息。

<h1 align=”center”> 拥有关于对齐方式的附加信息。—–<body bgcolor=”yellow”> 拥有关于背景颜色的附加信息。——-

<table border=”1″> 拥有关于表格边框的附加信息。

属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值，而 XHTML 要求使用小写属性/属性值。

始终为属性值加引号：属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=’John “ShotGun” Nelson’

HTML 文本格式化

以下为各种例子：

1.

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

<p>pre 标签很适合显示计算机代码：</p>

<pre>
for i = 1 to 10
     print i
next i
</pre>

输出：
这是
预格式文本。
它保留了      空格
和换行。

pre 标签很适合显示计算机代码：

for i = 1 to 10
     print i
next i

2.<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>

输出：

Computer code
Keyboard input
Teletype text

Sample text
Computer variable

注释：这些标签常用于显示计算机/编程代码。

3.<p>W3School 的地址：</p>
<address>
  <a href=”mailto:service@w3school.com.cn“>用户服务信箱</a><br />
  上海赢科投资有限公司<br />
  金桥开发区 789 号<br />
</address>

输出：

W3School 的地址：

用户服务信箱
上海赢科投资有限公司
金桥开发区 789 号
4……….
还有很多中格式…

文本格式化标签

标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用。使用 <del> 代替。
<strike> 不赞成使用。使用 <del> 代替。
<u> 不赞成使用。使用样式（style）代替。

“计算机输出”标签

标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> 不赞成使用。使用 <pre> 代替。
<plaintext> 不赞成使用。使用 <pre> 代替。
<xmp> 不赞成使用。使用 <pre> 代替。

引用、引用和术语定义

标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。

 

 

HTML 字符实体

诸如 “<” 之类的符号在HTML中拥有特殊的含义，所以在文本中使用它们。为了在 HTML 中显示小于号 (<)，我们需要使用字符实体。

字符实体有三部分：一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (;)。要在 HTML 文档中显示小于号，我们需要这样写：&lt; 或者 &#60;

空格是 HTML 中最普通的字符实体。

通常情况下，HTML 会裁掉文档中的空格。假如你在文档中连续输入 10 个空格，那么 HTML 会去掉其中的9个。如果使用 &nbsp;，就可以在文档中增加空格。

最常用的字符实体

显示结果 描述 实体名称 实体编号
  空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
“ 引号 &quot; &#34;
‘ 撇号  &apos; (IE不支持) &#39;

其他一些常用的字符实体

显示结果 描述 实体名称 实体编号
￠ 分 &cent; &#162;
£ 镑 &pound; &#163;
¥ 日圆 &yen; &#165;
§ 节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

HTML 链接

锚标签和 Href 属性

HTML 使用 <a> （锚）标签来创建连接另一个文档的链接。

锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。

创建锚的语法：

<a href="url">Text to be displayed</a>

<a> 用来创建锚。href 属性用于定位需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。

这个锚定义了指向 w3school 的链接：

<a href="http://www.w3school.com.cn/">Visit W3School!</a>

上面的这行在浏览器中显示为这样：Visit W3School!

HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中，而 HTML 文档 “frame_b.htm” 被置于第二个列中：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

 

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

 

表格标签

表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

 

HTML 列表

列表标签

标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。
<dir> 已废弃。使用 <ul> 代替它。
<menu> 已废弃。使用 <ul> 代替它。

 

HTML 表单和输入

表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（<form>）定义。

<form>
...
  input 元素
...
</form>

输入

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>

浏览器显示如下：

First name:

Last name:

注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

浏览器显示如下：

Male

注意，只能从中选取其一。

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>

浏览器显示如下：

I have a bike
I have a car

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

浏览器显示如下：

Username:

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.asp” 的页面。该页面将显示出输入的结果。

表单标签

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义一个控制的标签
<fieldset> 定义域
<legend> 定义域的标题
<select> 定义一个选择列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个按钮
<isindex> 已废弃。有<input>代替。

HTML 图像

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

URL 指存储图像的位置。如果名为 “boat.gif” 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

图像标签

标签 描述
<img> 定义图像。
<map> 定义图像地图。
<area> 定义图像地图中的可点击区域。

HTML 背景（Backgrounds）

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

以上的代码均将背景颜色设置为黑色。

背景（Background）

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

HTML 颜色

颜色由红色、绿色、蓝色混合而成。

颜色值

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：

Color Color HEX Color RGB
  #000000 rgb(0,0,0)
  #FF0000 rgb(255,0,0)
  #00FF00 rgb(0,255,0)
  #0000FF rgb(0,0,255)
  #FFFF00 rgb(255,255,0)
  #00FFFF rgb(0,255,255)
  #FF00FF rgb(255,0,255)
  #C0C0C0 rgb(192,192,192)
  #FFFFFF rgb(255,255,255)

颜色名

大多数的浏览器都支持颜色名集合。

提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

如果需要使用其它的颜色，需要使用十六进制的颜色值。

Color Color HEX Color Name
  #F0F8FF AliceBlue
  #FAEBD7 AntiqueWhite
  #7FFFD4 Aquamarine
  #000000 Black
  #0000FF Blue
  #8A2BE2 BlueViolet
  #A52A2A Brown

Web安全色

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

216 跨平台色

最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

HTML 颜色值

颜色由红色、绿色、蓝色混合而成。

颜色值

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

1600万种不同的颜色

通过计算 256 x 256 x 256，从 0 到 255 的红色、绿色和蓝色的值一共可以组合出 1600 万种不同的颜色。

大多数现代的显示器有能力显示出至少 16384 种不同的颜色。

基于此，都是从W3C上摘的，要说这么学，我还真学不会太多东西，诶，惭愧啊。还是看看书吧，潜心。这种笔记，还是完全积累后的原创实在，下次吧。

Female

]]> http://udonmai.com/work/html%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.html/feed 0 从HTML开始 http://udonmai.com/work/begin-html.html http://udonmai.com/work/begin-html.html#comments Wed, 26 May 2010 09:30:18 +0000 udonmai' http://www.udonmai.com/?p=162 我觉得这个weblog不能只是个噱头，该努力想各位前辈学习。我也要输出价值。

扯远了，踏实地开始吧。但愿以后一切都好。

Web组你要了我吧，我满怀赤诚的，哈哈。

]]> http://udonmai.com/work/begin-html.html/feed 0