知識回顧之二：HTML與CSS
阿新 • • 發佈：2018-12-21
HTML與CSS
首先需理解瀏覽器訪問一個網址的流程。
- HTML
HTML，Hyper Test Markup Language，顧名思義，是一種標記語言，利用具有特定含義的文字（標籤，超文字，Hyper Text）作為標記，從而形成網頁內容。
HTML網頁由若干”元素“組成，而元素由”標籤“和”內容組成“。
HTML原始碼例子：
<!DOCTYPE HTML>
<html>
<head>
<title>This is title</title> 常用標籤：
| 標籤 | 功能 |
|---|---|
| div | <div></div> 劃分網頁區塊或區域 |
| span | <span> this is a block</span> 表示一個小區塊，可以在一行內劃分 |
| h1 - h6 | <h1>title1</h1> 分級標題 |
| p | <p>contents here</p> 分段 |
| ul, li | <ul></ul> <li></li> ul與li結合使用，ul建立一個無序列表，li為列表中的專案 |
| i，em，strong，hr，br | i表示斜體，em斜體，strong加粗，hr水平分割線，br換行 |
| img | <img src = ‘path/img.png’ alt=‘文字’ title = ‘標題’> img用於顯示影象，alt定義了影象非正常顯示時所出現的文字，title定義了滑鼠移到影象上時顯示的文字 |
| a | <a href = ‘http://www.google.com’ target = “_blank”> 谷歌</a> 超連結，target表示每次點選時都會開啟一個新的標籤頁 |
- CSS
CSS，Cascading Style Sheet，層疊樣式表，用於給HTML網頁提供更豐富的樣式，CSS定義了一種格式設定規則，然後，再用這種規則改變HTML網頁內元素的外觀。
CSS，根據其定義的位置（和目標元素所在的HTML檔案相對應而言），分為以下三種：- 行內樣式表
<div style="width:100px; height:100px; background:red;"></div>- 內聯式樣式表
<html> <head> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div id="box"></div> </body> </html>- 連結式樣式表
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="index.css"/> </head> <body> <div id="box"></div> </body> </html>- CSS基本語法：
其中，選擇符用於標識CSS樣式，供後面的使用。選擇符分三種，一種是以“#”開始定義的，叫做“ID選擇符”，一種是以“.”開始定義的，叫做“類選擇符”，還有一種是直接定義（我稱作重構定義）HTML標籤的“標籤選擇符”，下面分別是類選擇符和標籤選擇符的例子。.box{ width:100%; height:100px; backgroud:blue; }div{ width: 100%; height: 100px; background: blue; }
標籤選擇符會影響（重構）HTML網頁中所有此標籤的樣式。
-
表格
<table>標籤定義表格， <tr>標籤定義表格中的一行， <td>標籤定義單元格。<table border="1" cellspacing="0" cellpadding="0"> <tr> <td>姓名</td> <td>班級</td> <td>成績</td> </tr> <tr> <td>張三</td> <td>3</td> <td>80</td> </tr> <tr> <td>李四</td> <td>3</td> <td>82</td> </tr> </table> -
表單（Form）
表單用於互動式接收使用者輸入，並返回給WEB伺服器。- 定義
<form 屬性> </form><form action="http://www.baidu.com/s" method="get"> 使用者名稱: <input type="text" name="user"/> 密碼： <input type="password" name="password"/> <input type="submit" value="提交" /> </form>屬性 描述 action 提交表單的網址，<form action=‘http://www.testurl.com/test’ methord=‘get’> methord get: 表單傳送的資料會顯示在位址列; post: 表單傳送的資料不會顯示在位址列 - input 元素
<input type="text" name="user"/>- type
type = "text" 輸入框 type = "password" 密碼框 type = "checkbox" 複選 type = "radio" 單選 type = "button" 普通按鈕（不提交資料） type = "submit" 按鈕，提交資料 type="file" 檔案選擇控制元件 type = "hidden" 隱藏該表單元素 - 其它屬性
name屬性，規定input元素的名稱，後臺會根據這個屬性的值來接收資料 value屬性，表單項的值 readonly屬性，指定控制元件處於只讀狀態，針對輸入框有效，對按鈕無意義
- type
- textarea元素，多行文字框，由rows和cols屬性。
- button元素，定義一個按鈕
<button type="button">Button</button> - select元素和option元素，定義下拉列表框
<select name="city"> <option value="bj">北京</option> <option>上海</option> <option>廣州</option> <option>深圳</option> </select>
【完】
2018年12月21日
參考材料
html+css快速入門教程