用户投稿HTML 页面框架
上篇文章说到前端网页的结构是由 HTML 所构建而成的，主要用 HTML 档案和里面的 HTML 标籤组成我们平常所浏览的网页画面，包含各种文字内容、图片、表单等。而在开发中，HTML 档案也有既定的架构，例如：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> document </body></html>我们可以在资料夹中新建一个 .txt 文件档，将档名修改为 text.html，这时我们会看到档案的 icon 变成预设浏览器的 icon。接下来将档案拖曳到 VS Code 视窗中，或打开 VS Code ，档案 → 开启档案 → 选择刚刚新增的 text.html，并将上述範例複製并存档。
存档后点两下打开档案，我们第一个简单的网页就出现啦！
打开档案后画面如下
这边先让我们了解一下 HTML 标準页面框架不同段落所代表的意义
<!DOCTYPE html>
是 HTML 中必不可少的开头标籤，主要用来告诉伺服器目前的文件类型，可以排查过时或错误的语法，避免网站出错。
<html></html>
html 元素又被视为根元素，档案中除了文件类型以外，所有的内容都要写在 <html> (起始标籤)和</html>(结束标籤)之间。
<head></head>
是 html 标籤中 “头” 的部分，里面通常会放一些不会显示在网页上的资讯，例如语言设定、引入档案等。
head 中比较常出现的标籤有两种，分别为 <meta charset="utf-8" 及 <title>，前者会告诉伺服器本档案使用 utf-8 字元编码，通常只要网含有中文就会使用此编码以避免出现乱码；而 <title> 则是网页名称，也就是我们浏览网站时浏览器分页上会显示的名称。
<body></body>
html 中的 “身体” 部分，里面包含所有会显示给使用者看的网页内容，包括文字、表单、图片等。
Tips：VS Code html 框架快速键：于 html 档案输入 !+tab 键
若想了解更多可以参考：https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics
标籤组成关係
HTML 中的元素( element ) 是层层包裹的，以标準框架来看，是一组 <html></html> 标籤包裹着一组 <head></head> 及一组 <body></body> 标籤。
<html> <head></head><body></body></html>在上面程式排版中我们可以很清楚的看到 html 嵌套着 head 及 body，而这种关係就称为父子关係，即 html 为 head 和 body 的父元素、head 和 body 为 html 的子元素。而 head 及 body 是并列的 element，即他们之间互为兄弟元素(如下图)。
注解
注解也叫做注释，有点像是程式的解释，用来放给开发人员阅读的文字，例如某段程式的逻辑、开发或修改的时间等。注释在网页渲染时会被浏览器忽略，所以不会显示在页面上，不过每种语言的注解写法都不尽相同，所以这边我们就只讲 HTML 的写法 —— <!-- -->。
<!-- 注解里面可以放任何说明文字不会被浏览器显示在画面上 -->这句话是普通文字，会显示出来注解不只能够放文字，也可以放置程式码，当我们需要移除掉某段程式但却不想删除时也可以使用注解让他暂时不要显示在网页上。
在 HTML 中，所有被包含在
<!--和-->之间的任何字元都会成为注解。
<!-- <a>我会被注解掉吗</a><a>还可以一次注解很多行</a>--><a>我没有被注解</a>上一篇：[快速入门前端 1] 网页和开发工具
下一篇：[快速入门前端 3] 什么是 HTML 标籤 (1)
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
