《HTML教程》-1.4-1.5教学材料

1.4.1标题HTML标题是用h1~h6标记来表示的。H1标注的标题是最重要的，h2次之，h3再次之，依次类推。标题标记的用法非常简单，格式如下：<h1>一级标题</h1><h2>二级标题</h2>等等。标题在HTML中是非常重要的，并非仅仅是因为字体大了一些，粗了一些，而是因为搜索引擎根据网页的标题对网页进行结构和内容的索引，使得用户可以快速浏览你的网页。这对于网页用户的友好性是十分重要的，所以在实际应用中要善于利用标题构建网页结构。标题的例子如清单1-9所示。1.4.2水平线水平线可以对不同的逻辑区域进行分割，使得网页布局清晰。水平线标记是hr，在网页中写作<hr/>。它也是HTML中即是开始标记，又是结束标记的标记，后面的“/”不能省略。水平线的例子如清单1-9所示。1.4.3注释HTML注释用于说明一些其他信息，这些信息会被浏览器忽略，在网页上也看不到它们，它是写给网页编辑人员看的。主要是网页结构说明和区块作用说明等。注释标记格式如下：<!--需要说明的内容-->需要说明的是，注释标记中不允许出现任何表1-1中的全局属性。合理的使用注释可以提高网页的可读性、易于理解和维护。注释还有一个作用，就是用注释标记来隐藏浏览器不支持的脚本，这在实际应用中也是一个好的习惯，防止浏览器把不支持的脚本显示为纯文本。隐藏浏览器不支持脚本的格式如下：<scripttype="text/javascript"><!--functionhello(){alert("HelloWorld!")}//--></script>需要说明的是注释结束标记“-->”之前的//是JavaScript的注释符号，作用是避免浏览器中的JavaScript引擎执行-->这一符号，这将显示一个错误。<script>也是一个标准的HTML标记，用于包含可以执行的网页脚本代码，它将在JavaScript部分中详细介绍。注释例子如清单1-9所示。1.4.4段落段落标记是对网页文字的一种组织方式，将多段文字分段显示，以使文字结构清晰。段落标记用法如下：<p>段落文字</p>这里需要注意的是，段落格式并不像想像的那样，没有首先缩进。而且每段后面自动加一空行。和标准的段落不太一样。如何进行段落格式控制，在CSS部分再做详细论述。段落例子如清单1-9所示1.4.5换行浏览器在解析HTML文档时，会自动忽略所有的多余的空白字符（空格、跳格和回车换行），所以如果需要文本或元素另起一行显示，则必须使用换行标记br，在文档中写作<br/>。当然使用换行标记布局元素是不科学的，应该使用HTML5的布局元素、div标记和CSS进行网页布局。在清单1-9中，可以很明显的看出，虽然段落内存在多处回车符，但显示在浏览器中，这些回车符就好像消失了。清单1-9段落和水平线标记<h3>人就这么一辈子</h3><hr/><!--下面是两个段落，仔细观察一下显示效果与实际格式和自然段的差别！--><p>我常以“人就这么一辈子“这句话告诫自己并劝说朋友。这七个字，说来容易，听来简单想起来却很深沉。它能使我在软弱时变得勇敢骄傲时变得谦虚颓废时变得积极，痛苦时变得欢愉，<!--省略部分文字-->又有什么想不开的呢？</p> <p>人就这么一辈子，想到了这句话，如果我是英雄，便要创造更伟大的功业：如果我是学者，<!--省略部分文字-->不能白来一遭啊！</p>代码说明如下图：文本标记其实还有很多，由于篇幅所限不再一一列出。文本样式标记，如粗体、斜体、上标下标等，都作为样式可以在CSS中实现，根据“内容、样式和动作相分离的原则”，不推荐在网页中使用此类标记，所以这些标记不在此进行讨论。1.5表格标记表格在组织显示数据和布局表单元素时非常有用，在网页制作中占有十分重要的角色。HTML表格是由table表格标记、行标记tr、单元格标记td等组成。table标记包含若干tr标记，即若干行；tr标记包含若干td标记，即包含若干列。基本的表格结构如下：<table> <tr><!--第1行--> <td></td><!--第1列--> <!--其他列（单元格）--> </tr> <!--其他行--></table>在构建表格时，还会用到其他标记，所用标记如表1-5所示。表1-5表格标记表格描述<table>用于定义表格<caption>用于定义表格的标题。<th>用于定义表格的表头。<tr>用于定义表格的行。<td>用于定义表格的单元格。<thead>用于定义表格的标题行，即包含tr标记或th标记。<tbody>用于定义表格的主体，可包含tr。<tfoot>用于定义表格的页脚。<col>用于定义用于表格列的属性，很少使用。<colgroup>用于定义表格列的组，很少使用。需要说明的是，th与td都表示单元格，但th中的字体显示为粗体且居中显示，即表格中的表头部分用th，其他单元格用td。不用thead、tbody和tfoot也可以构造出完整的表格，加入这些元素使得在对表格进行样式控制时有更好的粒度，可分别对表头、表体和表的底部显示不同的样式。表格制作中还会用到两个重要的属性：colspan和rowspan。colspan属性：

