XHTML And CSS学习总结

最新推荐文章于 2024-06-15 19:58:23 发布

tavor

最新推荐文章于 2024-06-15 19:58:23 发布

阅读量2.2k

点赞数

分类专栏： HTML/XML 技术原创文章标签： xhtml css html 浏览器 class table

本文链接：https://blog.csdn.net/tavor/article/details/1841646

版权

技术原创同时被 2 个专栏收录

83 篇文章 1 订阅

订阅专栏

HTML/XML

6 篇文章 0 订阅

订阅专栏

XHTML

前言，最近一段时间学习了一下XHTML和CSS，其实它们的真实的含义是很简单的。XHTML是HTML的升级，但不只是在原来的HTML上的修修补补，而是建立在XML语法基础上的，是基于XML的应用，是用XML重新定义了HTML的标签（定义这个的标准组织进行的，从而成为了标准），它并没有对HTML增加任何标签和属性，只是对HTML标签的使用增加了约束，并要求满足XML的语法，比如标签成对出现，标签要合理嵌套，属性值要使用双引号之类的。有种说法是XHTML是HTML和XML的过滤语言，它的作用就是标准化HTML，有XML的语法，但又可以不完全像XML一样能自定义标签。所以学习XHTML，只要记住，标签还是HTML的标签，只是文件头部增加了XML文件所具有的头部声明和DTD，并增加了一些约束（一部分是XML语法本身的要求，一部分是DTD中的规定）。

在XHTML中，许多HTML标签不再被推荐使用，比如文本格式标签（B,I等）和TABLE标签，是因为它想要得到一种显示格式和内容的分离。显示的格式让CSS去做吧，我只负责内容。所以原先的HTML，现在要写一个标准的，简洁的网站，就可用XHTML和CSS替代了。

再关于CSS，CSS也很简单，层叠样式表，只要记住下面的格式即是一个样式，具体的就是如何给这三部分取值，然后，如何使用的问题：选择器 {属性名:属性值;}。

太简单了，这样就定义了一个样式，语法也是如此的简单。只要给这三部分设好相应的合理的值，再引用它就OK了。

以上只是从自己的理解概括出来的东东，具体的内容就看下面的总结吧，很多资料都是从菜鸟吧网站上找的，非常感谢！

什么是XHTML

XHTML就是严谨而准确的HTML, XHTML是HTML的”升级“产品,是基于XML的。事实上它也属于HTML家族，对比以前各个版本的HTML，它具有更严格的书写标准、更好的跨平台能力。由于某些需要，XHTML将以前版本的HTML能够实现的一些功能交给了CSS，这意味着你将需要学习两种技术。但是这确实是Web未来发展的潮流。X代表“可以扩展的”。

XHTML标签

通常情况下XHTML标签都是成对出现的，例如<html></html>。可以看到它们只相差一个“/”，我们把类似<html>的没有“/”的标签叫做起始标签，而它对应的有“/”的</html>则叫终止标签，终止标签与起始标签只相差一个"/"符号。当然了，XHTML也有一些标签并不成对出现，它们没有终止标签，我们把这样的标签叫做“空标签”。空标签的内容在稍后的教程中将会提到;

在XHTML中，所有标签均使用小写;

为XHTML标签添加属性的方法是在标签的起始标签中加入：属性＝“属性值”。需要注意的是，属性值必须使用引号“括”起来。单引号或者双引号都可以，但是双引号比较常用;

空标签的使用方法的自闭方法都是一致的，就是在起始标签的“>“符号前加上一个空格和一个反斜杠“/”。空格不是必须的，但是个别的浏览器却无法识别<hr/>，只能识别<hr />。

XHTML常用标签

标题标签<h1>到<h6>

定义标题，我们可以使用从<h1>到<h6>这几个标签，它们对应的终止标签分别为</h1>到</h6>，其中<h1>到<h6>字号顺序减小，重要性也逐渐降低。浏览器将在标题的上面和下面自动各空出一行。

段落标签<p>

定义段落使用<p>和</p>，在<p>和</p>之间的内容会被识别为一个段落，它就类似我们通常所说的一个“自然段”。与标题类似，浏览器也会在段落的开始之前和结束之后各加一行空白。

