浏览模式: 标准 | 列表分类:XHTML/CSS
Submitted by aming on 2008, April 5, 10:55 AM
一段时间以来，发现有很多人XHTML都不会用，不光是普通的初学者，有的程序员都不是很清楚该怎么写这个XHTML，我这里呢算是把一些常见的应用问题做一个总结，也算能使得大家能在沟通，合作上能形成默契。
XHTML里有很多的标签，但是经常用到的也就是那么几个，也只要掌握这几个也就可以了。下面我们一一列举：div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em
div 在我的脑子里我一直把他想作是一个瓶子或是箱子，我的感觉它挺硬的。这个div没有什么特性的意义，可以使用在很多地方，也就是说他可以装不同的东西。他的正确的写法是<div></div>必需要有封口。大家都用来做布局之用，也有用来作为存放文章形成段落，实际上，这个做法并不是很好，因为作为文章的分段自然有一个特定的标签来用。那就是下面要讲的<p></p>标签，不过用DIV来再整体的包住所有的段落。这是非常实用的。
p 这是一个有特定语义的标签，表示段落，是用来区分段落的。在大部分的浏览器中对P基本上都有一个上下的边距。但是没有行首缩进，因为行首缩进只是表示段落的方式但是不是一定或是必需的。所以在用P标签的时候如果需要可以针对P设定一下行首缩进，我是推荐在文章以外的地方不要使用P，因为P是有一定语义的，如果用在别的地方恐不合适。正确的写法是<p></p>
span 这也是一个非常常用的标签，这个标签可以说与div很像，没有什么特定的意义，只是他是一个级联元素，不是块级元素。我一直把它看作是一个袋子，他不像箱子那样可以有自己的宽高，他的宽高只能随着内容的多少而定，所以很像是袋子。这个标签与div正好互补。
ul,li 这是一个列表，在列表中，除了UL还OL，不过我觉得OL有点像是鸡肋。因为UL通过CSS定义一样可以有OL的数字排序效果。所以一般我不推荐使用 OL，有UL就可以了。UL是块级的，他的子级li也是块级标签。正确的写法是<ul><li></li>< /ul> LI标签是被UL标签包裹的，在UL标签里可以有无数个LI标签，LI标签不能独立使用。并且LI标签一定要封口，这不光是美观问题，对于后期的维护也很有好处。很多程序员都不喜欢把这个LI封口。UL列表的用处主要是列举出一维的，同一类型的数据。具体的比如使用在菜单上，文章中列数的一些条例等等。在列表中有一种特别的形式与UL是不一样的。那就是下面的DL
dl,dt,dd 这是一个很特别的三个标签的组合。这里的DT是指标题，DD是指内容。DL是包课他们的容器。正确的写法是<dl><dt> </dt><dd></dd></dl>在DL里可以有很多组的DT，DD，当出现很多组的时候尽量是一个DT配一个DD，如果DD中内容很多，可以在DD里加P标签配合使用。DL列表是一个非常好的列表形式，可以多加利用。
a 这表示链接，是一个特定属性的，也是网页中最为神奇的标签。因为它才让无数的网页都连在了一起。正确的写法是：<a href="" title=""></a>其中的href是表示目标地址，TITLE是鼠标悬停提示文字，这是可有可无的。但是有必是利大于无。
img 这是图片标签，也是个特定属性的标签。正常写法是：<img src="" alt="" title=""/> 这里的src是目标地址，ALT与TITLE是替换文字，ALT是 IE特定的，TITLE是其它浏览器的通用的。不过记得后面的反斜线那是一定要有的。
H 这是一个系列的标签，从H1到H6，一共六个，有人说太少了，有人说正好用，有人说用不了这么多。反正我是觉得差不多。正确写法是：<h> </h>主要是用来存放标题，也有一些朋友用来作它用，个人觉得这个标签还是让他安生一点，就让他做标题的作用。这六个标签之间最好不要出现什么相互包含的事。
strong 这个意思是着重，这是有语义的，作用也很简单。至于样工，是加粗着重，还是用色彩表明着重，那都是自行选择。正确的写法是<strong></strong>
em 这个与strong很像，是表示强调。一般浏览器的默认值是斜体。使用方式与strong一样。写法是：<em></em>
这里没有说表单，因为表单基本上没有什么变化，也没什么可特别说的。
» 阅读全文
Tags: xhtml, css
XHTML/CSS | 评论:0
| Trackbacks:0
| 阅读:257
Submitted by aming on 2008, March 21, 9:50 AM
手册很全面，还有很多的实例，相当不错的一本书
本手册针对的是已有一定网页设计制作经验的读者。其目的是提供完整清晰的样式表内容的快速索引及进阶帮助。所以对于网页制作和样式表的基础知识，仅简单介绍，恕不赘述。
手册提供了完整的 CSS2.0的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo- Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准，以及Internet Explorer 和 Netscape 各自的私有内容。出于种种众所周知的原因考虑，本手册以浏览器的事实标准——Internet Explorer 为主。
手册中为几乎所有的已被支持的属性、伪类、单位等，除了基本的语法示范外，都度身制作了可以对照源代码即时察看运行演示的实例。
» 阅读全文
XHTML/CSS | 评论:0
| Trackbacks:0
| 阅读:317
Submitted by aming on 2008, March 20, 11:04 AM
表单标签<form>
表单以一个<form>标签开始。用户注册网站会员，投票等等都需要表单来实现。当然了，仅仅依靠XHTML是无法处理这些表单的，如果你想处理这些表但你需要使用一些类似PHP和ASP的网页后台技术。（顺便说一下，小菜鸟自己的后台目前还很菜。）
表单内的<input>
下面我们来介绍两个常见的表单组成元素：
» 阅读全文
Tags: xhtml, xml, css
XHTML/CSS | 评论:0
| Trackbacks:0
| 阅读:359
Submitted by aming on 2008, March 20, 11:03 AM
框架结构标签<frameset></frameset>
框架允许你在一个浏览器窗口内打开两个乃至多个页面。你可以这样理解，<frameset>其实就是一个大<table>，只不过整个页面是<table>的主体，而每一个单元格的内容都是一个独立的网页。
给框架结构分栏(”cols“和”rows“属性)
既然我们说框架结构可以被理解为一网页为单元格的表格，那么就一定要分栏了。其中cols属性将页面分为几列，而rows属性则将页面分为几行。下面来看一个例子。
<html>
<frameset rows="25%,75%">
<frame src="1.html"/>
<frame src="3.html"/>
</frameset>
</html>
其中"rows="25%,75%"表示该页面共分为两行，因为它有两个属性值，而他们的大小则分别为页面高度的25%和75%。点击这里查看以上代码的显示效果。框架标签<frame>
上面的实例中已经用到了<frame>标签，它的src属性就是这个框架里将要显示的内容。在本实例中的两个框架是可以通过拖拽开改变大小比例的，如果你希望它们大小固定可以使用noresize="noresize"属性。
注意：<frame>标签是空标签，需要加上一个"/"以符合XHTML的要求。
» 阅读全文
Tags: xhtml, xml, css
XHTML/CSS | 评论:0
| Trackbacks:0
| 阅读:259
Submitted by aming on 2008, March 20, 11:02 AM
为什么会出错？
在上一节中我们我们在检验我们的网页时得到了一段出错信息，但是我们在整个网页的制作过程中都是按照XHTML标准写的啊。其实问题出在了网页的“头部”，下面我们就来解决这个问题。
<head>部分
在 之前的教程中除了<title>标签之外我们修改的都是<body>之间的内容，也就是显示在页面里的内容。那么XHTML中的 <head>部分是做什么的呢？其实在<head>部分我么可以加入许多浏览器可以“看得见”的信息。下面我们就介绍一些 head部分常用的标签。
注意：本节的标签与属性大多数难于记忆，事实上在我们在使用网页制作软件创建网页的时候它们会自动生 成。本节的目的是能够了解这些标签的含义，以在必要的时候可以做一些手工的修改。现在就打开我们的“index.html”，在<head> </head>中间插入如下代码：
» 阅读全文
Tags: xhtml, xml, css
XHTML/CSS | 评论:0
| Trackbacks:0
| 阅读:281
Submitted by aming on 2008, March 20, 11:01 AM
图片标签<img>
<img>标签用于在网页里插入图片。<img>标签有一个 重要的属性"src"，它的属性值就是图片的地址。下面我们就在我们的index.html里插入一个图片。打开”index.html“文件，在 </body>前加上如下代码：
<p><img src="http://www.cainiao8.com/images/LOGO.GIF" alt="技术支持"/></p>
保存后浏览网，请确认您的网页与该页面相同。
我 们注意到<img>是一个空标签，需要在结尾加上一个"/"以符合XHTML的要求。这里的例子除src外还有一个属性alt，我们把它叫做 做替换属性，当图片由于某种原因而无法显示的时候，alt的属性值就会代替图片出现；而当图片正常显示时，只要把鼠标停在图片上就会看到alt属性的属性 值。
» 阅读全文
Tags: xhtml, xml, css
XHTML/CSS | 评论:0
| Trackbacks:0
| 阅读:360
Submitted by aming on 2008, March 20, 11:00 AM
无序列表（项目列表）
无序列表的标签是<ul></ul>，而每一个列表项目则用<li>标签。下面我们就用无序列表来改写我们的"index.html"，打开之前保存的文件后，将"针对学生提供的服务"一段的代码修改为如下的无序列表代码：
<h3>针对学生的服务</h3>
<ul>
<li>代写寒暑假作业（数学<b>不</b>保证没有错题，语文不保证没有错字，
英语作业你找别人吧）</li>
<li>帮忙欺负<b>四年级</b>以下同学，<b>特体须加收费用</b>。</li>
<li> 家长会帮忙<i>冒充家长</i>。 </li>
</ul>
» 阅读全文
Tags: xhtml, xml, css
XHTML/CSS | 评论:0
| Trackbacks:0
| 阅读:226
Submitted by aming on 2008, March 20, 10:59 AM
超级链接<a>标签
毫不夸张的说，是超级链接把整个互联网连接了起来。超级链接几乎可以指向互联网上的任何资源，例如另外一个网页、一张图片、一首MP3歌曲等等。而利用XHTML建立超级链接的语法却非常简单，只需要一对<a></a>标签即可：
<a href="这个超级链接将要指向的网址">页面上将要显示的文字或者图片等</a>
例如：
<a href="http://www.cainiao8.com/">菜鸟吧</a>
将会在浏览器中显示为一个超级链接，点击它就将进入菜鸟吧（http://www.cainiao8.com/）。效果如下：
菜鸟吧
其 中<a>标签中的href属性就是这个超级链接所要指向的地址，她可以是一般的网址也可以是邮件的地址，在稍后的练习实例中我们将创建一个指 向邮件地址的超级链接。<a>和</a>之间的内容（元素）将被作为超级链接显示在网页上。注意href属性值为一般网址（绝对 路径）时，其"http://"是不可以省略的，否则浏览器将把它作为相对路径来识别。绝对路径与相对路径的区别不在本XHTML教程的讨论范围之内，如 果你不了解可以到百度搜索相关的资料。
» 阅读全文
Tags: xhtml, xml, css
XHTML/CSS | 评论:0
| Trackbacks:0
| 阅读:337
