04 Web 相關知識-HTML/CSS/JS

阿新 • • 發佈：2020-06-25

本小節會將會介紹前端的相關基礎知識，這些是後面 Django 的模板系統中必要的基礎知識。我們會在開發的 Django 專案中製作一些簡單的頁面，需要用到這裡的內容。

1. HTML

HTML 的中文全稱叫做超文字標記語言，是建立網頁應用的標準語言。超文字的含義大概是指，不僅僅是文字，還可以包括圖片、連結、視訊等等。HTML 語言可以用來描述網頁結構，我們在瀏覽相關網站時，會接收對應網站發來的 HTML 文件、CSS 樣式以及 js 指令碼，最後瀏覽器對這些靜態資源進行解釋和渲染，最終形成了我們看到的豐富多彩的頁面。

1.1 HTML 編輯器

最簡單的 HTML 編輯器就是 Window 的記事本了，我們只需要寫一些最基本的 HTML 文字，然後將記事本的字尾名改為 .html 或者 .htm，然後便可以使用瀏覽器開啟檢視。

當然，記事本用起來不太簡潔方便，什麼都需要自己手動輸入，開發效率比較低，而且顯示得也不夠好看。一般而言，作為前端開發會有自己專門的編輯器或者類似於 Pycharm 這樣功能強大的 IDE。常用的 HTML 的編輯器有 Notepad++ 和 Sublime Text。其中 Sublime Text 可以作為真正的前端開發工具，而不只是用於寫 HTML。最後還有一個和 Pycharm 同屬於一個公司的專業前端開發軟體：WebStorm。

當前，高階的軟體是需要付費的，其中就包括了 Sublime Text 和 WebStorm。網上有破解版，也可以購買正規的啟用碼。但不管怎麼樣，有了好工具對於我們學習和工作的效率是可以大大提高的。

1.2 HTML 基礎組成部分

HTML 的最基本的結構如下：

<html>

<head>
  <!-- 這裡是頁面的頭部，可以引入的js庫，也可以寫css -->
</head>
<body>
  <!-- 頁面的主體內容 -->
</body>

<!--  在下面還可以寫js指令碼
<script type="text/javascript">
    document.write("Hello World!")
</script> 
-->
 
</html>

可以看到，最簡單的 HTML 就是這樣子的。它的幾個注意點如下：

註釋使用 ；
用<>這樣的包裹起來的叫 HTML 標籤或者元素，它是構成 HTML 的基礎。後面將重點介紹各種各樣的 HTML 標籤，有針對文字的<h1>，<p>，<b>等，有通用標籤<div>、<span>等，還有表格、表單標籤 <table>、<form>；
<xx>必須要對應</xx>收尾；

1.3 HTML 標籤

1.3.1 標籤屬性

每一個 html 標籤都可以定義很多屬性，用來標識這個標籤，也方便後面我們使用屬性定位方式找到這個標籤。屬性是解除安裝標籤內部的，比如下面的 <a> 標籤中定義了一個 href 屬性：

<a href="www.baidu.com">百度一下，你就知道</a>

這個是連結屬性，當點選這個 百度一下 文字時會跳轉到百度的主頁。當然標籤中比較重要和常用的屬性有：

id：用於表示元素的唯一性，方便 css 選擇器或者 js 找到該元素；

class：給元素新增一個或者多個樣式，多個樣式使用空格隔開，比如下面定義了兩個 class 樣式，div 元素中包含這兩個樣式：

...
<style type="text/css">

.margin-lass {
   margin-left:10px
   text-align: center
}

.text-class {
   font-size: 12px
}

</style>
...

<div class="margin-class text-class" ></div>

...

style：規定元素的行內樣式：

<div style="color:red; float:left"></div>

title：當滑鼠移到該元素上時，顯示的提示資訊

<div title="這是提示資訊">包含提示的文字</div>

1.3.2 連結元素

HTML 中的連結元素為<a>，它能讓我們從一個網頁連結到另一個網頁或者錨位置，只需要設定 href 屬性即可。在網際網路中各種網站上的連結的地址都是用的 <a> 標籤。如淘寶網站上的各種商品連結：

淘寶首頁商品連結

<a> 元素的兩個重要屬性分別為：

href：點選該元素時，連結的地址；
target：值有 _blank|_parent|_self|_top，它規定了跳轉到新頁面的位置；

1.3.3 容器元素

HTML 中的容器元素為 <div>，它是一個塊級元素，會自動開啟一個新行，主要是用來固定一塊區域。

示例：

<div id="node" style="color:#FF0000" class="test">這是一個div容器</div>

1.3.4 標題元素

HTML 中的標題元素有 <h1>-<h6>，它們規定了網頁主體或者段落的標題，而且是從大到小的順序。

示例：

