1. 标题的作用
很多东西都得有标题、题目。
诗歌要有个题目,传达中心含义。书本要有个题目,揭示书籍内容。
网页也需要有标题,概括网页的内容。需要注意的是,本篇内容讲述的标题不是网页头部的<ttile>标题,而是网页<body>内容区域里面的标题。
从英文来讲,比较好区分,网页头部标题是title,而内容区域的标题是heading。
2. 如何编写HTML标题
HTML的标题有6个级别,对应标签分别是<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。
注意h1最大,h6最小。
我们以一首诗为例,编写一个带标题的页面。
<html>
<head>
<meta charset="utf-8">
<title>春晓</title>
</head>
<body>
<h1>春晓</h1>
春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。
</body>
</html>
效果如下,注意上面的红线部分是<title>标题,而下面的红线部分是<h1>标题。
3. 标题大小对比
我们通过一个网页来看下h1-h6的大小区别:
<html>
<head>
<meta charset="utf-8">
<title>标题大小对比</title>
</head>
<body>
<h1>这是1级标题</h1>
<h2>这是2级标题</h2>
<h3>这是3级标题</h3>
<h4>这是4级标题</h4>
<h5>这是5级标题</h5>
<h6>这是6级标题</h6>
</body>
</html>
效果如下:
4. 小结
实际网页开发中,标题的样式效果要比heading标签复杂一些,这个在以后的学习中我们会慢慢接触。
本章掌握h1-h6的用法就OK了。