<![CDATA[夏岳嵩的Blog - HTML/XML]]> http://www.xiayuesong.com/ zh-cn PBlog2 v2.4 夏岳嵩的Blog http://www.xiayuesong.com/images/logos.gif http://www.xiayuesong.com/ 夏岳嵩的Blog http://www.xiayuesong.com/article.asp?id=118 <![CDATA[XML技巧五则]]> xia05070115@126.com(xiayuesong) Mon,09 Feb 2009 10:05:26 +0800 http://www.xiayuesong.com/default.asp?id=118 技巧1
　　XmlNode.InnerText与.InnerXml的区别是：前者将内容中的<和>分别变成<和>，因此，希望将两段 XmlDocument 合并的程序只能使用

XmlDocumentFragment.InnerXml = XmlNode.OuterXml

技巧2

/XPath: string end-with

<xsl:for-each select="root/data[substring-after(@name,'.')=

'Text' and string-length(value)>0]">


技巧3
　　一个XML文档在Load时如果失败，就是根本不合法；是否符合某个Schema（XSD）的要求则是有效性(valid)检查，方法是使用XmlValidatingReader对象的Schemas和ValidationType属性。

技巧4
　　XmlDataDocument类是从XmlDocument派生出来的，最重要的是增加了一个DataSet属性。不过这个类不是System.Xml提供的，而是System.Data提供的。对于总是要跟数据库打交道的应用程序来说，反正是要引用System.Data的，不如全部用XmlDataDocument。

技巧5
　　如何将XmlDataDocument对象中的DataSet更新保存到数据库中？DataSet本身有一个AcceptChanges方法，所以只需要：

xmlDataDoc.DataSet.AcceptChanges();

-

]]> http://www.xiayuesong.com/article.asp?id=104 <![CDATA[HTML列表(Lists)]]> xia05070115@126.com(xiayuesong) Sun,19 Oct 2008 21:46:55 +0800 http://www.xiayuesong.com/default.asp?id=104 HTML有三种列表形式：排序列表(Ordered List)；不排序列表(Unordered List)；定义列表(Definition List)。

排序列表(Ordered List)
排序列表中，每个列表项前标有数字，表示顺序。

排序列表由<ol>开始，每个列表项由<li>开始。

排序列表示例

不排序列表(Unordered List)
不排序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点。

不排序列表由<ul>开始，每个列表项由<li>开始。

不排序列表示例

定义列表
定义列表通常用于术语的定义。

定义列表由<dl>开始。术语由<dt>开始，英文意为Definition Term。术语的解释说明，由<dd>开始，<dd></dd>里的文字缩进显示。

定义列表示例

更多示例
不同类型(Type)的排序列表

这个例子显示如何用Type属性设置排序列表项前的符号。

不同类型(Type)的不排序列表

这个例子显示如何用Type属性设置不排序列表项前的符号。

嵌套的列表

列表里可以含有子列表。通常用这种嵌套的列表，反映层次较多的内容。

]]> http://www.xiayuesong.com/article.asp?id=99 <![CDATA[HTML头部信息(Head)]]> xia05070115@126.com(xiayuesong) Sun,19 Oct 2008 21:35:30 +0800 http://www.xiayuesong.com/default.asp?id=99 HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。

另外，搜索引擎如google,yahoo,baidu等也会查找你网页中的head信息。为了让搜索引擎能够收录你的网页，你也要填写适当的head信息。(网站被搜索引擎收录，还有其它的方法，比如被其它网站链接，这里不赘述，请浏览搜索引擎网站。)

下面说几个常用的head信息里的html元素，如标题(title)，链接(link)，样式(style)以及关于信息(meta)。

标题(title)
标题(title)是最常用的head信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里。见图：

 

示例代码如下：

<head><title>HTML中文教程头部信息(head)之标题(title)说明</title></head>
链接(link)
用链接(link)可以建立和外部文件的链接。常用的是对CSS外部样式表(external style sheet)的链接。示例代码如下：

<link rel="stylesheet" href="mainstyles.css" type="text/css">
有关CSS外部样式表和示例，详见CSS简介。

样式(style)
用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下：

<head>
<style>
   body {background-color:white; color:black;}
   h1 {font: 18pt arial bold;}
