前端基礎學習1 | Web、Html、CSS
1、Web 基礎知識
Web （www World Wide Web），全球廣域網，也稱全球資訊網，能夠透過瀏覽器訪問的網站
Web網站的工作流程
Web標準，也稱為網頁標準，由一些列的標準組成，大部分由W3C（World Wide Web Consortium，全球資訊網聯盟）負責制定。
Web標準由三個部分組成：
- HTML：負責網頁的
結構（頁面元素和內容） - CSS：負責網頁的
表現（頁面元素的外觀、位置等頁面樣式，如：顏色、大小等） - JavaScript：負責網頁的
行為（互動效果）
2、HTML 基礎知識
2.1 什麼是HTML
HTML（Hyper Text Markup Language）：超文字標記語言。
- 超文字，指超越文字限制，比普通文字更強大，除了文字資訊外還可以定義圖片、音訊和影片等內容。
- 標記語言，指由標籤構成的語言
- HTML標籤都是預先定義好的，例如：
<a>表示超連結，<img>展示圖片。 - HTML程式碼可以直接在瀏覽器中執行，HTML標籤由瀏覽器解析。
- HTML標籤都是預先定義好的，例如：
HTML檔案字尾都為.html
HTML程式碼的特點：
- HTML標籤不區分大小寫（一般都用全小寫）
- HTML標籤屬性值單雙引號都可以
- HTML語法比較鬆散
- HTML無法直接識別多個空格，通常用
這一連串的符號表示空格。
HTML程式碼註釋方式：<!--註釋內容-->
標準的HTML程式碼格式：
<!-- 宣告文件型別為 HTML -->
<! DOCTYPE html>
<html lang="en">
<head>
<!-- 設定該部分內容字符集為 UTF-8，以便相容中文 -->
<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>
</head>
</html>
2.2 HTML常用標籤
相關連結：HTML 標籤參考手冊 (w3school.com.cn)
- 圖片標籤：
<img src="" width="" height=""></img> - 標題標籤：
<h1> 、<h2> ... <h6> - 水平線標籤：
<hr> - 行內標籤：
<span> - 超連結標籤（跳轉網頁）
<a href="跳轉連結" target="跳轉方式">顯示文字</a>- 跳轉方式主要有兩種：
__self在當前頁面跳轉（預設值），_blank重新開啟一個頁面並跳轉。
- 跳轉方式主要有兩種：
- 影片標籤：
<video>- src ：規定影片的 url
- controls：顯示播放控制元件
- width：播放器的寬度
- height：播放器的高度
- 音訊標籤：
<audio>- src：規定音訊的 url
- controls：顯示播放控制元件
- 段落標籤
<p> - 文字加粗標籤：
<b> / <strong> - 換行標籤：
<br> - 佈局標籤：
<div>和<span><div>又稱作空標籤，其特點有：- 獨佔整行，一行只顯示一個
- 寬度預設是父元素的寬度，高度預設由內容撐開
- 可設定寬高（width和height）
<span>即行內標籤，其特點有：- 不佔行，一行可顯示多個
- 寬度和高度預設由內容撐開
- 不可以設定寬高（width和height）
- 表格標籤:
<table>
| 標籤 | 描述 | 屬性/備註 |
|---|---|---|
<table> |
定義表格整體，可包括多個<tr> |
border: 規定表格邊框的寬度。width: 規定表格的寬度。cellspacing：規定單元之間的空間。 |
<tr> |
表格的行，可包括多個<td> |
|
<td> |
普通單元格，可包括內容 | 若是表頭單元格，可替換為 <th> |
-
表單標籤：
<form>（最重要的）-
在網頁中表單標籤主要負責資料採集，比如註冊、登入等。
-
常用表單項標籤
<input>：定義表單項，透過 type 屬性控制輸入形式<select>： 定義下拉選單<textarea>： 定義文字域
-
屬性
action：規定表單提交的位置method：規定用於傳送表單資料的方式，GET（預設）、POST等
-
登入案例
<form action="user/login" method="post"> 使用者名稱: <input type="text" name="username"> 密碼: <input type="password" name="password"> <input type="submit" value="登入"> </form> -
提交表單時 GET 和 POST的區別：
- GET：在位址列後拼接表單資料，如：?username="uni"&password="123", 位址列長度有限制，是method屬性的預設值
- POST：在訊息體（請求體）中傳遞資訊，引數大小無限制。
-
2.3 HTML 標籤屬性值
HTML每個標籤都可以設定多個屬性值，例如之前的<img>標籤可設定src、width和height。
除此之外，最重要的是每個HTML標籤都可以設定 id 、 name和``class` ，這將用來區分不同的HTML標籤。
後面的``CSS和 JavaScript在選擇HTML標籤時可透過id 選取一個標籤，或者透過class` 選取一類標籤。
3、CSS 基礎知識
CSS（Cascading Style Sheet）：層疊樣式表，用於控制頁面的樣式（表現）。
相關連結：CSS 參考手冊 (w3school.com.cn)
3.1 如何使用 CSS
CSS引入方式：
-
行內樣式：寫在標籤的 style屬性中（不推薦）。
<h1 style="font-size:1.5em;"></h1> -
內嵌樣式：寫在 style標籤中（可寫在頁面任何位置，但通常寫在head標籤中）。
<style> h1{ font-size: 1.5em; } </style> -
外聯樣式：寫在一個單獨的
.css檔案中（需要透過 link標籤在HTML網頁中引入）。/* style.css */ h1{ font-size: 1.5em }<!-- index.html --> <head> <link href="css/style.css"></link> </head>
3.2 CSS設定顏色
HTML大部分標籤支援CSS透過 color 屬性的值來設定標籤元素的顏色，通常由三個數字表示，分別表示紅，黃，藍顏色的深度，rgb(0,0,0) 表示黑色，rgb(255,255,255)表示白色，數字最大為255，為方便設定，可直接用六位的16進位制數表示，比如#0AFF1C就表示為rgb(10,255,28)，設定出來的顏色都是綠色：
第一種方式（綠色）
第二種方式（還是綠色）
3.3 CSS選擇器
CSS所設定的樣式都是透過HTML標籤元素來呈現的。
CSS選擇器指用來選取所要設定樣式的元素（標籤）。
- 元素選擇器
h1{} - id選擇器
#username {} - 類選擇器
.list{}
三個選擇器的優先順序順序：id選擇器 > 類選擇器 > 元素選擇器
上述優先順序的意思是，當同一個標籤被設定重複屬性的情況下，按順序來遵循唯一的樣式。
3.4 CSS常用屬性
相關連結：CSS 屬性大全 (w3school.com.cn)
1. color: #FFFFFF; 定義文字顏色，例如#FFFFFF表示白色
2. text-decoration: underline; 修飾文字，例如underline表示新增下劃線
3. line-height: 20px; 設定行高為20個畫素點
4. text-indent: 2em; 通常用於p標籤，表示行內容的縮排為2個字元
5. text-align: left; 規定標籤中的文字水平對其方式為左對齊
6. margin: 0 auto; 讓標籤外邊距兩邊各佔一半，正常情況下，值有四個，分別是上 右 下 左
3.5 CSS 盒子模型
CSS對於每一個塊標籤都有盒子佈局的概念。
盒子：頁面中所有的標籤都可以看成是一個盒子，由盒子將頁面中的元素包含在一個矩形區域內，透過盒子的視角更方便的進行頁面佈局。
盒子模型從內到外組成有：
- content：內容區域
- padding：內邊距區域
- border：邊框區域
- margin：外邊距區域
參考資料
https://www.bilibili.com/video/BV1m84y1w7Tb