html 学习笔记(一)
是根据网上的教程学习的。。
HTML（HyperTextMarkupLanguage的缩写），即超文本链接标记语言
一常识
XHTML就是严谨而准确的HTML。如果说HTML是汉语，那么XHTML就是标准普通话。。
复杂点说：XHTML是HTML的“升级规范”产品，其中"X"是代表可扩展的，是单词"extensible"的缩写。事实上它也属于HTML家族，对比以前各个版本的HTML，它具有更严格的书写标准、更好的跨平台能力。由于某些需要，XHTML将以前版本的HTML能够实现的一些功能交给了CSS，这意味着你将需要学习两种技术。但是这确实是Web未来发展的潮流。X代表“可以扩展的”
而在XHTML中，所有标签均使用小写。为了使自己的网站能够符合XHTML标准，您应该养成良好的习惯，在制作网页的过程中所有标签一律使用小写。
添加属性的格式： <起始标签 属性="属性值"> 实例－> <table border="none">
<hr /> 空标签 所有空标签的使用方法的自闭方法都是一致的，就是在起始标签的“>”符号前加上一个空格和一个反斜杠“/”。空格不是必须的，但是个别的浏览器却无法识别<hr/>，只能识别<hr />。这也正是我们添加空格的原因。（现在几乎不会遇到不兼容的浏览器了）
二 常用标签
标题标签<h1>到<h6>
定义标题，我们可以使用从<h1>到<h6>这几个标签，它们对应的终止标签分别为</h1>到</h6>，其中<h1>到<h6>字号顺序减小，重要性也逐渐降低。通常浏览器将在标题的上面和下面自动各空出一行距离。
段落标签<p>
定义段落使用<p>和</p>，在<p>和</p>之间的内容会被识别为一个段落，它就类似我们通常所说的一个“自然段”。与标题类似，浏览器也会在段落的开始之前和结束之后各加一行空白。
换行标签<br />(<br>)
当我们在想另起一行书写文字却又不希望另起一个自然段的时候，我们就可以应用<br />标签了。<br />标签也是一个空标签，需要加上一个"/"以符合XHTML的要求。
水平分割线标签<hr />(<hr>)
实现水平分割线的标签是<hr />。和<br />标签一样，<hr>也是一个空标签，为了遵守XHTML的规则，需要加上一个"/"。(下面就是一条分割线)
注释<!-- -->
文字格式标签
在之前的教程中我们曾经用过一次<b>标签，他使得包含在它之中的内容变成粗体显示。例如“<b>菜鸟吧</b>”将显示为菜鸟吧。我们把这种定义文字显示方式的标签叫做文字格式标签（文字样式标签……）。与粗体标签<b>类似的还有斜体标签<i>。我们已经说过，不推荐使用b，而推荐使用strong（粗体）；同样，我们不推荐使用i，而推荐使用em（斜体）。
特殊字符(字符实体)
在XHTML中“<”和“>”是比较特殊的字符，因为它们被用于识别标签，而且在标签中的"<"和“>”并不会出现在页面上。那么如果我们想让浏览器显示这些特殊字符时该怎么做呢？这时我们就可以使用字符实体，例如小于号“<”在XHTML代码中写做“<”。当然，在网页设计软件中，这项工作不需要我们手写代码来完成。因此我们只要了解这些特殊字符的显示原理即可，而不需要记住每一个特殊字符的书写代码。
strong><em>我被两个标签包围啦！</em></strong>---》 注意标签顺序
三 超级链接
超级链接<a>标签
格式： <a href="这个超级链接将要指向的网址">页面上将要显示的文字或者图片等</a>
页内跳转超级链接(锚记)
格式：<a href="#biaoti">回到标题</a>
四 列表
无序列表（项目列表）
无序列表的标签是<ul></ul>，而每一个列表项目则用<li>标签表示。下面我们就用无序列表来改写我们的"index.html"，打开之前保存的文件后，将"针对学生提供的服务"一段的代码修改为如下的无序列表代码：
<h3>针对学生的服务</h3>
<ul>
<li>代写寒暑假作业（数学<b>不</b>保证没有错题，语文不保证没有错字，
英语作业你找别人吧）</li>
<li>帮忙欺负<b>四年级</b>以下同学，<b>特体须加收费用</b>。</li>
<li> 家长会帮忙<i>冒充家长</i>。 </li>
</ul>
有序列表
有序列表的标签是<ol></ol>，列表项目仍然是<li>。无序列表与有序列表在外观上的不同就是项目每个项目前面是小圆点还是数字。而在含义上，ul表示的是并列关系，ol则表示有先后顺序关系。
五 图片
图片标签<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属性的属性值。
用图片作为链接
<p><a href="http://www.cainiao8.com/">
<img src="http://www.cainiao8.com/images/logo.gif"
alt="技术支持"/></a></p>
图片变成了超级链接
六 XHTML教程——head和DTD
<head>部分
在之前的教程中除了<title>标签之外我们修改的都是<body>之间的内容，也就是显示在页面里的内容。那么XHTML中的<head>部分是做什么的呢？其实在<head>部分我么可以加入许多浏览器等软件可以“看得见”的信息。下面我们就介绍一些head部分常用的标签。
注意：本节的标签与属性大多数难于记忆，事实上在我们在使用网页制作软件创建网页的时候它们会自动生成。本节的目的是能够了解这些标签的含义，以在必要的时候可以做一些手工的修改。现在就打开我们的“index.html”，在<head></head>中间插入如下代码：
1.<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
这段代码告诉浏览器我们的网页使用的是gb2312中文字符编码，没有该段<meta>信息正是上一次效验时出现问题的原因之一。
2.<meta name="keywords" content="小学生,欺负同学,寒暑假作业,家长" />
这段代码是为搜索引擎写的，content的内容就是index.html的关键词。
请注意，<meta>标签也是一个空标签，别忘记加上/。<meta>标签的作用还远不只这些，不过在缺少实际应用的情况下，很难了解<meta>标签的实际用处。如果想了解更多<meta>标签的知识，可以到百度搜索相关知识
DTD
什么是DTD文件呢？简单的说它就是在任何人（多数情况下是类似浏览器的软件）想要读取我们的文件之前告诉他我们文件是遵照哪一套规则来写的。以效验过程为例子，如果我们使用HTML4.01的DTD呢，效验器就会认为我们是使用的HTML4.01的规则编写的网页，然后按照相应的规则来一行一行的效验我们的代码，最终返回效验结果。如果您想了解更多关于DTD的内容需要学习XML
下面我们就为我们的网页声明DTD。打开之前保存的"index.html"，在第一行（<html>标签之前）输入如下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
并且在<html>标签里添加如下属性：xmlns="http://www.w3.org/1999/xhtml"。这个叫做命名空间属性，属于XML范畴，
七 表格
Note：表格应该被用来展示数据，而不是用于网页布局
表格标签<table>（不推荐使用）
在XHTML中，创建表格的标签是<table>，书写代码时，我们要先用<tr>标签将表格分成一行一行，再用<td>标签把每行分成一格一格。完全手写代码创建table是十分困难和低效的，而在网页制作软件中制作表格就如同Word一样简单，只需要选择行列之类的简单属性即可。但是我们可能会遇到自动做出的表格不符合要求，而需要在代码模式调整的可能，因此我们还是要大概了解XHTML表格标签的具体写法。
表格的边框（border）属性
<table>标签可以有border属性。如果不设置border属性的值，在默认情况下，浏览器将不显示表格的边框。
这样的表格用来列出数据之类的信息足够了，但是用来定位的表格通常要复杂一些。再次强调我们不推荐用table来定位，所以这里仅仅简单地介绍了<table>。
如果要使用表格显示很多数据，可能还需要加入caption(标题)，thead、tbody等等
八XHTML教程——框架结构
作用：框架结构可以让几个网页同时显示在浏览器的一个页面内。我们不推荐您使用它来设计网站
框架结构标签<frameset></frameset>
给框架结构分栏(”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>标签，它的src属性就是这个框架里将要显示的内容
关于<noframe>标签
该标签只有当浏览器不支持框架结构时才会起到作用，由于现在几乎所有网民的浏览器都支持框架结构，所以我们在这里就不介绍这个标签了。
框架结构和DTD
框架页面的DTD与一般网页不同。声明方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
九 表单
表单标签<form>
表单以一个<form>标签开始。用户注册网站会员，投票等等都需要表单来实现。当然了，仅仅依靠XHTML是无法处理这些表单的，如果你想处理这些表单你需要使用一些类似PHP和ASP的网页后台技术
表单内的<input>
下面我们来介绍两个常见的表单组成元素：
1.文本框
<form>姓名:<input type="text"name="user"/><br/></form>
2.密码框
<form>姓名:<input type="password"name="pass"/><br/></form>
可以看到，这两个表单元素都用到了<input>标签，但是密码框里填写的内容却是不可见的。决定了他们类型不同的是<input>标签的属性“type”的属性值。例如text就是文本框，而password则是密码。你应该注意到了，<imput>标签也是一个空标签。他没有终止标签。我们一定要记得在后面加上一个"/"以符合XHTML的要求。
十 复杂的表格
table标签里的summary属性，它是对真个表格内容的简要概括
caption标签，表示表格的标题。
thead包裹的内容是表格的头部，就像head标签对整个网页的作用一样。thead里的一行仍然用tr来表示，但是单元格则是用th来表示
tbody则是表示的身体，类似body标签对整个网页的意义。
| 表格的标题——caption
|
|||
| 时间th
|
事件th
|
人物th
|
花费th
|
| 1
|
小吃部吃饭
|
小强
|
100
|
| 2
|
大饭店喝酒
|
小明
|
3000
|
上面表格的XHTML代码如下：
<table summary="公司花费明细表格">
<caption>表格的标题——caption</caption>
<colgroup>
<col id="time" />
<col id="event" />
<col id="person" />
<col id="cost" />
</colgroup>
<thead>
<tr>
<th scope="col">时间th</th>
<th scope="col">事件th</th>
<th scope="col">人物th</th>
<th scope="col">花费th</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>1</td>
<td>小吃部吃饭</td>
<td>小强</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>大饭店喝酒</td>
<td>小明</td>
<td>3000</td>
</tr>
</tbody>
</table>