带来一篇XHTML基本教程(一)
每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5viewport的使用能帮你做到这一点……甚么是HTML?复杂点说：HTML是用来做网页的。它很复杂，在接上去的1~2分钟以内你就会随着我用HTML做一个复杂的网页。
庞大点说：HTML（HyperTextMarkupLanguage的缩写），即超文本链接标志言语。它是在互联网公布超文本文件(一般所说的网页)的通用言语。
甚么是XHTML?更先辈难明的手艺？
复杂点说：X是恐吓人的，实在XHTML就是松散而正确的HTML。假如说HTML是汉语，那末XHTML就是尺度一般话。关于如今才方才入手下手进修网页计划的伴侣，间接进修XHTML是最好的选择。
庞大点说：XHTML是HTML的“晋级”产物。现实上它也属于HTML家属，对照之前各个版本的HTML，它具有更严厉的誊写尺度、更好的跨平台才能。因为某些必要，XHTML将之前版本的HTML可以完成的一些功效交给了CSS，这意味着你将必要进修两种手艺。可是这的确是Web将来开展的潮水。X代表“能够扩大的”。
进修XHTML的基本
进修XHTML不必要任何基本。相反，XHTML是进修学多其他常识的需要基本。有些人大概传闻必要进修完HTML才能够学XHTML，现实并不是云云，菜鸟吧(cainiao8.com)的XHTML教程就是面向没有任何基本的网页计划老手的。假如你已纯熟的把握了HTML，就不用看我们的进门教程了，我们为已熟习了HTML的站长筹办了从HTML到XHTML。
进修XHTML的办法
浏览XHTML教程和个中的实例固然是进修XHTML的好举措，可是仅仅云云是相对不敷的。在进修的过程当中，你能够找一些你之前对照喜好扫瞄的站点，看看他们在实践的网站计划过程当中是怎样利用XHTML的。你只必要点击扫瞄器工具栏上的“检察”按钮，再选择“检察源文件”，就能够看到该页的代码了。
好了，关于XHTML的先容就说到这里，上面就让我们入手下手进修XHTML吧。
用一分钟制造本人的第一个网页：
上面我们来试着做一个复杂的网页，但愿您能随着我们操纵，这只会消费您一分钟工夫。如今您大概不晓得那些尖括号“”和内里的字母事实是些甚么器材，不要忧虑，我们会在前面的教程中向您先容。
起首请运转记事本，或在恣意地位新建一个文本文档，在记事本内输出以下内容：
以下为援用的内容：
<html>
<head>
<title>我是这个网页的题目</title>
</head>
<body>
<p>这是我的第一个网页。</p>
</body>
</html>
输出终了后将文件保留，定名为“index.html”。(点击“文件”―>“另存为”。在“文件名”一栏填进“index.html”，在“保留范例”一栏选择"一切文件"，然后点击“保留按钮”)
保留以后，双击该文件，扫瞄器就会主动翻开这个网页了。请确认一下你的网页是不是与该页面不异，假如不异，那末你就乐成地完成了本人的第一个对照大略的网页。
请注重，这只是一个复杂的页面，固然它在语法上切合XHTML的尺度，可是假如要作为一个完全的、切合W3C尺度的XHTML网页，它还短少一些内容。相干内容将在前面的教程中先容。这个网页仅仅是用来说解一些基本的XHTML常识。
基本常识解说
我们方才制造的网页以<html>开首，以</html>开头，它们分离代表网页文件的入手下手和停止。
英文中head是头的意义，body是身材的意义。网页的<head></head>和<body></body>两部分就分离代表了网页的“头”和“身子”。大概你注重到了，我们网页的“头”内里“有一个<title></title>。title一词是题目的意义，网页的题目(title)将会显现在扫瞄器上方的题目栏中。而网页的身子，也就是<body>与</body>标签两头的内容将作为注释被显现在扫瞄器中。
这个网页很薄弱，head和body中都没有甚么内容。我们会在今后的教程中渐渐丰厚网页的内容。可是如今请您记着一个观点：网页的头(head)是为扫瞄器写的，它将不会显现在页面上，而身子(body)是为网站的用户写的，是扫瞄器将要显现的内容。
菜鸟恶搞XHTML之毛病示例
翻开上面这两个毛病示例看看。它们的代码都存在非常严峻的毛病，可是扫瞄器却会正确无误地显现这两个网页。
示例1――身子长在脑壳里
<html>
<head>
<title>我是这个网页的题目</title>
<p>这是我的第一个网页。</p>
</head>
<body>
</body>
</html>
看看下面这个网页，<head>和</head>之间的内容一般的显现在页面上了。可是这是幽默的毛病，把身子放在脑壳里了。
示例二――脑壳长在脖子下
<html>
<head>
</head>
<body>
<title>我是这个网页的题目</title>
<p>这是我的第一个网页。</p>
</body>
</html>
扫瞄器的顺应才能其实是使人信服，即便你将脑壳放在身子里它也认得出来。看看题目栏，题目完整一般显现。
好了，在实践使用的时分请不要犯下面这类初级毛病。这会形成严峻的成果：搜刮引擎大概不收录你的网站；利用手机大概其他挪动设备扫瞄你网站的伴侣大概碰到未知毛病。上面就从速让我们来进进XHTML的中心内容吧。
下一页
</P>
XHTML标签简介
大概你在上一节就注重到了，XHTML文件与一般的纯文本文件的最年夜分歧在于一些用“”包括的器材，比方<body>。我们把他们叫做标签。一般情形下XHTML标签都是成对呈现的，比方<html></html>。能够看到它们只相差一个“/”，我们把相似<html>的没有“/”的标签叫做肇端标签，而它对应的有“/”的</html>则叫停止标签，停止标签与肇端标签只相差一个"/"标记。固然了，XHTML也有一些标签其实不成对呈现，它们没有停止标签，我们把如许的标签叫做“空标签”。空标签的内容在稍后的教程中将会提到。
关于巨细写
之前各个版本HTML标签其实不辨别巨细写，比方标签<HTML>和标签<html>是等效的。而在XHTML中，一切标签均利用小写。为了使本人的网站可以切合XHTML尺度，您应当养成优秀的习气，在制造网页的过程当中一切标签一概利用小写。
XHTML标签的感化（元素）
翻开上一节教程中保留的html文件。将第六行的“这是我的第一个网页。”改成“这是我的第一个<b>网页</b>。”，然后保留修正后再次扫瞄网页。你会发明网页两个字酿成了粗体显现，效果以下：
这是我的第一个网页。
区分很分明，网页两个字因为被“包”在了标签<b></b>中而酿成了粗体。<b>标签的意义就是粗体显现，而它只会影响到被它包括的内容。这就是XHTML标签的感化体例。我们把被标签“包住”的内容叫做元素。本例中“网页”两个字就是<b>标签的元素。
标签的属性
<hrsize="1">
我们能够为XHTML标签设置一些属性。请你注重下面的程度线，底本它的代码是：<hr/>。在XHTML中<hr>标签就是一条程度支解线，我们能够为这条支解线增加一个属性“size”（即支解线的巨细），他的属性值为1。那末它的完全代码就是：
<hrsize="1"/>
相似的，为其他XHTML标签增加属性的办法也是在标签的肇端标签中到场：属性＝“属性值”。必要注重的是，属性值必需利用引号“括”起来。单引号大概双引号都能够，可是双引号对照经常使用。
增加属性的格局： <肇端标签属性="属性值"> 实例－> <tableborder="none">
注重：一般的XHTML文件有两个品级尺度(不算框架尺度)――过渡尺度和严厉尺度，个中过渡尺度次要针对那些习气于利用HTML开辟网站的站长。下面的代码在过渡尺度中是正当的，但是在严厉尺度中，size属性将被视为不法属性。XHTML不但是加倍尺度加倍严厉的HTML，他还推许一种构建网站的思绪。那就是把网页的内容与款式分隔，这在XHTML中是经由过程CSS来完成的。因而我们保举您利用严厉尺度的XHTML，把界说款式的义务完整交给CSS。(关于XHTML尺度的成绩将在前面的教程中先容)
空标签
大概你已注重到了，这里我们没有把支解线标签写成对称的<hr></hr>，而是写成<hr/>。实在这恰是我们在后面教程中提到的不成对呈现的标签，他只要肇端标签<hr>却没有停止标签</hr>。因为它没有元素，以是我们把如许的标签叫做空标签。那末我们为何要写成<hr/>而不是简复杂单地写成<hr>呢？如许的誊写格局是为了满意XHTML中任何标签都必要“封闭”的划定规矩。我们把在肇端标签的最初增加"/"的办法叫做标签的自闭（大概自封闭、自停止等等，你喜好怎样叫都行）。
一切空标签的利用办法的自闭办法都是分歧的，就是在肇端标签的“>”标记前加上一个空格和一个反斜杠“/”。空格不是必需的，可是一般的扫瞄器却没法辨认<hr/>，只能辨认<hr/>。这也恰是我们增加空格的缘故原由。（我至今没有碰到不兼容的扫瞄器）
上一页下一页
</P>经常使用标签
就像一篇文章一样，我们的网页也要段落明白，也必要主要水平分歧的题目。本节就将先容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的划定规矩，必要加上一个"/"。(上面就是一条支解线)
正文<!-- -->
公道使用下面先容的四个标签可使扫瞄你网页的用户以为网页的条理明晰，而正文则可使你在浏览本人的网页源代码时感到条理明晰，不至于摸不着思想。在<!--和-->之间的器材就是正文的内容，它们将不会在网页上显现。看看我们怎样鄙人面的实习实例中拔出正文。
实习实例
如今翻开我们在上一节保留的网页，实习一下本节进修的几个主要标签。将<body></body>中的“这是我的第一个<b>网页</b>。”往失落，输出以下内容：
<h1>服务通告</h1><!--实习题目的利用，看看字号是否是变年夜了？-->
<hr/><!--程度支解线，别忘了谁人"/"-->
<h2>自己现面临天下的小先生及家长同道供应以下服务：</h2><!--2号题目，看看字号是否是比1号题目小-->
<h3>针对先生的服务</h3>
<p>
代写冷寒假功课（数学不包管没有错题，语文不包管没有错字，英语功课你找他人吧）
<br/>协助欺侮四年级以下同砚，特体须加免费用。
<br/>家长会协助假充家长。
</p><!--下面的内容是一个段落-->
<h3>VIP服务</h3>
<p>凡购置一切三项服务者即主动晋级为VIP。我们将收费为您制造团体主页，完整切合W3C的XHTML尺度和ISO2009~。</p>
<!--这里网页固然条理还算对照明白，但是你是否是以为界面其实是很丢脸和大略呢？好比说行与行之间没有清闲，一号题目
太年夜了。关于界说网页表面的办法将在稍后的CSS教程中先容。忘了说次要内容了，正文不会呈现在网页上，以是
我们能够在这里打很多空话。不外在今后网页计划的过程当中只管写一些有提醒感化的正文。-->保留修正后扫瞄网页，确认一下你的网页和这个页面不异，竣工。
上一页下一页
</P>
笔墨格局与特别字符
本节先容笔墨格局和特别字符在XHTML中的完成办法。
笔墨格局标签
在之前的教程中我们已经用过一次<b>标签，他使得包括在它当中的内容酿成粗体显现。比方“<b>菜鸟吧</b>”将显现为菜鸟吧。我们把这类界说笔墨显现体例的标签叫做笔墨格局标签（笔墨款式标签……）。与粗体标签<b>相似的另有斜体标签<i>和夸大标签<em>等。我们保举您利用CSS界说网页的款式，而不是相似<b>的XHTML标签，这里先容这些标签的目标是让您在浏览他人网页的源代码时不至于懵懂。
特别字符(字符实体)
在XHTML中“<”和“>”是对照特别的字符，由于它们被用于辨认标签，并且在标签中的"<"和“>”其实不会呈现在页面上。那末假如我们想让扫瞄器显现这些特别字符时该怎样做呢？这时候我们就能够利用字符实体，比方小于号“<”在XHTML代码中写做“<”。固然，在网页计划软件中，这项事情不必要我们手写代码来完成。因而我们只需懂得这些特别字符的显现道理便可，而不必要记着每个特别字符的誊写代码。
实习实例
用记事本翻开之前创立的"index.html"文件。对源文件做以下修正(红字提醒)，保留后看看之前以后有甚么分歧，请确认您的网页与这个页面不异。
代写冷寒假功课（数学<b>不</b>包管没有错题，语文不包管没有错字，英语功课你找他人吧）
<br/>协助欺侮<b>四年级</b>以下同砚，<b>特体须加免费用</b>。
<br/>家长会协助<i>假充家长</i>。
</p><!--下面的内容是一个段落-->上面再来实习一下利用字符实体。翻开之前保留的“index.html”，在</body>标签前输出以下代码：
<p>Copyright 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.
页:
[1]