<h1>這是h1標題</h1>
<h2>這是h2標題</h2>
<h3>這是h3標題</h3>
<h4>這是h4標題</h4>
<h5>這是h5標題</h5>
<h6>這是h6標題</h6>

效果圖：

圖片描述

例項效果圖

1.3.5 表格元素

HTML 中<table> 標籤用來在網頁上繪製表格。簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或td 元素組成。tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。

示例：

<table border="1" width="400px" style="text-align: center;">
	<thead>
		<th>列1</th>
		<th>列2</th>
		<th>列3</th>
		<th>列4</th>
	</thead>
	<tbody>
		<tr style="background-color: red">
			<td>行1值1</td>
			<td>行1值2</td>
			<td>行1值3</td>
			<td>行1值4</td>
		</tr>
		<tr>
			<td>行2值1</td>
			<td>行2值2</td>
			<td>行2值3</td>
			<td>行2值4</td>
		</tr>
	</tbody>
</table>

我們使用<thead> 定義表頭部，用 <tbody> 定義表格的內容。在 <table> 標籤中定義了整個表格的屬性，包括表格寬度為 400px，單元格內文字居中顯示，以及單元之間的間距為 1px。此外在第一行的表格中設定背景顏色為空色，最終得到的結果圖如下：

圖片描述

表格效果圖

1.3.6 列表元素

HTML 中的列表標籤有<ul> 和 <ol>，分別表示無序和有序列表，列表元素的標籤有li。

示例：

<ul>
<li>老虎</li>
<li>獅子</li>
<li>蛇</li>
</ul>

<ol start="20">
<li>老虎</li>
<li>獅子</li>
<li>蛇</li>
</ol>

效果圖：

圖片描述

列表效果圖

1.3.7 表單元素

表單元素是網頁佈局中非常重要的一個元素。比如我們可以在各種論壇、填寫個人資訊、登入等網頁上看到 <form> 元素。比如的登入頁面：

圖片描述

登入頁面示例

在<form> 表單中我們會包含許多元素，比如輸入框元素<input>、按鈕元素<button> 等等。現在我們來簡單實現一個登入表單，示例程式碼如下：

<form>
<div><span>賬號：</span><input type="text" style="margin-bottom: 10px" placeholder="請輸入登入手機號/郵箱" /></div>
<div><span>密碼：</span><input type="password" style="margin-bottom: 10px" placeholder="請輸入密碼" /></div>
<div><label style="float: left;font-size: 10px; color: grey"><input type="checkbox" checked="checked"/>7天自動登入</label></div>
</form>

效果圖：

圖片描述

登入註冊效果圖

除了上面這些常用元素之外，還有許多其他的 HTML 元素以及元素對應的屬性值，需要在使用的時候去搜索相關資料。有了這些知識，對網頁會有一個初步的認識，接下來學習如何讓靜態的網頁變得豐富多彩。

2. CSS

HTML 只是負責繪製網頁的結構，但是想要有像淘寶、京東、小米那樣酷炫的電商頁面，就離不開 CSS 技術了。CSS 全稱 Cascading Style Sheets，中文名為層疊樣式表。HTML 描繪了網頁結構，但 CSS 樣式定義如何顯示 HTML 元素，放在哪裡，什麼字型顏色、什麼背景顏色，與其他元素間距等等。此外，我們通常會將樣式寫到樣式檔案中，這樣可以實現網頁內容與表現解耦，極大提升開發效率。

2.1 CSS 樣式

CSS 的樣式有很多種，比如文字的樣式、容器背景樣式、邊框樣式，每種樣式都涉及不同的屬性以及屬性值。下面簡單介紹文字和邊框的樣式屬性及其用法。

2.1.1 文字樣式

文字的樣式屬性有：

文字顏色：color；
對齊方式：text-align，值有 left|right|center；
文字修飾：text-decoration，屬性值得含義如下：

屬性值含義

none 定義標準的文字

overline 為文字新增上劃線

line-through 為文字新增刪除線

underline 為文字新增下劃線
文字縮排： text-indent，設定文字首行縮排方式。該屬性值的單位可以是px、em以及百分比；
行高：line-height，設定文字行與行之間的空格。

屬性值	含義
none	定義標準的文字
overline	為文字新增上劃線
line-through	為文字新增刪除線
underline	為文字新增下劃線

示例程式碼：

<html>
<head>
</head>
<style type="text/css">
div {
	width: 600px;
}
.up {
	text-indent: 10%;
	text-decoration: underline;
}
.lp {
	text-indent: 10px;
	text-decoration: line-through;
}
.hp {
	line-height: 100px;
}
</style>

<body>
<div>
<!-- 三段文字分別應用三個樣式 -->    
<p class="up">這段文字，首行縮排10%，帶下劃線</p>
<p class="lp">這段文字，首行縮排10px, 帶刪除線</p>
<p class="hp">這段文字，無縮排, 行高100px</p>
</div>
</body>
</html

