作者moodyblue ()
看板Web_Design
标题[心得] HTML文字标题标签：h1到h6
时间Thu Sep 24 08:37:35 2020
HTML文字标题标签：h1到h6不同大小及换行效果
网志图文版：
https://www.b88104069.com/archives/4637
HTML网页文字呈现的时候，h1到h6是最重要的标签，它可以标示文章标题，会在浏览器有
自动加粗加大换行的效果，也是SEO关键工具，本文以论语章节示范。
一、标题标签
沿续先前文章范例，为了了解html标签语法，Windows记事本在html档案中输入H0到H7的
句子。
二、大小及粗体
Chrome开启後，可以看到h1到h6都是字体加粗，间隔一行，h1字体最大，到h6依序字体渐
小。h0和h7没有显着的变化，因为只有h1到h6是HTML规定的标题标签。
三、论语章节
了解标题标签的作用之後，在h1中间输入「《论语》」作为标题，在h2中间输入前三篇的
章节名称，特意换行间隔，如截图所示。
四、浏览器显示
浏览器显示出来效果是三章标题都在同一行，中间值只有一个空格。这原理是先前文章有
提到过的，在浏览器在解析HTML文件时，会自动把连续空格视为单一空格。
五、标题设置
改变做法，将三个章节的标题分别写在三个h2标签里，维持在同一行。
六、自动换行
浏览器显示效果正是所希望的网页呈现。
七、IE显示效果
除了Google的chrome浏览器，使用微软的IE浏览器开启档案，同样的版面呈现，字体不太
一样。
HTML版面、浏览器测试、SEO
从这篇文章范很容易理解浏览器在解析html文件时，是依照html语法规范呈现在电脑萤幕
，和原始html的编排方式没有直接关系。换个角度说，在设计html网页时，版面编排只是
为了让开始者更加方便地设计程式，想要控制网页呈现效果，还是要回归到html不同的标
签功能，精准套用适当的标签。
另外这一节有很简单的在chrome和IE之间，测试相同html档案在不同浏览器的相同之处和
差异之处，这是在设计网页时很重要的步骤。在以往只有电脑端的年代，测试不同浏览器
即可，现在手机端逐渐成为主流，除了测试电脑网页的呈现，同时也要注重测试手机网页
的状况。
最後，由於h1到h6是公认的HTML文章标题标签，而文章标题是搜索引擎在了解网页内容很
重要的判断依据，所以想要网站SEO优化，一定要好好设计标题标签，不要把h1h2单纯当
作版面配置的工具。
延伸阅读：
Windows记事本也能设计网页，写下第一行HTML程式码
https://www.b88104069.com/archives/4606
HTML主要结构语法：<!DOCTYPE html>、<html>、<head> 、<body>、注解等
https://www.b88104069.com/archives/4620
--
moodyblues是一个摇滚乐团
该乐团并不忧郁 我个人也不忧郁
猜想该乐团当初取名moodyblues和我一样
只是单纯的历史偶发事件 请勿望文生义呀呀呀
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 60.250.152.209 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1600907870.A.150.html