第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

全部開發(fā)者教程

Django 入門教程

課程導(dǎo)學(xué)
Django 慕課教程使用指南
Django開發(fā)實(shí)戰(zhàn)
35 開發(fā)實(shí)戰(zhàn)
首頁 慕課教程 Django 入門教程 Django 入門教程 04 Web 相關(guān)知識(shí)-HTML/CSS/JS
沈無奇 · 更新于 2021-01-12

Web 相關(guān)知識(shí) - HTML/CSS/JS

上節(jié)課我們學(xué)習(xí)了如何搭建虛擬開發(fā)環(huán)境，本小節(jié)會(huì)將會(huì)介紹前端的相關(guān)基礎(chǔ)知識(shí)，這些是后面 Django 的模板系統(tǒng)中必要的基礎(chǔ)知識(shí)。我們會(huì)在開發(fā)的 Django 項(xiàng)目中制作一些簡(jiǎn)單的頁面，需要用到這里的內(nèi)容。

1. HTML

HTML 的中文全稱叫做超文本標(biāo)記語言，是創(chuàng)建網(wǎng)頁應(yīng)用的標(biāo)準(zhǔn)語言。超文本的含義大概是指，不僅僅是文本，還可以包括圖片、鏈接、視頻等等 。HTML 語言可以用來描述網(wǎng)頁結(jié)構(gòu)，我們?cè)跒g覽相關(guān)網(wǎng)站時(shí)，會(huì)接收對(duì)應(yīng)網(wǎng)站發(fā)來的 HTML 文檔、CSS 樣式以及 js 腳本，最后瀏覽器對(duì)這些靜態(tài)資源進(jìn)行解釋和渲染，最終形成了我們看到的豐富多彩的頁面。

1.1 HTML 編輯器

最簡(jiǎn)單的 HTML 編輯器就是 Window 的記事本了，我們只需要寫一些最基本的 HTML 文本，然后將記事本的后綴名改為 .html 或者 .htm，然后便可以使用瀏覽器打開查看。

當(dāng)然，記事本用起來不太簡(jiǎn)潔方便，什么都需要自己手動(dòng)輸入，開發(fā)效率比較低，而且顯示得也不夠好看。一般而言，作為前端開發(fā)會(huì)有自己專門的編輯器或者類似于 Pycharm 這樣功能強(qiáng)大的 IDE。常用的 HTML 的編輯器有 Notepad++ 和 Sublime Text。其中 Sublime Text 可以作為真正的前端開發(fā)工具，而不只是用于寫 HTML。最后還有一個(gè)和 Pycharm 同屬于一個(gè)公司的專業(yè)前端開發(fā)軟件：WebStorm。

當(dāng)前，高級(jí)的軟件是需要付費(fèi)的，其中就包括了 Sublime Text 和 WebStorm。網(wǎng)上有破解版，也可以購(gòu)買正規(guī)的激活碼。但不管怎么樣，有了好工具對(duì)于我們學(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>

可以看到，最簡(jiǎn)單的 HTML 就是這樣子的。它的幾個(gè)注意點(diǎn)如下：

  • 注釋使用 <!-- -->；

  • 用 <> 這樣的包裹起來的叫 HTML 標(biāo)簽或者元素，它是構(gòu)成 HTML 的基礎(chǔ)。后面將重點(diǎn)介紹各種各樣的 HTML 標(biāo)簽，有針對(duì)文本的 <h1>，<p>，<b> 等，有通用標(biāo)簽 <div>、<span> 等，還有表格、表單標(biāo)簽 <table>、<form>；

  • <xx> 必須要對(duì)應(yīng) </xx> 收尾；

1.3 HTML 標(biāo)簽

1.3.1 標(biāo)簽屬性

每一個(gè) html 標(biāo)簽都可以定義很多屬性，用來標(biāo)識(shí)這個(gè) 標(biāo)簽，也方便后面我們使用屬性定位方式找到這個(gè)標(biāo)簽。屬性是卸載標(biāo)簽內(nèi)部的，比如下面的 <a> 標(biāo)簽中定義了一個(gè) href 屬性：

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

這個(gè)是鏈接屬性，當(dāng)點(diǎn)擊這個(gè) 百度一下 文本時(shí)會(huì)跳轉(zhuǎn)到百度的主頁。當(dāng)然標(biāo)簽中比較重要和常用的屬性有：

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

  • class：給元素添加一個(gè)或者多個(gè)樣式，多個(gè)樣式使用空格隔開，比如下面定義了兩個(gè) class 樣式，div 元素中包含這兩個(gè)樣式：

    ...
<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)移到該元素上時(shí)，顯示的提示信息

    <div title="這是提示信息">包含提示的文本</div>

