Web開發初探（系統理解Web知識點）
阿新 • • 發佈：2020-09-14
## 一、Web開發介紹
我們看到的網頁通過程式碼來實現的 ，這些程式碼由瀏覽器解釋並渲染成你看到的豐富多彩的頁面效果。 這個瀏覽器就相當於Python的直譯器，專門負責解釋和執行(渲染）網頁程式碼。
寫網頁的程式碼是專門的語言， 主要分為Hmtl 、 CSS 和 JavaScript, 被稱為網頁開發三劍客，分別作用如下：
#### Html
超文字標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。
主要負責編寫頁面架構，有點像建房子時，造的毛坯房。
#### CSS
CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式。
讓你的網頁樣式變的豐富多彩起來，可以改變字型、顏色、排列方式、背景顏色等
相當於給你的毛坯房做裝修
#### JavaScript
網頁尾本語言，可以讓你的網頁動起來，比如一張圖片滑鼠放上去自動變大、一個按鈕自動變色、提交表單時少填或填錯了欄位會提示報錯等，都是JavaScript實現的。
以上3個 元件 是做網站開發都必須掌握的技能 ，我們接下來依次體驗下~吧
## 二、HTML
### 2.1 HTML簡介
```html
路飛學城
`元素裡描述了文件的標題
- `<body>`元素包含了可見的頁面內容
- `<h1>`元素定義一個大標題
- `<p>`元素定義一個段落
**注：**在瀏覽器的頁面上使用鍵盤上的 F12 按鍵開啟除錯模式，就可以看到組成標籤。
### 2.2 什麼是HTML?
HTML 是用來描述網頁的一種語言。
- HTML 指的是超文字標記語言: **H**yper**T**ext **M**arkup **L**anguage
- HTML 不是一種程式語言，而是一種**標記**語言
- 標記語言是一套**標記標籤** (markup tag)
- HTML 使用標記標籤來**描述**網頁
- HTML 文件包含了HTML **標籤**及**文字**內容
- HTML文件也叫做 **web 頁面**
#### HTML 標籤
HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。
- HTML 標籤是由*尖括號*包圍的關鍵詞，比如 <html>
- HTML 標籤通常是**成對出現**的，比如`<b>` 和 `</b><div class="adscc"> <center><script type="text/javascript" src="/js/article.js"></script></center></div><div style="clear:both;"></div>`,標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
### 2.3 HTML網頁結構
下面是一個視覺化的HTML頁面結構：
注意： 只有 \<body> 區域 (白色部分) 才會在瀏覽器中顯示。
## 三、HTML常用元素入門
### 3.1 HTML標題
### 3.2 段落
### 3.3 超連結
```html
<body>
這是一個連結使用了 href 屬性
</body><div class="adscc"> <center><script type="text/javascript" src="/js/article.js"></script></center></div><div style="clear:both;"></div>
```
```html
訪問路飛學城
```
`target="_blank"`會開啟一個新視窗
### 3.4 顯示圖片
```html
<img src="black_girl.jpg">
```
### 3.5 HTML表格
想在頁面上顯示這種表格怎麼做？
| First Name | Last Name | Points |
| :--------- | :-------- | :----- |
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Adam | Johnson | 67 |
#### 先做個最簡單的
```html
<table border="1">
<tr>
<td>row 1, cell 1</td><div class="adscc"> <center><script type="text/javascript" src="/js/article.js"></script></center></div><div style="clear:both;"></div>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
```
輸出
#### 表格的表頭
表格的表頭使用 \<th> 標籤進行定義。
```html
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
```
大多數瀏覽器會把表頭顯示為粗體居中的文字
可以加上邊距
```html
<table border="1" cellpadding="10">
```
### 3.6 列表
分為有序列表 和 無序列表
#### 有序列表
```html
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
```
效果
#### 無序列表
```html
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
```
#### 巢狀列表
```html
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
```
### 3.7 div區塊元素
#### HTML 區塊元素
大多數 HTML 元素被定義為**塊級元素**或**內聯元素**。
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。
例項: \<h1>,\<p>, \<ul>, \<table>
#### HTML 內聯元素
內聯元素在顯示時通常不會以新行開始。
例項: \<b>, \<td>, \, \<img>
#### HTML `` 元素
HTML \ 元素是塊級元素，它可用於組合其他 HTML 元素的容器。
`` 元素沒有特定的含義。如果與 CSS 一同使用，\ 元素可用於對大的內容塊設定樣式屬性。
`` 元素的另一個常見的用途是文件佈局。它取代了使用表格定義佈局的老式方法。使用 \<table> 元素進行文件佈局不是表格的正確用法。
#### `` 元素
HTML \ 元素是內聯元素，可用作文字的容器
\ 元素也沒有特定的含義。當與 CSS 一同使用時，\ 元素可用於為部分文字設定樣式屬性。
### 3.8 CSS樣式初識
CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式。
CSS 可以通過以下方式新增到HTML中:
- 內聯樣式- 在HTML元素中使用"style" **屬性**
- 內部樣式表 -在HTML文件頭部 \<head> 區域使用\
</head>
```
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條宣告:
選擇器通常是您需要改變樣式的 HTML 元素。
每條宣告由一個屬性和一個值組成。
屬性（property）是你希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開
#### 3.8.3 外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個檔案來改變整個站點的外觀。
```html
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```
### 3.9 網頁佈局
網頁佈局主要使用div
```html
<body>
Menu
選單
<ol>
<li>HMTL</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
<p>這裡是真正寫內容的地方。。。</p>
footer
</body>
```
效果
### 3.10 Html 表單
當你想收集使用者資料，提交到後臺伺服器時，你就可以用html 表單元素
表單元素分為 文字框、下拉列表、單選、複選 、按鈕
#### 使用者註冊示例
```html
姓名: <br>
電話: <br>
<button>註冊</button>
```
一點選按鈕，`.....` 表單裡的資料都會被提交到`action="baidu_url"` 這個地址
#### 其它常用輸入型別
```html
<body>
姓名: <br>
電話: <br>
姓別: 男 女 <br>
愛好: 姑娘
潛水
Python <br>
喜歡的姑娘型別：<br>
<br>
個人簡介: <br>
<textarea name="intro" placeholder="輸入不省於50字的個人介紹" rows="3" cols="50" ></textarea> <br>
輸入密碼： <br>
<button>註冊</button>
</body>
```
輸出效果
#### Fieldset 表單集合
```html
<fieldset>
<legend>Personalia:</legend>
Name: <br>
Email: <br>
Date of birth:
</fieldset>
```
效果
## 四、CSS樣式基礎
### 4.1 CSS id \ class 選擇器
#### id選擇器
id就像一個元素的身份證地址，可以在網頁裡，**唯一代表某個元素**，我們也可以通過這個id快速找到它對應的元素物件
輸出
#### class 類選擇器
當你想給多個元素批量設定同樣的一個樣式的話，就可以使用類選擇器
輸出
### 4.2 直接通過元素名設定樣式
若你想給頁面所有的\<p> 或\標籤加上同樣的樣式，可以直接通過元素名批量設定
**注意：id & class 選擇器的樣式優先順序大於 元素名選擇器**
### 4.3 組合選擇器
為了測試效果，先準備好3層div
```html
<p>第1層</p>
<p>layer 2</p>
<h2>layer 2 h2</h2>
<p>第3層</p>
<h3>layer 3 h3</h3>
<p>我不在任何的div裡</p>
```
設定好樣式
```html
<head>
</head>
```
效果
#### 4.3.1 後代選擇器
給指定元素的所有指定後代，設定樣式
比如 ，我給上圖第一層div下面所有的<p>標籤設定顏色
```html
#layer1 p {
color: red;
background: yellow;
}
```
效果
#### 4.3.2 子元素選擇器
又可稱為兒子選擇器，是指可給指定元素的下一層兒子元素設定格式 ，注意，只是兒子，孫子不管
給`layer1`的div的兒子設定樣式
```html
#layer1 > p {
color: red;
background: yellow;
}
```
#### 4.3.3 相鄰兄弟選擇器
可選擇緊接在另一元素後的元素，且二者有相同父元素。
```html
#layer2 > p+h2 {
color: red;
background: yellow;
}
```
效果
#### 4.3.4 多個元素組合
可同時給不相干的多個元素設定同一個樣式
比如 把整 個頁面所有的<p> 和<h3>標籤同時設定樣式
```html
p,h3 {
color: red;
background: yellow;
}
```
效果
<img src="https://gitee.com//riotian/blogimage/raw/master/img/20200914123110.png">
### 4.4 盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
- **Margin(外邊距)** - 清除邊框外的區域，外邊距是透明的。
- **Border(邊框)** - 圍繞在內邊距和內容外的邊框。
- **Padding(內邊距)** - 清除內容周圍的區域，內邊距是透明的。
- **Content(內容)** - 盒子的內容，顯示文字和影象。
為了正確設定元素在所有瀏覽器中的寬度和高度，你需要知道的盒模型是如何工作的。
#### 元素的寬度和高度
**重要:** 當指定一個 CSS 元素的寬度和高度屬性時，你只是設定**內容區域的寬度和高度**。要知道，完整大小的元素，你還必須新增內邊距，邊框和邊距。
下面的例子中的元素的總寬度為300px：
```html
div {
width: 300px;
border: 25px dashed yellow;
padding: 25px;
margin: 25px;
}
```
```html
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。</p>
這裡是盒子內的實際內容。有 25px 內間距，25px 外間距、5px 黃色邊框。
</body>
```
效果
<img src="https://gitee.com//riotian/blogimage/raw/master/img/20200914123119.png">
### 4.5 常用CSS屬性
css有很多屬性，我們先只講幾個基本的
更多的看這裡：https://www.runoob.com/cssref/css-reference.html#box
#### 4.5.1 background背景屬性
| 屬性 | 描述 | CSS |
| :----------------------------------------------------------- | :----------------------------------------------------------- | :--- |
| [background](https://www.runoob.com/cssref/css3-pr-background.html) | 複合屬性。設定物件的背景特性。 | 1 |
| [background-attachment](https://www.runoob.com/cssref/pr-background-attachment.html) | 設定或檢索背景影象是隨物件內容滾動還是固定的。必須先指定background-image屬性。 | 1 |
| [background-color](https://www.runoob.com/cssref/pr-background-color.html) | 設定或檢索物件的背景顏色。 | 1 |
| [background-image](https://www.runoob.com/cssref/pr-background-image.html) | 設定或檢索物件的背景影象。 | 1 |
| [background-position](https://www.runoob.com/cssref/pr-background-position.html) | 設定或檢索物件的背景影象位置。必須先指定background-image屬性。 | 1 |
| [background-repeat](https://www.runoob.com/cssref/pr-background-repeat.html) | 設定或檢索物件的背景影象如何鋪排填充。必須先指定background-image屬性。 | 1 |
| [background-clip](https://www.runoob.com/cssref/css3-pr-background-clip.html) | 指定物件的背景影象向外裁剪的區域。 | 3 |
| [background-origin](https://www.runoob.com/cssref/css3-pr-background-origin.html) | S設定或檢索物件的背景影象計算background-position時的參考原點(位置)。 | 3 |
| [background-size](https://www.runoob.com/cssref/css3-pr-background-size.html) | 檢索或設定物件的背景影象的尺寸大小。 | 3 |
#### 4.5.2 邊框Border 和輪廓Outline屬性
| 屬性 | 描述 | CSS |
| :----------------------------------------------------------- | :--------------------------------------------------------- | :--- |
| [border](https://www.runoob.com/cssref/pr-border.html) | 複合屬性。設定物件邊框的特性。 | 1 |
| [border-bottom](https://www.runoob.com/cssref/pr-border-bottom.html) | 複合屬性。設定物件底部邊框的特性。 | 1 |
| [border-bottom-color](https://www.runoob.com/cssref/pr-border-bottom-color.html) | 設定或檢索物件的底部邊框顏色。 | 1 |
| [border-bottom-style](https://www.runoob.com/cssref/pr-border-bottom-style.html) | 設定或檢索物件的底部邊框樣式。 | 1 |
| [border-bottom-width](https://www.runoob.com/cssref/pr-border-bottom-width.html) | 設定或檢索物件的底部邊框寬度。 | 1 |
| [border-color](https://www.runoob.com/cssref/pr-border-color.html) | 置或檢索物件的邊框顏色。 | 1 |
| [border-left](https://www.runoob.com/cssref/pr-border-left.html) | 複合屬性。設定物件左邊邊框的特性。 | 1 |
| [border-left-color](https://www.runoob.com/cssref/pr-border-left-color.html) | 設定或檢索物件的左邊邊框顏色。 | 1 |
| [border-left-style](https://www.runoob.com/cssref/pr-border-left-style.html) | 設定或檢索物件的左邊邊框樣式。 | 1 |
| [border-left-width](https://www.runoob.com/cssref/pr-border-left-width.html) | 設定或檢索物件的左邊邊框寬度。 | 1 |
| [border-right](https://www.runoob.com/cssref/pr-border-right.html) | 複合屬性。設定物件右邊邊框的特性。 | 1 |
| [border-right-color](https://www.runoob.com/cssref/pr-border-right-color.html) | 設定或檢索物件的右邊邊框顏色。 | 1 |
| [border-right-style](https://www.runoob.com/cssref/pr-border-right-style.html) | 設定或檢索物件的右邊邊框樣式。 | 1 |
| [border-right-width](https://www.runoob.com/cssref/pr-border-right-width.html) | 設定或檢索物件的右邊邊框寬度。 | 1 |
| [border-style](https://www.runoob.com/cssref/pr-border-style.html) | 設定或檢索物件的邊框樣式。 | 1 |
| [border-top](https://www.runoob.com/cssref/pr-border-top.html) | 複合屬性。設定物件頂部邊框的特性。 | 1 |
| [border-top-color](https://www.runoob.com/cssref/pr-border-top-color.html) | 設定或檢索物件的頂部邊框顏色 | 1 |
| [border-top-style](https://www.runoob.com/cssref/pr-border-top-style.html) | 設定或檢索物件的頂部邊框樣式。 | 1 |
| [border-top-width](https://www.runoob.com/cssref/pr-border-top-width.html) | 設定或檢索物件的頂部邊框寬度。 | 1 |
| [border-width](https://www.runoob.com/cssref/pr-border-width.html) | 設定或檢索物件的邊框寬度。 | 1 |
| [outline](https://www.runoob.com/cssref/pr-outline.html) | 複合屬性。設定或檢索物件外的線條輪廓。 | 2 |
| [outline-color](https://www.runoob.com/cssref/pr-outline-color.html) | 設定或檢索物件外的線條輪廓的顏色。 | 2 |
| [outline-style](https://www.runoob.com/cssref/pr-outline-style.html) | 設定或檢索物件外的線條輪廓的樣式。 | 2 |
| [outline-width](https://www.runoob.com/cssref/pr-outline-width.html) | 設定或檢索物件外的線條輪廓的寬度。 | 2 |
| [border-bottom-left-radius](https://www.runoob.com/cssref/css3-pr-border-bottom-left-radius.html) | 設定或檢索物件的左下角圓角邊框。 | 3 |
| [border-bottom-right-radius](https://www.runoob.com/cssref/css3-pr-border-bottom-right-radius.html) | 設定或檢索物件的右下角圓角邊框。 | 3 |
| [border-image](https://www.runoob.com/cssref/css3-pr-border-image.html) | 設定或檢索物件的邊框樣式使用影象來填充。 | 3 |
| [border-image-outset](https://www.runoob.com/cssref/css3-pr-border-image-outset.html) | 規定邊框影象超過邊框的量。 | 3 |
| [border-image-repeat](https://www.runoob.com/cssref/css3-pr-border-image-repeat.html) | 規定影象邊框是否應該被重複（repeated）、拉伸（stretched） | 3 |
| [border-image-slice](https://www.runoob.com/cssref/css3-pr-border-image-slice.html) | 規定影象邊框的向內偏移。 | 3 |
| [border-image-source](https://www.runoob.com/cssref/css3-pr-border-image-source.html) | 規定要使用的影象，代替 border-style 屬性中設定的邊框樣式。 | 3 |
| [border-image-width](https://www.runoob.com/cssref/css3-pr-border-image-width.html) | 規定影象邊框的寬度。 | 3 |
| [border-radius](https://www.runoob.com/cssref/css3-pr-border-radius.html) | 設定或檢索物件使用圓角邊框。 | 3 |
| [border-top-left-radius](https://www.runoob.com/cssref/css3-pr-border-top-left-radius.html) | 定義左上角邊框的形狀。 | 3 |
| [border-top-right-radius](https://www.runoob.com/cssref/css3-pr-border-top-right-radius.html) | 定義右上角邊框的形狀。 | 3 |
| box-decoration-break | 規定行內元素被折行 | 3 |
| [box-shadow](https://www.runoob.com/cssref/css3-pr-box-shadow.html) | 向方框新增一個或多個陰影。 | 3 |
#### 4.5.3 內邊距Padding屬性
| 屬性 | 說明 | CSS |
| :----------------------------------------------------------- | :--------------------------- | :--- |
| [padding](https://www.runoob.com/cssref/pr-padding.html) | 在一個宣告中設定所有填充屬性 | 1 |
| [padding-bottom](https://www.runoob.com/cssref/pr-padding-bottom.html) | 設定元素的底填充 | 1 |
| [padding-left](https://www.runoob.com/cssref/pr-padding-left.html) | 設定元素的左填充 | 1 |
| [padding-right](https://www.runoob.com/cssref/pr-padding-right.html) | 設定元素的右填充 | 1 |
| [padding-top](https://www.runoob.com/cssref/pr-padding-top.html) | 設定元素的頂部填充 | 1 |
#### 4.5.4 外邊距(Margin) 屬性
| 屬性 | 說明 | CSS |
| :----------------------------------------------------------- | :----------------------------- | :--- |
| [margin](https://www.runoob.com/cssref/pr-margin.html) | 在一個宣告中設定所有外邊距屬性 | 1 |
| [margin-bottom](https://www.runoob.com/cssref/pr-margin-bottom.html) | 設定元素的下外邊距 | 1 |
| [margin-left](https://www.runoob.com/cssref/pr-margin-left.html) | 設定元素的左外邊距 | 1 |
| [margin-right](https://www.runoob.com/cssref/pr-margin-right.html) | 設定元素的右外邊距 | 1 |
| [margin-top](https://www.runoob.com/cssref/pr-margin-top.html) | 設定元素的上外邊距 | 1 |
#### 4.5.5 position 定位屬性
屬性值
| 值 | 描述 |
| :----------------------------------------------------------- | :----------------------------------------------------------- |
| [absolute](https://www.runoob.com/css/css-positioning.html#position-absolute) | 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| [fixed](https://www.runoob.com/css/css-positioning.html#position-fixed) | 生成固定定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| [relative](https://www.runoob.com/css/css-positioning.html#position-relative) | 生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置新增 20 畫素。 |
| [static](https://www.runoob.com/css/css-positioning.html#position-static) | 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。 |
| [sticky](https://www.runoob.com/css/css-positioning.html#position-sticky) | 粘性定位，該定位基於使用者滾動的位置。它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。**注意:** Internet Explorer, Edge 15 及更早 IE 版本不支援 sticky 定位。 Safari 需要使用 -webkit- prefix (檢視以下例項)。 |
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
| | |
#### 4.5.6 字型（Font） 屬性
| 屬性 | 說明 | CSS |
| :----------------------------------------------------------- | :-------------------------------------------------------- | :--- |
| [font](https://www.runoob.com/cssref/pr-font-font.html) | 在一個宣告中設定所有字型屬性 | 1 |
| [font-family](https://www.runoob.com/cssref/pr-font-font-family.html) | 規定文字的字體系列 | 1 |
| [font-size](https://www.runoob.com/cssref/pr-font-font-size.html) | 規定文字的字型尺寸 | 1 |
| [font-style](https://www.runoob.com/cssref/pr-font-font-style.html) | 規定文字的字型樣式 | 1 |
| [font-variant](https://www.runoob.com/cssref/pr-font-font-variant.html) | 規定文字的字型樣式 | 1 |
| [font-weight](https://www.runoob.com/cssref/pr-font-weight.html) | 規定字型的粗細 | 1 |
| [@font-face](https://www.runoob.com/cssref/css3-pr-font-face-rule.html) | 一個規則，允許網站下載並使用其他超過"Web- safe"字型的字型 | 3 |
| [font-size-adjust](https://www.runoob.com/cssref/css3-pr-font-size-adjust.html) | 為元素規定 aspect 值 | 3 |
| [font-stretch](https://www.runoob.com/cssref/css3-pr-font-stretch.html) | 收縮或拉伸當前的字體系列 | 3 |
#### 4.5.7 文字（Text） 屬性
| 屬性 | 說明 | CSS |
| :----------------------------------------------------------- | :---------------------------------------------------- | :--- |
| [color](https://www.runoob.com/cssref/pr-text-color.html) | 設定文字的顏色 | 1 |
| [direction](https://www.runoob.com/cssref/pr-text-direction.html) | 規定文字的方向 / 書寫方向 | 2 |
| [letter-spacing](https://www.runoob.com/cssref/pr-text-letter-spacing.html) | 設定字元間距 | 1 |
| [line-height](https://www.runoob.com/cssref/pr-dim-line-height.html) | 設定行高 | 1 |
| [text-align](https://www.runoob.com/cssref/pr-text-text-align.html) | 規定文字的水平對齊方式 | 1 |
| [text-decoration](https://www.runoob.com/cssref/pr-text-text-decoration.html) | 規定新增到文字的裝飾效果 | 1 |
| [text-indent](https://www.runoob.com/cssref/pr-text-text-indent.html) | 規定文字塊首行的縮排 | 1 |
| [text-transform](https://www.runoob.com/cssref/pr-text-text-transform.html) | 控制文字的大小寫 | 1 |
| [vertical-align](https://www.runoob.com/cssref/pr-pos-vertical-align.html) | 設定元素的垂直對齊方式 | 1 |
| [white-space](https://www.runoob.com/cssref/pr-text-white-space.html) | 設定怎樣給一元素控制元件留白 | 1 |
| [word-spacing](https://www.runoob.com/cssref/pr-text-word-spacing.html) | 設定單詞間距 | 1 |
| [text-emphasis](https://www.runoob.com/cssref/css3-pr-text-emphasis.html) | 向元素的文字應用重點標記以及重點標記的前景色。 | 1 |
| [hanging-punctuation](https://www.runoob.com/cssref/css3-pr-hanging-punctuation.html) | 指定一個標點符號是否可能超出行框 | 3 |
| [punctuation-trim](https://www.runoob.com/cssref/css3-pr-punctuation-trim.html) | 指定一個標點符號是否要去掉 | 3 |
| [text-align-last](https://www.runoob.com/cssref/css3-pr-text-align-last.html) | 當 text-align 設定為 justify 時，最後一行的對齊方式。 | 3 |
| [text-justify](https://www.runoob.com/cssref/css3-pr-text-justify.html) | 當 text-align 設定為 justify 時指定分散對齊的方式。 | 3 |
| [text-outline](https://www.runoob.com/cssref/css3-pr-text-outline.html) | 設定文字的輪廓。 | 3 |
| [text-overflow](https://www.runoob.com/cssref/css3-pr-text-overflow.html) | 指定當文字溢位包含的元素，應該發生什麼 | 3 |
| [text-shadow](https://www.runoob.com/cssref/css3-pr-text-shadow.html) | 為文字新增陰影 | 3 |
| [text-wrap](https://www.runoob.com/cssref/css3-pr-text-wrap.html) | 指定文字換行規則 | 3 |
| [word-break](https://www.runoob.com/cssref/css3-pr-word-break.html) | 指定非CJK文字的斷行規則 | 3 |
| [word-wrap](https://www.runoob.com/cssref/css3-pr-word-wrap.html) | 設定瀏覽器是否對過長的單詞進行換行。 | 3 |
## 五、練習題
### 5.1 開發登入註冊頁面
請參考下面的註冊頁面，模仿開發一個一樣的註冊頁面， 只寫好靜態頁面樣式就行，不需要能真的獲取驗證碼等。
> Ps：部分內容來自博主線上課程的教程的檔案內容
</div>
<div class="entry-footer">
<div class="entry-tag"> </div>
<div class="entry-page">
<center><script type="text/javascript" src="/js/article.js"></script></center>
</div>
<h3 class="entry-related-title">相關推薦</h3>
<style>
.r{ margin-bottom:10px; border-bottom:1px solid #f1f1f1; padding-bottom:10px;}
.r p{ color:#999; line-height:25px;}
.r h5 a{ font-size:16px; line-height:25px;}
.r h5 a:hover{ color:#ff6600}
</style>
<div class="r">
<h5><a href="/content/1600092423.html" target="_blank"><font color=red>Web</font><font color=red>開發</font><font color=red>初探</font><font color=red>（</font><font color=red>系統</font><font color=red>理解</font><font color=red>Web</font><font color=red>知識點</font><font color=red>）</font></a></h5>
<p> ## 一、Web開發介紹
我們看到的網頁通過程式碼來實現的 ，這些程式碼由瀏覽器解釋並渲染成你看到的豐富多彩的頁面效果。 這個瀏覽器就相當於Python的直譯器，專門負責解釋和執行(渲染）網頁程式碼。
寫網頁的程式碼是專門的語言， 主要分為Hmtl 、 CSS 和 JavaScript, 被稱為網頁開發 </p>
</div>
<div class="r">
<h5><a href="/content/1532512569.html" target="_blank">我的第一個python <font color=red>web</font><font color=red>開發</font>框架<font color=red>（</font>24<font color=red>）</font>——<font color=red>系統</font>重構與ORM</a></h5>
<p> 內容 版權 質量 重寫 很多 掌握 orm .... 最重要的 小白弄完代碼版本管理和接口文檔後，興奮的找到老菜。
小白：老大，我已經按你講的要求，將代碼版本管理和接口文檔都搞好了。從項目開始到現在，除了代碼編寫，感覺學會好多東西啊。
老菜：嗯嗯，實戰確實需 </p>
</div>
<div class="r">
<h5><a href="/content/1534948704.html" target="_blank">我的第一個python <font color=red>web</font><font color=red>開發</font>框架<font color=red>（</font>33<font color=red>）</font>——後臺管理<font color=red>系統</font>權限設計</a></h5>
<p> style 頁面 失效 限制 路由 前後端分離 也會 其他 自己 框架底層和接口終於改造完成了，小白再次找到老菜。
小白：老大，上次你對後臺權限系統簡單的講了一下，我一點頭緒都沒有，現在有空完整的說一說嗎？
老菜：說到權限系統，要講明白真不容易，權限系統並不 </p>
</div>
<div class="r">
<h5><a href="/content/1546788135.html" target="_blank">Django <font color=red>web</font><font color=red>開發</font>系列<font color=red>（</font>一<font color=red>）</font>圖書借閱管理<font color=red>系統</font>之需求分析</a></h5>
<p>
一 前言
Python selenium系列文章之後，一直想寫關於Django的，把python web開發相關的知識理一理，但卻忙於各種事，拖到了現在。元旦前，部門新進一批圖書，突然，靈光一現，這些書籍如果以後就這樣隨意借出去，散落在幾十號兄弟姐妹手裡，估計，以後找書、借書都要靠喊了。於是，就想開發一 </p>
</div>
<div class="r">
<h5><a href="/content/1506568934.html" target="_blank">我的第一個python <font color=red>web</font><font color=red>開發</font>框架<font color=red>（</font>2<font color=red>）</font>——一個簡單的小外包</a></h5>
<p> span 技術 進行 target 最好 自己 blog height 描述 第一部分說明
第一部分大概有20來章，主要講的是一些開發常識、開發前中後期準備內容、開發環境與服務器部署環境安裝設置、python基礎框架結構與功能等內容，代碼會比較簡單。
</p>
</div>
<div class="r">
<h5><a href="/content/1507539724.html" target="_blank">我的第一個python <font color=red>web</font><font color=red>開發</font>框架<font color=red>（</font>4<font color=red>）</font>——數據庫結構設計與創建</a></h5>
<p> 數據結構 描述 分析器 設置 一個 由於 logs 記錄 開發框架 小白做好前端html設計後，馬上開始進入數據庫結構設計步驟。
在開始之前，小白回憶了一下老大在公司裏培訓時講過的數據庫設計解說：
對於初學者來說，很多拿到原型時不知道怎麽設計數據表結 </p>
</div>
<div class="r">
<h5><a href="/content/1507622284.html" target="_blank">我的第一個python <font color=red>web</font><font color=red>開發</font>框架<font color=red>（</font>5<font color=red>）</font>——<font color=red>開發</font>前準備工作<font color=red>（</font>了解編碼前需要知道的一些常識<font color=red>）</font></a></h5>
<p> turn 框架 strong pep8 加密與解密 python開發 lan 二次 沒有 中午吃飯時間到了，小白趕緊向老菜坐的位置走過去。
小白：老大，中午請你吃飯。
老菜：哈哈...又遇到問題了吧，這次得狠狠宰你一頓才行。
小白：行行行，只要您賞臉， </p>
</div>
<div class="r">
<h5><a href="/content/1509639639.html" target="_blank">我的第一個python <font color=red>web</font><font color=red>開發</font>框架<font color=red>（</font>15<font color=red>）</font>——公司介紹編輯功能</a></h5>
<p> getcwd 轉義 導航菜單 unicode 存儲路徑 -c 序號 管理 bsp 完成登錄以後，就會進入後臺管理系統的主界面，因為這個是小項目，所以導航菜單全部固化在HTML中，不能修改。一般後臺還會有一個歡迎頁或關鍵數據展示的主頁面，小項目也沒有多大的必要，所以登錄後 </p>
</div>
<div class="r">
<h5><a href="/content/1510850473.html" target="_blank">我的第一個python <font color=red>web</font><font color=red>開發</font>框架<font color=red>（</font>16<font color=red>）</font>——產品分類管理</a></h5>
<p> 計算 添加按鈕 _for records 操作 qq群 api 回復 derby 產品分類管理的html頁面之前忘記做了，這次附件裏補上。
好了先上圖
從頁面效果圖來看，我們需要開發列表獲取接口、添加接口、單條記錄獲取接口、編輯接口和刪除接口
</p>
</div>
<div class="r">
<h5><a href="/content/1513773612.html" target="_blank">我的第一個python <font color=red>web</font><font color=red>開發</font>框架<font color=red>（</font>18<font color=red>）</font>——前臺頁面與接口整合</a></h5>
<p> ont 成功 讀取數據 pad images int 服務器 tps 替換 由於我們前後臺系統沒有分開，所以前臺頁面調用接口時，可以直接使用後臺管理系統已經完成的接口，不過後臺管理系統接口的訪問加上了登錄驗證，所以需要將前臺要用到的接口進行處理，讓它們設置到白名單當中
</p>
</div>
<div class="r">
<h5><a href="/content/1515931100.html" target="_blank">移動端<font color=red>web</font><font color=red>開發</font><font color=red>初探</font>之Vuejs的簡單實戰</a></h5>
<p> 參考 細節 重要 進行 標簽 樣式 mob 優化 view 這段時間在做的東西，是北郵人論壇APP的註冊頁。這個註冊頁是內嵌的網頁，因為打算安卓和IOS平臺同時使用。因此實際上就是在做移動端的web開發了。
在這過程中遇到了不少有意思的東西。
DEMO的github地址在這 </p>
</div>
<div class="r">
<h5><a href="/content/1516896147.html" target="_blank">我的第一個python <font color=red>web</font><font color=red>開發</font>框架<font color=red>（</font>21<font color=red>）</font>——小結</a></h5>
<p> 線上 天下 謝謝 應用 log 增加 頁面 管理員 封裝 這個小網站終於成功上線，小白除了收獲一筆不多的費用外，還得到女神小美的贊賞，心中滿滿的成就感。這一天下班後，他請老菜一起下館子，兌現請吃飯的承諾，順便讓老菜點評一下。
小白：老大，在你的指導下終於完成了我人 </p>
</div>
<div class="r">
<h5><a href="/content/1523348534.html" target="_blank">Java <font color=red>Web</font><font color=red>開發</font>總結<font color=red>（</font>三<font color=red>）</font> —— request接收表單提交中文參數亂碼問題</a></h5>
<p> 字符串 public servlet 參數 byte[] 解決 操作 get span 1、以POST方式提交表單中文參數的亂碼問題
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" </p>
</div>
<div class="r">
<h5><a href="/content/1536255614.html" target="_blank">我的第一個python <font color=red>web</font><font color=red>開發</font>框架<font color=red>（</font>37<font color=red>）</font>——職位管理功能</a></h5>
<p> 內容 修改 根據 直接 manage 表數 部分 pytho sel 對於職位管理，我們可以理解它為角色權限的管理，就像前面所說的一樣，有了職位管理，後臺管理系統綁定好對應的權限以後，新進員工、離職或崗位調整，管理員操作起來就非常的便捷了，只需要重新綁定對應職位就可以做 </p>
</div>
<div class="r">
<h5><a href="/content/1542909750.html" target="_blank">[分享]《Flask <font color=red>Web</font><font color=red>開發</font>：基於Python的<font color=red>Web</font>應用<font color=red>開發</font>實戰<font color=red>（</font>第2版<font color=red>）</font>》中文PDF+源代碼</a></h5>
<p> 全面介紹 flask 技術 ESS nfs 圖片 ges web應用開發 復制粘貼 下載：Flask Web開發第二版《Flask Web開發：基於Python的Web應用開發實戰》第二版中文PDF，324頁，帶目錄和書簽，文字能夠復制粘貼；配套源代碼；經典書籍第二版，講解 </p>
</div>
<div class="r">
<h5><a href="/content/1543132878.html" target="_blank"><font color=red>Web</font><font color=red>開發</font>筆記<font color=red>（</font>一<font color=red>）</font></a></h5>
<p>
---vue
npm install --save-dev webpack
--安裝element ui
npm install --save-dev element-ui
--安裝axios
npm install --save-dev axios
</p>
</div>
<div class="r">
<h5><a href="/content/1544352870.html" target="_blank">我的第一個python <font color=red>web</font><font color=red>開發</font>框架<font color=red>（</font>39<font color=red>）</font>——後臺介面許可權訪問控制處理</a></h5>
<p>
1 @get('/api/main/menu_info/')
2 def callback():
3 """
4 主頁面獲取選單列表資料
5 """
6 # 獲取當前使用者許可權
7 session = web_helper.get_ses </p>
</div>
<div class="r">
<h5><a href="/content/1544361506.html" target="_blank">我的第一個python <font color=red>web</font><font color=red>開發</font>框架<font color=red>（</font>40<font color=red>）</font>——後臺日誌與異常處理</a></h5>
<p>
1 #!/usr/bin/env python
2 # coding=utf-8
3
4 from bottle import put
5 from common import web_helper, encrypt_helper, security_helper
6 </p>
</div>
<div class="r">
<h5><a href="/content/1544778242.html" target="_blank"><font color=red>web</font><font color=red>開發</font> 常用概念的<font color=red>理解</font> 以及 H5標籤概念的重新解讀</a></h5>
<p>
一、簡單談談剛接觸web時的概念
1. 一般來講，我們對全球資訊網的準確定義為： 是一個有許多相互連線的超文字組成的系統。通過網際網路訪問 。 簡單的來說，就是 一個資源互聯的網路------ps：最早由Sir Tim Berners-Lee </p>
</div>
<div class="r">
<h5><a href="/content/1545032882.html" target="_blank">移動端<font color=red>web</font><font color=red>開發</font>總結<font color=red>（</font>自適應<font color=red>）</font></a></h5>
<p>
關於viewport
移動端開發中，通常我們都會設定viewport。關於viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-s </p>
</div>
<!-- <ul class="entry-related clearfix">
<li> </li>
</ul>-->
</div>
</div>
</article>
</div>
<aside class="sidebar">
<div id="search-7" class="widget widget_search">
<h3 class="widget-title">搜尋</h3>
<form name="formsearch" class="search-form" action="https://www.796t.com/public/api.php" method="get">
<input type="hidden" name="app" value="search"/>
<input type="text" class="keyword" name="q" placeholder="輸入關鍵詞..." value="">
<input type="submit" class="submit" value="">
</form>
</div>
<div id="wpcom-image-ad-4" class="widget widget_image_ad"></div>
<div id="tag_cloud-3" class="widget widget_tag_cloud">
<h3 class="widget-title">基礎教學</h3>
<div class="tagcloud">
<a href="https://www.796t.com/category.php?cid=18" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Mysql入門</a>
<a href="https://www.796t.com/category.php?cid=19" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Sql入門</a>
<a href="https://www.796t.com/category.php?cid=20" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Android入門</a>
<a href="https://www.796t.com/category.php?cid=21" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Docker入門</a>
<a href="https://www.796t.com/category.php?cid=22" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Go語言入門</a>
<a href="https://www.796t.com/category.php?cid=23" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Ruby程式入門</a>
<a href="https://www.796t.com/category.php?cid=24" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Python入門</a>
<a href="https://www.796t.com/category.php?cid=25" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Python進階</a>
<a href="https://www.796t.com/category.php?cid=26" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Django入門</a>
<a href="https://www.796t.com/category.php?cid=27" class="tag-cloud-link tag-link-66 tag-link-position-1" style="font-size: 22pt;">Python爬蟲入門</a>
</div>
</div>
<div id="wpcom-image-ad-12" class="widget widget_image_ad"> </div>
<div id="wpcom-post-thumb-3" class="widget widget_post_thumb">
<h3 class="widget-title">最近訪問</h3>
<ul>
<p><a href="/content/.html" style="font-size:16px;"> </a> </p>
</ul>
</div>
</aside>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="clearfix">
<div class="footer-col footer-col-copy">
<ul class="footer-nav hidden-xs">
<li id="menu-item-109589" class="menu-item current-menu-item current_page_item menu-item-109589"><a href="https://www.796t.com/" aria-current="page">首頁</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=9">前端設計</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=10">程式設計</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=13">免費資源</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=14">實用技巧</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=15">資料庫</a></li><li class="menu-item menu-item-373"><a href="https://www.796t.com/category.php?cid=29">資訊</a></li><li class="menu-item menu-item-373"><a href="https://www.3du.tw/zidian.php">字典</a></li></ul>
<div class="copyright">
<p>Copyright © 2002-2020 <a href="https://www.796t.com/">程式人生</a> 796T.COM All rights reserved. </p>
</div>
</div>
<div class="footer-col footer-col-sns">
<div class="footer-sns"> </div>
</div>
</div>
</div>
</footer>
<style>
.footer{padding-bottom: 20px;}
</style>
<script type="text/javascript" src="/css/main.js"></script>
<script type="text/javascript" src="/css/wp-embed.js"></script>
<script type="text/javascript" src="/css/lazysizes.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.1.2/styles/atelier-estuary-light.css">
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>
我的第一個標題
我的第一個段落。
``` - ``宣告為 HTML5 文件 - ``元素是 HTML 頁面的根元素 - `` 標籤用於定義文件的頭部，它是所有頭部元素的容器。 中的元素可以引用指令碼、指示瀏覽器在哪裡找到樣式表、提供元資訊等等。 - ``元素包含文件的元資料， 如定義網頁編碼格式為 **utf-8**、關鍵詞啥的 - `