换行标签<br />(<br>)

当我们在想另起一行书写文字却又不希望另起一个自然段的时候，我们就可以应用<br />标签了。<br>标签也是一个空标签，需要加上一个"/"以符合XHTML的要求。

水平分割线标签<hr />(<hr>)

实现水平分割线的标签是<hr />。和<br>标签一样，<hr>也是一个空标签，为了遵守XHTML的规则，需要加上一个"/"。(下面就是一条分割线)

注释

合理利用上面介绍的四个标签可以使浏览你网页的用户觉得网页的层次清晰，而注释则可以使你在阅读自己的网页源代码时感觉层次清晰，不至于摸不着头脑。和HTML一样,在之间的东西就是注释的内容，它们将不会在网页上显示。

文字格式标签和特殊字符(字符实体)

类似<b>标签（它使得包含在它之中的内容变成粗体显示）我们称之为文字格式标签（或文字样式标签），但在XHTML中不推荐使用，而推荐使用CSS格式来替代这些标签。

在XHTML中“<”和“>”是比较特殊的字符，因为它们被用于识别标签，而且在标签中的"<"和“>”并不会出现在页面上，如果想让浏览器显示这些特殊字符，我们就可以使用字符实体，例如小于号“<”在XHTML代码中写做“<”，大于号”>”在XHTML中写做”>”.

在HTML中，可以不按顺序关闭标签，但在XHTML中必须按顺序关闭标签，如下在HTML中是没问题的，但在XHTML中是错误的， <b><i>我被两个标签包围啦！ </b></i>

超级链接<a>标签与页内跳转超级链接(锚记)

毫不夸张的说，是超级链接把整个互联网连接了起来。超级链接几乎可以指向互联网上的任何资源，例如另外一个网页、一张图片、一首MP3歌曲等等。而利用XHTML建立超级链接的语法却非常简单，只需要一对<a></a>标签即可：

<a href="这个超级链接将要指向的网址">页面上将要显示的文字或者图片等</a>;

其中<a>标签中的href属性就是这个超级链接所要指向的地址，她可以是一般的网址也可以是邮件的地址，。<a>和</a>之间的内容（元素）将被作为超级链接显示在网页上。注意href属性值为一般网址（绝对路径）时，其"http://"是不可以省略的，否则浏览器将把它作为相对路径来识别。

页内跳转（锚记）需要两个步骤来完成，
1.在需要跳转到的位置设置锚记标志，如 我是标题<a id=”biaoti”></a>
2.在需要跳转的位置设置链接标记，如 <a href=”#biaoti”>回到标题</a>

无序列表（项目列表）与 有序列表

无序列表采用标记<ul></ul>标记

有序列表采用标记<ol></ol>标记

列表项目则用<li></li>来标记

图片标签<img>

<img>标签用于在网页里插入图片。<img>标签有一个重要的属性"src"，它的属性值就是图片的地址;

<img>标签是一个空标签，所以需要在结尾加上一个"/"以符合XHTML的要求;

<img>标签除src属性外还有一个属性alt，我们把它叫做做替换属性，当图片由于某种原因而无法显示的时候，alt的属性值就会代替图片出现；而当图片正常显示时，只要把鼠标停在图片上就会看到alt属性的属性值。

XHTML的head 和DTD

在<head>部分我么可以加入许多浏览器可以“看得见”的信息，下面介绍一些head部分常用的标签：

1.<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

这段代码告诉浏览器我们的网页使用的是gb2312中文字符编码，没有该段<meta>信息正是上一次检验时出现问题的原因之一。

2.<meta name="keywords" content="小学生,欺负同学,寒暑假作业,家长" />

这段代码是为搜索引擎写的，content的内容就是index.html的关键词。

<head>部分的内容并不是为浏览者写的，而是为浏览器和搜索引擎写的。因此<head>部分不应该含有任何在页面中可视的内容。

DTD就是在任何人（多数情况下是类似浏览器的软件）想要读取我们的文件之前告诉他我们文件是遵照哪一套规则来写的。XHTML的DTD相对松散的过渡期DTD和要求相当严格的严格DTD，推荐使用严格的、标准的XHTML的DTD，如下所示，

