Day.2 「欢迎来到网页这个世界！」 —— 认识网页架构
网页世界是由什麽组成？
上一篇有讲到网页三兄弟，其中有一个老大哥负责撑起这个世界，那就是 HTML ，少了 HTML 这个根基，就不会有网页。
只有 HTML 的世界是非常无聊的，这时 CSS 和 Javascript 接连出现，为网页世界创造更多的可能！
- HTML 负责撑起网页
- CSS 负责为网页增添色彩
- Javascript 负责为网页增加互动性
认识 HTML
HTML 是什麽？
HTML 是 Hyper Text Markup Language 的缩写，中文翻译为超文本标示语言，是样板语言。
什麽是样板语言？ 主要给样板处理器（浏览器）产生画面的语言
架构
HTML 的世界是由上往下建构的，最後会变成一个 DOM tree 树状图。
什麽是 DOM？ DOM 是 Document Object Model 的缩写，中文翻译为文件物件模型
转换成 树状图架构
- 红色框是 HTML5 的档案声明，用来告诉浏览器这个文件是什麽类型。
- 橙色框是最根部的标签，用来标记网页所使用的语言，如：
en为英文，zh-TW为繁体中文。 - 黄色框是要给浏览器看的设定，不会显示在网页上。
-
<meta>是给浏览器看的设定值，如：字元编码、RWD、网页 icon 、网页描述...等。 -
<title>是给网页的标题。 -
<link>是用来引入 CSS 的。 -
<script>用来引入 Javascript 使用的，但大多数人会设在网页尾端，之後再讲为什麽。
-
- 绿色框是网页的主要内容呈现。
- 蓝色框是标签的属性。
- 树状图具有上下关系，如：
<body>子元素为<h1>、<h1>父元素为<body>。 - 父元素可以有多个子元素，子元素只有一个父元素。
标签
- 深蓝色字是标签名称
- 浅蓝色字是属性名称
- 橘色字是属性值
- 白色字是文本
- 大多数标签都要使用结束标签做结尾，如：
</h1>
HTML 是怎麽呈现的？
最原始的 HTML 是没有所谓的区块元素，而是各家的浏览器自己设定预设的样式，让 HTML 更加容易阅读。
如图 <h1> Google Chrome 内建样式
虽然各家浏览器的样式都不太一样，但整体大方向还是一样的，都有区分出区块元素与行内元素。
多数情况下，会用区块元素划分位置，行内元素会放在区块元素内。
- 区块元素（block）：在没有使用 CSS ，会包覆着子元素盖一整行，如：
div、h1、ul...等。 - 行内元素（inline）：可以多个行内并排，直到排不下就会往下推挤，如：
span、img、input...等。
为了更好的呈现效果，所以有稍微添加一些 CSS
总结
现在已经初步认识网页的架构了，明天将会深入了解各个标签的用法与注意事项。
如果想自己做出树状图，可以玩玩看，只是是用 Codepen 做的有点乱。
<<: 遇到困难解决困难，没有困难就给自己制造麻烦 -- 论try与expect
PHP Array Mapping
最近工作上常会需要对一个 array 做批次处理，所以整理一下 PHP 做 array mappin...
【从零开始的Swift开发心路历程-Day14】打造自己的私房美食名单Part3（完）
昨天已经能让TableViewCell显示餐厅资料了 但....好像有点单调，让我们来加点餐厅的图片...
Day 26 密码规则定义规划实作
根据GDPR第5条和CCPA§§1798.83(d)(E)(iii) 和 §§1798.91.04(...
从零开始的8-bit迷宫探险【Level 7】Swift 基础语法 (五)
今日目标 认识 nil 认识 Optional 认识 if let 及 guard let nil ...
[前端/JavaScript] 实作汇出excel下载按钮的超好用套件：ExcelJS（上）- 基础介绍与教学
简介 官方github连结： 英文文档 、 中文文档 ExcelJS 这个套件可以高弹性的将资料汇出...