1.3.2 鏈接元素

HTML 中的鏈接元素為 <a>，它能讓我們從一個(gè)網(wǎng)頁鏈接到另一個(gè)網(wǎng)頁或者錨位置，只需要設(shè)置 href 屬性即可。在互聯(lián)網(wǎng)中各種網(wǎng)站上的鏈接的地址都是用的 <a> 標(biāo)簽。如淘寶網(wǎng)站上的各種商品鏈接：

淘寶首頁商品鏈接

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

  • href：點(diǎn)擊該元素時(shí)，鏈接的地址；

  • target：值有 _blank|_parent|_self|_top，它規(guī)定了跳轉(zhuǎn)到新頁面的位置；

1.3.3 容器元素

HTML 中的容器元素為 <div>，它是一個(gè)塊級(jí)元素，會(huì)自動(dòng)開啟一個(gè)新行，主要是用來固定一塊區(qū)域。

示例：

<div id="node" style="color:#FF0000" class="test">這是一個(gè)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>

效果圖：

圖片描述

實(shí)例效果圖

1.3.5 表格元素

HTML 中 <table> 標(biāo)簽用來在網(wǎng)頁上繪制表格。簡(jiǎn)單的 HTML 表格由 table 元素以及一個(gè)或多個(gè) 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)簽中定義了整個(gè)表格的屬性，包括表格寬度為 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)頁布局中非常重要的一個(gè)元素。比如我們可以在各種論壇、填寫個(gè)人信息、登錄等網(wǎng)頁上看到 <form> 元素。比如慕課網(wǎng)的登錄頁面：

圖片描述

慕課網(wǎng)登錄頁面示例

在 <form> 表單中我們會(huì)包含許多元素，比如輸入框元素 <input>、按鈕元素 <button> 等等。現(xiàn)在我們來簡(jiǎn)單實(shí)現(xiàn)一個(gè)登錄表單，示例代碼如下：

<form>
<div><span>賬號(hào)：</span><input type="text" style="margin-bottom: 10px" placeholder="請(qǐng)輸入登錄手機(jī)號(hào)/郵箱" /></div>
<div><span>密碼：</span><input type="password" style="margin-bottom: 10px" placeholder="請(qǐng)輸入密碼" /></div>
<div><label style="float: left;font-size: 10px; color: grey"><input type="checkbox" checked="checked"/>7天自動(dòng)登錄</label></div>
</form>

效果圖：

圖片描述

登錄注冊(cè)效果圖

除了上面這些常用元素之外，還有許多其他的 HTML 元素以及元素對(duì)應(yīng)的屬性值，需要在使用的時(shí)候去搜索相關(guān)資料。有了這些知識(shí)，對(duì)網(wǎng)頁會(huì)有一個(gè)初步的認(rèn)識(shí)，接下來學(xué)習(xí)如何讓靜態(tài)的網(wǎng)頁變得豐富多彩。

2. CSS

HTML 只是負(fù)責(zé)繪制網(wǎng)頁的結(jié)構(gòu)，但是想要有像淘寶、京東、小米那樣酷炫的電商頁面，就離不開 CSS 技術(shù)了。CSS 全稱 Cascading Style Sheets，中文名為層疊樣式表。HTML 描繪了網(wǎng)頁結(jié)構(gòu)，但 CSS 樣式定義如何顯示 HTML 元素，放在哪里，什么字體顏色、什么背景顏色，與其他元素間距等等。此外，我們通常會(huì)將樣式寫到樣式文件中，這樣可以實(shí)現(xiàn)網(wǎng)頁內(nèi)容與表現(xiàn)解耦，極大提升開發(fā)效率。

