1、 一套規則，浏覽器認識的規則。
2、 在html裡的注釋：<--！ 注釋的内容 -->
3、 隻能有一個html标簽、head标簽、body标簽
4、 在head标簽裡寫的所有标簽内容是看不見的，除了title标簽
head裡的标簽：
标題：
<title>z趙凡</title>
标題旁邊的圖示
<link rel="shortcut icon" href="11.ico"> ：shortcut icon是固定内容，這樣就表示設定圖示
<link rel="stylesheet" type="text/css" href="css/common.css" >：stylesheet表示要設定css
編碼：
<meta charset="UTF-8">用于定義編碼
重新整理：
<meta http-equiv="refresh" Content="3">預設3秒鐘重新整理一次頁面
跳轉：
<meta http-equiv="refresh" Content="3; Url=http://www.baidu.com" /> 預設3秒鐘跳轉到百度
是以這裡的meta有主要的兩個功能就是重新整理和跳轉
關鍵字：
<meta name="keywords" content="linux，python,運維">
描述：
<meta name="description" content="汽車之家為您提供最新汽車報價，汽車圖檔，汽車價格大全 "/>
相容IE:
<meta http-equiv="X-UA-Compatible" content="IE=IE7;IE=IE8;IE=9" />
5、 标簽分類：
自閉和标簽：meta标簽
主動閉合标簽
6、 body标簽
特殊的符号：
&nbsp空格，&gt,&lt
p标簽：表示段落，預設段落之間是有間隔的
br：換行
H标簽：标題，從H1-H6，效果：
span标簽：空白标簽
效果：
關于标簽的小總結：
所有标簽分為：
塊級标簽：h标簽（加大加粗）、p标簽（段落和段落有間距），div标簽（白闆）
行内标簽（内聯标簽）：span标簽（白闆）、a标簽
div标簽
标簽之間可以嵌套
标簽存在的意義：定位操作、js、css操作
input系列
<input type="text" name="user">:name屬性，value可以設定預設值
<input type="password" name="pwd">：name屬性，value可以設定預設值
<input type="submit" value="送出">
<input type="button" value="按鈕">
單選框
<input type="radio" value="gender"> 單選框 value，name屬性（name相同則互斥）checked="checked"表示預設值
html代碼例子：
<p>請選擇性别</p>
男：<input type="radio" name="gender" value="1">
女：<input type="radio" name="gender" value="2">
複選框
<input type="checkbox" name="favor" value="1">：複選框value, checked="checked"，name屬性（批量擷取資料）
<p>愛好</p>
足球：<input type="checkbox" name="favor" value="1">
籃球：<input type="checkbox" name="favor" value="2">
乒乓球：<input type="checkbox" name="favor" value="3">
網球：<input type="checkbox" name="favor" value="4">
上傳檔案與重置
<p>上傳檔案</p>
<input type="file" name="fname">：依賴form表單的一個屬性：enctype="multipart/form-data"
<input type="reset" name="重置">
大輸入框textarea
<textarea name="member">預設值</textarea>
select标簽（下來框）
name,内部option value送出到背景
select="selected"表示預設選擇
代碼例子：
上述隻能單選
下面方式實作多選，代碼例子：
size用于顯示多個，multiple用于多選
a标簽：
<a href="http://www.baidu.com">百度</a>這種預設情況下是在目前标簽打開此網頁，如果改為如下：
<a href="http://www.baidu.com" target="_blank">百度</a>這樣就會在一個新的标簽打開網頁
錨：實作點選目錄跳轉到相應的内容，實作的方式是通過給标簽設定不同的id，然後在a标簽的href屬性設定#id
關于錨的一個實作例子：
實作的效果就是通過點選相應的章節目錄跳轉到相應的内容
img标簽
<img src="34_56.gif">
就可以實作在頁面上顯示圖檔
如果想要實作點選圖檔跳轉，通過a标簽實作：
<a href="http://www.baidu.com">
<img src="34_56.gif">
</a>
如果圖檔不存在了，在圖檔位置顯示文字，通過alt參數實作：
<img src="../34_56.gif" alt="圖檔1" >
效果如下：
如果想要滑鼠放在圖檔上顯示内容，通過title參數實作：
<img src="34_56.gif" alt="圖檔1" title="圖檔1" >
清單标簽
<ul>
<li>蘋果</li>
<li>三星</li>
<li>諾基亞</li>
</ul>
效果圖如下：
<ol>
<li>香蕉</li>
<li>蘋果</li>
<li>桃子</li>
</ol>
<dl>
<dt>水果</dt>
<dd>蘋果</dd>
<dd>香蕉</dd>
<dd>梨</dd>
<dt>蔬菜</dt>
<dd>白菜</dd>
<dd>蘿蔔</dd>
<dd>蕃茄</dd>
</dl>
實作的效果：
表格标簽
實作效果：
但是上面的表格不是特别規範，下面是規範的表格寫法：
這裡的thead 專門用于寫表頭，th用于寫表頭中的具體資訊
清單裡的合并單元格：
通過colspan="2"參數實作橫向合并
通過rowspan="2"實作縱向合并
label标簽
通過和input标簽搭配使用
代碼例子:
<label for="username">使用者名</label>
<input id="username" type="text" name="user" />
打開的效果圖：
滑鼠點選使用者名輸入框會自動擷取光标
fieldset标簽
7、 CSS
在标簽屬性上設定style樣式
id選擇器。寫在head裡面，style标簽中寫樣式
id選擇器例子：
然後在下面标簽中通過id調用這個style就可以了
class選擇器。同樣是寫在head裡，style标簽中寫樣式，但是這次不通過id,下面是例子：(這種方式是用的最多的)
這種方式下面的标簽在調用的時候是通過class調用
标簽選擇器
這樣的效果就是所有的div标簽都會應用上面的這個樣式
層級選擇器，通過空格分隔 例子：
這樣span标簽下的div标簽就會應用上面的這個樣式
組合選擇器，通過逗号分隔
這樣id=i1,i2,i3以及class=c1的都會應用上面的樣式
屬性選擇器，對選擇到的标簽，再通過屬性進行一次篩選
這樣就會找到input标簽并且type=“text”的應用上面的樣式
8、 css優先級
标簽上style優先，編寫順序，就近原則
從上到下下面的優先級最高
我們可以将css檔案寫入到一個檔案，然後讓其他都能用
調用的方式：
在head裡寫如下代碼：
<link rel="stylesheet" href="comm.css">
設定邊框
<div style="border: 1px solid red;">aaaa</div>
設定寬度的百分比
<div style="height: 100px;width: 80%;border: 1px solid red;">aaaa</div>
text-align: center; 用于設定水準居中
line-height: 100px">aaaa</div>用于設定垂直居中，根據标簽高度
font-weight:600; 字型加粗
font-size 字型大小
9、 float
這樣就可以實作讓塊級标簽在一行顯示
10、 display
none：讓标簽消失
inline
block
inline-block:具有inline，預設自己有多少占多少
具有block，可以設定高度，寬度，padding,margin
行内标簽：無法設定高度，寬度，padding,margin
塊級标簽：設定高度，寬度、padding,margin
所有的努力都值得期許，每一份夢想都應該灌溉！