</style>
</head>
有关CSS内部样式表和示例，详见CSS简介。

 关于网页信息(meta)
在计算机语言里，你经常可以看到一个前缀 -- meta，meta就是“关于”(about)的意思。

这meta解释起来比较拗口，比如metadata，意为描述data的data，英文即data about data。还有一个词叫metalanguage，表示一种描述其它语言的语言。再举一个例子，metafile，表示描述其它文件的文件。

在HTML里，meta标记(meta tags)表示用来描述网页的有关信息。示例代码如下：

<meta name="description" content="HTML中文教程之头部信息">
<meta name="keywords" content="HTML,tutorials,source codes">
<meta name="author" content="站长网 站长学院">
 

利用meta中的Refresh你还可以实现自动跳转页面的功能。示例代码：

<meta http-equiv="Refresh" content="5;url=http://www.xiayuesong.com/html/">

]]> http://www.xiayuesong.com/article.asp?id=98 <![CDATA[HTML元素参考手册 HTML Elements Reference]]> xia05070115@126.com(xiayuesong) Sun,19 Oct 2008 11:20:42 +0800 http://www.xiayuesong.com/default.asp?id=98 a
表示超链接的起始或目的位置。

acronym
表示取首字母的缩写词。

address
表示特定信息，如地址、签名、作者、文档信息。

applet
在页面上放置可执行内容。

area
定义一个客户端图像映射中一个超级链接区域的形状、坐标和关联 URL。

b
指定文本应以粗体显示。

base
指定一个显式 URL 用于解析对于外部源的链接和引用，如图像和样式表。

basefont
设置显示文本时作为默认字体的基础字体值。

bdo
允许作者为选定文本片断禁用双向法则。

bgsound
使页面能够带有背景声音或配音。

big
指定所含文本要以比当前字体稍大的字体显示。

blockquote
表示文本中的一段引用语。

body
指明文档主体的开始和结束。

br
插入一个换行符。

button
指定一个容器，其中所含的 HTML 会被显示为一个按钮。

caption
表格的标题，对表格的简单描述。

center
将指定文本和图像居中显示。

cite
用斜体显示标明引文。

code
表示代码范例。

col
说明基于列的表格缺省属性。

colgroup
说明表格中一列或一组列的缺省属性。

comment
表示不可见的注释。防止所包含的文本或者HTML源代码被浏览器解析和显示。

dd
在定义列表中表示定义。定义通常在定义列表中缩进显示。

del
表示文本已经从文档中删除。

dfn
表示术语的定义。

dir
表示目录列表。

div
表示一块可显示 HTML 的区域

dl
表示定义列表。

dt
在定义列表中表示定义术语。

em
强调文本，通常以斜体显示。

embed
允许嵌入任何类型的文档。

fieldset
在字段集包含的文本和其它元素外面画一个方框。

font
用于说明所包含文本的新字体、大小和颜色。

form
说明所包含的控件是某个表单的组成部分。

frame
在 FRAMESET 元素内表示单个框架。

frameset
表示一个框架集，用于组织多个框架和嵌套框架集。

head
提供了关于文档的无序信息集合。

hn
以标题样式显示文本。

hr
画一条横线。

html
表明文档包含 HTML 元素。

i
指定文本应以斜体显示。

iframe
创建内嵌漂浮框架。

img
在文档中嵌入图像或视频片断。

input
创建各种表单输入控件。

input type=button
创建按钮控件。

input type=checkbox
创建复选框控件。

input type=file
创建文件上载控件，该控件带有一个文本框和一个浏览按钮。

input type=hidden
传输关于客户/服务器交互的状态信息。

input type=image
创建一个图像控件，该控件被点击后将导致表单立即被提交。

input type=password
创建与 INPUT type=text 控件类似的单行文本输入控件，不过并不显示用户输入的内容。

input type=radio
创建单选钮控件。

input type=reset
创建一个按钮，点击该按钮后，将重置表单控件回其初始值。

input type=submit
创建一个按钮，点击该按钮后，即提交表单。

input type=text
创建一个单行的文本输入控件。

ins
表示插入到文档中的文本。

isindex
使浏览器显示一个对话框，提示用户输入单行文本。