2.1 CSS 樣式

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

2.1.1 文本樣式

文本的樣式屬性有：

  • 文本顏色：color；

  • 對(duì)齊方式：text-align，值有 left|right|center；

  • 文本修飾：text-decoration，屬性值得含義如下：

    屬性值 含義
    none 定義標(biāo)準(zhǔn)的文本
    overline 為文本添加上劃線
    line-through 為文本添加刪除線
    underline 為文本添加下劃線

  • 文本縮進(jìn)： text-indent，設(shè)置文本首行縮進(jìn)方式。該屬性值的單位可以是 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)用三個(gè)樣式 -->    
<p class="up">這段文本，首行縮進(jìn)10%，帶下劃線</p>
<p class="lp">這段文本，首行縮進(jìn)10px, 帶刪除線</p>
<p class="hp">這段文本，無縮進(jìn), 行高100px</p>
</div>
</body>
</html

效果圖：

圖片描述

文本樣式效果圖

2.1.2 邊框樣式

邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或者多條線。CSS 通過 border 屬性值來設(shè)置邊框的樣式、顏色以及邊框?qū)挾鹊取?/p>

  • 邊框樣式：對(duì)應(yīng)的屬性為 border-style，用于設(shè)置元素邊框的顯示樣式。下面只列出常用屬性值及其含義；

    屬性值 含義
    dotted 點(diǎn)狀邊框
    dashed 虛線邊框
    solid 實(shí)線邊框
    double 雙實(shí)線邊框
    groove 3D 凹槽邊框
    none 無邊框

  • 邊框?qū)挾?/strong>：對(duì)應(yīng)的屬性為 border-with，用于設(shè)置元素邊框的顯示寬度；

  • 邊框顏色：對(duì)應(yīng)的屬性為 border-color，用于設(shè)置元素邊框的顏色；

  • 邊框樣式的設(shè)置順序：從邊框方向上來說有上、右、下、左四條邊框。默認(rèn)上述屬性可以一次設(shè)置所有邊框的樣式，只需要分別寫對(duì)應(yīng)四個(gè)值就會(huì)應(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個(gè)邊框</div>
<div class="left-border">設(shè)置左邊框</div>
<div class="bottom-border all-border">設(shè)置下面邊框</div>
</body>
</html

效果圖：

圖片描述

邊框樣式效果圖

上面的代碼中，我們定義了三個(gè) CSS 樣式，分別作用于三個(gè) <div> 容器，并對(duì)這個(gè)三個(gè)容器的邊框進(jìn)行了不同的顯示。我們可以單獨(dú)設(shè)置某一個(gè)邊的邊框樣式，也可以設(shè)置多個(gè) CSS 樣式然后合并使用。這些都讓 CSS 樣式使用起來靈活方便。下面我們會(huì)介紹如何通過 CSS 選擇器讓樣式作用于網(wǎng)頁中的指定元素。

2.2 CSS 選擇器

CSS 選擇器決定了對(duì)應(yīng) CSS 樣式會(huì)被用到網(wǎng)頁中的哪個(gè)元素上。CSS 選擇器主要有以下幾種：

  • 元素選擇器：通過元素名來定位元素，并將對(duì)應(yīng) CSS 樣式用于網(wǎng)頁上所有該元素上；

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

<body>
   <div>無樣式作用</div>
   <p>紅色文本</p>
   <h4>標(biāo)題文本</h4>
   <p>有一個(gè)紅色文本</p>
   <div><lable>有無樣式文本</lable></div>
</body>

    示例圖：

圖片描述

元素選擇器效果圖

這里我們可以看到字體紅色的樣式作用到了所有 <p> 標(biāo)簽中，其他 HTML 標(biāo)簽則沒有應(yīng)用到這樣的樣式。

  • ID 選擇器：ID 選擇器是根據(jù) HTML 元素的 ID 屬性確定對(duì)應(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)用對(duì)應(yīng)的樣式：

圖片描述

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>標(biāo)題文本</h4>
 <p>未被選中</p>
 <div class="red-color"><lable>紅色文本</lable></div>
</body>

    效果圖如下，可以看到只有元素的 class 屬性值為 red-color 時(shí)，對(duì)應(yīng)的樣式才會(huì)被應(yīng)用到該元素上。

圖片描述

類選擇器效果圖

  • 組合選擇器：組合選擇器有很多種形式，比如元素 + 類組合、元素和元素組合、元素和 ID 組合、類和類組合等等。對(duì)應(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 并不會(huì)被選中。 p span 指的是在 p 標(biāo)簽內(nèi)的 span 標(biāo)簽，對(duì)于這類的標(biāo)簽才會(huì)被應(yīng)用其樣式：

圖片描述

組合選擇器效果圖
  • 其他選擇器：CSS 中很多形式的選擇器，比如后代選擇器等等，有非常多的選擇元素的方式。需要大家耐心去學(xué)習(xí)和實(shí)踐。

2.3 引用 CSS 樣式

在 HTML 中使用 CSS 樣式可以向前面示例代碼那樣把 CSS 樣式和 HTML 文本寫到同一個(gè) HTML 文件。樣式統(tǒng)一使用 <html> 標(biāo)簽包裹，這樣的叫做內(nèi)部樣式表。但是隨著大型網(wǎng)站復(fù)雜的特效以及多個(gè)頁面使用統(tǒng)一的樣式，工程中往往會(huì)將 CSS 樣式獨(dú)立出來，形成為單獨(dú)的樣式文件，文件以 .css 結(jié)尾。這樣我們可以在多個(gè)網(wǎng)頁中引入外部樣式文件，實(shí)現(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)站示意圖：

圖片描述

網(wǎng)站示意圖

3 JS

3.1 JavaScript 簡(jiǎn)單介紹

JS 也是一種語言，和 C/C++/Java/Python 類似。真正的瀏覽器的核心除了對(duì) html 元素進(jìn)行渲染外，還需要提供 JS 引擎，解析并執(zhí)行 JS 腳本。谷歌瀏覽器用 C++ 語言實(shí)現(xiàn)了著名的 V8 引擎。我們右鍵可以直接在開發(fā)者工具的 console 面板寫 JS 代碼，看到語句的執(zhí)行輸出，以及語句相應(yīng)返回結(jié)果。

圖片描述

開發(fā)者工具下執(zhí)行 JS 代碼

對(duì)于 JS 的基礎(chǔ)知識(shí)，上手是非?？斓?，限于篇幅就不會(huì)展開介紹了。

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('計(jì)算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 的路徑即可。不過一般不會(huì)引入互聯(lián)網(wǎng)上的 JS，因?yàn)椴蝗缰苯酉螺d下來，放在本地引用。

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

這個(gè)和我們之前編程的庫函數(shù)一樣，外部 JS 封裝了許多常用的函數(shù)，我們引入相關(guān)的 JS 代碼之后便能夠極大簡(jiǎn)化 JS 的開發(fā)。其中對(duì)于 JS 影響最大的就是 jQuery，它極大簡(jiǎn)化了對(duì) HTML 中元素操作，而且非常容易學(xué)習(xí)，互聯(lián)網(wǎng)上海量的 JS 插件庫大多都是基于 jQuery 開發(fā)的 。在做前端開發(fā)時(shí)，熟練使用 jQuery 是十分必要的。

4. 小結(jié)

本節(jié)簡(jiǎn)單介紹了 Web 前端的相關(guān)知識(shí)，包括 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 的知識(shí)外，學(xué)習(xí) Web 開發(fā)還需要對(duì) HTTP 協(xié)議有一定的了解，HTTP 協(xié)議同樣是 Web 開發(fā)必備基礎(chǔ)知識(shí)，下節(jié)課我們就來學(xué)習(xí)下 HTTP 協(xié)議以及 HTTP 在 Web 開發(fā)中所起到的作用。

不僅如此，下節(jié)課會(huì)給給大家進(jìn)行一個(gè) Web 開發(fā)常見概念的普及，讓大家對(duì) Web 開發(fā)有一個(gè)更清晰的了解。