代码怎么把网页的字变大

·13·第2章常用HTML标记和格式通过第1章的学习,对HTML有了一定的认识.
HTML由标记(本书中标记与标签是同一概念)组成,其中有单标记和双标记之分,大部分以双标记出现,即标记对(也称标签对).
而本章要介绍的是应用中常用的HTML标记和格式,这些知识点往往在网页中会常用到,也是必须得掌握的知识点之一.
在讲解过程中分两部分:标记和格式,学完本章,应掌握以下内容:标题标记段落标记换行与注释粗体与斜体删除线上标与下标2.
1设置正文的标题现在网络媒体在新闻传播中起的作用越来越大,其传播速度和内容丰富程度都超越了传统媒体.
如从现在的门户网站新闻点击率上,可以看出网民直接在网上看新闻的热情.

那么新闻的格式中,有新闻主题和新闻内容之分,往往新闻主题的字体大小比正文内容大,也会看到很大或比较小的标题.
如果读者细心的话,会发现标题从大逐渐变小是有规律的.

2.
1.
1标题设置的语法本节来学习标题的设置,标题的作用是用精简的文字概括整篇文章的主题,故文字字不能太长,从外表上突出标题与内容.
标题的语法很简单,由双标记组成,在尖括号对里面输入h加从1到6的任意一个数字即可,数字不同,所表达的标题大小效果也不一样,其完整标题语法如下:主题文字其中"#"是标题里面从1到6数字的任意的一个,系统一共提供6种标题,从数字1到数字6,标题大小由大到小,即表示不同大小的标题.
换言之,数字越大,标题字体就越小.
·14·2.
1.
2标题设置经典案例――字号由大到小理解了标题是由字母H加从1到6的数字后,下面用实例来演示这6个标题的效果,代码2.
1表示从H1到H6的标题.
代码2.
1源代码\第2章\六种不同的标题.
html标题标记标题h1标题h2标题h3标题h4标题h5标题h6代码2.
1中,在标记对中输入了6个不同的标题,标题从H1到H6,标题大小由大变小,效果如图2.
1所示.
图2.
1六种标题标记从图2.
1中可以看到,双标记里是显示最大号标题的,同理,双标记里显示最小号标题.
根据实际需要,在不同正文内容的主题下选择不同大小的标题标记,注意只选择一种做标题即可,如标题h3是文章的标题,其他标题不用在代码中出现了,如下面代码显示.
·15·这是标题h3这是文章正文字.
说明:不是大小的标题明显突出主题重要性,在具体应用中选择不同标题会达不意想不到效果,甚至还可以加上标题字体的颜色,可以再设置标题的字体大小和字体类型等,以后将会学习到.
2.
2设置段落一篇文章由标题和正文组成,正文又是由多个段落组成的,所以可以说段落是构成文章的主体.
既然一篇文章是由多个段落组成的,那么又如何区分段落呢段落与段落之间有什么不同呢带着这些问题来学习本小节的段落标记.
在学习段落与段落的区别前,先了解段落的基本语法,段落语法代码是由尖括号对里放置p的双标记来表示,在标记对里面放置的内容就构成了一个段落.
段落完整语法表示如下.
这里表示段落在标记对中就表示的一个段落,那么怎样在一篇文章中存放多个段落呢很简单,每个标签对就表示一个段落,有多少段落就有多少,这就是从代码上区别段落与段落的不同.
同理,从网页表现出的效果来看段落,段落与段落间有一行空格不显示任何内容,也就是常常看到新闻中的段落间有空行.
那么可以利用HTML的段落标记来显示出文章内容美观效果,使用户对文章理解有层次感.
段落不管是在新闻还是书籍中都会出现,下面请看段落在网页中如何表现其效果,如代码2.
2所示.
代码2.
2多段落的表示段落这里表示段落一段落二段落三段落四代码2.
2中,在存在一行注解和四个对,注解在HTML标记中用,浏览解释注解行时,不会在网页中显示出来,只起注解作用,让网页制作者更好地理解HTML代码,而4个段落表示由4个标记对组成的段落,每个段落都是不同内容.
当然,在浏览器中显示出来的效果就是表达4个段落,段落与段落间和空行,效果与正常的换行是不相同的,现在看看各段落的格式和段落间有什么不同吧,·16·如图2.
2所示.
图2.
2多段落效果关于段落中的空格,当浏览器解释HTML文件多个空格时,自动去掉多余的空格,只显示出一个空格效果,即不管HTML中加上多少空格,都被看作一个空格.
如果想出现多个空格的效果,必需加上HTML代码" ",想要多个空格,可以加上多个" "代码,注意后面的分号.
注意:段落之间要空一行,从上面效果中可以看出,四个段落中间有三行空出来的,这只是段落与段落间的间隔.
2.
3强制换行写文章时,往往要在一个段落中间另起一行,这就要用到换行,在网页中也可以表示换行的,但需要换行标记.
换行可在行文中另起一行,显示出段落层次性,给人感觉更有亲和力.
在网页编写代码时的换行与按回车键的换行是不同的,即在编写HTML代码中的回车只多了一行空格,在代码中另起一行,但浏览器解释时,会忽视多余空格,只保留一个空格的位置.
从2.
2节中介绍的,得知网页显示中会去掉里面空格,与正常文档换行不同,所以没达到换行效果.
而今天学习的换行就是在网页编写换行代码标记后将在页面中显示出换行效果,当浏览器在解释换行代码时会强制换行,这样在网页中就达到用户在输入时的换行标记的效果.
换行标记是音标记,即不会成对出现,语法是在尖括号中包括br的单标记,其完整语法代码如下所示:一个标记表示换一行,如果在一行文字中出现多次,就会换行多次,应当记住,本代码是强制换行,内容从下一行的头部开始.
代码2.
3是表示一行文字多次出现的换行符的用法.
·17·代码2.
3源代码\第2章\一行文字多个换行符.
html换行在本条代码中出现多个换行符.
在本条代码中出现多个换行符.
在本条代码中出现多个换行符.
在本条代码中出现多个换行符.
代码2.
3中,用五个换行符插入到一行文字中,在HTML代码中只是一行出现(一行中超过宽度自动换行,实际上已是两行)的文字中,浏览器中解释到标记时,会换行一次,如果再出现,在网页中再会换行,那么在网页中会不会换行五次呢效果如图2.
3所示.
图2.
3用多个换行符来换行说明:代码是告诉浏览器强制换行,并不在网页中显示.
从上面图中看到的是自动换行.
2.
4给代码注释制作大型网站的时侯,每个网页程序员所做的工作都会不同,但相互依赖其他程序员写的代码.
为了在同一个项目中让其他程序员看得明白,常常用注释来说明代码功能.
注释代码的内容不会在网页中显示,只起到注释作用,如一个网页中头部用注释说明该页面的作用和创建日期,和本网页所展示的功能等,让其他程序员或学习者看到注释就知道代码内容.
在前面的代码中,多次出现了注解符,而且在注解内容中,笔者都在前面标记"注解:",为了告诉初学者代码的意义,所采用的一种解说代码方法,并不会在网页中显示注解内的·18·内容.
注释语法比较容易,可以在单行中存在注释,同时也可以多行一起注释,单行注释完整语法如下:在一行中,在尖括号中放置感叹号"!
"和两个"-",接下来放置注释内容,最后一定要结束注释,结束注释用两个"-"和另一个尖括号组成,即上面代码表示了单行注释.

