注釋標簽：對代碼進行說明
<!-- 單行注釋,也可以對多行文字進行注釋 -->
常用格式標簽
<b>加粗</b>
<i>斜體</i>
<u>下划線</u>
<s>刪除線</s>
<p>段落標簽</p>
<hr>：分割線
<br>：換行
<sup>上標</sup>
<sub>下標</sub>
<pre>保留當前格式樣式</pre>
<strong>(粗字體)強調文本</strong>
../：返回上一級（父級）目錄
標題標簽
<h1>我是一級標題標簽(最大)</h1>
<h2>我是二級標題標簽</h2>
<h3>我是三級標題標簽</h3>
<h4>我是四級標題標簽</h4>
<h5>我是五級標題標簽</h5>
<h6>我是六級標題標簽(最小)</h6>
列表標簽
無序列表：
<ul type="disc"> <!--disc:圓點；circle：圓圈；square：方塊-->
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
有序列表：
<ol type="1"> <!--1，a/A，i/I-->
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ol>
自定義列表：圖文混排
<dl>
<dt>標題，圖片</dt>
<dd>描述</dd>
</dl>
CSS樣式
內嵌樣式:放在<head>標簽之間
語法：
<style type="text/css">
選擇器名 {
屬性名:屬性值;
}
</style>
所有標簽（*）
* {
padding:0px; /*清除默認內邊距*/
margin:0px; /*清除默認外邊距*/
}
文本屬性
line-height:20px; /*行高*/
text-align:center; /*對齊：Left|right|center|justify*/
text-decoration:none; /*文本修飾None：默認|underline：定義文本下的一條線|overline：定義文本上的一條線|line-through：定義穿過文本下的一條線*/
Letter-spacing:5px; /*字母之間的間距*/
Text-indent:40px; /*首行的縮進方式：px/%*/
字體標簽及屬性
<font>字體標簽</font>
<!--字體CSS屬性-->
<style type="text/css">
font-size:字體大小（常用單位：px/%/em...）;
color:顏色;
font-style:字體樣式;
font-family:字體系列;
font-weight:字體粗細;
</style>
例：<font size="6" color="#FF0000" face="微軟雅黑">我是字體標簽</font>
背景相關的屬性
background-color: red; /*設置背景顏色*/
background-image: url(圖片路徑); /*設置背景圖片（圖片路徑沒有引號包裹）*/
background-repeat: no-repeat; /*設置背景的平鋪方式：Repeat-x、repeat-y、no-repeat*/
Background-attachment: Fixed; /*設置滾動：Scroll、Fixed*/
background-position: center; /*設置背景的坐標，偏移量,如left、right、center、button*/
background-position:100px -100px;
/*第一值：左右偏移量，正：向右偏移，負：向左偏移；
第二值：上下偏移量，正：向下偏移，負：向上偏移*/
background-size:cover;
/*可以為px、%、cover、continue
cover: 不會造成圖片失真，會鋪滿整個標簽。
contain: 不會造成圖片失真，不會鋪滿整個標簽。
*/
opacity: 0.5; /*設置透明度，范圍0.0-1.0*/
ontline:0 none; /*清除默認邊框*/
超鏈接:
<a href="網頁的網址" target="_blank">超鏈接文字或圖片</a>
_blank:在新窗口打開網頁
_self:在當前自身窗口打開網頁
郵件超鏈接
<a href="mailto:cupwang@163.com">我的郵箱</a>
圖片標簽
<img src="圖片地址路徑" width="寬度" height="高度" alt="加載失敗提示文字"
title="鼠標懸浮提示文字" border="邊框大小" align="圖片與周圍文字的對齊方式：top/middle/bottom/left/right"
vspace="圖片在垂直方向上與周圍文字的間距" hspace="圖片在水平方向上與周圍文字的間距"/>
錨點鏈接
<a href="#錨點名">錨點鏈接：跳轉鏈接</a>
<a name="錨點名">錨點名:要跳轉到的位置</a>
圖片滾動
<marquee scrolldelay="時間延時：毫秒" direction="滾動方向 up down left right">
</marquee>
分隔窗口
<frameset cols="20%,*"></frameset> <!--左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整-->
<frameset rows="20%,*"></frameset> <!--上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整-->
<frameset cols="20%,*"></frameset> <!--分割左右兩個框架-->
<frameset cols="20%,*,20%"></frameset> <!--分割左中右三個框架-->
<frameset rows="20%,*"></frameset> <!--分割上下兩個框架-->
<frameset rows="20%,*,20%"></frameset> <!--分割上中下三個框架 -->
例：
<frameset cols="20%,*">
<frame src="1.html">
<frame src="2.html">
</frameset>
塊級元素和行內元素
塊級元素：凡是默認自動占滿網頁整行的元素（自動換行），稱為塊級元素
<hr> <p> <h1>-<h6> <div> <ul> <li> <dl> <dt> <dd> <table> <pre> <tr> ...
行內元素：不能占滿網頁整行的元素
<font> <img> <span> <a> <b> <br> <buttom> <i> <span> <sub> <sup> <select> ...
表格標簽
tr:行； td：單元格
<table align="表格對齊方式" border="邊框" bgcolor="背景顏色" height="高度" width="寬度" background="背景圖片" bordercolor="邊框顏色" cellspacing="單元格外邊距" cellpadding="單元格內邊距" colspan="合並欄(使用數字)" rowspan="合並列(使用數字)">
<tr align="文本對齊方式">
<th>表頭1</th>
<th>表頭2</th>
</tr>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
優先級：td > tr > table
跨行：<td rowspan="2">跨2行</td>
跨列：<td colspan="2">跨2列</td>
盒子模型
網頁中所有的元素都是盒子
盒子組成部分：
content:內容 padding:內邊距
border:邊框 margin:外邊距
居中對齊：
text-align: center; /*文本居中*/
margin: 0px auto; /*盒子水平居中*/
盒子屬性
height:高度 width:寬度
padding、border、margin:都有四個方向：top、bottom、left、right;
例:
<style type="text/css">
padding-top:50px;
border-left:50px;
margin-right:50px;
</style>
<style type="text/css">
width:200px;/*內容寬度*/
height:150px;/*內容高度*/
border-width:25px;/*邊框寬度*/
border-color:red;/*邊框顏色 transparent：透明*/
border-style:solid;/*邊框樣式 soild：實線，dashed：線虛線，dotted：點虛線*/
</style>
<style type="text/css">
border:10px red solid;
等價於：
border-width:10px;
border-color:red;
border-style:solid;
padding-top:50px;
padding-bottom:100px;
padding-left:50px;
padding-right:100px;
padding:50px; /*內邊距上下左右各50px*/
padding:50px 100px; /*第一個值:上下 第二個值:左右*/
padding:50px 30px 100px; /*第一個值:上 第二個值:左右 第三個值：下*/
padding:10px 30px 50px 100px; /*第一個值:上 第二個值:右 第三個值:下 第四個值:左 (順時針方向)*/
</style>
如何選定網頁中某些或某個元素
選擇器：
1、標簽選擇器：標簽名，網頁中所有這樣的標簽都具有相同的屬性
<style type="text/css">
div {
width:300px; /*寬度*/
height:250px; /*高度*/
border-width:10px; /*邊框寬度*/
border-color:red; /*邊框顏色*/
border-style:solid; /*邊框樣式 solid：實線 dashed：虛線 dotted：點虛線*/
}
2、ID選擇器：#+ID名，選擇網頁中唯一元素，命名規則同C語言 ，關鍵字：id
#box2 {
border-color:blue;
}
3、類選擇器：.+類名，選擇網頁中具有相同類名的元素 ，關鍵字：class
.style2 {
background-color:green;
border-color:black;
border-style:dashed;
}
4、偽類選擇器:
a:link /* 未訪問的鏈接 */
a:visited /* 已訪問的鏈接 */
a:hover /* 鼠標移動到鏈接上 */
a:active /* 點擊時的鏈接 */
這四種不同的狀態必須按照固定的順序寫：
:link :visited :hover :active
5、通配符選擇器（*）
/* 清除網頁默認樣式 */
*{
margin: 0;
padding: 0;
}
選擇器優先級：
!important > ID選擇器 > 類選擇器 > 標簽選擇器 > 通配符選擇器 > 繼承 > 瀏覽器默認屬性
樣式有三種使用方式：
內嵌樣式：定義在該標簽里面的
<div style="width:300px; height:200px; border:5px solid blue; margin:0px auto;">
<!-- 我是一個盒子 -->
</div>
內部樣式：定義在網頁的<head>里面的
<style type="text/css">
p{
background: green;
}
</style>
<body>
<P>Hello World!</P>
</body>
外部樣式：定義在網頁之外的CSS文本里面的
<link type="text/css" rel="stylesheet" href="css/newstyle.css"/>
樣式使用的優先級為：
行內樣式表 > 內嵌樣式表 > 外部樣式表
字符實體
表單元素：
<form action="要提交的網頁" method="post/get"> </form>
post：提交的數據不會在地址欄顯示，安全性好，不限制提交數據的大小。
get：提交的數據會在地址欄顯示，完全性差，限制提交數據的大小。
常見的表單元素包括文本框、按鈕和下拉列表等。除下拉列表框、多行文本域等少數表單元素外，大多數表單元素均使用<input>標簽，只是他們的屬性設置不同，其統一用法如下：
<input name="表單元素名稱" type="類型" value="值" size="顯示寬度" maxlength="能輸入的最大字符長度" checked="是否選中"/>
文本框： <input type="text" value="jack" maxlength="8" name="account" size="10" readonly="readonly"/>
密碼框：<input type="password" maxlength="8" name="pwd" size="10"/>
若要實現多個單選按鈕，只選中一個，前提是保證name屬性值是一樣的，若多個單選按鈕都有checked="checked"，以最后一個單選按鈕為准。
單選按鈕：<input type="radio" name="sex" value="男" checked="checked"/>
復選框：<input type="checkbox" name="hobby" value="籃球" checked="checked"/>
文件域：<input type="file" name="photo"/>
下拉列表
<select name=”指定列表的名稱”size=”行數”>
<option value=”可選擇的值” selected=“selected”>顯示項的內容</option>
<option value=”可選擇的”>顯示項的內容</option>
……
</select>
多行文本域
<textarea name=”指定名稱” cols=”列數” rows=”行數”>
//文本域的內容
</textarea>
重置、提交與普通按鈕，圖像按鈕：
<input type="submit" value="提交按鈕的顯示值" name="名稱"/>
<input type="reset" value="重置按鈕的顯示值" name="名稱"/>
<input type="button" value="普通按鈕的顯示值" name="名稱"/>
<input type="image" src="imags/Logo.png"/>
去掉頁面中的滾動條
<body scroll="no"> <!--去掉全部滾動條-->
<body style="overflow-y:hidden"> <!--去掉頁面右邊的滾動條-->
<body style="overflow:scroll; overflow-y:hidden">
<body style="overflow-x:hidden"> <!--去掉頁面底部的滾動條-->
<body style="overflow:scroll; overflow-x:hidden">
自定義滾動條
body {
Scrollbar-3DLight-Color: #999999; /*滾動條亮邊的顏色*/
Scrollbar-Arrow-Color: #CCCCCC; /*上下按鈕上三角箭頭的顏色*/
Scrollbar-Base-Color: #E1E1E1; /*滾動條的基本顏色*/
Scrollbar-Shadow-Color: #CCCCCC; /*立體滾動條陰影的顏色*/
Scrollbar-DarkShadow-Color: #333333; /*滾動條動條陰影的顏色*/
Scrollbar-Face-Color: #999999; /*滾動條凸出部分的顏色*/
Scrollbar-Highlight-Color: #F2F2F2; /*滾動條空白部分的顏色*/
Scrollbar-Track-Color: #F2F2F2; /*滾動條的背景顏色*/
}
CSS在線速查API： http://css.cuishifeng.cn/
Html+CSS離線API文檔： https://www.lanzous.com/i6jyhab