<!DOCTYPE html PUBLIC "-//W 3C //DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DTD和head标签中的内容一般不会要求手工去写，用工具编写页面时会自动生成，仅需要些许的修改。

表格

在CSS流行之前，table被广泛应用于定位。在XHTML中，table不被推荐用来定位，W 3C 希望CSS可以取代<table>在定位方面的地位。不过事实上由于利用CSS布局常常需要大量的手写代码工作，)，<table>仍被许多网站用语首页布局;但推荐开始使用<div>来进行页面的布局。

在XHTML中，创建表格的标签是<table>，书写代码时，我们要先用<tr>标签将表格分成一行一行，再用<td>标签把每行分成一格一格。

<table>标签可以有border属性。如果不设置border属性的值，在默认情况下，浏览器将不显示表格的边框;

框架结构标签<frameset></frameset>

框架允许你在一个浏览器窗口内打开两个乃至多个页面。你可以这样理解，<frameset>其实就是一个大<table>，只不过整个页面是<table>的主体，而每一个单元格的内容都是一个独立的网页。

框架结构可以被理解为一网页为单元格的表格，那么就一定要分栏了。其中cols属性将页面分为几列，而rows属性则将页面分为几行。下面来看一个例子。

<html>

</frameset>

</html>

其中"rows="25%,75%"表示该页面共分为两行，因为它有两个属性值，而他们的大小则分别为页面高度的25%和75%

上面的实例中已经用到了<frame>标签，它的src属性就是这个框架里将要显示的内容。在本实例中的两个框架是可以通过拖拽开改变大小比例的，如果你希望它们大小固定可以使用noresize="noresize"属性。

<frame>标签是空标签，需要加上一个"/"以符合XHTML的要求。

<noframe>标签只有当浏览器不支持框架结构时才会起到作用;

框架页面的DTD与一般网页不同。声明方法如下：

<!DOCTYPE html PUBLIC "-//W 3C //DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

表单标签<form>

表单以一个<form>标签开始;

两个常见的表单内的组成元素<input>标签：

文本框 <form>姓名:<input type="text" name="user"/></form>

密码框<form>密码:<input type="password" name="pass"/></form>

两个表单元素都用到了<input>标签，但是密码框里填写的内容却是不可见的。决定了他们类型不同的是<input>标签的属性“type”的属性值。例如text就是文本框，而password则是密码;

<imput>标签也是一个空标签。他没有终止标签,也需要在后面加上一个"/"以符合XHTML的要求。

常用的表单元素还有很多，比如单选和复选框等等;

XHTML总结

以上介绍了XHTML的大概知识，但还有很多没有包含进去，且XHTML是标准严谨的XHTML，基本上去除了格式标签和属性，而这部分功能由CSS替代了。

HTML知识速查：http://www.yesky.com/imagesnew/software/html/index.html

CSS知识速查：http://www.yesky.com/imagesnew/software/css/index.html

XHTML入门教程和例子：http://www.cainiao8.com/web/xhtml.html

CSS

什么是CSS?

CSS是Cascading Style Sheets（层叠样式表）的缩写。它的作用是定义网页的外观（例如字体，颜色等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。

CSS语法简介

加在head部分的<style type="text/css">和</style>分别被浏览器识别为CSS的开始和结束。而注释标签则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。

通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：

选择器 { 属性: 属性值; }

例如：h1 {font-size: 12px;}

本例中选择器也就是你想要描述的HTML标签，也就是h1标签。属性和属性值则是说明你想要描述h1的哪一个属性，该属性的值为多少，例如上面例子中将h1字体大小属性为12像素，写成font-size: 12px。属性和属性值之间用一个冒号“:”分开，以一个分号“;”结束，最后别忘记用一对大括号“{}”括起来。

也可以为一个选择器同时定义多个样式，样式之间用分号“;”隔开。也可以同时为几个标签同时定义一组样式，标签之间用逗号“,”隔开。也许这两句话比较绕嘴，不过事实上上面例子的第二行代码就用到了CSS的这个特性。语句“h2,h4 {font-size: 12px; display:inline;} ”同时为h2和,h4两个标签定义了两个样式。

在CSS中，注释以“/*”开始，以“*/”结束，注释里面的内容对于浏览器来说是没有意义的。

