BlogJava-天天进步-文章分类-HTML\CSS

html的学习

吴杨明 — Fri, 14 Sep 2007 09:41:00 GMT

摘要: HTML Tags Chart Tag ... 阅读全文

吴杨明 2007-09-14 17:41 发表评论

Web Development Information

吴杨明 — Fri, 14 Sep 2007 09:35:00 GMT

eb Development Articles:

Selecting a Quality Domain Name
Selecting the Best Web Design Language for Your Project
Bring Your Web Site to Life With PHP
The Birth of a Professional Web Site (10 part series)
Increase Your Traffic by Recovering Your Lost Visitors
Using HTML Tables to Format Your Web Page
HTML Forms -- Back to the Basics and Beyond Part One - Basic Forms Tutorial
HTML Forms -- Back to the Basics and Beyond Part Two - Advanced Forms
HTML Forms -- Back to the Basics and Beyond Part Three - Form Tips & Tricks
35 Deadly Web Site Sins that will Kill Your Business!
Selecting A Quality Web Host
Mini-Sites -- Highly Targeted Sales Generators
Spice Up Your Web Site with JavaScript
Use CGI to Automate Your Web Site
Give Your Graphics A Professional Look without the Price
Use JavaScript to Dynamically Update Your Website
10 Website Essentials to Increase Your Sales
Is Your Domain Name A Trademark Infringement?
Steps to Optimizing Your HTML Codes
The Secrets to Building a Successful Website

Web Site Building

If you're doing business on the internet, one of the most important aspects of your businesses success is your web site. If your web site doesn't look professional, no matter what product you're offering, your chance of success will be minimal. Take your time and make sure you understand the full picture before you begin.

Before we begin this tutorial, the absolute best advice I can offer is this…If you really want to succeed on the Internet in the shortest amount of time, I highly recommend Ken Evoy's highly acclaimed online business building system, Site Build it. This highly professional system was specifically designed to enable anyone to quickly and easily create a successful online business - from building and hosting your web site, to publishing an ezine, developing products and marketing. The Site Build it system nearly guarantees your success. All the tools, all in one place, and all for one price, are all tied together into a straightforward, integrated, step-by-step process that succeeds.

The following tutorial is an excerpt from Web Design Mastery, written by Shelley Lowery.

The appearance of your website is one of the most important aspects of your success. Your product or service will literally be judged by the appearance of your website.

Poor web design is one of the leading causes of small business failure. There are literally thousands of home-based Internet businesses struggling to make a living online. The problem is, they don't take the time to learn how to properly design their sites.

Web Design Guidelines

Your main page should specifically let your visitors know exactly what you're offering. If your potential customer can't find your product or service, they definitely won't waste a lot of time looking for it. They'll go on to the next site and probably never return. They're visiting your site for a specific purpose. They want something your site offers.

Create a page to display your Privacy Policy in regard to the personal information you collect from your visitors. Explain your reasons for collecting the information and let them know if the information will be given to or shared with a third party. We'll talk more about this later.

Create a page about you and/or your company. Include your name, company name, photograph, biography, address, phone number and email contact information.

Display your copyright information at the bottom of each page. It's best to include both the word Copyright and the © symbol, as some countries don't recognize one or the other. Your copyright might look like this:

Keep in mind, your visitors may enter your site from pages other than your main page. Make sure you include good navigational links on every page. Place your navigation links together at the top, bottom, left or right side of the page. Use tables to neatly align your links and maintain a nicely organized and uniform appearance throughout. Try to keep the number of clicks required to get from your main page to any other page on your site down to three or four and place your company logo on each page.

Use caution when selecting your background and text colors. Busy backgrounds make text difficult to read and draw the attention away from the text. In addition, always be consistent with your background theme on each page of your site.

Select your colors very carefully, as colors affect your mood and will have an affect on your visitors as well.

Bright colors such as yellow and orange, cause you to become more cheerful or happy, while colors such as blue and purple have a calming effect. Dark colors such as brown and black have a depressing effect. A good rule of thumb is to use colors based on the type of effect you're trying to achieve.

ALWAYS check and double-check your site for spelling and grammatical errors, and make sure your images and links are all working properly. If you have several errors, this will make your site appear to be unprofessional. If you are designing your site using an HTML editor, use spell check.

If you must use frames, use them sparingly. Frames, if not used properly, can make your site look unprofessional. Avoid making your visitors have to scroll from side to side to view your content. This can be very irritating and cause your visitors to leave. In addition, it is difficult for Search Engines to index sites made up of frames.

If you must use Java on your site, use it sparingly. Consider using JavaScript instead.

If you're using pop-up windows to display special offers or ezine subscription info, try to use a JavaScript that utilizes cookies. That way the window will only be displayed to your visitors the first time they visit your website. You can find one here.

View your website through different browsers and screen resolutions so you can see how your visitors will view your site.

Click here to test your site's browser compatibility.

Always be consistent when using font styles and sizes. Avoid using large font sizes, as this looks very unprofessional.

Never use tables with standard borders, as they look very unprofessional. If you'd like to use tables with borders, consider using a color border that is size one or two. You'll learn more about tables and borders later.

Continually add new content to your site. Give your visitors a reason to keep coming back.

Web Design Tips

When designing your website's main page, instead of trying to cram all of your information into one page, consider creating sections. These sections can contain highlights of your information with a link to further information. You can set your sections up in tables with colored heading sections for information such as news, articles, products or whatever you'd like.

It's much better to keep your main page down to the most essential elements. You can then use links to additional pages to provide the detailed information. A good rule of thumb is "less is more." In other words, keep your main page as small as possible, while at the same time, include your most important elements.

To enhance your page, you can format your text using bold headlines, colored table cells, and graphic bullets and/or arrows.

If you use the same graphic bullets and arrows throughout your page, you can enhance your page's appearance, but you won't add any additional time to your site's load time. When you reuse an image, your image only has to load once. When the image has loaded, it will instantly be displayed in all of the other locations.

吴杨明 2007-09-14 17:35 发表评论

CSS基本布局16例

吴杨明 — Fri, 14 Sep 2007 01:50:00 GMT

CSS基本布局16例

作者：Owen Briggs 2004-6-25 13:44:32

以下布局资料原作者：Owen Briggs

单行单列

单行单列1：采用float浮在左上角，固定宽度。
单行单列2：固定在左上角，固定宽度，采用的是绝对(absolute)定位。
单行单列3：固定在左上角，不固定宽度，采用百分比(%)定义宽度来自适应页面。
单行单列4(推荐)：固定宽度，采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。

单行两列

单行两列1：两列都固定宽度。第一列浮在左上角，第二列浮在第一列右边。
单行两列2：两列都百分比宽度，但不满屏。第一列固定在左上角，第二列浮在第一列右边。
单行两列3：两列都百分比宽度，满屏。两列都采用绝对定位。
单行两列4：两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在右上角。
单行两列5：两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在第一列右边。

单行三列

单行三列1：左右列都绝对定位(右列定位在右上)。左列和右列固定宽度，中间列自适应页面。
单行三列2：左列定位在左上，右列定位在右上，中间列浮在左列右面。左列和右列固定宽度，中间列自适应页面。
单行三列3：三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应。
单行三列4(推荐)：类似样式2，只是将margin: 20px属性增加在body样式中，解决了中间列在Netscape6.0中置顶的问题。
单行三列5：左右列绝对定位，中间列自适应。宽度满屏。

顶行三列

顶行三列1(推荐)：顶行自适应页面宽度。左右列绝对定位，中间列自适应页面。
顶行三列2：宽度满屏

216 Web Safe Color Chart

#FFFFFF R=255 G=255 B=255	#FFFFCC R=255 G=255 B=204	#FFFF99 R=255 G=255 B=153	#FFFF66 R=255 G=255 B=102	#FFFF33 R=255 G=255 B=51	#FFFF00 R=255 G=255 B=0
#FFCCFF R=255 G=204 B=255	#FFCCCC R=255 G=204 B=204	#FFCC99 R=255 G=204 B=153	#FFCC66 R=255 G=204 B=102	#FFCC33 R=255 G=204 B=51	#FFCC00 R=255 G=204 B=0
#FF99FF R=255 G=153 B=255	#FF99CC R=255 G=153 B=204	#FF9999 R=255 G=153 B=153	#FF9966 R=255 G=153 B=102	#FF9933 R=255 G=153 B=51	#FF9900 R=255 G=153 B=0
#FF66FF R=255 G=102 B=255	#FF66CC R=255 G=102 B=204	#FF6699 R=255 G=102 B=153	#FF6666 R=255 G=102 B=102	#FF6633 R=255 G=102 B=51	#FF6600 R=255 G=102 B=0
#FF33FF R=255 G=51 B=255	#FF33CC R=255 G=51 B=204	#FF3399 R=255 G=51 B=153	#FF3366 R=255 G=51 B=102	#FF3333 R=255 G=51 B=51	#FF3300 R=255 G=51 B=0
#FF00FF R=255 G=0 B=255	#FF00CC R=255 G=0 B=204	#FF0099 R=255 G=0 B=153	#FF0066 R=255 G=0 B=102	#FF0033 R=255 G=0 B=51	#FF0000 R=255 G=0 B=0

#CCFFFF R=204 G=255 B=255	#CCFFCC R=204 G=255 B=204	#CCFF99 R=204 G=255 B=153	#CCFF66 R=204 G=255 B=102	#CCFF33 R=204 G=255 B=51	#CCFF00 R=204 G=255 B=0
#CCCCFF R=204 G=204 B=255	#CCCCCC R=204 G=204 B=204	#CCCC99 R=204 G=204 B=153	#CCCC66 R=204 G=204 B=102	#CCCC33 R=204 G=204 B=51	#CCCC00 R=204 G=204 B=0
#CC99FF R=204 G=153 B=255	#CC99CC R=204 G=153 B=204	#CC9999 R=204 G=153 B=153	#CC9966 R=204 G=153 B=102	#CC9933 R=204 G=153 B=51	#CC9900 R=204 G=153 B=0
#CC66FF R=204 G=102 B=255	#CC66CC R=204 G=102 B=204	#CC6699 R=204 G=102 B=153	#CC6666 R=204 G=102 B=102	#CC6633 R=204 G=102 B=51	#CC6600 R=204 G=102 B=0
#CC33FF R=204 G=51 B=255	#CC33CC R=204 G=51 B=204	#CC3399 R=204 G=51 B=153	#CC3366 R=204 G=51 B=102	#CC3333 R=204 G=51 B=51	#CC3300 R=204 G=51 B=0
#CC00FF R=204 G=0 B=255	#CC00CC R=204 G=0 B=204	#CC0099 R=204 G=0 B=153	#CC0066 R=204 G=0 B=102	#CC0033 R=204 G=0 B=51	#CC0000 R=204 G=0 B=0

#99FFFF R=153 G=255 B=255	#99FFCC R=153 G=255 B=204	#99FF99 R=153 G=255 B=153	#99FF66 R=153 G=255 B=102	#99FF33 R=153 G=255 B=51	#99FF00 R=153 G=255 B=0
#99CCFF R=153 G=204 B=255	#99CCCC R=153 G=204 B=204	#99CC99 R=153 G=204 B=153	#99CC66 R=153 G=204 B=102	#99CC33 R=153 G=204 B=51	#99CC00 R=153 G=204 B=0
#9999FF R=153 G=153 B=255	#9999CC R=153 G=153 B=204	#999999 R=153 G=153 B=153	#999966 R=153 G=153 B=102	#999933 R=153 G=153 B=51	#999900 R=153 G=153 B=0
#9966FF R=153 G=102 B=255	#9966CC R=153 G=102 B=204	#996699 R=153 G=102 B=153	#996666 R=153 G=102 B=102	#996633 R=153 G=102 B=51	#996600 R=153 G=102 B=0
#9933FF R=153 G=51 B=255	#9933CC R=153 G=51 B=204	#993399 R=153 G=51 B=153	#993366 R=153 G=51 B=102	#993333 R=153 G=51 B=51	#993300 R=153 G=51 B=0
#9900FF R=153 G=0 B=255	#9900CC R=153 G=0 B=204	#990099 R=153 G=0 B=153	#990066 R=153 G=0 B=102	#990033 R=153 G=0 B=51	#990000 R=153 G=0 B=0

#66FFFF R=102 G=255 B=255	#66FFCC R=102 G=255 B=204	#66FF99 R=102 G=255 B=153	#66FF66 R=102 G=255 B=102	#66FF33 R=102 G=255 B=51	#66FF00 R=102 G=255 B=0
#66CCFF R=102 G=204 B=255	#66CCCC R=102 G=204 B=204	#66CC99 R=102 G=204 B=153	#66CC66 R=102 G=204 B=102	#66CC33 R=102 G=204 B=51	#66CC00 R=102 G=204 B=0
#6699FF R=102 G=153 B=255	#6699CC R=102 G=153 B=204	#669999 R=102 G=153 B=153	#669966 R=102 G=153 B=102	#669933 R=102 G=153 B=51	#669900 R=102 G=153 B=0
#6666FF R=102 G=102 B=255	#6666CC R=102 G=102 B=204	#666699 R=102 G=102 B=153	#666666 R=102 G=102 B=102	#666633 R=102 G=102 B=51	#666600 R=102 G=102 B=0
#6633FF R=102 G=51 B=255	#6633CC R=102 G=51 B=204	#663399 R=102 G=51 B=153	#663366 R=102 G=51 B=102	#663333 R=102 G=51 B=51	#663300 R=102 G=51 B=0
#6600FF R=102 G=0 B=255	#6600CC R=102 G=0 B=204	#660099 R=102 G=0 B=153	#660066 R=102 G=0 B=102	#660033 R=102 G=0 B=51	#660000 R=102 G=0 B=0

#33FFFF R=51 G=255 B=255	#33FFCC R=51 G=255 B=204	#33FF99 R=51 G=255 B=153	#33FF66 R=51 G=255 B=102	#33FF33 R=51 G=255 B=51	#33FF00 R=51 G=255 B=0
#33CCFF R=51 G=204 B=255	#33CCCC R=51 G=204 B=204	#33CC99 R=51 G=204 B=153	#33CC66 R=51 G=204 B=102	#33CC33 R=51 G=204 B=51	#33CC00 R=51 G=204 B=0
#3399FF R=51 G=153 B=255	#3399CC R=51 G=153 B=204	#339999 R=51 G=153 B=153	#339966 R=51 G=153 B=102	#339933 R=51 G=153 B=51	#339900 R=51 G=153 B=0
#3366FF R=51 G=102 B=255	#3366CC R=51 G=102 B=204	#336699 R=51 G=102 B=153	#336666 R=51 G=102 B=102	#336633 R=51 G=102 B=51	#336600 R=51 G=102 B=0
#3333FF R=51 G=51 B=255	#3333CC R=51 G=51 B=204	#333399 R=51 G=51 B=153	#333366 R=51 G=51 B=102	#333333 R=51 G=51 B=51	#333300 R=51 G=51 B=0
#3300FF R=51 G=0 B=255	#3300CC R=51 G=0 B=204	#330099 R=51 G=0 B=153	#330066 R=51 G=0 B=102	#330033 R=51 G=0 B=51	#330000 R=51 G=0 B=0

