【後转前要多久】# Day02 HTML - 基本观念复习

基本上网页与HTML、CSS、JavaScript息息相关，
虽然有办法、但很难去完整地分别拆开来讲述。

(每次上W3School想从纯HTML tag从头看学起，却总是半路杀出一堆JS咬金，令人望之却步...到了最後，只看前十几个tag後就放弃学网页了，毕竟上百个标签、文件流水式的教材，可能没有一个目标或动手实践的项目，很难引起我的兴趣来继续学习)

这次有办法学得比较完整，是完整的将六角学院的HTML、CSS、JS教学影片看过一次，
收获颇大，并对自己较有兴趣的部分，在网路上蒐集资料後汇整。

网页基本观念

将网页拆分出来，分成三个部分

  • HTML 文字、内容
  • CSS 样式、美观
  • JS 动作、行为

使用浏览器对这篇文章 按右键 => 检查原始码

所有在版面上看到的内容(所有中文字)都被包在HTML标签中。
这也是爬虫会爬取资料的项目之一，因为对他们来说，他们要的是"资料"，
也就是文字、内容，
毕竟样式、美观或者行为、动作对他们来说并不重要。

检视原始码

换个方式来说，拿人类来比喻，
HTML 是一个人的骨架
CSS 是一个人身上的所有皮肤
JavaScript 是一个人表现出来的行为

能用HTML、CSS搞定的事，就不要动用JS
如果是长在我身上就能搞定的东西，我可不想额外花力气去做动作
毕竟这是三种不一样的语言，动作逻辑上少一些在专案上也比较好管理及维护
但如果不写JS时，产生出的代价太大，那就另当别论。

另外前後端也是，如果前端能处理(渲染或运算)的部分就优先交由前端去做，
除非是需要交由後端服务器运算或储存的部分。
而有些则是前後端都做(ex:阻挡错误输入)在使用体验上及安全性上皆较高。

HTML5 版本

W3C与WHATWG两个网页推手组织之间有很长一段历史渊源，
为了理念上的问题而争论不休，好像很精彩，
他们的关系、争吵的议题多到可以出一本小说厚度的书了，
不过好像只有少数开发者会去了解这段故事。

HTML现在已经到第五版了，
在以前的版本中(第四版)，
在网页的最前面要先加上落落长的一段

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

用以告诉向浏览器 这是HTML4，拿HTML4的格式来解析！

然而第五版就这样短短一行 <!DOCTYPE html>
简洁有力、亲民多了

关於Tag标签

多数tag成对出现

<html> 这个东西，就是tag(标签)

Element

多数tag成对出现 指的就是<html></html>这件事情，
有头就有尾，但也有少数有头没尾巴的例子。

而tag及tag里面的所有东西则称之element(元素)。

网页直译式

HTML所有代码由上到下，一行一行来执行

<HEAD>、<BODY>

最典型的范例如下

<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

简单来说，宣告完HTML5格式後，
直接用<html>里面包<head>、<body>。(就是HTML包头包身啦)
第一次接触HTML时，曾好奇这样设计的意义。阿不用尾巴吗？

不用。
我也不知道为啥不设计个<tail>尾巴。或者怎麽不用个<start>及<end>。

另外如果要标注网页语系(自然语言)，则可在<html>上加入lang属性 (也可在其他区块的tag中加入)，
如: <html lang="en">、<html lang="zh-TW">

其实繁体中文应该用zh-Hant (汉语Han传统Traditional)会比较恰当
繁体中文再加上台湾地区码则是zh-Hant-TW

<HEAD>里的东西

最常用到的几种

...
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
<link rel="icon" href="网页左上角缩图.ico">
<link rel="stylesheet" href="要引用进来的CSS样式位置.css">
</head>
...

由上至下分别是：

  1. 设定charset字元为UTF-8 (敢不设，中文乱码就敢搞你)
  2. IE用最新标准模式开启
  3. 页面初始缩放比例
  4. 网页标题
  5. 网页缩图。.ico 画素大小通常是 32x32
  6. 连结要套用的CSS样式位置

meta 到底是什麽意思?
拿去google翻译也只会得到"元"、"元数据" 十分抽象的名词解释。
这边举个例子，拿"拍照"这件事情来说，
照片是我们想看的内容，图片上的风景、树木、出现的人物，
这些是我们肉眼看的到资讯。

而这张照片中有没有看不到的资讯？
有。

照片的格式、解析度、照片摄影者、拍摄日期、照片档案大小、额外对这张照片作的补充说明等等

对这些不是内容的资讯(但这些资讯某些角度来说很重要)
就对这些资讯取了个暧昧的名字，叫作meta

以下是针对SEO优化

针对爬虫及搜索引擎(SEO)优化的方式，有需要用到时再回来看就好。

不过也有听说某些方法已经过时，google已不用这样的方式来做排名等等，端看各大搜索引擎有没有支援。
详情参阅google文档或yahoo、Bing、百度等搜寻引擎的文件。

<meta name="description" content="网站的描述">
<meta name="keywords" content="最重要的关键字一, 关键字二, 关键字三">
<meta name="authon" content="网站作者">
<meta name="copyright" content="版权所有">

OG系列(Open Graph)，有关爬虫、SEO

<meta property="og:title" content="标题">
<meta property="og:description" content="描述">
<meta property="og:type" content="website">
<meta property="og:url" content="xxx">
<meta property="og:image" content="xxx.png">

<BODY>里的东西

相对於<head>内的东西，<body>内的东西才是重头戏阿!!

头脑内的知识不重要，身体有没有料才是真的

剩下的tag，就交给明天的我来介绍了。

在哪都可以出现的东西

  • <!-- --> 注解(comment)
<!-- 我是注解，在里面打什麽都可以 -->
  • <script> JS语法，JavaScript只会出现在这区块内
<script src="要引用进来的JS档案位置.js"></script>
<script>alert("HI");</script>
  • <php> PHP语法，PHP只会出现在这区块内
    要跑PHP之前必须要先架 支援PHP的WebServer，并且将副档名改为.php 而非.html
    不在本系列范畴
<?php
echo "Hi";
?>

环境 档名 副档名

因为习惯问题，开发环境我是用需要付费的IDE WebStorm
已内建许多必要的套件(但仍有少数不足)，
选择用哪个浏览预览时也挺方便的。

选择用哪个浏览

一般写网页，HTML我都会命名 index.html

副档名取 .html、.htm 都是可以的，但我个人偏向能全写就全写(.html)
可以直接点击两下开启档案、也可采用架微型Server的方式来做浏览。


<<:  [DAY2]建立容器(一)

>>:  Day 2 靶机环境建立

虾皮串接实作笔记-Create App 建立串接帐号

前言 目标：串接虾皮订单、标签资讯，目前串接虾皮 OpenAPI 2.0 版本(串接手册) 前面已经...

Day4 Android - Layout版面(上)

接续前一天提到的，每一种layout都有它不同的属性名称以及排序模式，我这边就先举三个较常用的lay...

Day21

今天继续看指标与阵列陷入深深地不知该如何写心得中，指标*ptr是专门用来指向物件记忆体位置的类型。在...

物件角色建模 Object Role Modeling

ORM (Object Relational Mapping) 是目前在做资料库应用程序中，用来定义...

Day 07 - 导流专家Route 53

来到了第七天，今天让我们来一起看看Route 53吧 Route 53帮那些事情? 有了Route ...