![零基础HTML+CSS+JavaScript学习笔记](https://wfqqreader-1252317822.image.myqcloud.com/cover/173/36710173/b_36710173.jpg)
2.1 标题
标题是对一段文字内容的概括和总结。书籍文本不能没有标题,网页文本也不能没有标题。一篇文档的好坏,标题起重要作用。在越来越追求“视觉美感”的今天,一个好的标题设计,对用户的留存尤为关键。例如,图2.1和图2.2所示的界面效果,同样的标题内容,使用了不同的网页标签,显示的效果大相径庭。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-031-1.jpg?sign=1738783328-fp6ikTjUNyw7AIJt5G2qppOvLhz6Sv5i-0-a820407a135ae05e9114e1ecb6834bce)
图2.1 较好的标题设计
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-031-2.jpg?sign=1738783328-tSSybUY40rQUzDVQyAoaAYUfLUjqZKSr-0-92b3fdc41470cfe23d54d3d70ec475f2)
图2.2 糟糕的标题设计
2.1.1 标题标签
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-031-03.jpg?sign=1738783328-63Uu8UsbNCQDxKVz5jNITL2Zyt07cbvk-0-919e012f87ce83f7ef2be77e83db84bc)
标题标签共有6个,分别是<h1>、<h2>、<h3>、<h4>、<h5>和<h6>,每个标签在字体大小上有明显的区别,从<h1>标签到<h6>标签字体依次变小。<h1>标签表示最大的标题,<h6>标签表示最小的标题。一般使用<h1>标签来表示网页中最上层的标题,有些浏览器会默认把<h1>标签显示为非常大的字体,因此一些开发者会使用<h2>标签代替<h1>标签来显示最上层的标题。
标题标签语法如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-032-1.jpg?sign=1738783328-ZLHucdiFJmoWs3WfwgrFxHMlc4mZDax3-0-3d9af3ffde16cba63c582369bb8012fa)
学习笔记
在HTML5中,标签大都是由起始标签和结束标签组成的。例如,<h1>标签在编码使用时,首先编写<h1>起始标签和</h1>结束标签,然后将文本内容放在两个标签之间。
接下来通过一个实例,巧用<h1>标签、<h4>标签和<h5>标签,实现一则关于程序员笑话的对话内容。首先把“程序猿的笑话”放入<h1>标签中,代表文章的标题,然后把发布时间、发布者和阅读数放入较小字号的<h5>标签中,最后把对话内容放入字号适中的<h4>标签中。具体代码如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-032-2.jpg?sign=1738783328-IOFn1jN9x5SOWVoptFrAITjLXuT3sz2x-0-42ac186f89fa8ebb21324667f17dcb8e)
本实例的运行效果如图2.3所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-033-1.jpg?sign=1738783328-cbxds8tI5FKS8tw9An2Ptwt1gfafG4uL-0-27fbdcc0cf1b08a65fc87918d1549e83)
图2.3 运行效果
学习笔记
如果结束标签漏加“/”,如把</h1>写成<h1>,那么浏览器会认为它是新标题标签的开始,从而导致网页布局错乱。例如,在下面代码的第2行,就将</h1>结束标签写成了<h1>开始标签。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-033-2.jpg?sign=1738783328-zVNpaMoodPx6vV1R4x6vXL8rh9KyBitz-0-a0227bb86194404289f7906e0367255b)
运行后会出现如图2.4所示的错误。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-033-3.jpg?sign=1738783328-191uFUdEpQdJy1rgoizYggDBfYqaSII5-0-f2c91b966ed8556fed65fd7f95014058)
图2.4 结束标签漏加“/”出现的错误
2.1.2 标题的对齐方式
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-033-03.jpg?sign=1738783328-IuQqJcvTS5hDj119ZdPuv8pMROvi8QHJ-0-1394a098c98d6a0b58f60a84efbe72ad)
在默认情况下,标题文字是左对齐的。而在网页制作过程中,可以实现标题文字的编排设置。最常用的就是关于对齐方式的设置,可以为标题标签添加align属性进行设置,其语法格式如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-033-4.jpg?sign=1738783328-PLM10U9bajRLG0GuRqMDdbrLq9rgBiJH-0-5410b96aa22cb2ebd21723f7df1c3e2b)
在该语法中,align属性需要设置在标题标签的后面,具体的对齐方式属性值如表2.1所示。
表2.1 对齐方式属性值
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-034-1.jpg?sign=1738783328-sJccqei3DuackXNZjjBX0KUwNaK0GcGs-0-f49c99175a1b23d42872e3b988b142c7)
学习笔记
在编写代码的过程中,请注意添加双引号。
接下来,使用标题标签中的align属性,实现图书商品介绍的文字展示。首先使用<h5>标题标签,将图书名称、作者、出版社等介绍内容放入标签内,然后在每个标题标签中添加align属性,属性值设为center。具体代码如下:
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-034-2.jpg?sign=1738783328-3gsMnNeBUpv9XTk55FYn8se1Q7KLyDen-0-b0f0cb881ca2837a113f1f24156711db)
学习笔记
在上述代码的第11行使用了<img>图像标签。<img>图像标签可以将外部图片引入当前网页内。有关<img>图像标签的具体使用方法请参考本书第3章。
执行上面的代码,效果如图2.5所示。
![](https://epubservercos.yuewen.com/F8A727/19471983008810206/epubprivate/OEBPS/Images/39950-00-035-1.jpg?sign=1738783328-naRrc1EGpZzGUg7fQAFxT4DyjIjs1GZY-0-f93f567673c29475bc817fc0bff15110)
图2.5 图书商品介绍的网页效果