#00FFFF R=0 G=255 B=255	#00FFCC R=0 G=255 B=204	#00FF99 R=0 G=255 B=153	#00FF66 R=0 G=255 B=102	#00FF33 R=0 G=255 B=51	#00FF00 R=0 G=255 B=0
#00CCFF R=0 G=204 B=255	#00CCCC R=0 G=204 B=204	#00CC99 R=0 G=204 B=153	#00CC66 R=0 G=204 B=102	#00CC33 R=0 G=204 B=51	#00CC00 R=0 G=204 B=0
#0099FF R=0 G=153 B=255	#0099CC R=0 G=153 B=204	#009999 R=0 G=153 B=153	#009966 R=0 G=153 B=102	#009933 R=0 G=153 B=51	#009900 R=0 G=153 B=0
#0066FF R=0 G=102 B=255	#0066CC R=0 G=102 B=204	#006699 R=0 G=102 B=153	#006666 R=0 G=102 B=102	#006633 R=0 G=102 B=51	#006600 R=0 G=102 B=0
#0033FF R=0 G=51 B=255	#0033CC R=0 G=51 B=204	#003399 R=0 G=51 B=153	#003366 R=0 G=51 B=102	#003333 R=0 G=51 B=51	#003300 R=0 G=51 B=0
#0000FF R=0 G=0 B=255	#0000CC R=0 G=0 B=204	#000099 R=0 G=0 B=153	#000066 R=0 G=0 B=102	#000033 R=0 G=0 B=51	#000000 R=0 G=0 B=0

吴杨明 2007-09-14 09:50 发表评论

HTML FORM表单页面学习

吴杨明 — Thu, 13 Sep 2007 07:40:00 GMT

HTML 文件结构(Document Structures)

...
...
...



     , <base>, <link>, <isindex>, <meta>
</HEAD>
<BODY>
    HTML 文件的正文写在这里... ... 
</BODY>
</HTML>
</pre>
				</dl>
				<p>
						<!--################## LANGUAGE INFO ########################-->
						<a name="lang">
						</a>
				</p>
				<h2>
						 语言字符集(Charsets)的信息 </h2>
				<h3><meta http-equiv="Content-Type" content="text/html;charset=#"><br /></h3>
				<dl compact="">
						<dt>#= 
</dt>
						<dd>us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,<br />iso-2022-jp, x-sjis, x-euc-jp,<br />euc-kr, iso-2022-kr,<br />gb2312, gb_2312-80,<br />x-euc-tw, x-cns11643-1, x-cns11643-2, big5 </dd>
				</dl>
				<p>可在 HTML 文件中设置 MIME 字符集信息。<br />您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言(language encoding)。<br />但是如果 HTML 文件里写明了设置，浏览器就会自动设置语言选项。<br />尤其是主页里用到了<a href="http://www.lib.tsinghua.edu.cn/chinese/INTERNET/HTML/Normal/entities.html">字符实体(entities)</a>，则该主页就应该写明字符集信息。<br />否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。</p>
				<pre>
				</pre>
				<p>
						<!--################## Background Color ########################-->
						<a name="bgcolor">
						</a>
				</p>
				<h2>
						 背景色彩和文字色彩</h2>
				<h3><body bgcolor=# text=# link=# alink=# vlink=#></h3>
				<dl>
						<dd>bgcolor --- 背景色彩 
</dd>
						<dd>text --- 非可链接文字的色彩 
</dd>
						<dd>link --- 可链接文字的色彩 
</dd>
						<dd>alink --- 正被点击的可链接文字的色彩 
</dd>
						<dd>vlink --- 已经点击(访问)过的可链接文字的色彩 
<h3>#=rrggbb</h3></dd>
						<dd>色彩是用 16 进制的 红－绿－蓝(red-green-blue, RGB) 值来表示。<br />16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. 
<p></p></dd>
				</dl>
				<h3>背景图象 <body background="image-URL"><br />Non Scrolling Background <body bgproperties=FIXED> </h3>
				<pre>
				</pre>
				<p>
						<!--################## MARGIN ########################-->
						<a name="margin">
						</a>
				</p>
				<h2>
						 页面空白(Margin) </h2>
				<p>
						<!---Margi- -->
				</p>
				<h3>页面左边的空白 <body leftmargin=#><br />页面上方的空白(天头) <body topmargin=#> #=margin amount</h3>
				<pre>
				</pre>
				<p>
						<!--################## Link ########################-->
						<a name="link">
						</a>
				</p>
				<h2>
						 链接(Link)</h2>
				<p>
						<!---link basi- -->
				</p>
				<h3>基本语法 <a href="URL"> ... </a></h3>
				<dl>
						<dd>
								<tt>这是一个<br /><a href="samp/link.html">链接的例子</a>。 <br />点一下带下划线的文字!</tt>
								<br />
						</dd>
				</dl>
				<p>这是一个<a href="http://www.lib.tsinghua.edu.cn/chinese/INTERNET/HTML/Normal/samp/link.html">链接的例子</a>。 点一下带下划线的文字!</p>
				<p>
				</p>
				<pre>
				</pre>
				<p>
						<!---link nam- -->
				</p>
				<h3>跳转到页面的另外一个地方<br /><a href="#name"> ... </a><br /><a name="name"> ... </a> </h3>
				<dl>
						<dd>
								<tt><a href="#jump-test">跳转到下一个"链接点"</a><P><br /><a name="jump-test">下一个链接点</a> </tt>
						</dd>
				</dl>
				<p>
						<a href="http://www.lib.tsinghua.edu.cn/chinese/INTERNET/HTML/Normal/page.html#jump-test">跳转到下一个"链接点"</a>
				</p>
				<p>
						<a name="jump-test">
						</a>下一个链接点</p>
				<pre>
				</pre>
				<p>
						<!---link name - -->
						<a name="jump2">
						</a>
				</p>
				<h3>跳转到另一个页面的某个地方<br /><a href="URL#name"> ... </a><br /><a name="name"> ... </a> </h3>
				<dl>
						<dd>
								<tt>跳转到另一个页面的<a href="samp/link.html#jump-test">某个地方</a>。<br /></tt>
						</dd>
				</dl>
				<p>跳转到另一个页面的<a href="http://www.lib.tsinghua.edu.cn/chinese/INTERNET/HTML/Normal/samp/link.html#jump-test">某个地方</a>。</p>
				<pre>
				</pre>
				<p>
						<!--################## Target WINDOWS ########################-->
						<a name="window">
						</a>
				</p>
				<h2>
						 开一个新的(浏览器)窗口 (Target Window) </h2>
				<p>
						<!---Target Window- -->
				</p>
				<h3><a href="URL" target="Window_Name"> ... </a></h3>
				<dl>
						<dd>
								<tt><a href="samp/window.html" target="window_name"><br />开一个新窗口!<br /></a> </tt>
						</dd>
				</dl>
				<p>
						<a href="http://www.lib.tsinghua.edu.cn/chinese/INTERNET/HTML/Normal/samp/window.html" target="window_name">开一个新窗口!</a>
				</p>
				<pre>
				</pre>
				<p>
						<!--################## HR ########################-->
						<a name="hr">
						</a>
				</p>
				<h2>
						 标尺线</h2>
				<h3><hr></h3>
				<p>
						<tt><hr> </tt>
				</p>
				<p>
				</p>
				<hr />
				<p>
				</p>
				<pre>
				</pre>
				<h3><hr size=#></h3>
				<p>
						<tt><hr size=10> </tt>
				</p>
				<p>
				</p>
				<hr size="10" />
				<p>
				</p>
				<pre>
				</pre>
				<h3><hr width=#></h3>
				<p>
						<tt><hr width=50><br /><hr width=50%> </tt>
				</p>
				<p>
				</p>
				<hr width="50" />
				<hr width="50%" />
				<p>
				</p>
				<pre>
				</pre>
				<h3><hr align=#> #=left, right</h3>
				<p>
						<tt><hr width=50% align=left><br /><hr width=50% align=right> </tt>
				</p>
				<p>
				</p>
				<hr align="left" width="50%" />
				<hr align="right" width="50%" />
				<p>
				</p>
				<pre>
				</pre>
				<h3><hr noshade></h3>
				<p>
						<tt><hr noshade> </tt>
				</p>
				<p>
				</p>
				<hr noshade="" />
				<p>
				</p>
				<pre>
				</pre>
				<h3><hr color=#> </h3>
		</h2>
		<h2>========</h2>
		<h2>
				 基本语法</h2>
		<p>
				<!---Form Basi- -->
		</p>
		<h3>表单的基本语法</h3>
		<dl>
				<h3>
						<tt><form action="url" method=*><br />... <br />... <br /><input type=submit> <input type=reset><br /></form> </tt>
				</h3>
				<p>
						<tt>*=GET, POST </tt>
				</p>
		</dl>
		<pre>
		</pre>
		<p>
				<!---Input Basi- -->
		</p>
		<h3>表单中提供给用户的输入形式</h3>
		<dl>
				<h3>
						<tt><input type=* name=**></tt>
				</h3>
				<p>
						<tt>*=text, password, checkbox, radio, image, hidden, submit, reset</tt>
				</p>
				<p>
						<tt>**=Symbolic Name for CGI script </tt>
				</p>
		</dl>
		<pre>
		</pre>
		<p>
				<!--################## Text & Passwd ########################-->
				<a name="text">
				</a>
		</p>
		<h2>
				 文字输入和密码输入</h2>
		<p>
				<!---Text & Passwor- -->
				<tt>*=text, password</tt>
		</p>
		<h3><input type=*><br /><input type=* value=**></h3>
		<pre><form action=/cgi-bin/post-query method=POST>
您的姓名: 
<input type=text name=姓名><br>
您的主页的网址: 
<input type=text name=网址 value=http://><br>
密码: 
<input type=password name=密码><br>
<input type=submit value="发送"><input type=reset value="重设">
</form>

</pre>
		<p>
		</p>
		<form action="/cgi-bin/post-query" method="post">您的姓名: <input name="姓名" /><br />您的主页的网址: <input value="http://" name="网址" /><br />密码: <input type="password" name="密码" /><br /><input type="submit" value="发送" /><input type="reset" value="重设" /></form>
		<pre>
		</pre>
		<p>
				<!---Text & Password- Size, Max- -->
		</p>
		<h3><input type=* size=**><br /><input type=* maxlength=**></h3>
		<pre><form action=/cgi-bin/post-query method=POST>
<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
<input type=submit><input type=reset>
</form>

</pre>
		<p>
		</p>
		<form action="/cgi-bin/post-query" method="post">
				<input size="40" name="a01" />
				<br />
				<input maxlength="5" name="a02" />
				<br />
				<input type="submit" value="提交查询内容" />
				<input type="reset" value="重置" />
		</form>
		<pre>
		</pre>
		<p>
				<!--################## Checkbox & Radio ########################-->
				<a name="check">
				</a>
		</p>
		<h2>
				 复选框(Checkbox) 和 单选框(RadioButton) </h2>
		<p>
				<!---Checkbo- -->
		</p>
		<h3><input type=checkbox><br /><input type=checkbox checked><br /><input type=checkbox value=**></h3>
		<pre><form action=/cgi-bin/post-query method=POST>
<input type=checkbox name=水果1>
        Banana<p>
<input type=checkbox name=水果2 checked>
        Apple<p>
<input type=checkbox name=水果3 value=橘子>
        Orange<p>
<input type=submit><input type=reset>
</form>

</pre>
		<p>
		</p>
		<form action="/cgi-bin/post-query" method="post">
				<input type="checkbox" name="水果1" />Banana
<p><input type="checkbox" checked="" name="水果2" />Apple</p><p><input type="checkbox" value="橘子" name="水果3" />Orange</p><p><input type="submit" value="提交查询内容" /><input type="reset" value="重置" /></p></form>
		<pre>
		</pre>
		<p>
				<!---Checkbo- -->
		</p>
		<h3><input type=radio value=**><br /><input type=radio value=** checked></h3>
		<pre><form action=/cgi-bin/post-query method=POST>
<input type=radio name=水果>
        Banana<p>
<input type=radio name=水果 checked>
        Apple<p>
<input type=radio name=水果 value=橘子>
        Orange<p>
<input type=submit><input type=reset>
</form>

</pre>
		<p>
		</p>
		<form action="/cgi-bin/post-query" method="post">
				<input type="radio" name="水果" />Banana
<p><input type="radio" checked="" name="水果" />Apple</p><p><input type="radio" value="橘子" name="水果" />Orange</p><p><input type="submit" value="提交查询内容" /><input type="reset" value="重置" /></p></form>
		<pre>
		</pre>
		<p>
				<!--################## Image ########################-->
				<a name="image">
				</a>
		</p>
		<h2>
				 图象坐标 </h2>
		<p>
				<b>在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！</b>
		</p>
		<h3><input type=image src=url></h3>
		<pre><form action=/cgi-bin/post-query method=POST>
<input type=image name=face src=f.gif><p>
<input type=radio name=zoom value=2 checked>x2
<input type=radio name=zoom value=4>x4
<input type=radio name=zoom value=6>x6<p>
<input type=reset>
</form>

</pre>
		<p>
		</p>
		<form action="/cgi-bin/post-query" method="post">
				<input type="image" src="http://www.lib.tsinghua.edu.cn/chinese/INTERNET/HTML/Normal/f.gif" name="face" />
				<p>
						<input type="radio" checked="" value="2" name="zoom" />x2 <input type="radio" value="4" name="zoom" />x4 <input type="radio" value="6" name="zoom" />x6</p>
				<p>
						<input type="reset" value="重置" />
				</p>
		</form>
		<pre>
		</pre>
		<p>
				<!--################## Hidden ########################-->
				<a name="hide">
				</a>
		</p>
		<h2>
				 隐藏表单的元素 </h2>
		<h3><input type=hidden value=*></h3>
		<pre><form action=/cgi-bin/post-query method=POST>
<input type=hidden name=add value=hoge@hoge.jp>
Here is a hidden element. <p>
<input type=submit><input type=reset>
</form>

</pre>
		<p>
		</p>
		<form action="/cgi-bin/post-query" method="post">
				<input type="hidden" value="hoge@hoge.jp" name="add" />Here is a hidden element. 
<p><input type="submit" value="提交查询内容" /><input type="reset" value="重置" /></p></form>
		<pre>
		</pre>
		<p>
				<!--################## Select ########################-->
				<a name="select">
				</a>
		</p>
		<h2>
				 列表框(Selectable Menu) </h2>
		<p>
				<!---Basi- -->
		</p>
		<h3>基本语法</h3>
		<dl>
				<h3><select name=*><br /><option> ...<br /></select> </h3>
		</dl>
		<p>
				<!---select & optio- -->
		</p>
		<h3><option selected><br /><option value=**></h3>
		<pre><form action=/cgi-bin/post-query method=POST>
<select name=fruits>
        <option>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
</select><p>
<input type=submit><input type=reset>
</form>

</pre>
		<p>
		</p>
		<form action="/cgi-bin/post-query" method="post">
				<select name="fruits">
						<option>Banana</option>
						<option selected="">Apple</option>
						<option value="My_Favorite">Orange</option>
				</select>
				<p>
						<input type="submit" value="提交查询内容" />
						<input type="reset" value="重置" />
				</p>
		</form>
		<pre>
		</pre>
		<p>
				<!---size & multipl- -->
		</p>
		<h3><select size=**></h3>
		<pre><form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3>
        <option>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
        <option>Peach
</select><p>
<input type=submit><input type=reset>
</form>

</pre>
		<p>
		</p>
		<form action="/cgi-bin/post-query" method="post">
				<select size="3" name="fruits">
						<option>Banana</option>
						<option selected="">Apple</option>
						<option value="My_Favorite">Orange</option>
						<option>Peach</option>
				</select>
				<p>
						<input type="submit" value="提交查询内容" />
						<input type="reset" value="重置" />
				</p>
		</form>
		<pre>
		</pre>
		<p>
				<!---multipl- -->
		</p>
		<h3><select size=** multiple></h3>
		<b>注意，是用 Ctrl 键配合鼠标实现多选。<br />(和 MS-WINDOWS 的 File Manager 一样)</b>
		<pre><form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3 multiple>
        <option selected>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
        <option selected>Peach