kbd
以定宽字体显示文本。

label
为页面上的其它元素指定标签。

legend
在 fieldSet 对象绘制的方框内插入一个标题。

li
表示列表中的一个项目。

link
允许当前文档和外部文档建立连接。

listing
以固定宽度的字体显示文本。

map
包含客户端图像映射的坐标数据。

marqueee
创建一个滚动的文本字幕。

menu
创建一个无序列表。

meta
向服务器和客户端传达关于文档的隐藏信息。

nobr
不换行显示文本。

noframes
包含对于那些不支持 FRAMESET 元素的浏览器使用的 HTML。

noscript
指定在不支持脚本的浏览器中显示的 HTML。

object
在 HTML 页面中插入对象。

ol
编制排序列表。

optgroup
允许作者对 select 元素中的选项进行逻辑分组。

option
表示 Select 元素中的一个选项。

p
表示一段。

param
设置 APPLET、EMBED 或 OBJECT 元素的属性初始值。

pre
以固定宽度字体显示文本。

q
分离文本中的引语。

s
带删除线方式显示文本。

samp
表示代码范例。

script
指定由脚本引擎解释的页面中的脚本。

select
表示一个列表框或者一个下拉框。

small
指定内含文本要以比当前字体稍小的字体显示。

span
指定内嵌文本容器。

strike
带删除线显示文本。

strong
以粗体显示文本。

style
指定页面的样式表。

sub
说明内含文本要以下标的形式显示，比当前字体稍小。

sup
说明内含文本要以上标的形式显示，比当前字体稍小。

table
说明所含内容组织成含有行和列的表格形式。

tbody
指明哪些行作为表格的主体。

td
指定表格中的单元格。

textarea
多行文本输入控件。

tfoot
指明哪些行作为表尾。

th
指定标题列。标题列将在单元格中居中并以粗体显示。

thead
指定哪些行作为表头。

title
文档的标题。

tr
指定表格中的一行。

tt
以固定宽度字体显示文本。

u
带下划线显示文本。

ul
表示不排序的项目列表。

var
定义程序变量，通常以斜体显示。

wbr
向一块 NOBR 文本中插入软换行。

 

]]> http://www.xiayuesong.com/article.asp?id=106 <![CDATA[如何创建HTML表格]]> xia05070115@126.com(xiayuesong) Wed,08 Oct 2008 21:49:45 +0800 http://www.xiayuesong.com/default.asp?id=106 HTML表格用<table>表示。一个表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多单元格(cell)，用<td>表示。

这三个Tag是创建表格最常用的Tag。

示例

border属性
在缺省情况下，如果不设置表格的边界，表格是不显示边界的。

示例：不显示边界的表格

要显示表格的边界，可使用border这个属性。

示例：显示边界的表格

表格的表头
用<th>来表示表格的表头，表头的字是粗体显示的。

示例： 有表头的表格

空的单元格
如果表格的单元格<td></td>之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。要显示这个单元格的边界，可以插入一个&nbsp;空格符。

示例

更多示例
有标题的表格

这个示例演示如何用<caption>在一个表格上加上标题。

包含多列或多行的单元格

这个示例演示如何用colspan，rowspan设置多列或者多行的单元格。

单元格里的内容

这个例子演示单元格<td></td>里面的内容。单元格的内容可以是文字，图片，超链接，Form，表格等。

单元格内容与单元格边界之间的距离

这个示例教你如何用cellpadding这个属性设置单元格内容与单元格边界之间的距离。

单元格之间的距离

这个示例教你如何用cellspacing这个属性设置单元格之间的距离

设置表格的背景颜色和背景图片

这个示例演示如何用bgcolor属性设置表格的背景颜色，如何用background属性为表格添加背景图片。

设置单元格的背景颜色和背景图片

这个示例演示如何用bgcolor属性设置单元格的背景颜色，如何用background属性为单元格添加背景图片。

单元格内容的对齐方式

这个示例教你如何用align属性设置单元格的对齐方式。

]]> http://www.xiayuesong.com/article.asp?id=105 <![CDATA[HTML框架(Frames)]]> xia05070115@126.com(xiayuesong) Wed,08 Oct 2008 21:48:15 +0800 http://www.xiayuesong.com/default.asp?id=105 使用框架(Frame)，你可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页，每个Frame里的网页相互独立。

