[Day 16] 阿嬷都看得懂的通用 .html 档案结构

阿嬷都看得懂的通用 .html 档案结构

不知道各位聪明的阿嬷是否注意到，在前几天的讨论中，我们其实也隐隐区分了 2 种不同功能的 HTML 标签，其中一种的功能，是告诉浏览器要渲染出那些元件，例如 div 标签；另一种的功能，则是告诉浏览器应该怎麽渲染这些元件，而本身不渲染出来。那麽，我们是否应该也将这 2 种 HTML 标签分开管理呢？

没错！因此，我们会有 2 个特殊的标签，分别是

head，用来包含不需要渲染出来、只是要告诉浏览器的资讯的标签；以及
body，用来包含需要浏览渲染出来的正文标签。

除了 link 标签和 style 标签之外，还有哪些放在 head 标签中的标签呢？我们还必须告诉浏览器那些不需要渲染出来的资讯呢？我们还需要

title，也就是这个网页的标题。被这个标签包含的文字，就会出现在浏览器的分页标签上喔！
meta，超级多资讯都可以被包含在这边，也正因为这样，我们的资讯必须使用 name 字样来告诉浏览器，这个资讯属於哪个分类，再用 content 字样，来告诉浏览器这些资讯的细节。例如 name 为描述 (description) 的时候，content 的内容就会出现在搜寻引擎的搜寻结果中；另个值得注意的是， name 为可视区域 (viewport; 或译「视图」)，这会告诉浏览器萤幕或手机的宽高，允许我们的网页在不同的装置上，可以使用不同的渲染方式－－毕竟，电脑萤幕的宽比高长，而手机萤幕的宽比高短，也就会需要不同的渲染方式罗！这部分我们会在後面介绍响应式网页设计 (RWD) 的章节提到。
script，有没有觉得这个单字很熟悉呢？没错，长得和 "JavaScript" 这个语言的名字很像对吧？它就是我们引入 JavaScript 脚本的标签没错！值得注意的是，script 的引入未必都放在 head 当中，也有可能放在 body 标签中的最後。至於为什麽，就让我们提到 JavaScript 的时候再介绍罗！
额外提一下，在 link 标签中，我们还可以引入网页图示，也就是在网页分页上面的小图示。只要把用 href 引入的档案，rel 设为 "icon" 就可以罗！

最後，让我们想一想，浏览器怎麽会知道整个网页，是使用什麽国家或地区的文字，进行编写呢？这会影响着浏览器的语音功能与翻译功能，更会影响到搜寻引擎的区域设定，所以相当重要。

不过，我们并不只在 body 标签中，才会使用文字对吗？在 head 的 title 标签，以及 meta 中 name 为 description 的 content 中，我们都用到自己国家或地区的文字。因此，我们会用一个大的标签，把 head 标签和 body 标签包裹起来。这个标签就叫做

html，当中我们会使用 lang 字样，来告诉我们这个网页所使用的文字，属於哪个国家或地区。格式会是以语言-文字-地区的方式来表达；以台湾为例，使用的是中文 zh，文字则是传统汉字 HANT，而地区则是台湾 TW，因此写起来就会是：

<html lang="zh-Hans-TW">

另外，尽管现在大多的浏览器都很聪明，会在读取网页档案的时候，自动辨别 .html 这个附档名，而知道这个档案需要用 HTML 的方式去渲染；不过，在比较老旧的 HTML 版本中，必须指定 HTML 的渲染模式，也因此必须在整个档案的最前面，告诉浏览器这个 HTML 文件 (document) 的类型 (type)，写起来长得像这样：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">>

是不是看起来超长超吓人的？时至今日，我们已经可以只写

<!DOCTYPE html>

就好，甚至可以完全不写这段文字，浏览器也可以正常渲染喔～

咦，那干嘛还介绍这段文字呢？让我先卖个关子，其实重点在於那个开头的惊叹号......至於为什麽，我们未来再揭露这个秘密吧！

因此，我们的 .html 档案大概会是长这样：

<!DOCTYPE html>
<html lang="...">
	<head>
		<title> ... </title>
		<meta name="..." content="...">
		<meta name="..." content="...">
		<link href="..." rel="...">
		<link href="..." rel="...">
		<script> ... </script>
	</head>
	<body>
		.
		.
		.
		<script> ... </script>
	</body>
</html>

是不是又臭又长呢？没关系，工程师当然也有一套偷懒高效率写出这个结构的工具罗！

这几天介绍了怎麽把样式从元件中独立收整出来的方法，也介绍了把提供网页资讯的标签与渲染元件的标签分离开来的方法，所以我们已经知道怎麽把 .css 档案和 .html 档案拆分开来，也知道 .html 的通用档案结构。那麽，明天我们会介绍些什麽呢？

阿嬷们在使用记事本写这些程序码的时候，会不会经常拼错字，觉得超级烦的呢？我会！所以，既然到现在我们已经介绍了许多标签与样式，明天让我们介绍一些好用的写程序工具，让大家写起程序更加懒惰有效率吧！

<<: Hello, OS!

>>: Day 16. slate × Interfaces × CustomType

[Day 16] 阿嬷都看得懂的通用 .html 档案结构

阿嬷都看得懂的通用 .html 档案结构

爬虫怎麽爬从零开始的爬虫自学 DAY22 python网路爬虫开爬-4翻页继续爬

「this」好七怪！

跨网域传值的神队友——window.postMessage

数位 AI 新时代

xlsx档与json档转换

Day 24 - redux-saga 用到 Generators~

更新网格机器人和策略回测

30天轻松学会unity自制游戏-制作敌人

android studio 30天学习笔记-day 13-介绍databinding BindingAdapter

【Day1】简介