效果圖：

圖片描述

文字樣式效果圖

2.1.2 邊框樣式

邊框 (border) 是圍繞元素內容和內邊距的一條或者多條線。CSS 通過 border 屬性值來設定邊框的樣式、顏色以及邊框寬度等。

邊框樣式：對應的屬性為 border-style，用於設定元素邊框的顯示樣式。下面只列出常用屬性值及其含義；

屬性值含義

dotted 點狀邊框

dashed 虛線邊框

solid 實線邊框

double 雙實線邊框

groove 3D凹槽邊框

none 無邊框
邊框寬度：對應的屬性為 border-with，用於設定元素邊框的顯示寬度；
邊框顏色：對應的屬性為 border-color，用於設定元素邊框的顏色；
邊框樣式的設定順序：從邊框方向上來說有上、右、下、左四條邊框。預設上述屬性可以一次設定所有邊框的樣式，只需要分別寫對應四個值就會應用到前面的四條邊框上。

屬性值	含義
dotted	點狀邊框
dashed	虛線邊框
solid	實線邊框
double	雙實線邊框
groove	3D凹槽邊框
none	無邊框

示例程式碼：

<html>
<head></head>
<style type="text/css">
.all-border {
    border-style:solid;
    border-width:8px;
    border-color: red blue yellow black;
}	

.left-border {
	margin-top: 20px;
    border-style:dotted;
    border-left-width:10px;
    border-left-color: blue;
    line-height: 100px;
}

.bottom-border {
	margin-top: 20px;
    border-style:dotted;
    border-bottom-width:10px;
    border-bottom-color: green;
    line-height: 100px;
}
</style>
<body>
<div class="all-border">設定4個邊框</div>
<div class="left-border">設定左邊框</div>
<div class="bottom-border all-border">設定下面邊框</div>
</body>
</html

效果圖：

圖片描述

邊框樣式效果圖

上面的程式碼中，我們定義了三個 CSS 樣式，分別作用於三個 <div> 容器，並對這個三個容器的邊框進行了不同的顯示。我們可以單獨設定某一個邊的邊框樣式，也可以設定多個 CSS 樣式然後合併使用。這些都讓 CSS 樣式使用起來靈活方便。下面我們會介紹如何通過 CSS 選擇器讓樣式作用於網頁中的指定元素。

2.2 CSS 選擇器

CSS 選擇器決定了對應 CSS 樣式會被用到網頁中的哪個元素上。CSS 選擇器主要有以下幾種：

元素選擇器：通過元素名來定位元素，並將對應 CSS 樣式用於網頁上所有該元素上；

<style type="text/css">
   p {
     color: red;  
   }
</style>
...

<body>
   <div>無樣式作用</div>
   <p>紅色文字</p>
   <h4>標題文字</h4>
   <p>有一個紅色文字</p>
   <div><lable>有無樣式文字</lable></div>
</body>

示例圖：

圖片描述

元素選擇器效果圖

這裡我們可以看到字型紅色的樣式作用到了所有<p> 標籤中，其他 HTML 標籤則沒有應用到這樣的樣式。

ID 選擇器：ID選擇器是根據 HTML 元素的 ID 屬性確定對應的元素。它的使用語法如下：

#ID {
      屬性1: 值1;
      屬性2: 值2;
      ...
}

示例程式碼：

<style type="text/css">
    #red-color {
        color: red;
    }
</style>
...

<body>
    <div>無樣式作用</div>
    <p id="red-color">紅色文字</p>
    <h4>標題文字</h4>
    <p>未被選中</p>
    <div><lable>又無樣式文字</lable></div>
</body>

效果圖如下，可以看到只有 id 屬性值等於red-color的元素被選中，然後應用對應的樣式：

圖片描述

ID 選擇器效果圖

類選擇器：類選擇器以 HTML 元素的類屬性來確定元素。語法如下：

.class {
      屬性1: 值1;
      屬性2: 值2;
      ...
}

示例程式碼：

<style type="text/css">
    .red-color {
        color: red;
    }
</style>
...
<body>
 <div class="red-color">紅色文字</div>
 <p>普通文字</p>
 <h4>標題文字</h4>
 <p>未被選中</p>
 <div class="red-color"><lable>紅色文字</lable></div>
</body>

效果圖如下，可以看到只有元素的 class 屬性值為 red-color 時，對應的樣式才會被應用到該元素上。

圖片描述

類選擇器效果圖

組合選擇器：組合選擇器有很多種形式，比如元素+類組合、元素和元素組合、元素和ID組合、類和類組合等等。對應具體的選擇規則需要參考相關的文件，這裡就不一一說明，我們通過示例程式碼來了解下組合選擇器。