</select><p>
<input type=submit><input type=reset>
</form>
</pre>
		<p>
		</p>
		<form action="/cgi-bin/post-query" method="post">
				<select multiple="" size="3" name="fruits">
						<option selected="">Banana</option>
						<option selected="">Apple</option>
						<option value="My_Favorite">Orange</option>
						<option selected="">Peach</option>
				</select>
				<p>
						<input type="submit" value="提交查询内容" />
						<input type="reset" value="重置" />
				</p>
		</form>
		<pre>
		</pre>
		<p>
				<!--################## Textarea ########################-->
				<a name="textarea">
				</a>
		</p>
		<h2>
				 文本区域</h2>
		<h3><textarea name=* rows=** cols=**> ... <textarea></h3>
		<pre><form action=/cgi-bin/post-query method=POST>
<textarea name=comment rows=5 cols=60>
</textarea>
<P>
<input type=submit><input type=reset>
</form>

</pre>
		<p>
		</p>
		<form action="/cgi-bin/post-query" method="post">
				<textarea name="comment" rows="5" cols="60">
				</textarea>
				<p>
						<input type="submit" value="提交查询内容" />
						<input type="reset" value="重置" />
				</p>
		</form>
		<pre>
		</pre>
		<p>
				<!---Word Wrapping Of- -->
				<a name="wrap">
				</a>
		</p>
		<h3>对于很长的行是否进行换行的设置(Word Wrapping) </h3>
		<h3><textarea wrap=off> ... </textarea></h3>
		<dl>
				<dd>不换行，是缺省设置。 </dd>
		</dl>
		<p>
				<!---Word Wrapping Sof- -->
		</p>
		<h3><textarea wrap=soft> ... </textarea></h3>“软换行”，好象 MS－WORD 里的“软回车”。 
<dl><dd><tt><form action=/cgi-bin/post-query method=POST><br /><textarea wrap=soft name=comment rows=5 cols=25> </textarea><P><br /><input type=submit><input type=reset><br /></form></tt><br /></dd></dl><p></p><form action="/cgi-bin/post-query" method="post"><textarea name="comment" rows="5" cols="25"></textarea><p><input type="submit" value="提交查询内容" /><input type="reset" value="重置" /></p></form><p><!---Word Wrapping Har- --></p><h3><textarea wrap=hard> ... </textarea></h3>“硬换行”，好象 MS－WORD 里的“硬回车”。 
<dl><dd><tt><form action=/cgi-bin/post-query method=POST><br /><textarea wrap=hard name=comment rows=5 cols=25> </textarea><P><br /><input type=submit><input type=reset><br /></form></tt><br /></dd></dl><p></p><form action="/cgi-bin/post-query" method="post"><textarea name="comment" rows="5" wrap="hard" cols="25"></textarea><p><input type="submit" value="提交查询内容" /><input type="reset" value="重置" /></p></form><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/coacoa2008/" target="_blank">吴杨明</a> 2007-09-13 15:40 <a href="http://www.blogjava.net/coacoa2008/articles/144883.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>
</article>
<article>
<h1>网页万年历</h1>
<p>吴杨明 — Thu, 13 Sep 2007 03:41:00 GMT</p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br /><HTML><HEAD><TITLE>阳历与阴历对照表








onload=initial() marginheight="0" marginwidth="0">

 
 
   
     

     

     

     
     

     

     
     
     
       
       
         
         
         
           
           
本地时间:
           id=Clock face=Arial color=#000080 size=4 
           align="center">  
                      size=2>时间            id=tSave 
           style="FONT-SIZE: 18pt; COLOR: red; FONT-FAMILY: Wingdings">

           style="FONT-SIZE: 120pt; COLOR: green; FONT-FAMILY: Webdings">û
           id=CITY 
           style="FONT-SIZE: 9pt; WIDTH: 150px; COLOR: blue; FONT-FAMILY: ''宋体''"> 
           
             
             
               
             
               
               
               
               
               
               
               
             
                              size=2>公历 年 月                  size=4> 
日 一 二 三 四 五 六





 
           
 
           
 
           
 
           

网页万年历2006-5-6 23:43:07 www.aspxuexi.com 
本文主题:网页万年历


吴杨明 2007-09-13 11:41 发表评论

css-----listTable inputTable

吴杨明 — Wed, 12 Sep 2007 08:51:00 GMT

/* ------------------------------------------------------------------*/ /* WebWork2 CSS Classes */ /* ------------------------------------------------------------------*/
.tdLabel{
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
background-color: #D9D9D9;
}

.inputTable {
border-collapse: collapse; /* need IE5+*/
width: 95%;
}
.inputTable caption{
text-align: left;
font-weight: bold;
font-size: 14px;
}

.inputTable th{
font-weight: bold;
padding-left: 20px;
padding-right: 10px;
text-align: left;
background-color: #D9D9D9;
border: 1px solid #666666;
width:25%;
}

.inputTable td {
border: 1px solid #666666;
}

.listTable {
border-collapse: collapse; /* need IE5+*/
width: 95%;
}

.listTable caption{
text-align: center;
font-weight: bold;
font-size: 14px;
}

.listTable th{
font-weight: bold;
padding-left: 20px;
padding-right: 10px;
text-align: center;
background-color: #D9D9D9;
border: 1px solid #666666;
line-height:24px;
font-size: 13px;
}

.listTable td {
border: 1px solid #666666;
}

tr,td,select,body,div,input,button,pre,textarea{
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
font-size: 12px;
}