CSS中class(类)和id的介绍

上面我们设置了H1标签的CSS格式，那么整个页面中的H1都会按那种格式显示，如果我们不想每个H1都那么显示，而是有几个特殊的会有自己的显示格式呢？那我们就会用到CSS中的class和id了。

首先我们要在<head>的CSS部分定义class(类)或id。

class的定义方法：指定标签.类名 {样式}

id的定义方法：指定标签#id名 {样式}

然后我们在想要应用类的标签上加上class(类)或者id属性：

class的应用方法：<指定标签 class="类名">

id的应用方法：<指定标签 id="id名">

这种方式定义的class(类)和id只能作用于指定标签。比如定义了一个h1.testClass {},那么这个class只能用h1标签，而不能用于别的标签类型。

在网页设计的过程中，你可能不希望你定义的类只局限于一个标签，那么只要把前面的标签去掉即可，例如h1.testClass{}变成.testClass{}，这样就可以用于多种标签。

注意：类名和id名不可以用数字开头。

class(类)与id的区别

class和id看起来除了一个.和#的区别之外，无论在定义上还是在应用上似乎都是一模一样啊？然而事实上并不如此，id在一个页面内只能应用一次，而class则是用于描述多次出现的元素。这从它们的名称上很容易理解。id就类似元素的省份证号码，它必须是唯一的，而class则是一类具有共同属性的元素的合称，是一类。

如果你试图在一个一面内多次使用同一个id，页面通常是可以正常显示的。但是我们仍希望您能区分开id和class，并且合理的应用它们。

CSS样式表分类及C（cascading）的含义

内部样式表
内部样式表即是需要在网页的<head>部分定义的样式表。
行内样式表（内嵌样式表）
行内样式表直接在标签内部定义，使用style属性。如<h1 style=”font-size:14px;”>oh, wo shi h1</h1>
外部样式表
使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，你需要在网页的<head>部分插入以下内容：<head>
<link rel="stylesheet" type="text/css" href="文件位置/你的CSS文件名.css" />
</head>
使用"import(导入其它的CSS文件)"
@import url(left.css)

层叠的意义：当我们为同一个标签多次设置样式表的时候，这些样式表会最终层叠成一个样式表来作用于标签。例如，你在外部样式表中为p定义了如下样式：

p { text-align: left;}

而在内部样式表中又定义了如下样式：

p {text-indent: 24px;}

那么最终网页内p标签的样式将为：p { text-align: left;text-indent: 24px;}。

上面的两个样式表的层叠比较好理解，两个样式表分别定义了一个标签的不同属性。但是如果外部样式表与内部样式表同时定义了一个属性呢？

如果你试图对同一标签的同一属性多次定义，那么内部样式表的定义将要覆盖外部样式表的定义。这是因为内部样式表的优先级高于外部样式表。三种样式表的优先级由高到低排列如下：

行内样式表(内嵌样式表)
内部样式表
外部样式表
补充规则：优先级相同的情况下，后定义的属性会覆盖先前定义的。

CSS文字属性(font属性)

Font属性在CSS中的使用频率是相当高的，主要使用下面四个属性

定义字体(font-family)如:.song {font-family:”宋体”;}
定义文字大小(font-size)如:.f14 {font-size:14px;}
定义文字样式（font-style）如:.ita {font-style:italic;}
定义文字粗细(font-weight)如:.p.b{font-weight:bold;}

css文本属性(text属性)

合理的应用CSS文本属性不只可以改变你页面文本的风格，还可以在一定程度上帮你省去不必要的劳动。比如，每一个段落的首行打两个空格进行缩进，但是用CSS你只需要一小段代码就可以让你站点之内所有的段落都自动缩进两个字符。

首行缩进（text-indent）
文本颜色(text-color)
文本对齐(text-align)
文本修饰（text-decoration）

背景属性(background)

1. 背景颜色属性(background-color):取值为transparent或者一个指定的颜色值。

