HTML筆記

HTML

1）一套規則，瀏覽器認識的規則

2）開發者:

　　學習html規則

　　開發後臺程序:

　　　　-寫html文件(充當模版使用)
　　　　-數據庫獲取數據，而後替換到html文件的指定位置（Web框架）

3）本地測試

　　-找到文件路徑，直接瀏覽器打開

　　-pycharm打開測試

4）編寫HTML文件

　　-doctype 對應關係

　　-html標籤，標籤內能夠寫屬性，只能有一個html標籤

　　-head標籤 ，只能一個

　　-body標籤，只能一個

　　-註釋<!-- 內容 -->

5）標籤分類

　　-自閉合標籤

　　<meta charset="utf-8" />
　　<br/>

 

　　-主動閉合標籤

　　<title>內容</title>

 

6)head標籤

　　-<meta 內容> ---->能夠跳轉，刷新，關鍵字，描述，IE兼容

　　<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8" />      關於IE兼容的寫法

　　-title標籤

　　-link標籤，圖標

　　-style標籤

　　-script標籤

7）body標籤（重點必須記住）

　　-符號，&nbsp;空格 &gt;> &lt;<

　　　　 各類符號：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

　　-p標籤，段落

　　-br標籤（自閉標籤），換行

　　-a標籤
　　　　

    < a href="http://www.baidu.com" target="_blac"k>百度</a> 

　　　　超連接 target屬性，_black表示在新的頁面打開

　　<a href="#1">第一章</a>
　　<a href="#2">第二章</a>
　　<div id="1" style="height: 600px">第一章內容</div>
　　<div id="2" style="height: 600px">第二章內容</div>

    　　 做爲錨跳轉，href="#某個內容的id" id不容許重複

　　-小結

　　　　全部標籤分爲：
　　　　　　塊級標籤：div（白板），H系列標籤（加大加粗），p標籤（段落和段落之間有間距）
　　　　　　行內標籤：span (白板沒有屬性)

　　　　　　標籤之間能夠嵌套

　　　　　　標籤存在的意義，能夠被css操做，js操做

　　　　　　chorme審查元素的使用：1定位 2查看樣式

　　-form標籤

　　　　<form action="http://localhost:8887/index" method="get" >
　　　　<input/>
　　　　<form/>

　　　　action 屬性規定當提交表單時，向何處發送表單數據，method爲提交方式

　　-input系列

　　　　<input type="text" name="user" value="hsj"/> 

　　　　user輸入框 value內容爲輸入框默認值

　　　　<input type="password" name="passwd"/> 

　　　　passwd輸入框

　　　　<input type="submit" value="登陸"/>    

　　　　提交按鈕，表單

　　　　<input type="radio" name="gender" value="1" checked="checked"/> 

　　　　radio單選項 name屬性（相同則互斥）checked="checked"默認被選中

　　　　<input type="checkbox" name="favor" value="2" checked="checked"/> 

　　　　checkbox多選項 name屬性（批量獲取數據） checked="checked"默認被選中

　　　　<input type="file" name="fname"/> 

　　　　選擇上傳文件可是要依賴form裏的一個屬性 enctype="multipart/form-data"

　　　　<input type="reset" value="重置"/> 

　　　　重置所選的選項，恢復默認值

　　　　<input/>要包含在<form><from/>裏
　　　　如:

 　　　　<form> <input/> <from/>

　　-textarea標籤

　　　　<textarea name="mes">默認值</textarea> 

　　　　定義一個文本區域 (text-area) （一個多行的文本輸入區域）。用戶可在此文本區域中寫文本。在一個文本區中，您可輸入無限數量的文本。文本區中的默認字體是等寬字體 　　　　(fixed pitch)。存在name屬性，且默認值寫在中間 

　　-select標籤

　　　　<select name="ctiy" multiple="multiple">
　　　　　　<option value="1">北京</option>
　　　　　　<option value="2">上海</option>
　　　　　　<option value="3">廣東</option>
　　　　　　<option value="4">湖南</option>
　　　　</select>

　　　　內部屬性有name，size（大小），multiple="multiple"（多選），
　　　　寫在select屬性內，option標籤屬性有value，提交後臺

　　-img標籤

　　　　<a href="http://www.baidu.com">
　　　　　　<img title="百度" src="4.gif" alt="百度"/>
　　　　</a>

　　　　包在a標籤裏面做爲跳轉，title爲鼠標放上去顯示的內容，scr爲圖片地址，alt爲圖片不存在時顯示的內容

　　-列表

　　　　<ul>
　　　　　　<li></li>
　　　　</ul>

　　　　<ol>
　　　　　　<li></li>
　　　　</ol>

　　　　　　<dl>
　　　　　　　　<dt></dt>
　　　　　　　　<dd></dd>
　　　　</dl>

　　　　無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。無序列表始於 <ul> 標籤。每一個列表項始於 <li>。

　　　　一樣，有序列表也是一列項目，列表項目使用數字進行標記。有序列表始於 <ol> 標籤。每一個列表項始於 <li> 標籤。

　　　　自定義列表不單單是一列項目，而是項目及其註釋的組合。自定義列表以 <dl> 標籤開始。每一個自定義列表項以 <dt> 開始。每一個自定義列表項的定義以 <dd> 開始。

 

　　-table標籤（表格）

　　　　<table border="1">
　　　　　　<thead>
　　　　　　　　<tr>
　　　　　　　　　　<th>表頭1</th>
　　　　　　　　　　<th>表頭2</th>
　　　　　　　　　　<th>表頭3</th>
　　　　　　　　　　<th>表頭4</th>
　　　　　　　　</tr>
　　　　　　</thead>
　　　　　　<tbody>
　　　　　　　　<tr>
　　　　　　　　　　<td>1</td>
　　　　　　　　　　<td rowspan="2">2</td>
　　　　　　　　　　<td colspan="2">3</td>
　　　　　　　　　　<td>4</td>
　　　　　　　　</tr>
　　　　　　</tbody>
　　　　</table>

　　　　thead表示表頭，tbody表示表格主體
　　　　border="1"表示表格顯示，tr表示行，td表示列 ，rowspan表示橫向佔格,colspan表示縱向佔格

　　-label標籤

　　　　<label for="username">用戶名</label>
　　　　<input id="username" type="text" name="user"/>

　　　　這兩個結合着用，用於點擊文件，使得關聯的標籤獲取光標