作者moodyblue ()
看板Web_Design
标题[心得] HTML主要结构语法：html、head、body
时间Wed Sep 16 17:37:04 2020
HTML主要结构语法：<!DOCTYPE html>、<html>、<head> 、<body>、注解等
网志图文版：
https://www.b88104069.com/archives/4620
本文介绍HTML网页文件主要结构，从宣告版本<!DOCTYPE html>、<html></html>、
<head> </head>、到<body></body>，同时说明如何添加注解，以<pre></pre>标签及<br>
显示原始排版，最後补充显示空格特殊符号 。
一、HTML文件
这是HTML标准也是主要结构，各标签用法如下：
<!DOCTYPE html>：
因为有约定成俗统一的文法，我们才能使用同一个语言沟通，不同浏览器在显示众多网页
时也是如此。HTML便是一套规定浏览器如何展现解析网页内容的标准，虽然最新版本是
2014的HTML 5，但是在网页技术发展的过程中，在这之前还有HTML 2、HTML 3、HTML 4等
许多版本，可以想见会有很多网页是在新版本发布之前设计好的，它们不可能根据HTML 5
编写，所以每一份HTML文件都应该在开头第一行写明所适用的HTML版本，这样浏览器才能
依照原始设计者的预期，正确解析网页内容。所谓的「DOCTYPE」是Document Type文件型
态的意思，「<!DOCTYPE html>」便是告诉浏览器我的网页是依照HTML 5标准设计的。
辅充说明，HTML标准是由国际共同承认的W3C组织发布，英文全名为World Wide Web
Consortium，之後会介绍到的CSS也是由W3C制定。
<html></html>：这个标签的开始和结束代表整个HTML文件本身，等於是告诉浏览器什麽
时候开始，什麽时候结束。
<head> </head>：HTML文件的头部或者是封面，它并不是浏览器要显示出来的内容，是有
关於这份文件的基本资讯，例如这里很典型的网页标题，浏览器会把<Title>赞赞小屋
</Title>中的「赞赞小屋」显示在索引标签上。
<body></body>：HTML文件中真正要浏览器显示在网页上的内容。
二、分行及缩排
通常整个HTML文件会有分行及缩排的布局，这样阅读比较容易，程式设计时也方便修改。
图片上可以清楚看出原始HTML文件及浏览器显示网页。
三、HTML注解
程式为了方便阅读都有标示注解的设置，HTML是以「<!--」和「-->」的中间部份保留为
注解。
这里用了两种形式：
A.多行注解：
<!--
Document Type HTML5标准
一定要写在第一行
-->
B.单行注解：
<!-- Html文件开始 -->
四、网页原始码
Chrome浏览器滑鼠右键，点选「检视网页原始码」，可以看到虽然网页上只有「赞赞小屋
」，原始的HTML文件有很多其他内容，正是这些符合统一规范的其他内容，浏览器得以一
致性的翻译无数网页。所以一般所谓的网页原始码，其实就是网页设计者的HTML原始文件
。
五、空格及空行
HTML呈现网页时有个特性，即使有再多的连续空格或空行，浏览器会视为单一空格，所以
截图所示的「这是第一行」和「这是第二行」在网页上是在同一行，前後差了一个空格，
「这里面有三个 空格」也会在网页上显示为只有一个空格。
六、<pre></pre>标签
真的有需要在网页上显示两个以上空格或空行时，可以使用<pre></pre>标签（
preformatted text），它意思是HTML文件设计者已经预计排好版面了，希望浏览器以原
始排版方式呈现。
七、换行<br>及空格
除了<pre></pre>标签，HTML有一个专门指示换行的<br>标签，取自英文break line。先
前所介绍的HTML标签都是<></>成双成对，标签中间是想要表达的内容，<br>是比较特别
的单标签，不用结束，其实也是因为它没有要表达的内容，不用开始跟结束，另一个常见
的单标签为显示一条水平线的<hr>。
另外针对像是在内文中需要两个以上空格的情形，HTML有提供一系列的特殊符号输入法，
正式名称为字元实体（Character entities），它作用类似编码对照表，输入「&」
是「&」，「 」是空格，输入「<」是「<」，输入「>」是「>」。
这些特殊符号输入在特定场合是非常关键而且必须的，各位读者可以想见，赞赞小屋在写
这一篇网页文章，想要显示<br>不能直接在键盘上打字，必须乖乖使用神奇代码。
HTML版本、单标签、XHTML
本文提到HTML版本和单标签，其实是个很好的案例可以大致了解HTML的发展历史。除了正
统的HTML系列，W3C曾经尝试导入更为严谨的XHTML（Xtensible HyperText Markup
Language），主要是因为W3C觉得HTML过於松散，以<br>为例，HTML中<br>和<BR>都可以
，给它加个结束记号<br />也没有问题，但是在一丝不苟的XHTML中，只能小写，一定要
加结束记号。从W3C标准制定者的角度而言，这样才是规范，可是在这之前，已经有千千
万万的网页是以HTML松散规范设计好的，况且网页设计师自由习惯了，所以大部份使用者
和浏览器开发商根本无视於W3C苦口婆心的XHTML，W3C只好默默放弃XHTML计划。後来2014
年W3C发布了最新一代HTML 5标准，算是回归了HTML路线，并且向下兼容。
从这个发展角度来看，网页设计最大的好处是直接第HTML文件第一行宣告<!DOCTYPE
html>即可，因为是最新版本有兼容性。读者有兴趣可以参考较早HTML版本的宣告语句，
落落长又很难理解。不过话说回来，语言和标准的东西本来不一定有道理，约定成俗和遵
守就是了。
延伸阅读：
Windows记事本也能设计网页，写下第一行HTML程式码
https://www.b88104069.com/archives/4606
--
周末，我们继续Excel：=>21.心得=>5.其他=>3.office
会计人的Excel小教室：
https://www.facebook.com/acctexcel
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 60.250.152.209 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1600249045.A.0D6.html
1F：推 a321b321ab: 基础概念推 09/17 12:29
2F：→ loeiia: 感谢推 11/06 03:05