2. 背景图片(background-image)：取值为none或url(http://......);

3. 背景图片的重复设置(background-repeat)包括:取值范围为no-repeat(不重复),repeat-x(水平方向重复),repeat-y(垂直方向重复);

背景图片位置(background-position):取值为center，left，right，top或bottom等等。
将背景图片固定在页面的某个位置(background-attachment),该属性可以设置背景图片是否随着滚动条滚动而改变位置，取值为scroll 或者fixed

CSS中的列表项属性

无序列表项目样式属性(list-style-type):主要取值有circle,square,disc等
有序列表项目样式属性(list-style-type)：主要取值有 decimal,upper-roman,lower-roman等等.
用图片做列表项目符号(list-style-image):取值为none或者url(…/../*.gif).

div和span

相对与其他XHTML标签，div和span对于它们包含的元素是没有意义的。例如当你看到<h1></h1>标签，你知道里面是标题，当你看到<p></p>标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样意义。

div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而 span是行级元素(行内标签)，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会。

Div可以灵活使用，比如用于主页的布局，是可以替代传统的table的。

CSS盒子(CSS box)

首先要清楚，CSS中没有box这个属性。CSS的盒子(box)是由以下几个部分组成的：

内容(content)、填充(padding)、边框(border)和边界(margin)。盒子的内容当然是必须有的，而填充、边框和边界都是可选的。如果把CSS的盒子看做现实生活中的盒子，那么内容就是盒子里装的货物；而填充就是怕货物损坏而添加的泡沫或者其它抗震的东西；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能与其他物体紧挨在一起，而必须有一段空隙。当然了，在CSS中的盒子是平面的。

边框，在border: 1px solid #000000;一句中，我们可以一起为border指定了三个属性值（border-width,border-style,border-color）
CSS填充属性(padding), 填充属性定义的是内容(content)与边框(border)的距离
CSS边界属性(margin),就是两个box之间的距离或缝隙。

定位(position)

CSS的定位功能是很强大的，利用它你可以做出各种各样的网页布局。本节就介绍一些CSS常用的定位语句。

1. 相对定位(relative) 相对定位是指相对它本来应该处的位置所做的移动。
2. 绝对定位(absolute如果父元素有使用定位，则是相对于父元素的坐标进行绝对定位;否则相对于浏览器的边界（更准确地说是文档的边界）进行绝对定位。
3. Static: 无特殊定位，对象遵循HTML定位规则
4. fixed 固定定位，相对于浏览器边界是固定的，如果滚动条滚动的话，他会随着滚动条滚动（此种在IE中是不支持的方式）。

定位中使用的left属性表示元素距离左侧的距离，而top属性表示距离上方的位置。如果用坐标系来理解的话left就是横坐标x，而top就是纵坐标y。

尽管定位的语法非常简单，但是它功能的强大和实用性是不容质疑的。合理的使用定位和盒子等等可以很好的实现主页的布局。

链接(a)

也许想修改默认的链接的显示方式，那么会有以下两种方式：

改变整个页面的链接方式
书写以下类标签的格式a:link、a:visited、a:hover和a:active分别对应未访问的链接、已经访问过的链接、鼠标悬停的链接和激活的鼠标链接(按下鼠标左键的时候)，这样就可以更改整个页面的链接方式。
只改变局部的链接方式（方法一）
为上述类标签a:link、a:visited、a:hover和a:active定义相应的id或class,然后在div标签中引用这个id或class（注意不是链接标签a，必须把链接标签放到div之内）。如#nvbar a:link{} 引用时<div id = nvbar><a href=””>dd</a></div>
只改变局部的链接方式(方法二)
类似为上述类标签建立相应的class或id，但建立方法和使用方法不一样，如下：a.nvbar:link{} 引用时直接用链接标签<a class = “nvbar” href=””>dd</a>

第三种写法与第二种比较而言，虽然也实现了为页面内的链接定义多种外观，不过可以看到，当你准备在你的页面中实践的时候，你首先需要找到你想添加各种样式的链接，然后为每一个链接都加上一个class=“...”(不同的class)，即使对于使用Dreamweaver的开发者这也是一项比较麻烦的工作，更不用说喜欢手写代码的同志了。而且日后当你希望做修改的时候你会发现工作量也是很大的。所以说不太推荐这种写法的原因。当然了，这种方法在你只想为一个或者个别几个链接添加样式的时候还是相当好用的。