第2章 常用HTML标记和格式

第2章常用HTML标记和格式•通过第1章的学习，对HTML有了一定的认识。HTML由标记（本书中标记与标签是同一概念）组成，其中有单标记和双标记之分，大部分以双标记出现，即标记对（也称标签对）。而本章要介绍的是应用中常用的HTML标记和格式，这些知识点往往在网页中会常用到，也是必须得掌握的知识点之一。在讲解过程中分两部分：标记和格式，学完本章，应掌握以下内容：•标题标记•段落标记•换行与注释•粗体与斜体•删除线•上标与下标2.1设置正文的标题•现在网络媒体在新闻传播中起的作用越来越大，其传播速度和内容丰富程度都超越了传统媒体。如从现在的门户网站新闻点击率上，可以看出网民直接在网上看新闻的热情。那么新闻的格式中，有新闻主题和新闻内容之分，往往新闻主题的字体大小比正文内容大，也会看到很大或比较小的标题。如果读者细心的话，会发现标题从大逐渐变小是有规律的。2.1.1标题设置的语法•本节来学习标题的设置，标题的作用是用精简的文字概括整篇文章的主题，故文字字不能太长，从外表上突出标题与内容。标题的语法很简单，由双标记组成，在尖括号对里面输入h加从1到6的任意一个数字即可，数字不同，所表达的标题大小效果也不一样，其完整标题语法如下：•h#主题文字/h#•其中“#”是标题里面从1到6数字的任意的一个，系统一共提供6种标题，从数字1到数字6，标题大小由大到小，即表示不同大小的标题。换言之，数字越大，标题字体就越小。2.1.2标题设置经典案例――字号由大到小•理解了标题是由字母H加从1到6的数字后，下面用实例来演示这6个标题的效果，代码2.1表示从H1到H6的标题。•代码2.1源代码\第2章\六种不同的标题.html•html•head•title标题标记/title•/head•body•!—下面是标题标记对--•h1标题h1/h1•h2标题h2/h2•h3标题h3/h3•h4标题h4/h4•h5标题h5/h5•h6标题h6/h6•/body•/html2.2设置段落•一篇文章由标题和正文组成，正文又是由多个段落组成的，所以可以说段落是构成文章的主体。既然一篇文章是由多个段落组成的，那么又如何区分段落呢？段落与段落之间有什么不同呢？带着这些问题来学习本小节的段落标记。•在学习段落与段落的区别前，先了解段落的基本语法，段落语法代码是由尖括号对里放置p的双标记来表示，在标记对里面放置的内容就构成了一个段落。段落完整语法表示如下。•p这里表示段落/p•在p/p标记对中就表示的一个段落，那么怎样在一篇文章中存放多个段落呢？很简单，每个标签对就表示一个段落，有多少段落就有多少p/p，这就是从代码上区别段落与段落的不同。同理，从网页表现出的效果来看段落，段落与段落间有一行空格不显示任何内容，也就是常常看到新闻中的段落间有空行。那么可以利用HTML的段落标记来显示出文章内容美观效果，使用户对文章理解有层次感。段落不管是在新闻还是书籍中都会出现，下面请看段落在网页中如何表现其效果，如代码2.2所示。2.3强制换行•写文章时，往往要在一个段落中间另起一行，这就要用到换行，在网页中也可以表示换行的，但需要换行标记。换行可在行文中另起一行，显示出段落层次性，给人感觉更有亲和力。•在网页编写代码时的换行与按回车键的换行是不同的，即在编写HTML代码中的回车只多了一行空格，在代码中另起一行，但浏览器解释时，会忽视多余空格，只保留一个空格的位置。从2.2节中介绍的，得知网页显示中会去掉里面空格，与正常文档换行不同，所以没达到换行效果。而今天学习的换行就是在网页编写换行代码标记后将在页面中显示出换行效果，当浏览器在解释换行代码时会强制换行，这样在网页中就达到用户在输入时的换行标记的效果。•换行标记是音标记，即不会成对出现，语法是在尖括号中包括br的单标记，其完整语法代码如下所示：•br2.4给代码注释•制作大型网站的时侯，每个网页程序员所做的工作都会不同，但相互依赖其他程序员写的代码。为了在同一个项目中让其他程序员看得明白，常常用注释来说明代码功能。注释代码的内容不会在网页中显示，只起到注释作用，如一个网页中头部用注释说明该页面的作用和创建日期，和本网页所展示的功能等，让其他程序员或学习者看到注释就知道代码内容。•在前面的代码中，多次出现了注解符，而且在注解内容中，笔者都在前面标记“注解：”，为了告诉初学者代码的意义，所采用的一种解说代码方法，并不会在网页中显示注解内的内容。注释语法比较容易，可以在单行中存在注释，同时也可以多行一起注释，单行注释完整语法如下：•!--这里放注释--•在一行中，在尖括号中放置感叹号“！”和两个“-”，接下来放置注释内容，最后一定要结束注释，结束注释用两个“-”和另一个尖括号组成，即上面代码表示了单行注释。如果网页代码中，只需要注释一行，可以用上面的注释。如果有多行同时需要注释，那是不是每行都用尖括号包围呢？答案是不需要的。其实还有一种方法可以注释多行，请看下面代码：•!--•这里放注释•第二行注释•第三行注释•--2.5粗体与斜体•粗体与斜体在语法结构上差不多，应用在文字文本中，且都是用双标记对来表示。在学习本节前，先比较二者区别，可能学起来更有印象。•粗体标记的语法是由b/b标签对表示，标签对里面的文字在网页中会显示出字体为粗体，语法简单，代码如下：•b粗体，这里显示的是粗体/b•同理，斜体i里面显示出字体为斜体，语法代码为：•i斜体，这里显示的是斜体/i•原来可以这样理解。粗体用b包括着，斜体用i包括着，代码2.5表示二者代码和效果不同之处。•代码2.5源代码\第2章\粗体与斜体.html•html•head•title粗体与斜体/title•/head•body•!—下面表示粗体的用法--•b粗体，这里显示的是粗体/b•br•!—下面表示斜体的用法--•i斜体，这里显示的是斜体/i•/body•/html2.6下划线与删除线•为了使部分文字特别，可以在下面划一条线或删除线，这种字体往往引人注意，从而达到想要的效果。在网页中也可以利用下划线与删除线。•下划线就是在文字下面有一条线。也是双标记对包含文字，尖括号里面用u表示。其语法格式如下：•u下划线/u•类似的，删除线也是双标记尖括号对形式的，里面用s表示。其语法代码如下：•s删除线/s•二者比较很容易区分，u表示下划线，s表示删除线，然后中间是表达的内容。下面请看二者比较示例代码，如代码2.6所示。2.7上标与下标•上标与下标应用于文字或数字上比较多，如表示化学中的水元素、代学方程式中，在数学中用平方、对数等。这是比较特殊的标记。•上标是位于文字或数字的中上位置的标记。如10的平方，平方符号就显示10的中上位置。稍后做实例分析。先看语法代码，上标代码表示如下：•sup上标/sup•同理，下标是在文字或数字的中下位置的标记，应用也比较广泛，如化学元素中的水元素，下标语法代码表示如下：•sub下标/sub•为了比较上标与下标的用法，显示出不同效果。用实例来显示出二者效果，如代码2.7所示。2.8HTML标记和格式实例手把手•本章节只学了HTML常用的标记和格式，这些知识点以后会常用到，毕竟网页只由少数标签组成。学好常用标签和格式在以后学习中会容易很多。现在来练习一下前面学的知识。知识点通过实例罗列出来。2.8.1标题用h1•网页代码基本组成在前一章学过，所以输入文章的关键是放在body/body里面。现在的文章就是这样输进去，如代码2.8所示。•代码2.8源代码\第2章\HTML标记和格式实例手把手.html•html•head•titleHTML标记和格式实例手把手/title•/head•body•!—下面这行表示标题h1--•h1HTML+CSS完全自学手册/h1•!—下面表示文本行并在代码中换行--•HTML+CSS完全自学手册•HTML+CSS完全自学手册•HTML+CSS完全自学手册•/body•/html2.8.2设置每一行为一段落•从图2.8中可以看到，有三条一样的文字都显示在一行。这与在代码中不同，那是因为代码会去掉空格，只显示一个空格间隔。要想添加段落必需得有p/p标签对。给上面代码加上后部分代码如下：•h1HTML+CSS完全自学手册/h1•!—下面在每行文本中，用段落标记对包围--•p•HTML+CSS完全自学手册•/p•p•HTML+CSS完全自学手册•/p•p•HTML+CSS完全自学手册•/p2.8.3粗体和删除线•在第一段落文字上加粗体，第二个段落加上删除线。部分代码如下：•!—下面一行表示用标题的标记对--•h1HTML+CSS完全自学手册/h1•p•!—表示在文本中用粗体--•bHTML+CSS完全自学手册/b•/p•p•!—下面一行表示用删除线--•sHTML+CSS完全自学手册/s•/p•p•!---下面一行只是被包围在段落中-•HTML+CSS完全自学手册•/p•在这个代码里，比前面多了两个标签对，即b/b，s/s，其他的都还是一样的，所表示的效果就不同了，如图2.10所示。2.8.4加上化学元素和数学平方跟•在前面的学习中用sup/sup表示上标，sub/sub表示下标，用这些上标和下标表示数学、化学等特殊符号，完整代码如2.9所示。2.9小结•本章所学的知识是网页编写中所用到的部分标记和格式，语法简单易学，有标题h1/h1到段落p/p再到换行br、注释!--是常用的标记，下划线u/u、删除线s/s、粗体b/b、斜体i/i，还有上标sup/sup和下标sub/sub都是重要的格式，也是在日常网页工作中所常用到的。最后通过实例，在HTML代码中演示了这些常用的标记和格式的用法，希望读者能举一反三，以便在实际应用中，开发出更多的实例。