A{TEXT-DECORATION:none}A:link{COLOR:#003366;}A:visited{COLOR:#003366;}A:active{COLOR:#003366;}A:hover{COLOR:#CC3300;}

body{
    /*background-image: url(../images/bg.gif);*/
}
table{
    empty-cells: show;
}
td{
    line-height:20px;
}

p,ul,li{
margin:0;padding:0;
}
.pageBody{
margin: 0px auto; width: 800px;
}

.mainmenu{
    border-collapse: collapse ; /*collapse|separate need IE5+*/
    margin: 0px auto;
width: 800px;
}
.mainmenu tr{
    background:;
}
.mainmenu td{
    /*border: 1px solid #666666;*/
    text-align: center;
    font-weight: bold;
}

.mainmenu ul{
list-style:none;
}
.mainmenu li{
float:left;width:120px;background:#74AAE4;font-weight: bold;margin-left:2px;
}

.mainmenu a{
border: 0px solid #666666;text-align:center;padding:0px;font-size: 13px;line-height:30px;height:30px;display:block;
}
.mainmenu a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #3460C4 no-repeat 5px 12px;display:list-item;list-style-type:square ;}

.submenu{
    border-collapse: collapse ;
background-image: url(sub_menu_bg.gif);
    width: 100%;
    padding:0px;
}
.submenu thead{
}
.submenu td{
    /*background-color: #8DA3C8;*/
    /*border: 1px solid #666666; */
background-image: url(sub_menu_bg.gif);
    border-top: 1px solid #666666;
    text-align: center;
    font-weight: bold;
    line-height:20px;
font-size: 14px;
    padding:5px;
}
.submenu a{
    display:block;text-align:center;line-height:20px;padding:0px;
}
.submenu a:hover{color:#FFF; font-weight:bold;text-decoration:none;}

.sideBar{
width:200px;overflow:hidden;float:left;clear:left;BORDER: 0px #999999 solid;text-align:left;display:inline;
}

.sideBarDiv {
BORDER: 1px #999999 solid;width:190px;margin-top:4px;margin-bottom:4px ;
}

.sideBarDiv h4 {
border: 0px solid #999999 ;margin:0;background:url(content_title_bg.gif) repeat-x ; color:#FFFFFF;font-size:14px;line-height:26px;padding-left:15px;
}
.sideBarDiv ul {
list-style-type: none;margin:5px 0px 5px 10px;
}
.sideBarDiv ul li {
padding:5px 0 0 20px; background:url(red_txt_pic.gif) no-repeat left 8px;
}
.sideBarDiv ul li a {
text-align:left; width:190px;
}

.mainContent{
    float:right;clear:right; width:760px;height:550px;text-align:left;overflow:hidden;BORDER: 0px #999999 solid;display:inline;
}
.mainContentDiv {
    border: 1px solid #999999 ;height:100px;width:750px;height:150px;margin: 4px auto ;
}
.mainContent h4 {
    border: 0px solid #999999 ;margin:0;background:url(content_title_bg.gif) repeat-x ; color:#FFFFFF;font-size:14px;line-height:26px;padding-left:15px;
}
.mainContentDiv ul {
text-align:right;list-style-type: none;margin:5px 0px 5px 10px;
}
.mainContentDiv ul li {
float:left;padding:5px 0 0 20px; background:url(red_txt_pic.gif) no-repeat left 7px;
}
.mainContentDiv ul li a {
    float:left; text-align:left; width:400px;
}

.footer{
background-color: #FDF2C4 ;
margin:0 auto;
width:800px;
clear:both;
text-align:center;
}

.readonly{
BACKGROUND: #FFF6DC;border: 1px solid #999999 ;BORDER-STYLE: none; background-image: url(../images/tablebg.gif);
}

input,select,textarea{
    border: 1px solid #999999 ;
}
.button{
    BACKGROUND: #D9D9D9;border: 1px solid #999999 ; cursor:pointer;
}
button{
    BACKGROUND: #D9D9D9;border: 1px solid #999999 ; cursor:pointer;
}
.checkbox {
    BORDER-STYLE: none;
}
.radio {
    BORDER-STYLE: none;
}

.thread {
    font-weight: bold;
    background-color: #f5f5f5;
}
img {
    border-style:none;
    cursor: pointer;
}

.require{
color:red;
}
.invalidation{
BACKGROUND: #FFF6DC;border: 1px solid #999999 ;
}

.switchContent{
}
.switchIcon{
margin:0px;padding-bottom:1px; ;border: 1px solid #666666;cursor: hand;width:13px;line-height: 10px;text-align: center; font-family: "Courier";font-size: 12px;
}

.inputTable {
border-collapse: collapse; /* need IE5+*/
width: 95%;
}
.inputTable caption{
text-align: left;
font-weight: bold;
font-size: 14px;
}

.inputTable th{
font-weight: bold;
padding-left: 20px;
padding-right: 10px;
text-align: left;
background-color: #D9D9D9;
border: 1px solid #666666;
width:25%;
}

.inputTable td {
border: 1px solid #666666;
}

.listTable {
border-collapse: collapse; /* need IE5+*/
width: 95%;
}

.listTable caption{
text-align: center;
font-weight: bold;
font-size: 14px;
}

.listTable th{
font-weight: bold;
padding-left: 20px;
padding-right: 10px;
text-align: center;
background-color: #D9D9D9;
border: 1px solid #666666;
line-height:24px;
font-size: 13px;
}

.listTable td {
border: 1px solid #666666;
}
.oddRow {
background-color: #EEEEEE;
}
.evenRow {
background-color: #FFFFFF;
}
.overRow {
background-color: #FDF2C4 ;
}
.errorMessage {
color: red;
background-color: #eeeeee;
}
.errorLabel {
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
color: #0000ff;
}

.fieldset{
    padding:1px;line-height:120px;background-color:#D9D9D9;MARGIN:0px;
}
.copyright{
    width: 100%;text-align:center;MARGIN: auto;}
}
/* Page Tag Style */
.firstPage{
    background-color: #D9D9D9;border: 1px solid #999999 ; cursor:pointer;
}
.previousPage{
    background-color: #D9D9D9;border: 1px solid #999999 ; cursor:pointer;
}
.nextPage{
    background-color: #D9D9D9;border: 1px solid #999999 ; cursor:pointer;
}
.lastPage{
    background-color: #D9D9D9;border: 1px solid #999999 ; cursor:pointer;
}
.switchDiv{
    display:;padding-left:2px;padding-bottom:2px;
}
.switchDivTitle{
    border: 1px solid #666666;
    cursor: hand;
    MARGIN: 0px;
    text-align: left;
    font-weight: bold;
    width:95%;
    background-color: #C5D2E8;
}

.pageTitle{
    MARGIN: 1px;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    background-color: #D9D9D9;
}

.inlineFrame{
border:0px solid window;
    MARGIN: 1px;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    background-color: #D9D9D9;
}

吴杨明 2007-09-12 16:51 发表评论

FCK

吴杨明 — Tue, 11 Sep 2007 08:31:00 GMT

首先,FCKEDITOR的性能是非常好的,用户只需很少的时间就可以载入FCKEDITOR所需文件.对于其他在线编辑器来说,这几乎是个很难解决的难题,因为在开启编辑器时需要装载太多的文件.比如CUTEEDITOR,虽然功能比FCKEDITOR还要强大,可是,它本身也够庞大了,至于FREETEXTBOX等,其易用性与FCKEDITOR相比,尚有差距,可以说,FCKEDITOR是一个别具匠心的在线编辑器,它里面融入了作者高深的面向对象的JAVASCRIPT功力,集易用性与强大的功能与一体.

.与编辑器相关的所有图像,脚本以及调用页
.语言文件
.编辑器的皮肤文件
.工具样的贴图等

这些将导致在服务器和客户端间产生相当的流量.如果有许多文件被调用,那么即便每个文件很小.也会让用户等得不耐烦.

在2.0版中,开发人员有两种方法来解决这个问题.
那就是指定装载顺序和脚本压缩

装载顺序
从2.0版开始,编辑器按以下步骤装载资源:
.基本页(就是编辑器所在页)以及装入编辑器的JS脚本
.用来建立编辑器的脚本
.编辑器的语言和皮肤.
.建立编辑器.
.载入预置的编辑文档内容.
.从现在开始,用户可以阅读和编辑文档了,不过,拖拽支持以及工具栏都是不可用的
.载入编辑器引擎脚本
.建立工具栏,并且可用
.从现在开始,编辑器的所有功能都已经完整
.载入工具栏图标

脚本压缩

在打包任何新版本时,编辑器的JS脚本将会进行预处理.预处理步骤如下:
.移除所有代码注释
.移除所有无用的空白字符.
.将脚本合并成几个文件

使用上面的方法,我们可以将脚本文件的大小压缩到原来的50%.
压缩后,原始的代码仍然存在于一个名为_Source的文件夹中

如何打包?
编辑器已经自带了打包程序,它位于FCKEDITOR的根文件夹中_PACKAGER文件夹中,名为Fckeditor.Packager.exe,将其复制到FCKEDITOR根文件夹中并运行,即可自动将JS脚本打包并压缩
需要注意的是该程序是一个.NET程序,必须安装.NET FRAMEWORK才能使用

想要获取支持?
如果你捐赠15000欧元,你就可以获得1年的免费技术支持(比较贵的说,相当于人民币15万,不过西欧的费用相当惊人)

如何安装?

1.下载最新版的FCKEDITOR
2.解压缩到你的站点根文件夹中名为FCKEDITOR的文件夹中(名称必须为FCKEDITOR,因为配置文件中已经使用此名称来标示出FCKEDITOR的位置)
3.现在,编辑器就可以使用了,如果想要查看演示,可以按下面方法访问:
http:///FCKeditor/_samples/default.html

注意:你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放入到FCKEDITOR文件夹是最为简单的方法.如果你放入的文件夹使用别的名称,请修改配置文件夹中编辑器BasePath参数,如下所示:
oFckeditor.BasePath="/Components/fckeditor/";

另外,FCKEDITOR文件夹中所有以下划线开头的文件夹及文件,都是可选的,可以安全的从你的发布中删除.它们并不是编辑器运行时必需的

如何将FCKEDITOR整合进我的页面?

由于目前的版本提供的FCKEDITOR仅提供了JAVASCRIPT式的整合,因此,这里仅讲述如何应用JAVASCRIPT来整合FCKEDITOR到站点中,当然,其他各种语言的整合,你可以参考_samples文件夹中的例子来完成
1,假如编辑器已经安装在你的站点的/FCKEDITOR/文件夹下.那么,第一步我们需要做的就是在页面的HEAD段中放入SCRIPT标记以引入JAVASCRIPT整合模块.例如:

其中路径是可更改的

2,现在,FCKEDITOR类已经可以使用了.有两个方法在页面中建立一个FCKEDITOR编辑器:
方法1:内联方式(建议使用):在页面的FORM标记内需要插入编辑器的地方置入以下代码:
script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Create() ;

方法2:TEXTAREA标记替换法(不建议使用):在页面的ONLOAD事件中,添加以下代码以替换一个已经存在的TEXTAREA标记

This is <b>the</b> initial value.

3.现在,编辑器可以使用了

FCKEDITOR类参考:
下面是用来在页面中建立编辑器的FCKEDITOR类的说明

构造器:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName:编辑器的唯一名称(相当于ID)
WIDTH:宽度
HEIGHT:高度
toolbarSet:工具条集合的名称
value:编辑器初始化内容

属性:
instanceName:编辑器实例名
width:宽度,默认值为100%
height:高度,默认值是200
ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Default
value:初始化编辑器的HTML代码,默认值为空
BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最好能用相对于站点根路径的表示方法,要以/结尾
CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为true
DisplayErrors:是否显示提示错误,默为true;

集合:
Config[Key]=value;
这个集合用于更改配置中某一项的值,如
oFckeditor.Config["DefaultLanguage"]="pt-br";

方法:
Create()
建立并输出编辑器

RepaceTextArea(TextAreaName)
用编辑器来替换对应的文本框

如何配置FCKEDITOR?
FCKEDITOR提供了一套用于定制其外观,特性及行为的设置集.主配置文件名为Fckconfig.js
你既可以编辑主配置文件,也可以自己定义单独的配置文件.配置文件使用JAVASCRIPT语法.

修改后,在建立编辑器时,可以使用以下语法:
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Config['CustomConfigurationsPath'] = '/myconfig.js' ;
oFCKeditor.Create() ;

提醒:当你修改配置后,请清空浏览器缓存以查看效果

配置选项:

AutoDetectLanguage=true/false 自动检测语言
Basehref="" 相对链接的基地址
ContentLangDirection="ltr/rtl" 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath="" 自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage="" 缺省语言
EditorAreaCss="" 编辑区的样式表文件
EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
EnableXHTML=true/false 是否允许使用XHTML取代HTML
FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代
FontColors="" 设置显示颜色拾取器时文字颜色列表
FontFormats="" 设置显示在文字格式列表中的命名
FontNames="" 字体列表中的字体名
FontSizes="" 字体大小中的字号列表
ForcePasteAsPlainText=true/false 强制粘贴为纯文本
ForceSimpleAmpersand=true/false 是否不把&符号转换为XML实体
FormatIndentator="" 当在源码格式下缩进代码使用的字符
FormatOutput=true/false 当输出内容时是否自动格式化代码
FormatSource=true/false 在切换到代码视图时是否自动格式化代码
FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记
IeSpellDownloadUrl=""下载拼写检查器的网址
ImageBrowser=true/false 是否允许浏览服务器功能
ImageBrowserURL="" 浏览服务器时运行的URL
ImageBrowserWindowHeight="" 图像浏览器窗口高度
ImageBrowserWindowWidth="" 图像浏览器窗口宽度
LinkBrowser=true/false 是否允许在插入链接时浏览服务器
LinkBrowserURL="" 插入链接时浏览服务器的URL
LinkBrowserWindowHeight=""链接目标浏览器窗口高度
LinkBrowserWindowWidth=""链接目标浏览器窗口宽度
Plugins=object 注册插件
PluginsPath="" 插件文件夹
ShowBorders=true/false 合并边框
SkinPath="" 皮肤文件夹位置
SmileyColumns=12 图符窗列数
SmileyImages=字符数组图符窗中图片文件名数组
SmileyPath="" 图符文件夹路径
SmileyWindowHeight 图符窗口高度
SmileyWindowWidth 图符窗口宽度
SpellChecker="ieSpell/Spellerpages" 设置拼写检查器
StartupFocus=true/false 开启时FOCUS到编辑器
StylesXmlPath="" 设置定义CSS样式列表的XML文件的位置
TabSpaces=4 TAB键产生的空格字符数
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏
ToolbarSets=object 允许使用TOOLBAR集合
ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开
UseBROnCarriageReturn=true/false 当回车时是产生BR标记还是P或者DIV标记

如何自定义样式列表呢?
FCKEDITOR的样式工具栏中提供了预定义的样式,样式是通过XML文件定义的,默认的XML样式文件存在于FCkEditor根文件夹下的FckStyls.xml文件中
这个XML文件的结构分析如下:

这个页面是红色的

方法3：外部样式表（引用一个样式表文件）

我们推荐采用这种引用外部样式表的方法。在本教程之后的例子中，我们将全部采用该方法。

外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。

例如，比方说你的样式表文件名为style.css，它通常被存放于名为style的目录中。就像下面这样：

现在的问题是：如何在一个HTML文档里引用一个外部样式表文件（style.css）呢？答案是：在HTML文档里创建一个指向外部样式表文件的链接（link）即可，就像下面这样：

						
								href="style/style.css" />

注意要在href属性里给出样式表文件的地址。

这行代码必须被插入HTML代码的头部（header），即放在标签和标签之间。就像这样：

这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。
这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。

这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。采用外部样式表，这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。

让我们来实践刚刚所学到的知识。

自己试试看

打开记事本（或其他文本编辑器），创建两个文件——一个HTML文件，一个CSS文件——它们的内容如下：

default.htm

style.css

						
								body {
						
						
								background-color: #FF0000;
						
						
								}

然后，把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名（分别为“htm”和“css”）。

用浏览器打开default.htm，你所看到的页面应该具有红色背景。恭喜！你已经完成了自己的第一个样式表！

加快进入下一课，在那里你会学到一些CSS属性。

第3课：颜色与背景

本课，你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。本课将对下列CSS属性进行讲解：

前景色：‘color’属性

CSS属性color用于指定元素的前景色。

例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。

						
								h1 {
	color: #ff0000;
}

显示示例

颜色值可以用十六进制表示（比如上例中的#ff0000），也可以用颜色名称（比如“red”）或RGB值（比如rgb(255,0,0)）表示。

‘background-color’属性

CSS属性background-color用于指定元素的背景色。

因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body元素应用background-color属性就行了。

你也可以为其他包含标题或文本的元素单独应用背景色。在下例中，我们为body和h1元素分别应用了不同的背景色。

						
								body {
	background-color: #FFCC66;
}

h1 {
	color: #990000;
	background-color: #FC9804;
}

显示示例

注意：我们为h1元素应用了两个CSS属性，它们之间以分号（“;”）分隔。

背景图像[background-image]

CSS属性background-image用于设置背景图像。

在下面的示例中，我们使用了一张蝴蝶的图像作为背景。你可以将该图片下载下来（方法为：鼠标右击该图片，然后选择“图片另存为”），以便在自己的计算机上使用。当然，你也可以选用其他你觉得满意的图片。

如果要把这个蝴蝶的图片作为网页的背景图像，只要在body元素上应用background-image属性、然后给出蝴蝶图片的存放位置就行了。

						
								body {
	background-color: #FFCC66;
	background-image: url("butterfly.gif");
}

h1 {
	color: #990000;
	background-color: #FC9804;
}

显示示例

注意我们指定图片存放位置的方式：url("butterfly.gif")。这表明图片文件和样式表存放在同一目录下。你也可以引用存放在其他目录的图片，只需给出存放路径即可（比如url("../images/butterfly.gif")）；此外，你甚至可以通过给出图片的地址来引用因特网（Internet）上的图片（比如url("http://www.html.net/butterfly.gif")）。

平铺背景图像[background-repeat]

你有没有发现在上例中那个蝴蝶图片在横向和纵向都被平铺了？CSS属性background-repeat就是用于控制平铺的。

下表概括了background-repeat的四种不同取值。

值	描述	示例
`background-repeat:repeat-x`	图像横向平铺	显示示例
`background-repeat:repeat-y`	图像纵向平铺	显示示例
`background-repeat:repeat`	图像横向和纵向都平铺	显示示例
`background-repeat:no-repeat`	图像不平铺	显示示例

例如，为了避免平铺背景图像，代码应该这样：

						
								body {
	background-color: #FFCC66;
	background-image: url("butterfly.gif");
	background-repeat: no-repeat;
}

h1 {
	color: #990000;
	background-color: #FC9804;
}

显示示例

固定背景图像[background-attachment]

CSS属性background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。

一个固定的背景图像不会随着用户滚动页面而发生滚动（它是固定在屏幕上的），而一个非固定的背景图像会随着页面的滚动而滚动。

下表概括了background-attachment的两种不同取值。你可以点击示例察看二者的区别。

值	描述	示例
`background-attachment:scroll`	图像会跟随页面滚动——非固定的	显示示例
`background-attachment:fixed`	图像是固定在屏幕上的	显示示例

例如，下面的代码将背景图像固定在屏幕上。

						
								body {
	background-color: #FFCC66;
	background-image: url("butterfly.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
}

h1 {
	color: #990000;
	background-color: #FC9804;
}

显示示例

放置背景图像[background-position]

缺省地，背景图像将被放在屏幕的左上角。但是，你可以通过CSS属性background-position来修改这一缺省设置，将背景图像摆放在屏幕上你觉得满意的地方。

设置background-position属性的值有多种方式。不过，它们都是坐标的格式。举例来说，值“100px 200px”表示背景图像将被放置在位于距浏览器窗口左边100像素、顶部200像素处。

坐标可以是以百分比或固定单位（比如像素、厘米等）作为单位的值，也可以是“top”、“bottom”、“center”、“left”和“right”这些值。下图对此进行了解释：

下表给出了一些例子。

值	描述	示例
`background-position:2cm 2cm`	图像被放置在页面内距左边2厘米、顶部2厘米的地方	显示示例
`background-position:50% 25%`	图像被放置在页面内水平居中、离顶部四分之一处	显示示例
`background-position:top right`	图像被放置在页面的右上角	显示示例

在下例中，背景图像被放置在页面的右下角：

						
								body {
	background-color: #FFCC66;
	background-image: url("butterfly.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: right bottom;
}

h1 {
	color: #990000;
	background-color: #FC9804;
}

显示示例

缩写[background]

CSS属性background是上述所有与背景有关的属性的缩写用法。

使用background属性可以减少属性的数目，因此令样式表更简短易读。

比如说下面五行代码：

						
								background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

如果使用background属性的话，实现同样的效果只需一行代码即可搞定：

						
								background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

各个值应按下列次序来写：

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

如果省略某个属性不写出来，那么将自动为它取缺省值。比如，如果去掉background-attachment和background-position的话：

						
								background: #FFCC66 url("butterfly.gif") no-repeat;

这两个未指定值的属性将被设置为缺省值：scroll和top left。

小结

在这一课，你学会了无法用HTML替代的新技术。下一课同样是充满乐趣的，在那里我们将考察CSS在设置字体方面的各项功能。

第4课：字体

这一课，你将学习字体以及如何用CSS来设置字体。我们还会考虑如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。本课将对下列CSS属性进行讲解：

字体族[font-family]

CSS属性font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。

有两种类型的名称可用于分类字体：字体族名称（family-name）和族类名称（generic family）。下面来解释这两个术语。

字体族名称（family-name）: 字体族名称（就是我们通常所说的“字体”）的例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。
族类（generic family）: 一个族类是一组具有统一外观的字体族。sans-serif就是一例，它代表一组没有“脚”的字体。

下面我们通过三个族类的例子来进行解释：

你在给出字体列表时，自然应把首选字体放在前面、把候选字体放在后面。建议你在列表的最后给出一个族类（generic family），这样，当没有一个指定字体可用时，页面至少可以采用一个相同族类的字体来显示。

下面是一个按优先级排列的字体列表的例子：

						
								h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

显示示例

h1标题将采用Arial字体显示。如果访问者的计算机未安装Arial，那么就使用Verdana字体。假如Verdana字体也没安装的话，那么将采用一个属于sans-serif族类的字体来显示这个h1标题。

注意我们为“Times New Roman”采用的写法：因为其中包含空格，所以我们用引号将它括起来。

字体样式[font-style]

CSS属性font-style定义所选字体的显示样式：normal（正常）、italic（斜体）或oblique（倾斜）。在下例中，所有h2标题都将显示为斜体。

						
								h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}

显示示例

字体变化[font-variant]

CSS属性font-variant的值可以是：normal（正常）或small-caps（小体大写字母）。small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。不太明白？我们来看几个例子：

如果font-variant属性被设置为small-caps，而没有可用的支持小体大写字母的字体，那么浏览器多半会将文字显示为正常尺寸（而不是小尺寸）的大写字母。

						
								h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

显示示例

字体浓淡[font-weight]

CSS属性font-weight指定字体显示的浓淡程度。其值可以是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）来衡量字体的浓淡。

						
								p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}

显示示例

字体大小[font-size]

字体的大小用CSS属性font-size来设置。

字体大小可通过多种不同单位（比如像素或百分比等）来设置。在本教程中，我们将关注于最常用和最合适的单位。比如：

						
								h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

显示示例

上面四种单位有着本质的区别。‘px’和‘pt’将字体设置为固定大小，而‘%’和‘em’允许页面浏览者自行调整字体的显示尺寸。有些页面浏览者可能是残疾者、年长者、视力不佳者，或者他所使用的电脑显示屏显示质量差。为了令你的网站对所有人都具有良好的可用性（accessibility），你应采用像‘%’或‘em’这种允许用户调节字体显示大小的单位。

下面你能看到我们展示如何在Mozilla Firefox和Internet Explorer里调整字体大小。自己试试看！这个功能很不错吧？

缩写[font]

CSS属性font是上述各有关字体的CSS属性的缩写用法。

比如说下面四行应用于p元素的代码：

						
								p {
	
								
										
												font-style: italic;
	font-weight: bold;
	font-size: 30px;
	font-family: arial, sans-serif;
										
}

如果用font属性的话，上述四行代码可简化为：

						
								p {
	font: italic bold 30px arial, sans-serif;
}

font属性的值应按以下次序书写：

font-style | font-variant | font-weight | font-size | font-family

小结

在这一课，你学习了有关字体设置的用法。记住：CSS的一个主要优势就是可以在任何时候设置字体，你花几分钟就可以改变整个网站的字体。CSS节省时间，而且把事情简化。在下一课，我们将学习文本（text）。v

吴杨明 2007-09-11 12:33 发表评论

HTML CACHE

吴杨明 — Mon, 10 Sep 2007 06:58:00 GMT

HTML CACHE 0.5.2 发布日期：20060527 二进制下载：ideais-modules-htmlcache.jar 源码下载：ideais-modules-htmlcache.zip

5分钟为您的JSP站点添加静态缓存页面，提高您的网站的效率，加快网站的访问速度，来吧试一试。无需修改源代码，只要添加一个jar包，一个配置文件；在您的web.xml中添加一个filter和一个servlet配置。

·修改日志］
1.简化了配置文件；
2.对代码进行了重构；

[1. 安装配置]

STEP 1: 下载 ideais-modules-htmlcache.jar 并且拷贝它到您的jsp站点的 /WEB-INF/lib/ideais-modules-htmlcache.jar

STEP 2: 创建一个配置文件/WEB-INF/htmlcache-config.xml下面是本站一些配置参考

version="1.0 " ?>

text/html;charset=utf-8

>


                -1
                -1

portal/index.shtml

portal/index.faces

portal/article/dashboard.shtml

/portal/article/dashboard.faces

/portal/article/content/{0}.shtml

/portal/article/content.faces?id={0}
   ([0-9]+)

/portal/article/category-content/{0}.shtml

/portal/article/category-content.faces?cai={0}
([0-9]+)

STEP 3: 在/WEB-INF/web.xml中添加如下条目

HtmlCacheFilter

net.ideais.htmlcache.HtmlCacheFilter

HtmlCacheFilter

*.jsp

...

HtmlCacheServlet

net.ideais.htmlcache.HtmlCacheServlet

HtmlCacheServlet

*.shtml

...

STEP 4: 把您的index.html转向index.shtml

STEP 5: 重新部署您的站点，哈哈变成静态的了，用Apache的ab测试一下看看速度提高了多少倍

[2. 管理缓存]

1）页面更新了怎么办？
http://www.yourweb.com/index.shtml?html-cache-action=clear

2）我要查看动态内容这么办？
方法一：http://www.yourweb.com/index.shtml?html-cache-action=stop 修改完后http://www.yourweb.com/index.shtml?html-cache-action=start
方法二：http://www.yourweb.com/your-content.shtml?html-cache=false

3）怎样知道当前cache有没有打开
http://www.yourweb.com/index.shtml?html-cache-action=status

如果您还有什么问题请在“站点留言”联系我，谢谢了！

吴杨明 2007-09-10 14:58 发表评论

建站小常识

吴杨明 — Mon, 10 Sep 2007 02:48:00 GMT

摘要: 1 文章排序

文章排序:
吴杨明 2007-09-10 10:48 发表评论

使用 XML Schema 定义元素的基本知识

吴杨明 — Tue, 04 Sep 2007 05:40:00 GMT

使用 XML Schema 定义元素的基本知识

学习使用 XML Schema 代替 DTD 定义 XML 文档结构

文档选项

未显示需要 JavaScript 的文档选项

将此页作为电子邮件发送

级别：初级

Ashvin Radiya, 总裁兼首席技术官, AvantSoft, Inc.
Vibha Dixit (vibha@avantsoft.com), 首席执行官, AvantSoft, Inc.

2003 年 12 月 01 日

新的 XML Schema 系统即将成为 W3C 推荐标准，目的是为了克服 DTD 的局限性（请参阅侧栏， DTD 的局限性），为 XML 文档提供丰富的语法结构。本文展示了模式的灵活性，说明如何使用 XML Schema 系统来定义最基本的 XML 文档构造块——元素。

XML Schema 比 DTD 更强大。为了说明 XML Schema 机制的强大功能，下面三个程序清单简要比较了表示元素的不同方式。清单 1给出了一个 XML 文档片段，清单 2用 DTD 语法声明了这两个元素，清单 3则是相应的 XML Schema 语法形式。要注意，清单 3中所用的是相同的 XML 语法。通过模式，验证解析器可以检查元素 InvoiceNo 是否是正整数，元素 ProductID 的首字符是否为 A 到 Z 之间的字母，后面为六个阿拉伯数字。相反，引用 DTD 的验证解析器只能检查这些元素是否用字符串表示。

清单 1：XML 文档片段

123456789
                        J123456

清单 2：描述清单 1 中元素的 DTD 片段

清单 3：描述清单 1 中元素的 XML Schema

回页首

在 XML Schema 中使用名称空间

在这个协作的世界中，一个人可能处理来自多个其他团体的文档，而不同的团体可能希望以不同的方式表示他们的数据元素。此外，他们还可能在一个文档中引用不同团体创建的同名元素。如何区分相同名字的不同定义呢？XML Schema 使用名称空间区分这些定义。

DTD 的局限性

尽管作为描述结构化信息的一种机制，DTD 成功地为 SGML 和 HTML 开发人员服务了 20 年，但与 XML Schema 相比，它存在着严重的局限性。

DTD 要求元素由以下三种成分组成：

文本字符串
文本字符串与其他子元素的混合
一组子元素

DTD 不使用 XML 语法，对类型和名称空间仅提供有限的支持。

一个给定的 XML Schema 定义了一组新名字，如元素名、类型名、属性名、属性组名，这些名字的定义和声明都写在模式中。清单 3定义的名字包括 InvoiceNo 、 ProductID 和 ProductCode 。

我们说模式中定义的名字属于它的 目标名称空间。名称空间本身有一个固定但没有限制的名字，必须符合 URL 语法。比如，对于清单 3中模式片段，您可以把名称空间的名字设为： http://www.SampleStore.com/Account 。

名称空间的名字语法容易让人混淆，尽管以 http:// 开始，那个 URL 并不指向一个包含模式定义的文件。事实上，这个 URL http://www.SampleStore.com/Account 根本没有指向任何文件，只是一个分配的名字。

模式中的定义和声明可能引用属于其他名称空间的名字。在本文中，我们称这些名称空间为 源名称空间。每个模式都有一个目标名称空间，但可能有多个源名称空间。名称空间的名字可能相当长，但在 XML 文档中通过 xmlns 声明可使用简写形式。为了说明这些概念，我们可以向前述清单 4中的示例模式中添加更多的内容。

清单 4：目标名称空间和源名称空间

在清单 4的 XML Schema 中， targetNamespace 的名字是 http://www.SampleStore.com/Account ，其中包含的名字有 InvoiceNo 、 ProductID 和 ProductCode 。 schema 、 element 、 simpleType 、 pattern 、 string 和 positive-integer 这些名字属于源名称空间 http://www.w3.org/1999/XMLSchema ，通过 xmlns 声明缩写为 xsd 。别名 xsd 没有任何特殊的地方，我们可以选择任何其他的名字。在本文后面的部分为了方便和简化起见，我们使用 xsd 代表名称空间 http://www.w3.org/1999/XMLSchema ，在一些代码片段中省略了限定符 xsd 。在这个例子中， targetNamespace 偶尔也作为一个源名称空间，因为要使用名字 ProductCode 定义其他的名字。

图 1：清单 4 中的名称空间

清单 4中的模式片段不需要指定源模式文件的位置。对于整个“模式的模式”， http://www.w3.org/1999/XMLSchema ，不需要指定位置，因为它的位置是人所共知的。对于源名称空间 http://www.SampleStore.com/Account ，也不需要指定位置，因为它恰好是该文件中定义的目标名称空间。为了更好地理解如何指定模式的位置和使用默认名称空间，看一看清单 5中扩展的例子。

清单 5：多个源名称空间，导入一个名称空间

清单 5中多了一个名称空间引用： http://www.PartnerStore.com/PartsCatalog 。这个名称空间不同于 targetNamespace 和标准名称空间。因此必须使用 import 声明元素引入，该元素的 schemaLocation 属性指明包含模式的文件位置。默认的名称空间是 http://www.w3.org/1999/XMLSchema ，它的 xmlns 声明没有名字。每个非限定的名字如 schema 和 element ，都属于默认名称空间 http://www.w3.org/1999/XMLSchema 。如果模式从一个名称空间中引用了多个名字，将其指定为默认名字空间更方便。

一个 XML 实例文档可能引用多个名称空间的元素名，这些名称空间定义在不同模式中。为了引用和简化名称空间的名字，同样要使用 xmlns 声明。我们使用 XML Schema 实例名称空间的 schemaLocation 属性指定文件的位置。要注意，该属性不同于上一个例子中 xsd 名称空间的同名属性 schemaLocation 。

清单 6：使用来自多个模式的多个名称空间的名字

123456789

图 2：清单 5 和清单 6 的名称空间

回页首

定义元素

定义元素就是定义元素的名字和内容模型。在 XML Schema 中，元素的内容模型由其类型定义，因此 XML 文档中实例元素的值必须符合模式中定义的类型。

简单类型

XML Schema 规范定义了一些值的简单类型，如表 2：“预定义的值简单类型”所示。

类型包括简单类型和复杂类型。简单类型的值不能包含元素或属性。复杂类型可以产生在其他元素中嵌套元素的效果，或者为元素增加属性。（到目前为止本文中的例子都是用户定义的简单类型，比如 ProductCode ）。XML Schema 规范也包括预定义的简单类型（请参阅侧栏简单类型）。 派生的简单类型约束了基类型的值。比如，派生简单类型 ProductCode 的值是基类型 string 值的子集。

简单的、非嵌套的元素是简单类型

不含属性或其他元素的元素可以定义为简单类型，无论是预定义的简单类型还是用户定义的简单类型，如 string 、 integer 、 decimal 、 time 、 ProductCode 等等。

清单 7：一些元素的简单类型

带有属性的元素必须是复杂类型

现在，试着向清单 7中的简单元素 price 增加属性 currency 。您不能这样做，因为简单类型的元素不能有属性。如果希望增加属性，您必须把 price 元素定义成复杂类型。在清单 8的例子中，我们定义了一个 匿名类型，没有明确地命名这个复杂类型。换句话说，没有定义复杂类型 complexType 的 name 属性。

清单 8：一个复杂元素类型

嵌入其他元素的元素必须是复杂类型

在 XML 文档中，一个元素可能嵌入其他的元素。这种要求可以在 DTD 中直接表示。但 XML Schema 定义一个元素，这个元素有一个类型，而这个类型可以包含其他元素和属性的声明。表 1给出了一个简单的例子。

表 1：DTD 和 XML Schema 中复杂数据类型的比较

XML 文档


                        Cool XML<Title>
                        <Author>Cool Guy</Author>
                        </Book>
                        </pre>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            <a name="N10265"><strong>DTD</strong></a><br />
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                    <tr>
                        <td class="code-outline">
                        <pre class="displaycode"><Book>
                        <Title>Cool XML<Title>
                        <Author>Cool Guy</Author>
                        </Book>
                        </pre>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            <a name="N1026E"><strong>XML Schema</strong></a><br />
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                    <tr>
                        <td class="code-outline">
                        <pre class="displaycode"><Book>
                        <Title>Cool XML<Title>
                        <Author>Cool Guy</Author>
                        </Book>
                        </pre>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                    <tr>
                        <td class="code-outline">
                        <pre class="displaycode"><!ELEMENT Book (Title, Author)>
                        <!ELEMENT Title (#PCDATA)>
                        <!ELEMENT Author (#PCDATA)></pre>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                    <tr>
                        <td class="code-outline">
                        <pre class="displaycode"><element name='Book' type='BookType'/>
                        <complexType name='BookType'>
                        <element name='Title' type='string'/>
                        <element name='Author' type='string'/>
                        </complexType></pre>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <p>尽管 <a href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#table1">表 1</a>中的 XML 代码同时满足 DTD 与 XML Schema 片段，但两者之间有一个很大的区别。在 DTD 中所有的元素都是全局性的，而表中的 XML Schema 允许把 <code>Title</code> 和 <code>Author</code> 定义成局部的——只出现在元素 <code>Book</code> 中。为了在 XML Schema 中实现与 DTD 声明完全相同的效果，元素 <code>Title</code> 和 <code>Author</code> 必须是全局范围的，如 <a href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#list9">清单 9</a>中所示。元素 <code>element</code> 的 <code>ref</code> 属性使您能够引用前面声明的元素。 </p>
            <br />
            <a name="list9"><strong>清单 9：用全局简单类型定义的复杂类型</strong></a><br />
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                    <tr>
                        <td class="code-outline">
                        <pre class="displaycode"><element name='Title' type='string'/>
                        <element name='Author' type='string'/>
                        <element name='Book' type='BookType'/>
                        <complexType name='BookType'>
                        <element ref='Title'/>
                        <element ref='Author'/>
                        </complexType>
                        </pre>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <p>在 <a href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#table1">表 1</a>和 <a href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#list9">清单 9</a>所示的例子中， <code>BookType</code> 是全局性的，可用于声明其他元素。相反， <a href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#list10">清单 10</a>将该类型局部地定义到元素 <code>Book</code> 中，而且定义成匿名元素。要注意， <a href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#table1">表 1</a>中的 XML 文档片段与表 1、 <a href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#list9">清单 9</a>和 <a href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#list10">清单 10</a>中三个模式片段都匹配。 </p>
            <br />
            <a name="list10"><strong>清单 10：隐藏 BookType 作为本地类型</strong></a><br />
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                    <tr>
                        <td class="code-outline">
                        <pre class="displaycode"><element name='Title' type='string'/>
                        <element name='Author' type='string'/>
                        <element name='Book'>
                        <complexType>
                        <element ref='Title'/>
                        <element ref='Author'/>
                        </complexType>
                        </element>
                        </pre>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                    <tr>
                        <td><br />
                        </td>
                    </tr>
                </tbody>
            </table>
            <table class="no-print" cellspacing="0" cellpadding="0" align="right">
                <tbody>
                    <tr align="right">
                        <td><br />
                        <table cellspacing="0" cellpadding="0" border="0">
                            <tbody>
                                <tr>
                                    <td valign="middle"><br />
                                    </td>
                                    <td valign="top" align="right"><a class="fbox" href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#main"><strong>回页首</strong></a></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            <p><a name="h2"><span class="atitle">表示元素的复杂约束</span></a></p>
            <p>对于表示元素内容模型的约束，XML Schema 比 DTD 提供了更大的灵活性。在最简单的层次上，像在 DTD 中那样，您可以把属性和元素声明关联起来，指明能够出现的给定元素集合序列：只能出现 1 次（1）、出现 0 次或多次（*）或者出现 1 次或多次（+）。您还可以表示 XML Schema 中的其他约束，比方说使用 <code>element</code> 元素的 <code>minOccurs</code> 和 <code>maxOccurs</code> 属性，以及 <code>choice</code> 、 <code>group</code> 和 <code>all</code> 元素。 </p>
            <br />
            <a name="list11"><strong>清单 11：表示元素类型的约束</strong></a><br />
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                    <tr>
                        <td class="code-outline">
                        <pre class="displaycode"><element name='Title' type='string'/>
                        <element name='Author' type='string'/>
                        <element name='Book'>
                        <complexType>
                        <element ref='Title' minOccurs='0'/>
                        <element ref='Author' maxOccurs='2'/>
                        </complexType>
                        </element>
                        </pre>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <p>在 <a href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#list11">清单 11</a>中， <code>Book</code> 中 <code>Title</code> 的出现是可选的（类似 DTD 的 '?'）。但是， <a href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#list11">清单 11</a>也说明 <code>Book</code> 元素中至少要有一个但不能超过两个作者。 <code>element</code> 的 <code>minOccurs</code> 和 <code>maxOccurs</code> 属性的默认值是 1。元素 <code>choice</code> 只允许它的一个子女出现在实例中。另外一个元素 <code>all</code> ，表示这样的约束：组中的所有子元素可以同时出现一次，或者都不出现，它们可以按任意的顺序出现。 <a href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#list12">清单 12</a>表示 <code>Title</code> 和 <code>Author</code> 两者必须同时出现（顺序任意）在 <code>Book</code> 中，或者都不出现。这种约束很难在 DTD 中表示。 </p>
            <br />
            <a name="list12"><strong>清单 12：指出必须为元素定义所有的类型</strong></a><br />
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                    <tr>
                        <td class="code-outline">
                        <pre class="displaycode"><xsd:element name='Title' type='string'/>
                        <xsd:element name='Author' type='string'/>
                        <xsd:element name='Book'>
                        <xsd:complexType>
                        <xsd:all>
                        <xsd:element ref='Tile'/>
                        <xsd:element ref='Author'/>
                        </xsd:all>
                        </xsd:complexType>
                        </xsd:element>
                        </pre>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                    <tr>
                        <td><br />
                        </td>
                    </tr>
                </tbody>
            </table>
            <table class="no-print" cellspacing="0" cellpadding="0" align="right">
                <tbody>
                    <tr align="right">
                        <td><br />
                        <table cellspacing="0" cellpadding="0" border="0">
                            <tbody>
                                <tr>
                                    <td valign="middle"><br />
                                    </td>
                                    <td valign="top" align="right"><a class="fbox" href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#main"><strong>回页首</strong></a></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <br />
            <p><a name="h3"><span class="atitle">更上层楼</span></a></p>
            <p>我们已经讨论了在 XML Schema 中定义元素所需的最基本的概念，通过一些简单的例子使您领略到它的强大功能。还有一些更强大的机制：</p>
            <ul>
                <li>XML Schema 对类型继承提供了广泛的支持，允许重用以前定义的结构。使用所谓的 <em>facets</em>，您可以派生新的类型，表示其他某个类型值的更小子集，比如通过枚举、范围或模式匹配来定义子集。在本文的例子中， <code>ProductCode</code> 类型就是使用模式面（ <code>pattern</code> facet）定义的。子类型也可以向基类型增加更多的元素和属性声明。
                <li>有几种机制控制能否定义子类型，或者能否在具体的文档中替换为子类型。比如，有可能表示 <code>InvoiceType</code> （ Invoice 编号的类型）不允许子类型化，任何人都不能定义新版本的 <code>InvoiceType</code> 。通过规定在特定的上下文中不能用 <code>ProductCode</code> 类型的子类型替换，也能表达这种约束。
                <li>除了子类型外，还可以定义等价的类型，这样，一个类型的值可以用另一个类型代替。
                <li>通过声明抽象的元素或者类型，XML Schema 提供了一种强制替换机制。
                <li>为了方便起见，可以定义并命名属性组和元素组，从而能够在后面引用这些组达到重用的目的。
                <li>XML Schema 提供了三个元素—— <code>appInfo</code> 、 <code>documentation</code> 和 <code>annotation</code> ——为模式作注解，以方便读者（ <code>documentation</code> ）和应用程序（ <code>appInfo</code> ）。
                <li>基于子元素的某些属性可以表示惟一性约束。 </li>
            </ul>
            <p>可以通过 W3C 站点（请参阅 <a href="http://www.ibm.com/developerworks/cn/xml/xml-schema/#resources">参考资料</a>）的文档进一步研究 XML Schema，或者访问 dW XML 专区了解更多的内容。目前，XML Schema 规范已经被批准，并成为候选推荐标准（Candidate Recommendation），毫无疑问您将越来越多地用到它。 </p>
            <br />
            <br />
            <p><a name="resources"><span class="atitle">参考资料 </span></a></p>
            <ul>
                <li>您可以参阅本文在 developerWorks 全球站点上的 <a href="http://www.ibm.com/developerworks/library/xml-schema/index.html?S_TACT=105AGX52&S_CMP=cn-a-x">英文原文</a>. <br />
                <br />
                <li>通过填写 <a href="http://www.w3.org/2000/06/webdata/xsv">Web 表单</a>，可以免费获得爱丁堡大学/W3C 的 XSV（alpha 版），这是一个 XML Schema Validator。 <br />
                <br />
                <br />
                <br />
                <li>免费下载 Apache 项目的 <a href="http://xml.apache.org/xerces-j/">XML Schema validator</a>。 <br />
                <br />
                <br />
                <br />
                <li>Extensibility 的商业软件 <a href="http://www.tibco.com/solutions/products/extensibility/default.jsp">XML Schema aware editor/validator</a>的评估版。 <br />
                <br />
                <br />
                <br />
                <li>从 <a href="http://www.ibm.com/alphaworks">http://www.ibm.com/alphaworks</a>下载免费工具。 <br />
                <br />
                <br />
                <br />
                <li>最新 XML Schema 规范的背景资料： <em><a href="http://www.w3.org/TR/xmlschema-0/">XML Schema Part 0: Primer</a> </em>。 <br />
                <br />
                <br />
                <br />
                <li>目前的 W3C XML Schema 规范文档由两部组成： <em><a href="http://www.w3.org/TR/xmlschema-1/">XML Schema Part 1: Structures</a> </em>和 <em><a href="http://www.w3.org/TR/xmlschema-2/">XML Schema Part 2: Datatypes</a> </em>。 <br />
                <br />
                <br />
                </li>
            </ul>
            <br />
            <br />
            <p><a name="author"><span class="atitle">作者简介</span></a></p>
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                    <tr>
                        <td colspan="3"></td>
                    </tr>
                    <tr valign="top" align="left">
                        <td>
                        <p> </p>
                        </td>
                        <td></td>
                        <td width="100%">
                        <p>Ashvin Radiya 是 <a href="http://www.avantsoft.com/">AvantSoft, Inc.</a>的创始人和总裁。作为首席技术官，他领导开发并推出了最新 Java 编程及相关技术的 AvantSoft 培训课程。他还建立和管理与财富 100 强的战略伙伴关系。Ashvin 有丰富的企业、学院和专业人员经历。他曾在奥斯汀的 IBM 工作，研究基于 CORBA 的高级分布式面向对象产品。在移动商务、XML、Java、Enterprise JavaBeans 组件、InfoBus、安全、CORBA 和分布式面向对象编程方面，他拥有丰富的知识和经验。Ashvin 从锡拉丘兹大学获得了计算机科学博士学位。可以通过 <a href="mailto:ashvin@avantsoft.com?cc=">ashvin@avantsoft.com</a>与 Ashvin Radiya 联系。 </p>
                        </td>
                    </tr>
                </tbody>
            </table>
            <br />
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                    <tr>
                        <td colspan="3"></td>
                    </tr>
                    <tr valign="top" align="left">
                        <td>
                        <p> </p>
                        </td>
                        <td></td>
                        <td width="100%">
                        <p>Vibha Dixit 在 <a href="http://www.avantsoft.com/">AvantSoft</a>Inc. 的 Business Development Manager and Technologist 中担任重要职务。她负责业务规划、管理战略伙伴、开发新的客户、营销和市场。她还积极参与 AvantSoft 技术目标的制定，确定移动商务、XML 和 Java 技术领域的发展方向。Vibha 在商业管理方面有独到的经验，在计算机技术方面也有丰富的行业经验。在加入 AvantSoft 之前，她曾在 IBM Santa Teresa 实验室工作，从事分布式交互对象中间件的研究。在俄亥俄超级计算机中心，她参与了一个微型计算机操作系统的设计与开发。Vibha 从俄亥俄州立大学获得了计算机科学博士学位。她还从 Southern Methodist University 修完了 MBA 高级管理人员课程。可以通过 <a href="mailto:vibha@avantsoft.com?cc=">vibha@avantsoft.com</a>与 Vibha Dixit 联系。 </p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
<br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/coacoa2008/" target="_blank">吴杨明</a> 2007-09-04 13:40 <a href="http://www.blogjava.net/coacoa2008/articles/142605.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>
</article>
<article>
<h1>趣味XML Schema入门</h1>
<p>吴杨明 — Tue, 04 Sep 2007 05:35:00 GMT</p>
<p><a name="20070826"><strong></strong></a><span class="entryTitle"><a href="http://blog.matrix.org.cn/JasonDong/entry/20070826"><strong>趣味XML Schema入门</strong></a><strong> </strong></span>
<p><strong>今天在看《Spring 2.0技术手册》一书，文中建议XML标签采用基于 XML schema的设置方式，不是很明白，以前只知道DTD，所以在网上搜索了一下，找到一篇比较好的文章，内容写的也很有趣，现转帖如下，转帖之前先对作者表示感谢。</strong></p>
<p><strong>趣味XML Schema入门 （1）<br />
</strong></p>
<div width="100%">
<div style="float: right"><strong></strong></div>
<div><strong>（这是一种尝试，不喜欢的朋友请多包涵,） </strong>
<p> </p>
<p><strong>XML schema 是什么？<br />
一个XML schema，或者叫XML模式，是对一个（或一组）XML文件的结构的说明，它也可以对其内容进行一些约束性和语义上的说明。</strong></p>
<p><strong>熟悉数据库的人可以把XML schema看成是数据库中数据模式在XML技术中的对应物。</strong></p>
<p><strong style="font-family: Verdana">为什么要给XML文件加个schema？<br />
给一个（或一组）XML文件关联一个schema有不少好处，甚至可以说是必须的。没有哪个程序或者人，可以以一种有意义的方式处理任意的XML文件。每个程序都要假定它所要处理的XML文件具有特定的结构和内容，当给它处理的文件不是这种结构或内容时，它就处理不了。例如，把一个svg文件给没有安装svg插件的浏览器，浏览器无法呈现这个svg所表示那幅图画。</strong></p>
<p><strong>反过来说，当我们想使用以XML文件形式接收输入的某个程序时，那我们就得按照这个程序所能接受的格式来准备XML文件。我们不想把这个程序的源代码拿来看，来分析它究竟要接受什么样的格式，我们希望这个程序提供一个简洁而严格的关于它所接受的输入格式的说明书。这个说明书可以写成电视机的使用说明书那样，告诉我们怎么用电视机。只有一点不好，万一我们看了说明书之后，还是出了点什么错把电视机搞坏了，没有人赔。假设我们是一家给别人准备数据的公司，如果我们看了客户提供的数据格式说明，还是出了错，那就要么会挨骂，要么失去一个客户，说不定还得付出赔偿。所以问题在于，我们需要的不仅仅是数据格式的说明，还希望能在我们把数据呈交给客户或者某个程序去处理之前就看看数据到底符合不符合这个格式。这说明，这个格式不能象电视机说明书那样只能给人读一读，它得能被计算机处理，被计算机拿去检验数据的格式是不是有错。</strong></p>
<p><strong>这样一种能被计算机处理的关于XML文件结构和内容的说明，就是一个XML schema。所以，它的用处就在于提供一个可以被计算机付诸检验的数据格式说明。而拿XML schema去检验XML文件的程序叫做schema处理程序。所以，需要记住，不是一个schema自己去验证XML文件，它只是规定XML文件的格式，然后被拿去验证XML文件。</strong></p>
<p><strong>你可能要说，又不是schema可以检验数据，那为什么不直接写个程序去验证数据，还搞个schema出来，这不是多此一举吗！得记住，我们是一家数据公司，我们有很多客户，每个客户的数据格式都不一样。我们呢，只有5个人，而且只有一个mm会写程序，如果要她为每个客户的数据格式都写验证程序，那她不睡觉也写不完，而我们没钱再多请几个程序员，因为程序员对薪水的要求一般都很高。而其他四个人呢，常常没事做，帮不上，正好偷懒。老板很精明，他让这个mm程序员写一个通用的数据验证器，这个验证器针对不同客户的数据格式要求去检验他们各自的数据。mm说可以，但是得把每个客户的数据格式告诉这个程序。程序终于写出来了。这个时候其他四个人就帮得上忙了，就不能偷懒了。他们不用写程序，他们只要写数据格式说明就行了。</strong></p>
<p><strong>好了，我们不只五个人，我们有几个mm程序员，她们愿意加班加点的写程序，就是不想写个通用的验证器。她们很聪明，知道那样的话等于是自掘坟墓。问题是这个世界上又牛又傻的程序员做出来了那样的通用程序。我们不用不行，不用我们的公司就会倒闭，因为我们验证数据的成本比别人高得多。我们得用才能保住饭碗。倒也好，mm们现在不用加班加点了，轻轻松松写schema。</strong></p>
<p><strong>XML schema是怎样规定数据格式的<br />
一个XML schema把XML 中的数据项列出来，指明哪个在外面，哪个在里面；哪个在前面，哪个在后面；哪些是一定得有的，哪些是可以没有的；哪个有的时候，另外某一个就一定得有，或者一定没有；哪个得是正数，哪个不能大于1000，等等，等等，这样的事。</strong></p>
<p><strong>我决定用schema了，怎么写啊？--- DTD与W3C XML Schema<br />
那些傻牛人已经发明了几种用来说明XML文件格式的办法，其中听得比较多的是DTD和（W3C）XML Schema。W3C是World Wide Web Consortium 的缩写，因为有3个W开头，就成了W3。这和“披头四”有点象，Beatles乐队的音译，而他们是四个人，也译作“披头士”。 </strong></p>
<p><strong>DTD是Document Type Definition的缩写，即文档类型定义。它出现在（W3C）XML Schema之前。之所以有这么个奇怪的名字，是因为它本来就不是用来说明XML数据文件格式的，它是用来说明XML文档格式的。搞什么怪啊，XML数据文件不就是XML文档吗？不骗你，真的很有些不一样！</strong></p>
<p><strong>如果我们写一篇文章，敲到计算机里面去，存下来，得到一个文档，如果这个文档是XML格式的，那就是XML文档。你要说，别唬人了，有谁用XML做文档啊，地球人都用word。非也！有很多人用XML做文档，XML的前身就是专门用来做文档的，而DTD实际上是给那个前身用的，后来也给XML用。那个前身我们就不多说了，省得跑题。另外一个例子，我们有很多人做网页，网页是什么？文档，而且可以说是XML文档，因为HTML是XML的那个前身的一个文档类型（或者说格式）而已。而XTHML就更是XML文档了，真真正正的XML文档。</strong></p>
<p><strong>有DTD就好了，干么要弄几个办法来写格式说明，这不是添乱嘛！当然不是。刚刚说了DTD不是用来说明数据格式的。如果把DTD拿来做数据格式说明并非完全不行，但是它有两个不足的地方。它只能说明“哪个在外面，哪个在里面；哪个在前面，哪个在后面；哪些是一定得有的，哪些是可以没有的；哪个有的时候，另外某一个就一定得有，或者一定没有；”这样结构方面的事情，不能说明“这个不能是负数，那个不能大于100，这个的名字得是英文的，那个的名字得是中文的”这些事情。用计算机术语来说，DTD没有提供数据类型，或者说它只提供了一种数据类型，文本。所以它很自觉地把自己叫做文档类型定义，而不敢自称为数据模式定义。另外一个问题是数据类型问题的引申。我们现在都用面向对象的东西了，我们希望数据格式也是面向对象的。而DTD有点老派，它被发明的时候，面向对象还在实验室里。</strong></p>
<p><strong>XML把自己定位在通用数据交换技术这样一个地位，却没办法准确定义数据格式，这很尴尬。所以W3C急忙忙要推出XML Schema。XML从一出世就被大家追捧，而它那时其实还不象大家说的那么好（可能现在也不是，但是它的确是个好东东，可以更好）。不能让大家失望啊，赶紧弥补先天不足。就有了XML Schema（和其他等等XML技术）。XML Schema 解决了上面说的那两个问题。对第一个问题，它解决得很漂亮。而对第二个问题，还有争议。争议归争议，大家已经迫不及待地用开了</strong></p>
</div>
</div>
<br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/coacoa2008/" target="_blank">吴杨明</a> 2007-09-04 13:35 <a href="http://www.blogjava.net/coacoa2008/articles/142604.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>
</article>
<article>
<h1>html滚动代码大全---Marquee</h1>
<p>吴杨明 — Wed, 29 Aug 2007 10:29:00 GMT</p>

		<font color="#000000"><h4>最新消息</h4><br /> <sql:query var="rs" dataSource="${dataSource}" maxRows='3'><br />   <font color="#ff1493">select * from tb_article where category='news' </font>order by createdDate desc<br /> </sql:query><br /> <<font color="#0000ff">MARQUEE</font> direction="up" style="border:0px;" SCROLLDELAY="1" onMouseOver="this.stop();" ONMOUSEOUT="this.start();" SCROLLAMOUNT="1" VSPACE="2" height="150"><br /> <ul><br /> <c:forEach var="article" items="${rs.rows}"><br /> <li><br /> <a href="showArticle.jsp?id=${article.id}" title="${article.title}"><br /><font style="BACKGROUND-COLOR: #ffffff"><font color="#ff0000"> ${fn:substring(article.title,0,12)}${fn:length(article.title)>12?'...':''}</font><br /></font> </a><br/><br /> <f:formatDate value="${article.createdDate}" pattern="yyyy-MM-dd HH:mm:ss"/><br /> </li><br /> </c:forEach><br /> </ul><br /> <br><br /> <a href="news.jsp" style="float:right;"><u>更多新闻...</u></a><br /><font color="#0000ff"> </MARQUEE><br /></font></div><br /><div class="sideBarDiv" style="height: 160px;"></font>
		<p style="COLOR: red">
				<br />html滚动代码大全[HTML代码]会移动的文字(Marquee)</p>
		<p>
				<br />
				<span style="COLOR: red">Marquee标记用于在可用浏览区域中滚动文本</span>。这个标记只适用于IE3以后的版的浏览器。　<br />　　　　格式：　<br />　　　　<MARQUEE　ALIGN="…"　<br />　　　　BEHAVIOR="…"　<br />　　　　BGCOLOR="…"　<br />　　　　DIRECTION="…"　<br />　　　　HEIGHT="…"　<br />　　　　WIDTH="…"　<br />　　　　HSPACE="…"　<br />　　　　VSPACE="…"　<br />　　　　LOOP="…"　<br />　　　　SCROLLAMOUNT="…"　<br />　　　　SCROLLDELAY="…"　<br />ONMOUSEOUT=this.start() <br />ONMOUSEOVER=this.stop()<br />　　　　>…　<br />　　　　</MARQUEE>　<br />　　　<br />　　　　属性：　<br />　　　　ALIGN：用于按设定的值对齐滚动的文本。ALIGN可以设定的值有：LEFT，CENTER，RIGHT，TOP，BOTTOM。此属性不是必须使用的。　<br />　　　　例：　<br />　　　　<MARQUEE　ALIGN="TOP">这段滚动文字设定为上对齐</MARQUEE>　<br />　　　<br />　　　<br />　　　　BEHAVIOR：可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是SLIDE，那么文本就移动到文档上，并停留在页边距上。如果设定为ALTERNATE，则文本从一边移动到另一边。如果设定为SCROLL，文本将在页面上反复滚动。本属性不是必须使用的。可以设定的值有：SILIDE，ALTERNATE，SCROLL。　<br />　　　　例：　<br />　　　　<MARQUEE　<span style="COLOR: red">BEHAVIOR</span>="ALTERNATE">文字从一边移动到另一边</MARQUEE>　<br />　　　<br />　　　<br />　　　　BGCOLOR：用于设定字幕的背景颜色。背景颜色可用RGB、16进制值的格式或颜色名称来设定。　<br />　　　　例：　<br />　　　　<MARQUEE　BGCOLOR="RED">用颜色名称设定滚动文字背景颜色为红色</MARQUEE>　<br />　　　　<MARQUEE　BGCOLOR="#FF0000">用16进制值设定滚动文字背景颜色为红色</MARQUEE>　<br />　　　　<MARQUEE　BGCOLOR=RGB(100%,0%,0%)>用RGB设定滚动文字背景颜色为红色</MARQUEE>　<br />　　　　　　<br />　　　　DIRECTION：用于设定文本滚动的方向，可以设定的值有：LEFT，RIGHT。此属性不是必须使用的。　<br />　　　　例：　<br />　　　　<MARQUEE　<span style="COLOR: red">DIRECTION</span>="LEFT">文字向左边滚动</MARQUEE>　<br />　　　　<MARQUEE　DIRECTION="RIGHT">文字向右边滚动</MARQUEE>　<br />　　　<br /><span style="COLOR: red">HEIGHT</span>：用于设定滚动字幕的高度，高度可用像素或可视页面的百分比来表示。此属性不是必须使用的。　<br />　　　　例：　<br />　　　　<MARQUEE　HEIGHT="10%">滚动字幕的高度是可视页面的10%</MARQUEE>　<br />　　　　<MARQUEE　HEIGHT="12">滚动字幕的高度是12像素</MARQUEE>　<br />　　　　　　<br />　　　　<span style="COLOR: red">WIDTH</span>：用于设定字幕的宽度，宽度可用像素或可视页面的百分比来表示。此属性不是必须使用的。　<br />　　　　例：　<br />　　　　<MARQUEE　WIDTH="90%">滚动字幕的宽度是可视页面的90%</MARQUEE>　<br />　　　　<MARQUEE　WIDTH="200">滚动字幕的宽度是200像素</MARQUEE>　<br />　　　　　　<br />　　　　HSPACE：用于设定滚动字幕左右的空白空间，空白空间用像素表示。此属性不是必须使用的。　<br />　　　　例：　<br />　　　　<MARQUEE　<span style="COLOR: red">HSPACE</span>="15">滚动字幕左右空白空间为15个像素</MARQUEE>　<br />　　　　　<br />　　　　<span style="COLOR: red">VSPACE</span>：用于设定滚动字幕上下的空白空间，空白空间用像素表示。此属性不是必须使用的。　<br />　　　　例：　<br />　　　　<MARQUEE　VSPACE="2">滚动字幕上下的空白空间为2个像素</MARQUEE>　<br />　　　　　<br />　　　　LOOP：用于设定滚动字幕的滚动次数。当LOOP的值为"INFINITE"或是"-1"时，则文字会无限制地滚动。此属性不是必须使用的。　<br />　　　　例：　<br />　　　　<MARQUEE　LOOP="-1">文字滚动无数次</MARQUEE>　<br />　　　　<MARQUEE　LOOP="5">文字滚动5次</MARQUEE>　<br />　　　<br />　　　　SCROLLAMOUNT：用于设定每个连续滚动文本后面的间隔，该间隔用像素表示。此属性不是必须使用的。　<br />　　　　例：　<br />　　　　<MARQUEE　SCROLLAMOUNT="10">此文本后面的间隔为10个像素</MARQUEE>　<br />　　　　　　<br />　　　　SCROLLDELAY：用于设定两次滚动操作之间的间隔时间，该时间以毫秒为单位。此属性不是必须使用的。　<br />　　　　例：　<br />　　　　<MARQUEE　SCROLLDELAY="5">此文本两次滚动之间的间隔时间为5毫秒</MARQUEE></p>
		<p>ONMOUSEOUT=this.start() ：用来设置鼠标移出该区域时继续滚动<br />ONMOUSEOVER=this.stop()：用来设置鼠标移入该区域时停止滚动</p>
		<p> </p>
		<p>
				<br />-------------------------------------------------------------</p>
		<p> </p>
		<p><TABLE height=393 cellSpacing=0 cellPadding=0 width=524 align=center bgColor=#d1f6db border=0><FONT size=4><FONT color=#990033></FONT></FONT><br /><TBODY><br /><TR><FONT size=4><FONT color=#990033></FONT></FONT><br /><TD style="BORDER-RIGHT: 2px solid; PADDING-RIGHT: 1px; BORDER-TOP: 2px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: 2px solid; LINE-HEIGHT: 20px; PADDING-TOP: 1px; BORDER-BOTTOM: 2px solid" borderColor=#99ccff bgColor=#000000 colSpan=2 height=393><br /><P style="MARGIN-TOP: -5px; MARGIN-BOTTOM: -5px; LINE-HEIGHT: 100%"><br /><MARQUEE scrollDelay=100 direction=up height=393>http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756252.jpg</a>"> http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756538.jpg</a>"> http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756304.jpg</a>"> http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756318.jpg</a>"> http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756503.jpg</a>"> http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756827.jpg</a>"> </marquee></p><pre">http://sc.chinadownz.com/UploadFiles/200506/DPic/20050601091756521.jpg"></MARQUEE></P><PRE</a> style="MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px; LINE-HEIGHT: 100%"></FONT></PRE></TD></TR></TBODY></TABLE></p>
		<p> </p>
		<p>
				<br />------------------------------------------------------------</p>
		<p> </p>
		<p>基本语法 <br /><span style="COLOR: red"><marquee> ... </marquee> </span></p>
		<p> </p>
		<p>文字移动属性的设置 </p>
		<p>
				<br />方向 </p>
		<p>
				<br /><direction=#> #=left, right <marquee direction=left>从右向左移！</marquee> <br />方式 </p>
		<p>
				<br /><bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走！</marquee> <br /><marquee behavior=slide>只走一次就歇了！</marquee> <br /><marquee behavior=alternate>来回走</marquee> </p>
		<p> </p>
		<p>循环 </p>
		<p>
				<br /><loop=#> #=次数；若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 </p>
		<p>
				<br />3 趟</marquee> </p>
		<p>
				<br /><marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee> <br /><marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee> </p>
		<p> </p>
		<p>速度 </p>
		<p>
				<br /><<span style="COLOR: red">scrollamount</span>=#> <marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee> </p>
		<p> </p>
		<p>延时 </p>
		<p>
				<br /><scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</p>
		<p>
				<br /></marquee> </p>
		<p> </p>
		<p>外观(Layout)设置 </p>
		<p>
				<br />对齐方式(Align) </p>
		<p>
				<br /><align=#> #=top, middle, bottom <font size=6><br /><marquee align=# width=400>啦啦啦，我会移动耶！</marquee><br /></font> </p>
		<p>
				<br />底色 </p>
		<p>
				<br /><bgcolor=#> #=rrggbb 16 进制数码，或者是下列预定义色彩：<br />Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, <br />Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色！</marquee> </p>
		<p> </p>
		<p>面积 </p>
		<p>
				<br /><height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积！</marquee> <br />　 </p>
		<p>
				<br />空白 </p>
		<p>
				<br />(Margins)<hspace=# vspace=#> <br /><marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=center>面积！</marquee></p>
		<p>
				<br /><marquee direction=up>我在向上走！</marquee><br /><marquee direction=down>我又下向走了</marquee></p>
		<p>
				<br />补充一个无缝连接的循环滚动</p>
		<p> </p>
		<p><html><br /><head><br /></head><br /><body><br /><TD WIDTH=390 HEIGHT=99><MARQUEE  scrollAmount=4 scrollDelay=0 loop=1 width=390 height=99><br />            <SCRIPT language=JavaScript><br />   for(t=1;t<=1000;t++)<br />   document.write("11111111111112222222222222222233333333333333")<br />   <br />            <br /></SCRIPT><br />             </MARQUEE></TD><br /></body><br /></html></p>
		<p>
				<br />
				<span style="COLOR: red">另一种实现无缝连接循环滚动得方法</span>
		</p>
		<p>
				<br /><div style=overflow:hidden;height:100px width:100px><br /><div href="#" target="_blank">http://www.5dmedia.com/bbs/icon/nudeangel.gif</a>" </p>
		<p>
				<br />width="80" height="80" </p>
		<p>
				<br />border="0"></a></p>
		<p>
				<br /><a href="#" target="_blank">http://www.5dmedia.com/bbs/icon/nudeangel.gif</a>" </p>
		<p>
				<br />width="80" height="80" </p>
		<p>
				<br />border="0"></a></p>
		<p>
				<br /><a href="#" target="_blank">http://www.5dmedia.com/bbs/icon/nudeangel.gif</a>" </p>
		<p>
				<br />width="80" height="80" </p>
		<p>
				<br />border="0"></a></p>
		<p>
				<br /><a href="#" target="_blank">http://www.5dmedia.com/bbs/icon/nudeangel.gif</a>" </p>
		<p>
				<br />width="80" height="80" </p>
		<p>
				<br />border="0"></a></p>
		<p>
				<br /><a href="#" target="_blank">nudeangel_2</a></p>
		<p>
				<br /><a href="#" target="_blank">nudeangel_3</a></p>
		<p>
				<br /><a href="#" target="_blank">nudeangel_4</a></p>
		<p>
				<br /><a href="#" target="_blank">nudeangel_5</a></p>
		<p>
				<br /><a href="#" target="_blank">inudeangel_6</a></p>
		<p>
				<br /><a href="#" target="_blank">nudeangel_7</a></p>
		<p>
				<br /></div><br /><div t=demo.scrollTop<br />demo2.innerHTML=demo1.innerHTML<br />function nudeangelMarquee(){<br />if(demo2.offsetTop-demo.scrollTop<=0)<br />demo.scrollTop-=demo1.offsetHeight<br />else<br />demo.scrollTop++<br />}<br />var repeat=setInterval(nudeangelMarquee,50);<br />demo.onmouseover=function() {clearInterval(repeat);}<br />demo.onmouseout=function() {repeat=setInterval(nudeangelMarquee,50);}</p>
		<p> </p>
		<p>-----------------------------------------------------------</p>
		<p> </p>
		<p><marquee><bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走！</marquee></p>
		<p> </p>
		<p>最简单的图片移动特效———图片水平向左循环移动<br />：<marquee><br />http://unibbs.unibbs.com/images/upphoto/647253.jpg</a>"><br />http://unibbs.unibbs.com/images/upphoto/647264.jpg</a>"><br />http://unibbs.unibbs.com/images/upphoto/647269.jpg</a>"><br />http://unibbs.unibbs.com/images/upphoto/647247.jpg</a>"><br />http://unibbs.unibbs.com/images/upphoto/648164.gif</a>"><br />http://unibbs.unibbs.com/images/upphoto/648169.gif</a>"><br />http://unibbs.unibbs.com/images/upphoto/648177.gif</a>"><br />http://unibbs.unibbs.com/images/upphoto/648182.gif</a>"><br />http://unibbs.unibbs.com/images/upphoto/648186.gif</a>"><br />http://unibbs.unibbs.com/images/upphoto/648189.gif</a>"><br /></marquee<br /></p>
<br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/coacoa2008/" target="_blank">吴杨明</a> 2007-08-29 18:29 <a href="http://www.blogjava.net/coacoa2008/articles/141044.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>
</article>
<article>
<h1>CSS Classes</h1>
<p>吴杨明 — Tue, 28 Aug 2007 11:18:00 GMT</p>
<h1>
<h1>CSS Selector</h1>
<p style="FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial">CSS selectors are the heart and soul of CSS. They define which HTML elements you are going to be manipulating with CSS code and you should have a solid understanding of them before continuing on in this tutorial. Lucky for you, they are pretty simple to comprehend!</p>
<script type=text/javascript><!--
google_ad_client = "pub-5396533251015167";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
//2007-05-21: NContent CSS
google_ad_channel = "1542190736";
google_color_border = "D2E7F4";
google_color_bg = "D2E7F4";
google_color_link = "3D81EE";
google_color_text = "000000";
google_color_url = "000000";
//-->
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript>
</script>
<h1>CSS Selector: Where It Fits In</h1>
<p style="FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial">In a typical CSS statements you have the following: </p>
<ul>
    <li>SELECTOR { PROPERTY: VALUE } </li>
</ul>
<p style="FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial">Where the property is the CSS element you wish to manipulate and "VALUE" represents the value of the specified property. </p>
<h1>CSS Selector Name</h1>
<p style="FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial">The selector name is a direct relationship to the HTML tag you want to edit. If you wanted to change the way a paragraph tag behaved the CSS code would look like: </p>
<ul>
    <li>p { PROPERTY: VALUE } </li>
</ul>
<p style="COLOR: red">The above example is a template that you can use whenever you are manipulating the paragraph HTML element. In the next lessons we will teach where to place your CSS and why and where you should use CSS</p>
</h1>
<h1>CSS Classes</h1>
<p>You may be wondering if it is possible to give an HTML element multiple looks with CSS. Say for example, sometimes you want the font to be large and white, while other times you would prefer the font to be small and black. CSS would not be very useful if it did not allow you to have many different types of formats for a single HTML tag. Well, you are in luck! CSS allows you to do just that with the use of classes. </p>
<script type=text/javascript><!--
google_ad_client = "pub-5396533251015167";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
//2007-05-21: NContent CSS
google_ad_channel = "1542190736";
google_color_border = "D2E7F4";
google_color_bg = "D2E7F4";
google_color_link = "3D81EE";
google_color_text = "000000";
google_color_url = "000000";
//-->
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript>
</script>

<h1>The Format of Classes</h1>
<p>Using classes is simple. You just need to add an extension to the typical CSS code and make sure you specify this extension in your HTML. Let's try this with an example of making two paragraphs that behave differently. First, we begin with the CSS code, note the red text. </p>
<div class=codewrap>
<h2 class=specialT>CSS Code:</h2>
<pre class=code>p<font color=red>.first</font>{ color: blue; }
p<font color=red>.second</font>{ color: red; }
</pre>
</div>
<div class=codewrap>
<h2 class=specialT>HTML Code:</h2>
<pre class=code><html>
<body>
<p>This is a normal paragraph.</p><br>
<p <font color=red>class="first"</font>>This is a paragraph that uses the p.first CSS code!</p>
<p <font color=red>class="second"</font>>This is a paragraph that uses the p.second CSS code!</p>
...
</pre>
</div>
<h2 class=specialT>Display:</h2>
<div class=display>
<p>This is a normal paragraph.</p>
<p class=classFirstA>This is a paragraph that uses the p.first CSS code!</p>
<p class=classSecondA>This is a paragraph that uses the p.second CSS code!</p>
</div>
<p>You can use CSS Classes with any HTML element! However, what happens if we had already defined a value for the base <p> tag? Well, what happens is the HTML element first takes on the style defined by the base and <strong>then</strong> the styles defined by the class. If the CSS class uses a CSS attribute already defined by the base CSS then the formatting defined by the class will be the value that is used. </p>
<p>It may be easier to imagine that the base CSS code is the starting look that all HTML elements will have and the only way to change that look is to overwrite the attributes using CSS classes. Please see the example below for a visual of this tricky topic. </p>
<div class=codewrap>
<h2 class=specialT>CSS Code:</h2>
<pre class=code>p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }
</pre>
</div>
<div class=codewrap>
<h2 class=specialT>HTML Code:</h2>
<pre class=code><html>
<body>
<p>This is a normal paragraph.</p>
<p <font color=red>class="test1"</font>>This is a paragraph that uses the p.test1 CSS code!</p>
<p <font color=red>class="test2"</font>>This is a paragraph that uses the p.test2 CSS code!</p>
...
</pre>
</div>
<h2 class=specialT>Display:</h2>
<div class=display>
<p class=classTestAll>This is a normal paragraph.</p>
<p class=classTest1>This is a paragraph that uses the p.test1 CSS code! The p.test1 paragraph remained the same size, but it's color changed.</p>
<p class=classTest2>This is a paragraph that uses the p.test2 CSS code! The p.test2 paragraph remained the same color, but it's size changed.</p>
</div>
<p><strong>Remember</strong>, CSS code in classes will override the general CSS code. <strong>p.test1</strong> overrides <strong>p</strong>! </p>
<script type=text/javascript><!--
google_ad_client = "pub-5396533251015167";
google_ad_width = 468;
google_ad_height = 15;
google_ad_format = "468x15_0ads_al";
//2007-05-21: Link CSS
google_ad_channel = "7360436491";
google_color_border = "D2E7F4";
google_color_bg = "D2E7F4";
google_color_link = "000000";
google_color_text = "000000";
google_color_url = "000000";
//-->
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript>
</script>
<br><br>
<ul id=nav>
    <li class=back><a href="http://www.tizag.com/cssT/inline.php">Go Back</a></li>
    <li class=cont><a href="http://www.tizag.com/cssT/background.php">Continue</a></li>
</ul>
<h3>Try it out!</h3>
<form action=http://www.tizag.com/htmlViewer.php method=post target=_blank>
    <textarea name=htmlCreate rows=20 cols=57><html>
    <head>
    <style>
    p.first { background-color: gray; }
    p.second { background-color: red; }
    p.third {
    background: purple;
    color: white;
    }
    </style>
    </head>
    <body>
    <h2>CSS Classes</h2>
    <p class="first">This is the p.first paragraph</p>
    <p class="second">This is the p.second paragraph</p>
    <p class="third">This is the p.third paragraph</p>
    </body>
    </html></textarea> <br><input type=submit value=提交查询内容>
</form>
<br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/coacoa2008/" target="_blank">吴杨明</a> 2007-08-28 19:18 <a href="http://www.blogjava.net/coacoa2008/articles/140638.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>
</article>
<article>
<h1>CSS Selector   CSS Lists</h1>
<p>吴杨明 — Tue, 28 Aug 2007 11:14:00 GMT</p>
    只有注册用户登录后才能阅读该文。<a href='http://www.blogjava.net/coacoa2008/articles/140636.html'>阅读全文</a><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/coacoa2008/" target="_blank">吴杨明</a> 2007-08-28 19:14 <a href="http://www.blogjava.net/coacoa2008/articles/140636.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>
</article>
<article>
<h1>HTML - Div Element(s)</h1>
<p>吴杨明 — Tue, 28 Aug 2007 11:05:00 GMT</p>
<h1>HTML - Div Element(s)</h1>
<p>The <div> tag is nothing more than a container for other tags. Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. Use only the following attributes with your div element, anything else should be reserved for CSS. (<a href="http://www.tizag.com/cssT/"><strong><u><font color=#000000 size=2>CSS Tutorial</font></u></strong></a>)</p>
<script type=text/javascript><!--
google_ad_client = "pub-5396533251015167";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
//2007-05-21: NContent HTML
google_ad_channel = "7437282821";
google_color_border = "D2E7F4";
google_color_bg = "D2E7F4";
google_color_link = "3D81EE";
google_color_text = "000000";
google_color_url = "000000";
//-->
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript>
</script>

<ul>
    <li>id
    <li>width
    <li>height
    <li>title
    <li>style </li>
</ul>
<p>For the purpose of this example, we have included the <em>style</em> attribute in order to color our div tag in order to bring a stronger visualization for our viewers.</p>
<div class=codewrap>
<h2 class=specialT>HTML Code:</h2>
<pre class=code><body>
<font color=red><div style="background: green"></font>
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
<font color=red></div></font>
</body>
</pre>
</div>
<h2 class=specialT>HTML Div Element:</h2>
<div class=display>
<div style="BACKGROUND: green">
<h5>SEARCH LINKS</h5>
<a title=Google href="http://www.google.com/" target=_blank><strong><u><font color=#000000 size=2>Google</font></u></strong></a> </div>
</div>
<p>Above is a great visual about how a div plays the role of a container for other HTML elements, applying a background color/image is the only real way to visualize your div tags.</p>
<h1>HTML - Div Layouts</h1>
<p>When HTML first began, web creators only had two choices. A <a href="http://www.tizag.com/htmlT/htmllayout.php"><strong><u><font color=#000000 size=2>table layout</font></u></strong></a>, or <a href="http://www.tizag.com/htmlT/frames.php"><strong><u><font color=#000000 size=2>frames</font></u></strong></a>. The div element provides a 3rd alternative, since a div can contain any/every other type of html element within its beginning and ending tag.</p>
<div class=codewrap>
<h2 class=specialT>HTML Code:</h2>
<pre class=code><font color=red><div id="menu" align="right" ></font>
<a href="">HOME</a> |
<a href="">CONTACT</a> |
<a href="">ABOUT</a>
<font color=red></div></font>
<font color=red><div id="content" align="left" bgcolor="white"></font>
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
<font color=red></div></font>
</pre>
</div>
<h2 class=specialT>HTML Div Layout:</h2>
<div class=display>
<div id=pretendmenu align=right BGCOLOR="fuchia"><a class=2 href=""><strong><u><font color=#000000 size=2>HOME</font></u></strong></a> | <a class=2 href=""><strong><u><font color=#000000 size=2>CONTACT</font></u></strong></a> | <a class=2 href=""><strong><u><font color=#000000 size=2>ABOUT</font></u></strong></a> </div>
<div id=content align=left BGCOLOR="white">
<h5>Content Articles</h5>
<p>This paragraph would be your content paragraph with all of your readable material.</p>
</div>
</div>
<p>Advanced web developers find div elements to be far easier to work with than tables, adding more content or more links to our previous example might demonstrates why a div is simpler to work with.</p>
<p>Let's add a "LINKS" page to our menu, and another article of content below the existing content.</p>
<div class=codewrap>
<h2 class=specialT>HTML Code:</h2>
<pre class=code><div id="menu" align="right" >
<a href="">HOME</a> |
<a href="">CONTACT</a> |
<a href="">ABOUT</a> |
<font color=red><a href="">LINKS</a></font>
</div>
<div id="content" align="left" >
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
<font color=red><h5 >Content Article Number Two</h5>
<p>Here's another content article right here.</p></font>
</div>
</pre>
</div>
<h2 class=specialT>HTML Div Layout II:</h2>
<div class=display>
<div id=pretendmunu align=right><a href=""><strong><u><font color=#000000 size=2>HOME</font></u></strong></a> | <a href=""><strong><u><font color=#000000 size=2>CONTACT</font></u></strong></a> | <a href=""><strong><u><font color=#000000 size=2>ABOUT</font></u></strong></a> | <a href=""><strong><u><font color=#000000 size=2>LINKS</font></u></strong></a> </div>
<div id=content align=left>
<h5>Content Articles</h5>
<p>This paragraph would be your content paragraph with all of your readable material.</p>
<h5>Content Article Number Two</h5>
<p>Here's another content article right here.</p>
</div>
</div>
<br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/coacoa2008/" target="_blank">吴杨明</a> 2007-08-28 19:05 <a href="http://www.blogjava.net/coacoa2008/articles/140633.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>
</article>
<article>
<h1>HTML Froms</h1>
<p>吴杨明 — Tue, 28 Aug 2007 11:01:00 GMT</p>
    只有注册用户登录后才能阅读该文。<a href='http://www.blogjava.net/coacoa2008/articles/140632.html'>阅读全文</a><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/coacoa2008/" target="_blank">吴杨明</a> 2007-08-28 19:01 <a href="http://www.blogjava.net/coacoa2008/articles/140632.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>
</article>
<article>
<h1>html/css</h1>
<p>吴杨明 — Tue, 28 Aug 2007 03:41:00 GMT</p>
<div class=postText>
<p><a href="http://weather.news.qq.com/inc/ss103.htm"><font color=#000080>http://weather.news.qq.com/inc/ss103.htm</font></a>  </p>
<p><html><br><head><br><title>A element example


   
   Used as a hyperlink:

   http://www.java2s.com/" target="_blank">java2s.com
   


<-------------- --------------- ------------- ---------------- --------------------->
'a' Example: anchor 


A element example


   
   
Used as an anchor:

   Go to paragraph #3 in this page

   Go to the yourdocument.htm page, sty location

   Paragraph #2

   Paragraph #3

   Top



<-------------- --------------- ------------- ---------------- --------------------->
input


input element example


    

        This is a form with several input elements.

        
        

        A checkbox.
        

        
        

        A set of radio buttons.
        

        A submit button.
        

        A reset button.
        

                       border="0" 
               name="imageField" 
               src="http://www.java2s.com/style/logo.png" width="400"height="225" alt="An input image">
    



                -- -----       ---------------- -------- --------- ---- -------
'textarea' creates a multiline text entry control
    


textarea element example


    

        
            

                <br>                Your name and surname<br>                
                

            

        

    

            
    
        
            

                
                

                
                

                
                

                
                

                
            

        

    



 
<--------------------------------------->  DIV



div element example


   
 
     http://www.java2s.com/style/logo.png" 
             alt="" 
             width="300" 
             height="225">

     This div element contains an image plus a center aligned text.

   

    
     Text.

   



 
<---------------------------------------------------------->  iframe


iframe element example


    

                frameborder="1" 
            scrolling="yes"
            src="http://www.java2s.com" width="600" height="400">
    
    





    
                frameborder="10" 
            scrolling="yes"
            src="http://www.java2s.com" width="600" height="400">
    
    




<------------------------------------------>  Padding


The image below has an all-around padding of 30px.


   
       
   

          http://www.java2s.com/style/logo.png" 
               height="50" 
               width="50" 
               border="1">
       




<-------------------------------------------->   boder






     style="width:500; 
            height:500; 
            background-color:beige"
            onmouseover="this.className='style1'"
            onmouseout="this.className='style2'">
  This is a div element.



<----------------------------------------->   cursor



     style="background-color:#dddddd; 
            cursor:hand;">
            Move the mouse over this element to see the hand cursor.




<---------------------------->-     -      margin


     src="http://www.java2s.com/style/logo.png" 
     height="100" 
     width="100" 
     border="1">
     





<--------------------------------------------->  visibilty



http://www.java2s.com/style/logo.png">

       value="Set visibility property to hidden"
       onclick="myImg.style.visibility='hidden'">
       
       value="Set visibility property to visible"
       onclick="myImg.style.visibility='visible'">



<------------------------------------------>   span



span element example



   This 
           paragraph
         
        has text of 
        
        three 
         
        different 
         
        styles 
        .



<------------------------------------------>   style
    

style element example



The body cotains a black background and white letters.
 
<------------------------------------------->    marquee

访客留言

全部留言»

暂无访客留言.

<----------------------------------------> google

<----------------------------------------->

<------------------------------------>

查阅本圈相关内容:

      论坛
      博客
      google
      baidu

     http://bbs.51cto.com/search.php" target="_blank">

<+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++0>


访客留言:
验证码:	(如果看不清请点击图片进行更换.)

http://group.51cto.com/seccode.php

吴杨明 2007-08-28 11:41 发表评论

BlogJava-天天进步-文章分类-HTML\CSS

html的学习

Web Development Information

Web Site Building

Web Design Guidelines

Web Design Tips

CSS基本布局16例

单行单列

单行两列

单行三列

顶行三列

HTML FORM表单 页面学习

HTML 文件结构(Document Structures)

.........

css-----listTable inputTable

FCK

方法3：外部样式表（引用一个样式表文件）

自己试试看

default.htm

我的第一个样式表

style.css

第3课：颜色与背景

前景色：‘color’属性

‘background-color’属性

背景图像[background-image]

平铺背景图像[background-repeat]

固定背景图像[background-attachment]

放置背景图像[background-position]

缩写[background]

小结

第4课：字体

字体族[font-family]

字体样式[font-style]

字体变化[font-variant]

字体浓淡[font-weight]

字体大小[font-size]

缩写[font]

小结

HTML CACHE

建站小常识

使用 XML Schema 定义元素的基本知识

使用 XML Schema 定义元素的基本知识

Used as a hyperlink:

Used as an anchor:

HTML FORM表单页面学习

...
...
...