nternet 互聯網:將全球的計算機連接起來所形成的網絡
web 萬維網:通俗的說就是網頁,把各類信息通過網頁的形式提供給用戶
web與Internet的關系:web是internet上的一個應用
web工作原理:用戶使用瀏覽器通過HTTP協議訪問web服務器,web服務器通過HTTP協議反饋相應的信息到瀏覽器供用戶使用
HTML:超文本標記語言
-
單標記/空標記:
<input />
-
雙標記
<body></body>
<!doctype html>
<html>
<head>
<title>文檔標題</title>
<body>
<h1 align="center">標題</h1>
<p valign="center">段落</p>
</body>
</head>
</html>
- <b></b>加粗<i></i>傾斜<u></u>下劃線<s></s>刪除線
上標下標
<div></div>塊分區<span></span>行內分區<pre></pre>預格式化
-
插入圖片:
<img src="1.jpg"/ width="100"> (絕對路徑) <img src="../1.jpg"/ height="200"> (相對路徑) width/height:設置圖片寬/高,只能設置一個,否則圖片會失真
-
插入鏈接:
<a href="http://www.------網址------">網址鏈接</a>
<table border="1" bgcolor="red" width="10" height="10"
cellspacing="0" cellpading="2">
<!--創建表格/增添表格線/設置表格邊框顏色/設置寬/設置高/設置邊框粗細/設置內容與邊框距離-->
<caption>表格標題</caption> <!--設置表格標題-->
<tr > <!--創建行-->
<td>第一行,第一列</td ><!--創建單元格-->
<td>第一行,第二列</td>
<td>第一行,第三列</td>
</tr>
</table>
-
行分組:
- <thead></thead>表頭行分組 - <tbody></body>表主體行分組 - <tfoot></tfoot>表尾行分組
-
單元格跨行:
- <td rowspan="2"></td> <!--跨兩行-->
-
單元格跨列:
- <td colspan="3"></td><!--跨兩列-->
表格嵌套:
...
<td>
<table>
....
</table>
</td>
...
- 有序列表
<ol type="列表類型" start="起始編號">
...
<li>...</li>
...
<li>...</li>
...
</ol>
type類型
1,數字(默認)
a,小寫字母
A,大寫字符
i,小寫羅馬數字
I,大寫羅馬數字
-
無序列表
<ul type="列表類型"> ... <li>...</li> ... <li>...</li> ... </ul> type類型 disc:實心圓(默認) circle:空心圓 square,實心矩形
-
定義列表
dl:標記定義一個定義列表
dt:標記定義了定義列表中的一個術語
dd:標記對定義列表中的術語提供定義
- 表單
<form><!--定義表單-->
<!--主要屬性 action:定義表單被提交時發生的動作,通常包含服務方腳本的URL;
method:指出表單數據提交的方式,取值為get或者post;
enctype:表單數據進行編碼的方式;
name:表單名稱-->
<input type="text"><!--文本框-->
<input type="password"/><!--密碼框-->
<!--主要屬性
name:名稱
value:由訪問者自由輸入的任何文本
maxlength:限制輸入的字符數
readonly:設置文本控件只讀-->
<input type="radio"/><!--單選框--> <input type="checkbox"/><!--復選框--> <!--主要屬性 name:設置名稱,并用于分組,一組單選框或者復選框的名稱必須相同 value:文本,當提交form時,如果選中了此單選按鈕,那么value就被發送到服務器 checked:設置默認被選中-->
<input type="submit"/><!--提交按鈕--> <input type="reset"/><!--重置按鈕--> <input type="button"/><!--普通按鈕--> <!--name:名稱 value:按鈕的標題文字-->
<input type="hidden"/ name="" value=""><!--隱藏域--> <input type="file"/ name=""><!--文件選擇框--> <!----><input type="checkbox" name="chkHid" id="chkHid" /> <label for="chkHid">不要公開我的信息</label> <!--將文本與控件聯系在一起后,單擊文本,效果就同單擊控件一樣--> </form>
-
選項框
select:創建選項框
name:選項框命名
size:大于1,則為滾動列表
multipe:設置多選
通用選擇器 *{ }
元素選擇器 h1 { } 權值為1
類選擇器 .color { } 權值為10
id選擇器 #num { } 權值為100
內聯樣式 < p styple=""> 權值為 1000
群組選擇器 .color,#num,h1 { }
后代選擇器 body p { }
子代選擇器 body>h2>p { }