Day4 第一个HTML网页制作

VS CODE安装好之後，就可以来认识HTML啦~

开始写HTML前的步骤

首先，在桌面上新增一个资料夹(可以命名为project)，这个资料夹会存放之後写的网页和其他用到的相关档案。
接着，打开VS CODE。
在VS CODE上新增一个档案。
新增档案方式如下:

  1. 按下CTRL +N (Windows用户)
  2. 按下Command +N (Mac用户)
  3. 点选左上角档案→新增档案

新增好档案後，会看到以下的画面

来试着打些内容看看吧

将此档案储存到一开始建立的资料夹内
储存档案方式如下:

  1. 按下CTRL +S (Windows用户)
  2. 按下Command +S (Mac用户)
  3. 点选左上角档案→储存

档名可以叫index.html (index代表网页首页的意思)
储存完成後就可以看到上面本来写Untitled-1的地方变成了刚刚储存的档案名称

再来，可以到project资料夹内查看刚刚储存的档案是否有成功储存
将在资料夹内的档案拖曳到浏览器内或是直接点两下就可以透过预设浏览器开启并看到在index.html档案内写的内容了

透过Emmet快速建立HTML语法环境

VS CODE的内建套件Emmet非常方便，让使用者只要按下 ! +enter
就能快速在VS CODE内建立好HTML语法环境

HTML环境 (HTML Skeleton /BiolerPlate)说明

<!DOCTYPE html>

DOCTYPE 指的是Document Type文件类型，而这行代表的是设定成HTML5

<html lang="en">

这行代表的是使用的语言为英文，可以让浏览器快速地知道网页使用的语言，若与使用者浏览器预设的语言不同，会询问使用者是否需要翻译该网页。
相关参考: HTML Language Code Reference

一个HTML文件内一定要具备head跟body两个部分

<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>Document</title>
</head>
<body> 
</body>

head内写的内容是网页在加载完毕之後，不会显示在浏览器上的部分。
例如:网页图示连结、页面说明、CSS连结、标题、以及 metadata (有关於该 HTML 的资料，如作者、描述该文件的关键词等)...等。

body内的内容则是会显示於使用者看到的网页上。

    <title>Document</title>

title内写的内容则是网站的标题

相关参考:HTML 基础

<meta charset="UTF-8">

charset 指的是character set
UTF-8 是一种字元编码，包含世界上几乎所有存在的字，所以有在网页上定义UTF-8，几乎什麽语言都能够显示出来，如果没有定义，就可能会产生乱码。
相关参考:UTF-8

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport指的是目前眼睛所见的网页视窗
content="width=device-width, 是定义网页宽度等於装置的宽度，让网页能够因应不同装置来做出不同的调整
initial-scale=1.0 设定视窗是否需要放大或是缩小，设定1.0的话，就是大小不变

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

这行是专门为了旧版的IE浏览器所写的 为了让IE更新到最新

相关参考: What’s in the head? Metadata in HTML
A simple guide to HTML head elements

以上为个人学习笔记整理
若有错误，欢迎指正


<<:  Day3 众里寻它千百度

>>:  Day 04 建立关键字广告前，你所要谨记在心的事

Day15-Kubernetes 那些事 - Deployment 与 ReplicaSet（三）

前言 终於进入 Deployment 系列文的最後一篇也是非常重要的一篇了，在 K8s 系列文中的第...

IT铁人DAY 30－学习物件导向与Design Pattern之心路历程

　　终於来到了最後一天，希望看完前29篇文章的人能够把所学的知识内化，当写程序的时候有碰到什麽问题，...

[Day24] 供新手参考的几个可以实作的方向

在今天的文章中，向不知从何开始建立一个Action的新手。 提供几个可以尝试发挥的方向，从而建立相...

[Day 18] Sass - Mixins

@mixin 与 @include @mixin通常与@include一起使用， @mixin用来定...

IT铁人DAY 2－物件导向基本概念（1）

前一天有提过，物件导向程序的个个物件都有自己该做的事，而且各自可以独立作业，不过彼此间也能够分工合作...