Frameset
<frameset></frameset>决定如何划分Frame。<frameset>有cols属性和rows属性。使用cols属性，表示按列分布Frame；使用rows属性，表示按行分布Frame。

Frame
用<frame>这个Tag设定网页。<frame>里有src属性，src值就是网页的路径和文件名。

下面的代码的目的是：将Frameset分成2列，第一列25%，表示第一列的宽度是窗口宽度的25%；第二列75%，表示第一列的宽度是窗口宽度的75%。第一列中显示a.html，第二列中显示b.html。

<frameset cols="25%,75%">
   <frame src="../asdocs/html_tutorials/Frame_a.html">
   <frame src="../asdocs/html_tutorials/Frame_b.html">
</frameset>
Iframe
Iframe是Inline Frame的意思，用<iframe></iframe>可以将Frame置于一个HTML文件内。

示例
列分Frame

这个例子显示如何在浏览器里同时显示三个网页，三个网页是按列分布的。

行分Frame

这个例子显示如何在浏览器里同时显示三个网页，三个网页是按行分布的。

混合Frameset

这个例子既用到了cols属性，又用到了rows属性，将Frame进行灵活分布。

Frameset中的noresize属性

使用Noresize属性可以确保Frame的大小。如果不使用noresize属性，你可以用鼠标移动Frame的边界，来改变Frame的大小，如果设置了noresize属性，就不能移动边界了。

Frame用于导航

这个例子演示如何建立一个用于导航的Frame。这个导航Frame包含一个HTML，这个HTML（代码如下）包含了一个网页列表。点击网页列表中的任何一项，就会在第二个Frame中显示点击中的网页。

<HTML>
<HEAD>
<TITLE> humorlist.html </TITLE>
</HEAD>
<BODY>
<p><a href = "../asdocs/html_tutorials/Frame_a.html" target="showframe">笑话一<a></p>
<p><a href = "../asdocs/html_tutorials/Frame_b.html"  target="showframe">笑话二<a></p>
<p><a href = "../asdocs/html_tutorials/Frame_c.html"  target="showframe">笑话三<a></p>
</BODY>
</HTML>

]]> http://www.xiayuesong.com/article.asp?id=103 <![CDATA[HTML表单(Forms)]]> xia05070115@126.com(xiayuesong) Mon,06 Oct 2008 21:43:26 +0800 http://www.xiayuesong.com/default.asp?id=103 HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。

举个简单的例子，一个让用户输入姓名的HTML表单(Form)。示例代码如下：

<form action="http://www.xiayuesong.com/" method="get">
请输入你的姓名：
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>
 

学习HTML表单(Form)最关键要掌握的有三个要点：

表单控件(Form Controls)
Action
Method
先说表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type= "text"就是一个表单控件，表示一个单行输入框。

用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的http://www.xiayuesong.com/。

至于method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。

HTML表单(Form)常用控件(Controls)
HTML表单(Form)常用控件有：

表单控件(Form Contros) 说明
input type="text" 单行文本输入框
input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件
input type="checkbox" 复选框
input type="radio" 单选框
select 下拉框
textArea 多行文本输入框
input type="password" 密码输入框(输入的文字用*表示)


表单控件(Form Control)：单行文本输入框(input type="text")
单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：

<input type="text" name="yourname">
 

表单控件(Form Control)：复选框(input type="checkbox")
复选框允许用户在一组选项里，选择多个。示例代码：

<input type="checkbox" name="fruit" value ="apple">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
 

用checked表示缺省已选的选项。

<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>
 

表单控件(Form Control)：单选框(input type="radio")
使用单选框，让用户在一组选项里只能选择一个。示例代码：

<input type="radio" name="fruit" value = "Apple">苹果<br>
<input type="radio" name="fruit" value = "Orange">桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>
 

用checked表示缺省已选的选项。

<input type="radio" name="fruit" value = "Orange" checked>桔子<br>
 

表单控件(Form Control)：下拉框(select)
下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下：

<select name="fruit" >
  <option value="apple">苹果
  <option value="orange">桔子
  <option value="mango">芒果
