沈無奇 ·Web 相關(guān)知識 - HTML/CSS/JS
上節(jié)課我們學(xué)習(xí)了如何搭建虛擬開發(fā)環(huán)境，本小節(jié)會將會介紹前端的相關(guān)基礎(chǔ)知識，這些是后面 Django 的模板系統(tǒng)中必要的基礎(chǔ)知識。我們會在開發(fā)的 Django 項目中制作一些簡單的頁面，需要用到這里的內(nèi)容。
1. HTML
HTML 的中文全稱叫做超文本標(biāo)記語言，是創(chuàng)建網(wǎng)頁應(yīng)用的標(biāo)準(zhǔn)語言。超文本的含義大概是指，不僅僅是文本，還可以包括圖片、鏈接、視頻等等 。HTML 語言可以用來描述網(wǎng)頁結(jié)構(gòu)，我們在瀏覽相關(guān)網(wǎng)站時，會接收對應(yīng)網(wǎng)站發(fā)來的 HTML 文檔、CSS 樣式以及 js 腳本，最后瀏覽器對這些靜態(tài)資源進行解釋和渲染，最終形成了我們看到的豐富多彩的頁面。
1.1 HTML 編輯器
最簡單的 HTML 編輯器就是 Window 的記事本了，我們只需要寫一些最基本的 HTML 文本，然后將記事本的后綴名改為 .html 或者 .htm，然后便可以使用瀏覽器打開查看。
當(dāng)然，記事本用起來不太簡潔方便，什么都需要自己手動輸入，開發(fā)效率比較低，而且顯示得也不夠好看。一般而言，作為前端開發(fā)會有自己專門的編輯器或者類似于 Pycharm 這樣功能強大的 IDE。常用的 HTML 的編輯器有 Notepad++ 和 Sublime Text。其中 Sublime Text 可以作為真正的前端開發(fā)工具，而不只是用于寫 HTML。最后還有一個和 Pycharm 同屬于一個公司的專業(yè)前端開發(fā)軟件：WebStorm。
當(dāng)前，高級的軟件是需要付費的，其中就包括了 Sublime Text 和 WebStorm。網(wǎng)上有破解版，也可以購買正規(guī)的激活碼。但不管怎么樣，有了好工具對于我們學(xué)習(xí)和工作的效率是可以大大提高的。
1.2 HTML 基礎(chǔ)組成部分
HTML 的最基本的結(jié)構(gòu)如下：
<html>
<head>
<!-- 這里是頁面的頭部，可以引入的js庫，也可以寫css -->
</head>
<body>
<!-- 頁面的主體內(nèi)容 -->
</body>
<!-- 在下面還可以寫js腳本
<script type="text/javascript">
document.write("Hello World!")
</script>
-->
</html>
可以看到，最簡單的 HTML 就是這樣子的。它的幾個注意點如下：
-
用
<>這樣的包裹起來的叫 HTML 標(biāo)簽或者元素，它是構(gòu)成 HTML 的基礎(chǔ)。后面將重點介紹各種各樣的 HTML 標(biāo)簽，有針對文本的<h1>，<p>，<b>等，有通用標(biāo)簽<div>、<span>等，還有表格、表單標(biāo)簽<table>、<form>； -
<xx>必須要對應(yīng)</xx>收尾；
1.3 HTML 標(biāo)簽
1.3.1 標(biāo)簽屬性
每一個 html 標(biāo)簽都可以定義很多屬性，用來標(biāo)識這個 標(biāo)簽，也方便后面我們使用屬性定位方式找到這個標(biāo)簽。屬性是卸載標(biāo)簽內(nèi)部的，比如下面的 <a> 標(biāo)簽中定義了一個 href 屬性：
<a href="www.baidu.com">百度一下，你就知道</a>
這個是鏈接屬性，當(dāng)點擊這個 百度一下 文本時會跳轉(zhuǎn)到百度的主頁。當(dāng)然標(biāo)簽中比較重要和常用的屬性有：
-
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：規(guī)定元素的行內(nèi)樣式：
<div style="color:red; float:left"></div> -
title：當(dāng)鼠標(biāo)移到該元素上時，顯示的提示信息
<div title="這是提示信息">包含提示的文本</div>
1.3.2 鏈接元素
HTML 中的鏈接元素為 <a>，它能讓我們從一個網(wǎng)頁鏈接到另一個網(wǎng)頁或者錨位置，只需要設(shè)置 href 屬性即可。在互聯(lián)網(wǎng)中各種網(wǎng)站上的鏈接的地址都是用的 <a> 標(biāo)簽。如淘寶網(wǎng)站上的各種商品鏈接：
<a> 元素的兩個重要屬性分別為：
-
href：點擊該元素時，鏈接的地址；
-
target：值有 _blank|_parent|_self|_top，它規(guī)定了跳轉(zhuǎn)到新頁面的位置；
1.3.3 容器元素
HTML 中的容器元素為 <div>，它是一個塊級元素，會自動開啟一個新行，主要是用來固定一塊區(qū)域。
示例：
<div id="node" style="color:#FF0000" class="test">這是一個div容器</div>
1.3.4 標(biāo)題元素
HTML 中的標(biāo)題元素有 <h1>-<h6>，它們規(guī)定了網(wǎng)頁主體或者段落的標(biāo)題，而且是從大到小的順序。
示例：
<h1>這是h1標(biāo)題</h1>
<h2>這是h2標(biāo)題</h2>
<h3>這是h3標(biāo)題</h3>
<h4>這是h4標(biāo)題</h4>
<h5>這是h5標(biāo)題</h5>
<h6>這是h6標(biāo)題</h6>
效果圖：
1.3.5 表格元素
HTML 中 <table> 標(biāo)簽用來在網(wǎng)頁上繪制表格。簡單的 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> 定義表格的內(nèi)容。在 <table> 標(biāo)簽中定義了整個表格的屬性，包括表格寬度為 400px，單元格內(nèi)文字居中顯示，以及單元之間的間距為 1px。此外在第一行的表格中設(shè)置背景顏色為空色，最終得到的結(jié)果圖如下：
1.3.6 列表元素
HTML 中的列表標(biāo)簽有 <ul> 和 <ol>，分別表示無序和有序列表，列表元素的標(biāo)簽有 li。
示例：
<ul>
<li>老虎</li>
<li>獅子</li>
<li>蛇</li>
</ul>
<ol start="20">
<li>老虎</li>
<li>獅子</li>
<li>蛇</li>
</ol>
效果圖：
1.3.7 表單元素
表單元素是網(wǎng)頁布局中非常重要的一個元素。比如我們可以在各種論壇、填寫個人信息、登錄等網(wǎng)頁上看到 <form> 元素。比如慕課網(wǎng)的登錄頁面：
在 <form> 表單中我們會包含許多元素，比如輸入框元素 <input>、按鈕元素 <button> 等等?，F(xiàn)在我們來簡單實現(xiàn)一個登錄表單，示例代碼如下：
<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 元素以及元素對應(yīng)的屬性值，需要在使用的時候去搜索相關(guān)資料。有了這些知識，對網(wǎng)頁會有一個初步的認識，接下來學(xué)習(xí)如何讓靜態(tài)的網(wǎng)頁變得豐富多彩。
2. CSS
HTML 只是負責(zé)繪制網(wǎng)頁的結(jié)構(gòu)，但是想要有像淘寶、京東、小米那樣酷炫的電商頁面，就離不開 CSS 技術(shù)了。CSS 全稱 Cascading Style Sheets，中文名為層疊樣式表。HTML 描繪了網(wǎng)頁結(jié)構(gòu)，但 CSS 樣式定義如何顯示 HTML 元素，放在哪里，什么字體顏色、什么背景顏色，與其他元素間距等等。此外，我們通常會將樣式寫到樣式文件中，這樣可以實現(xiàn)網(wǎng)頁內(nèi)容與表現(xiàn)解耦，極大提升開發(fā)效率。
2.1 CSS 樣式
CSS 的樣式有很多種，比如文本的樣式、容器背景樣式、邊框樣式，每種樣式都涉及不同的屬性以及屬性值。下面簡單介紹文本和邊框的樣式屬性及其用法。
2.1.1 文本樣式
文本的樣式屬性有：
-
文本顏色：color；
-
對齊方式：text-align，值有 left|right|center；
-
文本修飾：text-decoration，屬性值得含義如下：
屬性值 含義 none 定義標(biāo)準(zhǔn)的文本 overline 為文本添加上劃線 line-through 為文本添加刪除線 underline 為文本添加下劃線 -
文本縮進： text-indent，設(shè)置文本首行縮進方式。該屬性值的單位可以是 px、em 以及百分比；
-
行高：line-height，設(shè)置文本行與行之間的空格。
示例代碼：
<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>
<!-- 三段文本分別應(yīng)用三個樣式 -->
<p class="up">這段文本，首行縮進10%，帶下劃線</p>
<p class="lp">這段文本，首行縮進10px, 帶刪除線</p>
<p class="hp">這段文本，無縮進, 行高100px</p>
</div>
</body>
</html
效果圖：
2.1.2 邊框樣式
邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或者多條線。CSS 通過 border 屬性值來設(shè)置邊框的樣式、顏色以及邊框?qū)挾鹊取?/p>
-
邊框樣式：對應(yīng)的屬性為 border-style，用于設(shè)置元素邊框的顯示樣式。下面只列出常用屬性值及其含義；
屬性值 含義 dotted 點狀邊框 dashed 虛線邊框 solid 實線邊框 double 雙實線邊框 groove 3D 凹槽邊框 none 無邊框 -
邊框?qū)挾?/strong>：對應(yīng)的屬性為 border-with，用于設(shè)置元素邊框的顯示寬度；
-
邊框顏色：對應(yīng)的屬性為 border-color，用于設(shè)置元素邊框的顏色；
-
邊框樣式的設(shè)置順序：從邊框方向上來說有上、右、下、左四條邊框。默認上述屬性可以一次設(shè)置所有邊框的樣式，只需要分別寫對應(yīng)四個值就會應(yīng)用到前面的四條邊框上。
示例代碼：
<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">設(shè)置4個邊框</div>
<div class="left-border">設(shè)置左邊框</div>
<div class="bottom-border all-border">設(shè)置下面邊框</div>
</body>
</html
效果圖：
上面的代碼中，我們定義了三個 CSS 樣式，分別作用于三個 <div> 容器，并對這個三個容器的邊框進行了不同的顯示。我們可以單獨設(shè)置某一個邊的邊框樣式，也可以設(shè)置多個 CSS 樣式然后合并使用。這些都讓 CSS 樣式使用起來靈活方便。下面我們會介紹如何通過 CSS 選擇器讓樣式作用于網(wǎng)頁中的指定元素。
2.2 CSS 選擇器
CSS 選擇器決定了對應(yīng) CSS 樣式會被用到網(wǎng)頁中的哪個元素上。CSS 選擇器主要有以下幾種：
-
元素選擇器：通過元素名來定位元素，并將對應(yīng) CSS 樣式用于網(wǎng)頁上所有該元素上；
<style type="text/css"> p { color: red; } </style> ... <body> <div>無樣式作用</div> <p>紅色文本</p> <h4>標(biāo)題文本</h4> <p>有一個紅色文本</p> <div><lable>有無樣式文本</lable></div> </body>示例圖：
這里我們可以看到字體紅色的樣式作用到了所有 <p> 標(biāo)簽中，其他 HTML 標(biāo)簽則沒有應(yīng)用到這樣的樣式。
-
ID 選擇器：ID 選擇器是根據(jù) HTML 元素的 ID 屬性確定對應(yīng)的元素。它的使用語法如下：
#ID { 屬性1: 值1; 屬性2: 值2; ... }示例代碼：
<style type="text/css"> #red-color { color: red; } </style> ... <body> <div>無樣式作用</div> <p id="red-color">紅色文本</p> <h4>標(biāo)題文本</h4> <p>未被選中</p> <div><lable>又無樣式文本</lable></div> </body>效果圖如下，可以看到只有 id 屬性值等于
red-color的元素被選中，然后應(yīng)用對應(yīng)的樣式：
-
類選擇器：類選擇器以 HTML 元素的類屬性來確定元素。語法如下：
.class { 屬性1: 值1; 屬性2: 值2; ... }示例代碼：
<style type="text/css"> .red-color { color: red; } </style> ... <body> <div class="red-color">紅色文本</div> <p>普通文本</p> <h4>標(biāo)題文本</h4> <p>未被選中</p> <div class="red-color"><lable>紅色文本</lable></div> </body>效果圖如下，可以看到只有元素的 class 屬性值為 red-color 時，對應(yīng)的樣式才會被應(yīng)用到該元素上。
-
組合選擇器：組合選擇器有很多種形式，比如元素 + 類組合、元素和元素組合、元素和 ID 組合、類和類組合等等。對應(yīng)具體的選擇規(guī)則需要參考相關(guān)的文檔，這里就不一一說明，我們通過示例代碼來了解下組合選擇器。
<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>標(biāo)題文本</h4> <p class="red-color">p元素作用紅色文本樣式</p> <div><lable>紅色文本</lable></div> </body>
效果圖如下，可以看到 p.red-color 表示該樣式只作用于 p 標(biāo)簽中 class 屬性為 red-color 的標(biāo)簽，其他標(biāo)簽的 class 屬性值等于 red-color 并不會被選中。 p span 指的是在 p 標(biāo)簽內(nèi)的 span 標(biāo)簽，對于這類的標(biāo)簽才會被應(yīng)用其樣式：
- 其他選擇器：CSS 中很多形式的選擇器，比如后代選擇器等等，有非常多的選擇元素的方式。需要大家耐心去學(xué)習(xí)和實踐。
2.3 引用 CSS 樣式
在 HTML 中使用 CSS 樣式可以向前面示例代碼那樣把 CSS 樣式和 HTML 文本寫到同一個 HTML 文件。樣式統(tǒng)一使用 <html> 標(biāo)簽包裹，這樣的叫做內(nèi)部樣式表。但是隨著大型網(wǎng)站復(fù)雜的特效以及多個頁面使用統(tǒng)一的樣式，工程中往往會將 CSS 樣式獨立出來，形成為單獨的樣式文件，文件以 .css 結(jié)尾。這樣我們可以在多個網(wǎng)頁中引入外部樣式文件，實現(xiàn)復(fù)用，可以極大改善工程代碼。這樣的用法是幾乎所有大型網(wǎng)站統(tǒng)一的做法，例如淘寶、小米商城都有大量的使用。引入 CSS 樣式的格式如下：
<head>
<!-- href屬性指定樣式位置 -->
<link href="css/mystyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
...
</style>
</head>
網(wǎng)站示意圖：
3 JS
3.1 JavaScript 簡單介紹
JS 也是一種語言，和 C/C++/Java/Python 類似。真正的瀏覽器的核心除了對 html 元素進行渲染外，還需要提供 JS 引擎，解析并執(zhí)行 JS 腳本。谷歌瀏覽器用 C++ 語言實現(xiàn)了著名的 V8 引擎。我們右鍵可以直接在開發(fā)者工具的 console 面板寫 JS 代碼，看到語句的執(zhí)行輸出，以及語句相應(yīng)返回結(jié)果。
對于 JS 的基礎(chǔ)知識，上手是非?？斓?，限于篇幅就不會展開介紹了。
3.2 HTML 中使用 JavaScript
3.2.1 直接使用 JS
直接在 html 中使用 JS 是十分方便的，我們只要是在 <body> 標(biāo)簽中加入 <script> 標(biāo)簽即可，在 <script> 標(biāo)簽內(nèi)部，我們就可以寫 JavaScript 語句了。
<script type="text/javascript">
console.log('計算1+...+100的結(jié)果:')
sum = 0
for (var i = 0; i < 100; i++) {
sum += i
}
console.log(sum)
</script>
3.3.2 引用外部 JS
引入 JS，又分為引入網(wǎng)絡(luò)上的 JS 和內(nèi)部 JS，直接指定 JS 的路徑即可。不過一般不會引入互聯(lián)網(wǎng)上的 JS，因為不如直接下載下來，放在本地引用。
<script src="my_internal.js"></script>
這個和我們之前編程的庫函數(shù)一樣，外部 JS 封裝了許多常用的函數(shù)，我們引入相關(guān)的 JS 代碼之后便能夠極大簡化 JS 的開發(fā)。其中對于 JS 影響最大的就是 jQuery，它極大簡化了對 HTML 中元素操作，而且非常容易學(xué)習(xí)，互聯(lián)網(wǎng)上海量的 JS 插件庫大多都是基于 jQuery 開發(fā)的 。在做前端開發(fā)時，熟練使用 jQuery 是十分必要的。
4. 小結(jié)
本節(jié)簡單介紹了 Web 前端的相關(guān)知識，包括 HTML/CSS/JS，這部分內(nèi)容主要用于后續(xù) Django 開發(fā)中的模板層，主要是由 Django 將模板渲染成可視的 HTML 頁面。當(dāng)然，這部分內(nèi)容是目前所有 Web 前端開發(fā)的基礎(chǔ)，內(nèi)容也非常豐富，大家也可以多深入學(xué)習(xí)。
下節(jié)預(yù)告
除了 HTML/CSSJS 的知識外，學(xué)習(xí) Web 開發(fā)還需要對 HTTP 協(xié)議有一定的了解，HTTP 協(xié)議同樣是 Web 開發(fā)必備基礎(chǔ)知識，下節(jié)課我們就來學(xué)習(xí)下 HTTP 協(xié)議以及 HTTP 在 Web 開發(fā)中所起到的作用。
不僅如此，下節(jié)課會給給大家進行一個 Web 開發(fā)常見概念的普及，讓大家對 Web 開發(fā)有一個更清晰的了解。
2025 imooc.com All Rights Reserved |