认识网页元素 HTML、CSS

看完了前几天制作网页，所需要的素材、使用编辑器及制作网站的流程後後，今天要来介绍HTML、CSS的基本结构，跨出制作网站的第一步了

HTML

HTML是什麽？

HTML是Hypertext Markup Language的缩写，中文全名为「超文字标示语言」。HTML是告诉浏览器显示什麽内容，像是标题、内容、表格、表单、图片、文字、连结等。

HTML组成

每个标签都会有开始与结束，在标签中间可以放置自己要呈现的内容，可利用属性定义的名称给予样式。每个标签也会对应不同的属性及值。
但需要注意的是每个页面，id名称是唯一值，不可以重复，就像身分证号码一样，一个号码对应一个人的身份。class可以重复的被使用。且id与class的名称大小写是不同的，不能互相使用。EX:header、Header这两个代表不一样的class名称。

HTML架构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

`<!doctype html>`

DOCTYPE 即是Document type(简称为DTDs)，中文是「档案类型」。说明网页是用HTML哪个版本，像是HTML 4.01、XHTML 1.0、XHTML 1.1、HTML 5等版本。HTML5为网页的最新版本，几乎所有浏览器、手机都已经有支援。

`<html></html>`

识别是一个html文件

`<head>`

显示网页的资讯，包含标题、页面说明、外部连结等。但不会显示在浏览器画面中。

`<meta>`

<meta charter=UTF-8>
meta charter是用来指定网页是什麽编码。大多数的网页编码为「UTF-8」，如果网页没有指定正确的编码时，文字会变成乱码。
<meta name="description" content="....">
description是用来描述你的网页内容，只有在搜寻结果中，才能看到文字
以apple官网为例，他在meta的描述里面所写的文字，会显示在搜寻的描述上
<meta name="keywords" content="....">
keywords是用来描述你的网页内容有哪些关键字词
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport是用来描述行动版网页的 viewport 资讯

`<title>`

设定网页标题，会显示在浏览器的标签上、加入我的最爱的标题、网页搜寻结果

`<body>`

放置网页在浏览器上要呈现的内容

在html里面标签没有大小写区别，但有的版本必须要小写，因此建议统一以小写为主。

`注解 `

单行与多行注解都是使用<!-- 和 -→

<!--
	多行注解
	多行注解
	多行注解
-->
<!--单行注解-->

CSS

CSS是什麽？

CSS是Cascading style Sheets的缩写，中文全名为「层叠样式表单」。是用来美化HTML外观的语言。像是文字颜色、大小、位置、边框等。

如何在HTML中使用CSS

行内样式 Inline Styles

直接在HTML Tag上写style样式，

<p style="color:#f00;font-size:18px;">我是内容</p>

内嵌样式 Embeded Styles

在HTML 的标签里面使用style

<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>
  <style>
    .text{
      color:#f00;
      font-size:18px;
    }
  </style>
</head>
<body>
  <p class="text">我是内容</p>
</body>

外部样式 External Styesheets

在HTML 的<head>标签里用link方式引入CSS档案

<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>
  <link rel="stylesheet" href="css/style.css">
</head>

引入方式有三种方法，行内样式及嵌入样式不易管理，且行内优先顺序也会比较高，想部分调整可以使用此方法．但建议使用外部样式方法，方便管理及维护

CSS组成

CSS是由选择器(selector)、属性(property)和值(value)组成

选择器：设定要改变哪一个元素外观
属性：要改变什麽
值：如何改变
以范例来说，要改变「.text这个class名称」的外观，要改变他的「颜色」，要改成「红色」
要设定多个选取器时，要用逗号(,)隔开；属性与值之间用冒号(:)隔开；同时设定多个属性与值时，要用分号(;)隔开，最後用大括号{ }括起来。

这边要注意的是，设定选取器样式时，建议给他们一个class或id名称，不要直接设定html标签，因为在HTML里面使用到所设定的标签，样式就直接被套用，修改也会变得复杂。

CSS Reset 与 CSS normalize

为什麽会有CSS Reset及CSS normalize呢？

因多数浏览器使用的 HTML都会有自己的预设样式，导致在每个浏览器上看都会有一点差异。所以为了让每个浏览器样式统一，才会有Reset及normalize的需求。

CSS Reset 与 CSS normalize该到底该用哪一个呢？

CSS Reset
- 将浏览器默认样式完全清空
- 没有弹性，需要什麽样式要在自己做设定
- 常见的CSS Reset：Eric Meyer Reset CSS、HTML5 Reset Stylesheet
CSS normalize
- 只会删除浏览器的不一致，保留浏览器默认样式
- code会有大量注解，让你知道每个样式处理什麽问题
- normalize.css 被使用在Bootstrap、Tailwind、Foundation等framework
  不论用哪一套都有人使用，针对你需求去做选择。

前缀词使用

撰写CSS时，都会遇到不同浏览器之间的相容性问题，为了确保每个浏览器都支援所写的CSS ，必须依照不同的浏览器加上专属於它们的前缀，以确保CSS可以被正常执行。

webkit-：chrome、Safari
moz-：Firefox
-o- ：Opera
-ms-： Internet Explorer、Microsoft Edge

不确定CSS支援程度可以到 Can I sue 查询

结论

想像一个网页就像一间房子，HTML就像是未装修的房子，然後CSS是铺上磁砖、油漆、将家俱摆放到适合的位置并装饰美美的，让整体看起来舒适。
以上是HTML及CSS的介绍，相信你对HTML及CSS有基本的认识了

<<: [Day 6] Reactive Programming - Java 9(SubmissionPublisher、Processor)

>>: [Tableau Public] day 20：制作第三张仪表板

认识网页元素 HTML、CSS

HTML

HTML是什麽？

HTML组成

HTML架构

`<!doctype html>`

`<html></html>`

`<head>`

`<meta>`

`<title>`

`<body>`

`注解 `

CSS

CSS是什麽？

如何在HTML中使用CSS

行内样式 Inline Styles

内嵌样式 Embeded Styles

外部样式 External Styesheets

CSS组成

CSS Reset 与 CSS normalize

为什麽会有CSS Reset及CSS normalize呢？

CSS Reset 与 CSS normalize该到底该用哪一个呢？

前缀词使用

结论

DAY15-React to React

styled-components 的初步探索

DAY4 [程序设计基本介绍]

Day1 工业控制系统与普渡模型

[Day 22] 实作 Database Plugin 整合 Exposed ORM, HikariCP 及 Flyway

第12车厢-table界的神器!DataTables介绍篇(2)

铁人赛 Day18-- 继续我们的登入者介面吧

【Day 14】- 实战爬取 Ubuntu ISO 映像档下载网址

Day10: Detection on AWS

day24: compose