如果网页代码中,只需要注释一行,可以用上面的注释.
如果有多行同时需要注释,那是不是每行都用尖括号包围呢答案是不需要的.
其实还有一种方法可以注释多行,请看下面代码:即在注释处以""结束,其里面的内容就是注释内容,不会在网页中显示.
多行注释与单行注释类似的,只不过中间多次换行,值得注意的是注释标记对的结束标记一定不要忘.
下面用实例来演示在HTML代码中包含注释,有单行和多行的,然后通过内容的显示了解被注释的内容是否在网页中显示,代码2.
4表示在两行代码里面包含注释,请读者观察能不能从显示的网页中看到注释.
代码2.
4源代码\第2章\注释.
html注释注释代码是看不到的!
`上面有注释,你看到了吗代码2.
4中,在标签内输入的文字有多行,基本的被注释掉了,没有被注释的已显示,而被注释的代码没有看到,这就是注释标记在HTML代码中所起的作用,效果如图2.
4所示.
·19·图2.
4带有注释的代码注意:注释的尖括号不能交叉,不要忘记注解符后面的结束符.
2.
5粗体与斜体粗体与斜体在语法结构上差不多,应用在文字文本中,且都是用双标记对来表示.
在学习本节前,先比较二者区别,可能学起来更有印象.
粗体标记的语法是由标签对表示,标签对里面的文字在网页中会显示出字体为粗体,语法简单,代码如下:粗体,这里显示的是粗体同理,斜体里面显示出字体为斜体,语法代码为:斜体,这里显示的是斜体原来可以这样理解.
粗体用包括着,斜体用包括着,代码2.
5表示二者代码和效果不同之处.
代码2.
5源代码\第2章\粗体与斜体.
html粗体与斜体粗体,这里显示的是粗体斜体,这里显示的是斜体代码2.
5中,在标记对里,有粗体标记对表示粗体,也有换行标记给文字换行,还有斜体标记对文本设置斜体,粗体与斜体代表着文本不同的样式,效果如图2.
5所示.
·20·图2.
5粗体与斜体比较技巧:学习了粗体、斜体,可以联想相似的知识,如下一章要学习的表示下划线等.
2.
6下划线与删除线为了使部分文字特别,可以在下面划一条线或删除线,这种字体往往引人注意,从而达到想要的效果.
在网页中也可以利用下划线与删除线.
下划线就是在文字下面有一条线.
也是双标记对包含文字,尖括号里面用u表示.
其语法格式如下:下划线类似的,删除线也是双标记尖括号对形式的,里面用s表示.
其语法代码如下:删除线二者比较很容易区分,u表示下划线,s表示删除线,然后中间是表达的内容.
下面请看二者比较示例代码,如代码2.
6所示.
代码2.
6源代码\第2章\下划线与删除线.
html下划线与删除线这是下划线这是删除线代码2.
6是比较下划线与删除钱二者区别的,中间有换行符为了在网页上对齐比较.
下划线用标记对表示,而删除钱用表示,当浏览器解释这些标记对时,·21·效果如图2.
6所示.
图2.
6下划线与删除线说明:读者试着去比较与的区别.
2.
7上标与下标上标与下标应用于文字或数字上比较多,如表示化学中的水元素、代学方程式中,在数学中用平方、对数等.
这是比较特殊的标记.
上标是位于文字或数字的中上位置的标记.
如10的平方,平方符号就显示10的中上位置.
稍后做实例分析.
先看语法代码,上标代码表示如下:上标同理,下标是在文字或数字的中下位置的标记,应用也比较广泛,如化学元素中的水元素,下标语法代码表示如下:下标为了比较上标与下标的用法,显示出不同效果.
用实例来显示出二者效果,如代码2.
7所示.
代码2.
7源代码\第2章\上标与下标.
html上标与下标这是下标下标下标这是上标上标上标H2O·22·103上面用代码在文字体现了上、下标的位置.
基本上,上标用表示,下标用表示,这些标记对可以表示特殊的文本应用,如在化学和数学上的应用等.
效果如图2.
7所示.
图2.
7上标与下标2.
8HTML标记和格式实例手把手本章节只学了HTML常用的标记和格式,这些知识点以后会常用到,毕竟网页只由少数标签组成.
学好常用标签和格式在以后学习中会容易很多.
现在来练习一下前面学的知识.
知识点通过实例罗列出来.
2.
8.
1标题用h1网页代码基本组成在前一章学过,所以输入文章的关键是放在里面.
现在的文章就是这样输进去,如代码2.
8所示.
代码2.
8源代码\第2章\HTML标记和格式实例手把手.
htmlHTML标记和格式实例手把手HTML+CSS完全自学手册·23·HTML+CSS完全自学手册HTML+CSS完全自学手册HTML+CSS完全自学手册代码显示出标题h1,其他的三行文字在代码中都有换行,效果会是怎么样的呢如图图2.
8所示.
图2.
8标题h1和正文2.
8.
2设置每一行为一段落从图2.
8中可以看到,有三条一样的文字都显示在一行.
这与在代码中不同,那是因为代码会去掉空格,只显示一个空格间隔.
要想添加段落必需得有标签对.
给上面代码加上后部分代码如下:HTML+CSS完全自学手册HTML+CSS完全自学手册HTML+CSS完全自学手册HTML+CSS完全自学手册上面代码是放在里面的,每个文本都加上标签对,其他标记没变化,效果如图2.
9所示.
·24·图2.
9设置段落2.
8.
3粗体和删除线在第一段落文字上加粗体,第二个段落加上删除线.
部分代码如下:HTML+CSS完全自学手册HTML+CSS完全自学手册HTML+CSS完全自学手册HTML+CSS完全自学手册在这个代码里,比前面多了两个标签对,即,,其他的都还是一样的,所表示的效果就不同了,如图2.
10所示.
·25·图2.
10粗体和删除线技巧:从上面的删除线中,加上标记对即可,同理,设置文本的粗体用标记对,请读者试试用下划线的方式.
2.
8.
4加上化学元素和数学平方跟在前面的学习中用表示上标,表示下标,用这些上标和下标表示数学、化学等特殊符号,完整代码如2.
9所示.
代码2.
9源代码\第2章\HTML标记和格式实例手把手.
htmlHTML标记和格式实例手把手HTML+CSS完全自学手册HTML+CSS完全自学手册HTML+CSS完全自学手册HTML+CSS完全自学手册H2S·26·102代码2.
9中,在标记对中,存在标题标记对,还有粗体标记对,删除线,段落标记对等,用实例演示了前面小节中的知识点用法,通过浏览器解释,代码2.
9中的效果如图2.
11所示.
图2.
11添加上标和下标标记注意:在以后的学习中,还会遇到上面讲解过的知识,常用的标记和样式在实际应用上是不同缺少的,请读者注意观察实例代码中所学过的知识,并能总结其用法.

2.
9小结本章所学的知识是网页编写中所用到的部分标记和格式,语法简单易学,有标题到段落再到换行、注释、删除线、粗体、斜体,还有上标和下标都是重要的格式,也是在日常网页工作中所常用到的.
最后通过实例,在HTML代码中演示了这些常用的标记和格式的用法,希望读者能举一反三,以便在实际应用中,开发出更多的实例.