单元格td跨几列（即合并行中的列。rowspan属性：td单元格跨几行（合并列中的几行）。这两个属性在制作比较复杂的表格时非常有用。下面以一个课程表的例子说明表格的制作方法，课程表想必大家都非常熟悉。我们用HTML表格设计一个自己的课程表，也是一件令人鼓舞的事。要制作的表格如图1-5所示。图1-5要制作的课程表这个表格看起来有点复杂，不但有列合并，如其中的“节次”列，还有行合并如课程名称部分。这样的表格制作起来貌似较难，但当你明白了它的制作技巧以后，就觉得非常简单了。现在让我们开始制作这一表格。首先，要制作表格标题“我的课程表”和表头。制作表格标题需要使用caption标记，制作表头需要用到th标记。表头需要有6个，分别是节次、周一、周二、周三、周四和周五，所以在表头行中需要有6个th标记，表示这6个列（或者单元格）。其中“节次”单元格需要跨两列，即它的colspan设置为2。代码清单如1-10所示。清单1-10制作课程表的标题和表头<table> <caption>我的课程表</caption> <tr><!--表头部分--> <thcolspan='2'>节次</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> </tr><!--表头部分结束--></table>代码说明如下图：现在标题和表头制作好了，让我们来看一下效果。完成一部分后就查看一下效果，这也是一种好的习惯，不要等到全部完成，打开一看不是想要的东西，这时再改就头就大了！表格效果如图1-6所示。图1-6课程表标题和表头嗯？表格线哪里去了？浏览器是不会骗人的，说明默认情况下，表格是不显示表格线的。要显示表格线的话，需要在table标记中加入border属性，并将其置为1，即<tableborder=”1”>在清单1-10中加入以上内容，再来浏览一下！这次有表格线了，但仍然不是我们想要的！怎么表格线成了两条？这一点先容忍一下，我们秉承“内容、样式和动作”相分离的原则，这一毛病等我们讲述CSS时再解决！其实表格线也是CSS控制的，现在要让大家看到表格结构，所以还是显示出表格线，但在实际制作中，这里的border属性是不需要的！现在可以来制作表格的第一行了。由于课程表中第1节和第2节是合在一起上的，所以一门课程要跨第1节和第2节所在两行。所以除了“节次”这一列之外，剩下的列（周一至周五）都是跨两行的，所以这些列的rowspan属性设计为2，即这些列的单元格占两行。在清单1-10中的<!--表头部分结束-->的后面加入以下代码：<tr><!--表格主体开始，第1行--> <td>第1节</td><!--节次--> <td>8:00-8:45</td> <tdrowspan='2'>软件体系结构</td><!--周一-->

<tdrowspan='2'></td><!--周二--> <tdrowspan='2'></td><!--周三--><tdrowspan='2'>HTML5程序设计</td><!--周四-->

<tdrowspan='2'>HTML5程序设计</td><!--周五--></tr><!--第1行结束-->再次在浏览器中打开我们制作的表格，效果如下图所示：看不出跨行与不跨行有什么区别！下面我们制作第2行，把跨行的效果显示出来。接着上面的代码再输入以下代码：<tr><!--第2行——充当第1行的合并行--> <td>第2节</td> <td>8:55-9:40</td> <!--由于第1行中的对应td的跨两行，所以这里也相当于有5个td--></tr><!--第2行结束-->等等！为什么第2行中只有两列（两个单元格）？其他的单元格哪里去了？答案是剩下的单元格被第1行中的跨两行的单元格占据了！也就是说，如果上一行中有占两行的单元格，那么这一行中就会“少”一个单元格，对于跨列也是同样的道理。这也是制作跨行或跨列表格的诀窍和方法！再次在浏览器中打开我们制作的表格，效果如下：完全正确！和我们预期的效果相同。剩下行的制作和第1行和第2行的制作方法类似，读者可以试着完成它。完整的课程表制作代码如清单1-11所示。最终效果如图1-6所示。图1-6课程表最终制作效果在清单1-11中，可以看到合理的使用空格、换行和HTML注释，可以使HTML结构更加清晰。虽然空白字符太多影响网络的加载速度，但在网页设计阶段，嵌套结构清晰是十分必要的！网页设计完成后，可用专门的软件把多余的空白字符删除掉，再放到网站上。通过这一节的学习，你掌握了表格的制作没有呢？跨行或跨列的表格制作是最难的，但这里有一个诀窍，那就是：<tdcolspan=”n”></td>虽然只有一个td标记，但却相当于n（n是一个数字）个单元格，各行上的单元格数目要保持一致！同样的道理：