<style type="text/css">
   p.red-color {
	   color: red;
   }

   p span {
	   color: yellow;
   }
</style>
...

<body>
   <div class="red-color">div作用紅色文字樣式</div>
   <p><span>黃色文字</span></p>
   <div><span>div包裹span的文字</span></div>
   <h4>標題文字</h4>
   <p class="red-color">p元素作用紅色文字樣式</p>
   <div><lable>紅色文字</lable></div>
</body>

效果圖如下，可以看到 p.red-color 表示該樣式只作用於 p 標籤中 class 屬性為 red-color 的標籤，其他標籤的 class 屬性值等於 red-color 並不會被選中。 p span 指的是在 p 標籤內的 span 標籤，對於這類的標籤才會被應用其樣式：

圖片描述

組合選擇器效果圖

其他選擇器：CSS 中很多形式的選擇器，比如後代選擇器等等，有非常多的選擇元素的方式。需要大家耐心去學習和實踐。

2.3 引用 CSS 樣式

在 HTML 中使用 CSS 樣式可以向前面示例程式碼那樣把 CSS 樣式和 HTML 文字寫到同一個 HTML 檔案。樣式統一使用 <html> 標籤包裹，這樣的叫做內部樣式表。但是隨著大型網站複雜的特效以及多個頁面使用統一的樣式，工程中往往會將 CSS 樣式獨立出來，形成為單獨的樣式檔案，檔案以 .css 結尾。這樣我們可以在多個網頁中引入外部樣式檔案，實現複用，可以極大改善工程程式碼。這樣的用法是幾乎所有大型網站統一的做法，例如淘寶、小米商城都有大量的使用。引入 CSS 樣式的格式如下：

<head>
    <!-- href屬性指定樣式位置 -->
	<link href="css/mystyle.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
           ... 
    </style>
</head>

網站示意圖：

圖片描述

網站示意圖

3 JS

3.1 JavaScript 簡單介紹

JS 也是一種語言，和 C/C++/Java/Python 類似。真正的瀏覽器的核心除了對 html 元素進行渲染外，還需要提供 JS 引擎，解析並執行JS 指令碼。谷歌瀏覽器用 C++ 語言實現了著名的 V8 引擎。我們右鍵可以直接在開發者工具的 console 面板寫 JS 程式碼，看到語句的執行輸出，以及語句相應返回結果。

圖片描述

開發者工具下執行 JS 程式碼

對於 JS 的基礎知識，上手是非常快的，限於篇幅就不會展開介紹了。

3.2 HTML 中使用 JavaScript

3.2.1 直接使用 JS

直接在 html 中使用 JS 是十分方便的，我們只要是在 <body> 標籤中加入 <script>標籤即可，在 <script>標籤內部，我們就可以寫 JavaScript 語句了。

<script type="text/javascript">
	console.log('計算1+...+100的結果:')
	sum = 0
	for (var i = 0; i < 100; i++) {
		sum += i
	}
	console.log(sum)
</script>

3.3.2 引用外部 JS

引入 JS，又分為引入網路上的JS 和內部 JS，直接指定 JS 的路徑即可。不過一般不會引入網際網路上的 JS，因為不如直接下載下來，放在本地引用。

<script src="my_internal.js"></script>

這個和我們之前程式設計的庫函式一樣，外部 JS 封裝了許多常用的函式，我們引入相關的 JS 程式碼之後便能夠極大簡化 JS 的開發。其中對於 JS 影響最大的就是 jQuery，它極大簡化了對 HTML 中元素操作，而且非常容易學習，網際網路上海量的 JS 外掛庫大多都是基於 jQuery 開發的。在做前端開發時，熟練使用 jQuery 是十分必要的。

4. 小結

本節簡單介紹了 Web 前端的相關知識，包括 HTML/CSS/JS，這部分內容主要用於後續 Django 開發中的模板層，主要是由 Django 將模板渲染成可視的 HTML 頁面。當然，這部分內容是目前所有 Web 前端開發的基礎，內容也非常豐富，大家也可以多深入學習。

04 Web 相關知識-HTML/CSS/JS

1. HTML

1.1 HTML 編輯器

1.2 HTML 基礎組成部分

1.3 HTML 標籤

1.3.1 標籤屬性

1.3.2 連結元素

1.3.3 容器元素

1.3.4 標題元素

1.3.5 表格元素

1.3.6 列表元素

1.3.7 表單元素

2. CSS

2.1 CSS 樣式

2.1.1 文字樣式

2.1.2 邊框樣式

2.2 CSS 選擇器

2.3 引用 CSS 樣式

3 JS

3.1 JavaScript 簡單介紹

3.2 HTML 中使用 JavaScript

3.2.1 直接使用 JS

3.3.2 引用外部 JS

4. 小結

相關推薦