</select>
 

如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。例句：

<select name="fruit" multiple>

用户还可以用size属性来改变下拉框(Select)的大小。

表单控件(Form Control)：多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下：

<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols表示textarea的宽度，rows表示textarea的高度。

表单控件(Form Control)：密码输入框(input type="password")
密码输入框(input type="password")主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是黑点符号。。例句如下：

<input type="password" name="yourpw">
 

表单控件(Form Control)：提交(input type="submit")
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下：

<input type="submit" value="提交">
 

表单控件(Form Control)：图片提交(input type="image")
input type=image 相当于 input type=submit，不同的是，input type=image 以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。

<input type="image" src ="images/icons/go.gif"
alt = "提交" NAME="imgsubmit">

]]> http://www.xiayuesong.com/article.asp?id=102 <![CDATA[HTML图片(Images)]]> xia05070115@126.com(xiayuesong) Mon,06 Oct 2008 21:42:13 +0800 http://www.xiayuesong.com/default.asp?id=102 用 <img> 这个 Tag 可以在HTML里面插入图片。最基本的语法如下：

<img src="url">
url表示图片的路径和文件名。比如 url 可以是 images/logo/blabla_logo01.gif，也可以是个相对路径 "../images/logo/blabla_logo01.gif"。

示例

图片alt属性
<img>中有一个alt属性，英文叫alternate text。例句如下：

<img src = "../images/html_tutorials/smile.jpg" alt="smile face">
假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。

其实，现在大多数浏览器都支持图片载入。在此介绍Alt属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上图片的说明，便于搜索引擎抓取你网页的内容。

示例

图片align属性
用align属性，可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。

示例

图片的大小
在缺省状况下，图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。

示例

建议
图片相对文字，所占的字节数较多，比如一个全屏的图片，即使经过压缩，也要占去大约50k字节，这相当于25000字的文本。因此浏览器载入图片比较费时，建议一个HTML文件里不要包含过多的图片，否则会影响你的网页显示速度。

更多示例
背景图片

这个示例演示如何将一个图片作为HTML网页的背景图片。

将一个图片作为一个超链接

这个示例演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。

]]> http://www.xiayuesong.com/article.asp?id=100 <![CDATA[HTML背景颜色和背景图片]]> xia05070115@126.com(xiayuesong) Mon,06 Oct 2008 21:36:28 +0800 http://www.xiayuesong.com/default.asp?id=100 HTML的 <body> 有两个关于背景的属性，一个是 bgcolor，是设置背景颜色的；另一个是 background，是设置背景图片的。

bgcolor属性
bgcolor属性用来设置HTML网页的背景颜色。

示例

background属性
background属性用来设置HTML网页的背景图片。background属性值就是背景图片的路径和文件名，如：

<body background="../images/html_tutorials/blabla_logo.gif">
<body background="http://www.xiayuesong.com/images/blabla_logo01.gif">
如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。

示例

建议
bgcolor和background这两个<body>的属性，在新的HTML标准(HTML 4 and XHTML)里已不建议使用，而建议用CSS设置背景颜色和图片。

为保证浏览器载入网页的速度，建议尽量不要使用字节过大的图片作为背景图片。

]]> http://www.xiayuesong.com/article.asp?id=101 <![CDATA[HTML字体(Fonts)]]> xia05070115@126.com(xiayuesong) Sun,05 Oct 2008 21:39:57 +0800 http://www.xiayuesong.com/default.asp?id=101 在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。

字体大小
用字体大小属性(size)来设定字体的大小。示例代码如下：

<p><font size="2">这一段的字体大小的值是2。</font></p>
 

字体风格
用face属性来设定字体风格。示例代码如下：

<p><font fac="arial">这一段的字体风格是arial。</font></p>
 

字体颜色
用颜色属性(color)来设定字体颜色。

字体颜色代码请参见HTML颜色参考(HTML Color Reference)。

<p><font color="#FF0000">这一段的字体颜色是红色</font></p>
 

注意
HTML4的标准中，已经不建议使用font及其属性来设定字体，而是建议用CSS来设定字体的大小，颜色，字体风格等。有关CSS中和文字的相关属性，请参见我们教程中的：

]]>