Pycharm開發Django常用的模板標籤
1 HTML入門
1.1初識HTML
1.1.1HTML概述
-
網頁的構成
- HTML：通常用來定義網頁內容的含義和基本結構。
- CSS：通常用來描述網頁的表現與展示效果。
- JavaScript：通常用來執行網頁的功能與行為。（例如商場的輪播圖）
-
HTML（超文字標記語言——HyperText Markup Language）
所謂
超文字Hypertext，是指連線單個或者多個網站間的網頁的連結。我們通過連結，就能訪問網際網路中的內容。所謂
標記Markup，即標籤，是用來註明文字，圖片等內容，以便於在瀏覽器中顯示，例如<head>,<body>等。
1.1.2HTML的組成
HTML是由一系列的元素（Element）組成的，而元素是通過標籤創建出來的。
-
標籤：
標籤（tage）用於設定文字樣式、圖片樣式、超連結樣式等。例如：
<h1>今天是個神奇的一天</h1> <!--<h1>是一級標題標籤-->
-
屬性：
-
標籤中可以擁有屬性，屬性為標籤提供了更多的資訊。
-
屬性只能新增到開始標籤中。格式為：屬性名=屬性值 （
align屬性表示水平對齊方式，我們可以賦值為center表示 居中 。）例如：
<h1 align='center'>今天是神奇的一天</h1>
-
1.2入門案例
1.2.1程式碼及效果
1.2.2頁面介紹
-
<!DOCTYPE html>: 宣告文件型別。規定了HTML頁面必須遵從的良好規則，從HTML5後，<!DOCTYPE html>是最短的有效的文件宣告。 -
<html>：這個標籤包裹了整個完整的頁面，是一個根元素（頂級元素）。其他所有元素必須是此元素的後代，每篇HTML文件只有一個根元素。 -
<head>：這個標籤是一個容器，它包含了所有你想包含在HTML頁面中但不想在HTML頁面中顯示的內容。這些內容包括你想在搜尋結果中出現的關鍵字和頁面描述，CSS樣式，字符集宣告等等。以後的章節能學到更多關於<head>元素的內容。目前主要了解兩個標籤：
-
<meta charset="utf-8">：這個標籤是頁面的元資料資訊，設定文件使用utf-8字符集編碼，utf-8字符集包含了人類大部分的文字。基本上他能識別你放上去的所有文字內容，能夠避免頁面亂碼問題。 -
<title>：這個標籤定義文件標題，位置出現在瀏覽器標籤上，而不是頁面正文中。在收藏頁面時，它可用來描述頁面。
<body>：包含了文件內容，你訪問頁面時所有顯示在頁面上的文字，圖片，音訊，遊戲等等
1.2.3小結
-
HTML是一種標記語言，用來組織頁面，使用元素和屬性。
-
這個元素的主要部分有：
- 元素（Element）：開始標籤、結束標籤與內容相結合，便是一個完整的元素。
- 開始標籤（Opening tag）：包含元素的名稱（本例為 p），被左、右角括號所包圍。表示元素從這裡開始或者開始起作用 —— 在本例中即段落由此開始。
- 結束標籤（Closing tag）：與開始標籤相似，只是其在元素名之前包含了一個斜槓。這表示著元素的結尾 —— 在本例中即段落在此結束。初學者常常會犯忘記包含結束標籤的錯誤，這可能會產生一些奇怪的結果。
- 內容（Content）：元素的內容，本例中就是所輸入的文字本身。
- 屬性（Attribute）：標籤的附加資訊。
- 在學習HTML時，要抓住兩個方面：
- 掌握標籤所代表的含義。
- 掌握在標籤中加入的屬性的含義。
2 基本語法
2.1關於註釋
- 註釋用來解釋說明程式，像大多數語言一樣HTML也有自己的註釋
- 格式：
- IDEA中將程式碼註釋快捷方式：CTRL+shift+/
2.2關於標籤
2.2.1標籤的分類
- 開始和結束標籤：
<h1></h1><p></p> - 自閉和標籤：
<br/><hr/>
2.2.2空元素
不是所有元素都擁有開始標籤，內容和結束標記。一些元素只有一個標籤，叫做空元素。它是在開始標籤中進行關閉的。例子如下：
第一行文件<br/>
第二行文件<br/>
2.2.3巢狀元素
你也可以把元素放到其它元素之中——這被稱作巢狀。比如，我們想要強調第一個，可以將<b>標籤包圍第一個，這樣b標籤就是巢狀在了p標籤中：
<p>這是<b>第一個</b>頁面</p>
2.2.4塊級元素和行內元素
1）概念
在HTML中有兩種重要元素類別，塊級元素和內聯元素。
-
塊級元素：
獨佔一行。塊級元素（block）在頁面中以塊的形式展現。相對於其前面的內容它會出現在新的一行，其後的內容也會被擠到下一行展現。比如
<p>，<hr>，<li>，<div>等。 -
行內元素
行內顯示。行內元素不會導致換行。通常出現在塊級元素中並環繞文件內容的一小部分，而不是一整個段落或者一組內容。比如
<b>，<a>，<i>，<span>等。注意：一個塊級元素不會被巢狀進內聯元素中，但可以巢狀在其它塊級元素中。
2）div和span
-
<div>是一個通用的內容容器，並沒有任何特殊語義。它可以被用來對其它元素進行分組，一般用於樣式化相關的需求。它是一個塊級元素。 -
<span>是短語內容的通用行內容器，並沒有任何特殊語義。它可以被用來編組元素以達到某種樣式。它是一個行內元素。注意：div和span在頁面佈局中有重要作用。
2.3關於屬性
標籤屬性，主要用於拓展標籤。屬性包含元素的額外資訊，這些資訊不會出現在實際的內容中。但是可以改變標籤的一些行為或者提供資料，屬性總是以name = value的格式展現。
-
屬性名：同一個標籤中，屬性名不得重複。
-
大小寫：屬性和屬性值對大小寫不敏感。不過W3C標準中，推薦使用小寫的屬性/屬性值。
-
引號：雙引號是最常用的，不過使用單引號也沒有問題
-
常用屬性：
| 屬性名 | 作用 |
|---|---|
| class | 定義元素類名，用來選擇和訪問特定的元素 |
| id | 定義元素唯一識別符號，在整個文件中必須是唯一的 |
| name | 定義元素名稱，可以用於提交伺服器的表單欄位 |
| value | 定義在元素內顯示的預設值 |
| style | 定義CSS樣式，這些樣式會覆蓋之前設定的樣式 |
2.4關於特殊字元
在HTML中，字元 <, >,",' 和 & 是特殊字元. 它們是HTML語法自身的一部分, 那麼你如何將這些字元包含進你的文字中呢
| 原義字元 | 等價字元引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
| 空格 | |
NBSP：“Non-Breaking Space”的縮寫在前面加&後加；時表示一個“空格”
不打破空間上的程式和文件的空間攻擊其網站
3 HTML案例-新聞文字
3.1 案例效果
顯示新聞文字。
3.2 案例分析
要想完成1.要先完成頁面佈局2.填充文字樣式
3.2.1 div樣式分析
文字由幾部分構成，我們可以使用div將頁面分割佈局。在head標籤中，通過style標籤加入樣式。
-
樣式格式
<style> 標籤名{ 屬性名1：屬性值1 【屬性值2 屬性值3 ...】; 屬性名2：屬性值2； 屬性名3：屬性值3； } </style> -
例如：
<style> div{ /*顯示邊框 soild（實邊）*/ border:1px soild red; /*寬度佔螢幕 60%*/ width:60%; /*高度佔500畫素*/ height:500px; /*邊框外邊距 距離瀏覽器邊距*/ margin:auto; } </style>【提示】
為了佈局方便，我們通常可以先設定邊框的樣式，進行佈局。結束後，再去掉邊框，直觀展示完整介面。
3.2.2 文字標籤
使用文字內容標籤設定文字基本樣式。
| 標籤名 | 作用 |
|---|---|
| p | 表示文字的一個段落 |
| h | 表示文件標題，<h1>–<h6> ，呈現了六個不同的級別的標題，<h1> 級別最高，而 <h6> 級別最低 |
| hr | 表示段落級元素之間的主題轉換，一般顯示為水平線 |
| li | 表示列表裡的條目。 |
| ul | 表示一個無序列表，可含多個元素，無編號顯示。 |
| ol | 表示一個有序列表，通常渲染為有帶編號的列表 |
| em | 表示文字著重，一般用斜體顯示 |
| strong | 表示文字重要，一般用粗體顯示 |
| font | 表示字型，可以設定樣式（已過時） |
| i | 表示斜體 |
| b | 表示加粗文字 |
- 在標籤內加入屬性控制樣式
<!--
無序列表<ul>
屬性：type="列表樣式"(disc實心圓點 circle空心圓點 square方形塊)
列表項：<li>
-->
<ul type="circl">
<li>javaEE</li>
<li>HTML</li>
</ul>
示例顯示：
<!--
有序列表：<ol>
屬性：type="列表樣式"(1數字 A或者a字母 I或i羅馬數字類 start--起始位置)
列表項：<li>
-->
<ol type="I">
<li>列表傳播</li>
<li>嘟嘟嘟</li>
</ol>
示例顯示：
3.3 實現步驟
- 建立初始頁面。
- 使用div標籤劃分區域（標題，作者，副標題，正文），設定div樣式。
- 編輯正文。
- 使用h1標籤加入標題。
- 使用em標籤加入作者資訊。
- 使用hr標籤加入分割線。
- 使用h3標籤加入副標題。
- 使用p標籤加入正文。
- 使用ol標籤，li標籤加入列表資訊。
- 使用strong標籤，加入文字強調效果。
<style> div{ width:60%; margin:auto; }</style><body> /*一級標題*/ <div><h1>......</h1></div> /*作者資訊*/ <div> <em><font color="gray" size="4">........</font><em> <hr> </div> /*三級標題*/ <div><h3>..........</h3></div> /*正文*/ <div> <p>.......</p> <p>....... <ol type="1"> <li>.......</li> <li>.......</li> <li>.......</li> </ol> </p> <p>.......</p> <p><b>.....</b>......</p> <p><b>.....<b>.......</p> <p><b>.....<b>.......</p> <p>...................</p> </div> </body>
4 HTML案例-頭條頁面
4.1 案例效果
4.2 案例分析
4.2.1 div佈局
-
div的class值
對
標籤加class屬性來控制div的樣式。首先編寫三個div，設定邊框樣式
<style> div{ border: 1px solid blue;}</style><div >left</div><div >center</div><div>right</div>
使用class的值，格式：
.class值{ 屬性名:屬性值;}<標籤名 class="class值"> 提示: class是自定義的值
所以，使用class屬性值，可以幫助我們區分div，更加精確的設定標籤的樣式。
2）浮動佈局和清除
主體部分分為三列，而div是獨佔一行的，所以想要使用div佈局，就還需要加入浮動 屬性。
-
概念
float：指定一個元素應沿其容器的左側或右側放置，允許文字或者內聯元素環繞它，該元素從網頁的正常流動中移除，其他部分保持正常文件流順序。
格式：
<!-- 加入浮動 -->float：none；不浮動float：left；左浮動float：right；右浮動<!-- 清除浮動 -->clear：both；清除兩側浮動，此元素不再收浮動元素佈局影響。
- 加入三部分div
<div class="left">left</div><div class="center">center</div><div class="right">right</div>
- 浮動佈局
.left{ width: 20%; float: left; } .center{ width: 59%; float: left; } .right{ width: 20%; float: left; }
至此完成左中右三部分的佈局。
- 加入
footer部分
.footer{ border: 5px solid blue; } <div class="footer">footer</div>
發現藍色footer的div，延續正常文件流佈局，擺放在navbar的下方，與浮動元素重疊。想要清除浮動影響，所以要設定清除浮動屬性clear。
.footer{ border: 5px solid blue; clear: both; } <div class="footer">footer</div>
- 設定
center
增加center 高度，完成基本的佈局效果。
.center{ width: 59%; float: left; height: 600px; }
4.2.2 背景設定
<style> div{ background-color:black; }</style>
4.2.3 圖片標籤
| 標籤名 | 作用 | 備註 |
|---|---|---|
| img | 可以顯示一張圖片(本地或網路) | src屬性，這是一個必需的屬性，表示圖片的地址。 |
其他屬性：
| 屬性名 | 作用 | 備註 |
|---|---|---|
| title | 滑鼠懸停（hover）時顯示文字。 | |
| alt | 圖形不顯示時的替換文字。 | |
| height | 影象的高度。 | |
| width | 影象的寬度。 |
<img src="../img/ad1.jpg">(自閉和 ../是指當檔案不在一個層時退回到上一級)
4.2.4 超連結
| 標籤名 | 作用 | 備註 |
|---|---|---|
| a | 表示超連結。 | href屬性，表示超連結指向的URL地址。（可以是網路中的地址也可以是當前專案中其它頁面地址） |
| 屬性名 | 作用 |
|---|---|
| target | 頁面的開啟方式(_self當前頁 _blank新標籤頁)。 |
去掉下劃線
根據某些樣式的佈局需求，去除下劃線更為美觀並且可以顯示顏色。
a { text-decoration:none; // none 表示不顯示 color:black;}
滑鼠懸浮樣式
a:hover{color:red;}
超連結也可以巢狀使用：
<a href="地址" target="_blank"><img src="../img/p1.jpg">巢狀使用</a>
4.3 使用標籤
- 使用div標籤，設定佈局，背景和浮動等。
- 基本文字標籤
- 圖片標籤
- 超連結標籤
4.4 實現步驟
- 建立初始頁面，拷貝圖片等素材。
- 整體佈局。
- 實現頂部條（圖片）。
- 實現導航條（圖片）。
- 實現左側分享區域（圖片）。
- 實現中間正文區域（文字+圖片）。
- 實現右側廣告區域（圖片）。
- 實現底部頁尾（連結）。
4.4.1 頂部條
<div><img src="../img/p1.jpg" width="100%"></div>
4.4.2 實現導航條
<div><img src="../img/p1.jpg" width="100%"></div>
4.4.3實現中部正文
HTML程式碼
<div class="center"> <div > <h1>支付寶特權福利！芝麻分600以上使用者驚喜，網友：幸福來得突然？</h1> </div> <div> <font color="gray" size="2"> <em> 作者 2019-11-11 11:11:11</em></font> <br/> <hr/> </div> <div> <h3>支付寶特權福利！芝麻分600以上使用者驚喜，網友：幸福來得突然？</h3> </div> <div> <p> 這些年，馬雲的風頭正盛，但是上個月他毅然辭去了阿里巴巴的職務。而馬雲所做的很多事情也的確改變了這個世界，特別是在移動支付領域，更是走在了世界的前列。如今中國的移動支付已經成為老百姓的必備，支付寶對中國社會的變革都帶來了深遠的影響。不過馬雲依然沒有滿足，他認為移動網際網路將會成為人類的基礎設施，而且這裡面的機會和各種挑戰還非常多。 </p> <p> 支付寶的誕生就是為了解決淘寶網的客戶們的買賣問題，而隨著支付寶的使用者的不斷增加，支付寶也推出了一系列的附加功能。比如生活繳費、轉賬匯款、還信用卡、 車主服務、公益理財等，往簡單的說，支付寶既可以滿足人們的日常生活，又可以利用芝麻信用進行資金週轉服務。除了芝麻分能夠進行週轉以外，網際網路信用體系 下的產品多多，我們對比以下幾個產品看看區別: <ol type="1"> <li> 螞蟻借唄，芝麻分600並且受到邀請開通福利，這個就是支付寶貸款，直接秒殺了銀行貸款和線下金融公司，是現在支付寶使用者使用最多的。 </li> <li> 微粒貸：於2015年上線，主要面向QQ和微信徵信極好的使用者而推出，受到邀請才能申請開通，額度最高有30萬，難度較大 </li> <li> 螞蟻巴士：這個在微信 螞蟻巴士 公眾平臺申請,對於信用分要求530分以上才可以,額度1-30萬不等，目前非常火爆 </li> </ol> <img src="../img/1.jpg" /> </p> <p> 說起支付寶中的芝麻信用功能，相信更是受到了許多人的推崇，因為隨著自己使用的不斷增多，信用分會慢慢提高，而達到了一個階段，就可以獲得許多的福利。而當 我們的芝麻信用分可以達到600分以上的時候，會有令我們想象不到的驚喜，接下來就讓我們一起來看看，具體都有哪些驚喜吧。 </p> <p> <strong>一、芝麻分600以上福利之信用購。</strong> 網購相信大家都不陌生，但是很多時候，網購都有一個通病，就是沒辦法試用，導致很多人買了很多自己不喜歡的東西。但是隻要你的支付寶芝麻分在650及以上，就能立馬享有0元下單，收到貨使用滿意了再進行付款。還能享用美食的專屬優惠，是不是很耐斯 </p> <p> <strong>二、芝麻分600以上福利之信用免押。</strong>芝麻信用與木鳥短租聯合推出信用住宿服務，芝麻分600及以上的使用者可享受免押入住特權。木鳥短租擁有全國50萬套房源，是國內領先的短租民宿預訂平臺。包括大家知道的飛豬信用住，大部分酒店可以免押金入住，離店再交錢。 </p> <img src="../img/2.jpg" /> <p> <strong> 三、芝麻分600以上福利之國際駕照。</strong>我們經常聽說的可能只是中國駕照，但現在芝麻分已經應用到了國際領域，只要你的芝麻分夠550就可以免費辦理國際駕照，也有不少人非常佩服馬雲，一個簡單的芝麻分居然有如此大的功能，也從側面反應出來馬雲在國際上的地位，這個國際駕照是由紐西蘭、德國、澳大利亞聯合認證，可以在全球200多個國家通行，相信大家一定都有一個自駕全球的夢想吧，而現在支付寶就給了你一把鑰匙，剩下的就你自己搞定了！有沒有想帶著你的女神來一次浪漫之旅呢？ </p> <p> 隨著網際網路對我們生活的改變越來越大，信用這一詞也被大家推上風口浪尖，不論是生活出行，還是其他的網際網路服務，與信用體系已經密不可分了，馬雲當初說道，找老婆需要拼芝麻分，如今似乎也要成為現實，那麼你們的芝麻分有多少了呢？ </p> </div></div>
樣式程式碼
.center { width: 60%; /*最後去除邊框寬度恢復為60%*/ float: left; }
4.4.4 實現右側廣告
HTML程式碼
<div class="right"> <div> <img src="../img/ad1.jpg" > </div> <div > <img src="../img/ad2.jpg" > </div> <div> <img src="../img/ad3.jpg" > </div> <div > <img src="../img/ad1.jpg" > </div> <div > <img src="../img/ad2.jpg" > </div> <div > <img src="../img/ad3.jpg" > </div></div>
圖片程式碼中的png和jpg區別
png:作為GIF的無專利替代品開發，用於無失真壓縮和在web上顯示影象。
JPEG：是在world wide web及其他聯機服務上常用的一種格式，用於顯示超文字標記語言（HTML）文件中的照片和其他連續色調影象。
效果如下：
4.4.5實現底部頁尾
HTML程式碼
<div class="footer"> <a href="#">關於黑馬 </a> <a href="#">幫助中心 </a> <a href="#">開放平臺 </a> <a href="#">誠聘英才 </a> <a href="#">聯絡我們 </a> <a href="#">法律宣告 </a> <a href="#">隱私政策 </a> <a href="#">智慧財產權 </a> <a href="#">廉正舉報 </a></div>
是不進行跳轉
樣式程式碼
.footer { clear: both; background-color: cornflowerblue; text-align: center; } a{ text-decoration: none; color: white; }
5 HTML案例-登入頁面
5.1 案例效果
5.2 案例分析
5.2.1 背景圖片
background:url("");<！--複合標籤既可表示背景顏色，也可表示圖片-->
5.2.2 表單標籤
| 標籤名 | 作用 | 備註 |
|---|---|---|
| form | 表示表單，是用來收集使用者輸入資訊並向 Web 伺服器提交的一個容器 |
舉例：
<form > //表單元素</form>
表單的屬性
| 屬性名 | 作用 | 備註 |
|---|---|---|
| action | 處理此表單資訊的Web伺服器的URL地址（提交路徑） | |
| method | 提交此表單資訊到Web伺服器的方式 | 可能的值有get和post，預設為get |
| autocomplete | 自動補全，指示表單元素是否能夠擁有一個預設值，配合input標籤使用 | HTML5 |
號可以用來表示空路徑。
GET與POST說明：
post：指的是 HTTP POST 方法；表單資料會包含在表單體內然後傳送給伺服器。（位址列中不可見）
get：指的是 HTTP GET 方法；表單資料會附加在 action 屬性的URI中，並以 '?' 作為分隔符，然後這樣得到的 URI 再發送給伺服器。（位址列可見）
GET方式舉例：
GET與POST對比：
| 位址列可見 | 資料安全 | 資料大小 | |
|---|---|---|---|
| GET | 可見 | 不安全 | 有限制（取決於瀏覽器） |
| POST | 不可見 | 相對安全 | 無限制 |
5.2.3 表單元素入門
表單項標籤依附form實現
| 標籤名 | 作用 | 備註 |
|---|---|---|
| **label ** | 表單元素的說明，配合表單元素使用 | for屬性值為相關表單元素的id屬性值 |
| input | 表單中輸入控制元件，多種輸入型別，用於接受來自使用者資料 | type屬性值決定輸入型別 |
| button | 頁面中可點選的按鈕，可以配合表單進行提交 | type屬性值決定按鈕型別，按鈕的功能（submit、reset、button） |
1）簡單的文字輸入框
-
label標籤：表單的說明。
- for屬性值：匹配input標籤的id屬性值。for屬性值必須與id屬性一致。
-
input標籤：輸入控制元件。
- type屬性：表示輸入型別，text值為普通文字框
- id屬性：表示標籤唯一標識
- name屬性：表示標籤名稱（有它資料才能被提交）
- value屬性：表示標籤資料值
- placeholder屬性：預設提示資訊
- require屬性：必須填寫