標籤：add 清除浮動 block sel 地方 hid 單擊 刪除線 wait
第一章
一、HTML定義：超文字標籤語言
作用：製作網頁
二.結構：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>放網頁標題</title>
<meta name="keywords" Content="搜尋引擎關鍵字內容" />
<meta name="description" Content="搜尋引擎描述內容" />
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8"><!-- 用來設定字元編碼 -->
<!-- utf-8國際通用的中英轉碼gb2312 也是中英轉碼，通用性沒有utf-8強 -->
<!--meta標籤可以省略不寫-->
</head>
<body>
網頁的內容部分
</body>
</html> QQ：1416890750 電話：18873301563
三.標籤
<>是標籤，<>裡的東西是標籤名稱
標籤的種類
a.有主體的標籤
<標籤名>主體內容</標籤名>
例：<html>.....</html>
<title>網頁標題</title>
b.無主體的標籤 自身閉合
<標記名/> 例：<br/> <hr />
c.有主體有屬性的標籤
<標籤名 屬性1=“值1” 屬性2=“值2”></標籤名>
例：<table border="1"></table>
d.無主體有屬性的標籤
<標籤名 屬性1="值1" 屬性2="值2"/>
例：<img src="....." />
1.網頁標題標籤：<title></title>
2.內容標題標籤：<h1>-<h6>
3.段落標籤：<p></p>
4.換列標籤：<br/>
5.水平線：<hr/>
6.加粗 ：<strong></strong>
7.傾斜：<em></em>
8.底線：<u></u>
9.注釋： <!--注釋的內容-->
四、網頁中特殊符號的表現形式
1、空格:
2、<: <
3、>: >
4、&: &
5、著作權符：© 6、雙引號："
五、圖片標籤
<img src="圖片的地址" align="水平對齊" hspace="水平間距" vspace="垂直間距" height="圖片的高度" width="圖片的寬度" alt="替代文本，圖片無法正常顯示的時候顯示的文字" title="滑鼠懸浮提示文字" />
注意：src:相對路徑和絕對路徑
1、相對路徑:是從當前開啟網頁的目錄開始尋找。通過../找到上一級目錄,有幾個上 級目錄就有幾個../
2、絕對路徑:盤符\檔案夾名稱\圖片名 是從指定的盤符開始尋找
六、連結
1.超連結：頁面與頁面間的連結
<a href="連結檔案的路徑" target="目標檔案顯示方式"></a>
target="_self" 開啟自身的視窗
target="_blank" 建立視窗
2.錨連結
a.同一頁面間的：
在目的地做標記：<a name="標記名">目的地</a>
在要點擊的地方：<a href="#標記名">點擊的地方</a>
b.不同頁面間的：
在目的地做標記：<a name="標記名">目的地</a>
在要點擊的地方：<a href="頁面路徑#標記名">點擊的地方</a>
3.功能性連結
郵箱：<a href="mailto:郵箱地址">聯絡我們</a>
QQ:<a href="Tencent://Message//uin=QQ號">QQ</a>
4.偽連結（空連結）
<a href="#">內容</a>
第二章
列表
1.有序列表
<ol type="1">
<li></li>
<li></li>可以有多個li,所有的內容必須放入li中
</ol>
type值：1 數字,
A/a 字母大小寫
I/i羅馬文
不設定type預設是數字模式
2.無序列表
<ul>
<li></li>
<li></li>可以有多個li,所有的內容必須放入li中
</ul>
type值：disc實心圓形,（預設值）
circle空心的圓形,
square實心的正方形
3.定義列表：對某文字或圖片進行描述的時候使用
<dl>
<dt>被描述的內容</dt>
<dd>描述的內容</dd>可以有多個
</dl>
4.列表嵌套
a.無序列表：在<li>標籤中再嵌套其他的列表 ，嵌套時要先聲明列表（不能直接嵌套li標籤）
效果:無序列表與嵌套的列表成父子關係，子列表會有縮排效果，並且如果嵌套的是無序列表，那麼列表的符號會遞減（實心圓-空心圓-方形）
b.有序列表：和無序列表同理，只能在li標籤中嵌套其他列表，並且嵌套時要先聲明列表
效果：有序列表嵌套有序列表，子列表會縮排，，但是符號不會遞減
表格
1.優點：結構清晰簡單穩定，使用方便
2.表格結構
<table border="1" height="500" width="300" cellspacing="0" cellpadding="0">----------表格
<tr bgcolor="表格背景色">-----------行
<td></td>---儲存格
</tr>
</table>
border:表格的邊框；
height:設定表格的高度；
width:設定表格的寬度
3.注意：有多少行就有多少對tr,有多少儲存格(列)就有多少對td
cellpadding：用於隔開儲存格內容到儲存格邊框的距離
cellspacing:表示儲存格與邊框的距離
4.表格跨行:rowspan="跨行的數目" 跨行永遠從上往下跨
跨列:colspan="跨列的數目" 從左往右跨
5.儲存格對齊:align（水平對齊屬性）：center置中/left靠左對齊/right靠右對齊
valign(垂直對齊屬性):top頂端對齊/middle置中對齊/bottom底端對齊/baseline基準對齊
如果作用在table上，那整個table會根據設定的值而改變
6.設定儲存格邊框顏色：bordercolor="顏色"
7.表格背景圖片：background="圖片地址"
8.表格標題：
<caption>標題內容</caption>（放在<table>底下第一行）
架構：
1.為什麼使用架構
使網頁的頭部和底部能重用，過多的使用架構不利於搜尋，所以商用少，多用於企業管 理網站
注意：<frameset>和<body>不能同時出現
網頁分割後每一塊都是一個<frame>，每一個<frame>可以放一個獨立的網頁
2.文法：
<frameset rows="25%,50%,*"(縱向分割成25%,50%,25%) bordercolor="red" border="5" cols=""(橫向分割)>
<frame src=".....the_first.html" name="top"/>
<frame src=".....the_second.html" name="middle"/>
.........
</frameset>
橫向分割為cols 縱向分割為：rows
3.嵌套：
<frameset rows="50%,50%">
<frame src="xxxxx"/>
<frameset cols="xx,xx">
<frame src="xx"/>
<frame src="xx"/>
</frameset>
</frameset>
4.架構中的target屬性
在架構需要開啟網頁的<frame>裡設定name屬性（name屬性的設定需要有意義），然後 在我們連結目標的<a>標籤中設定target=“架構name名字”
效果：可以在目標<frame>當中開啟連結的目標網址
文法：
<frameset cols="50%,*">
<frame src="頁面路徑" name="path"/>
<frame src="頁面路徑" name="path2"/>
</frameset>
<a href="頁面路徑" target="path">開啟第一個網頁</a>
5.內聯架構
<iframe>內聯架構(頁中頁)</iframe>要在<body>裡
<iframe src="path"(引用頁地址)
name="架構標識名" frameborder="1/0(架構是否有邊框)"
scrolling="yes/no"(架構是否有捲軸)
width="寬度" height="高度">
</iframe>
注意：如果要實現點選連結在內聯架構中跳轉頁面，將連結
的target屬性設定成內聯架構的標識名。
表單
一.表單：用來提交資訊
1.<form id="form1" method="get/post" action="提交地址"></form>
ID：表單標識（類似身份證）
get:顯示提交方式，不安全，提交資訊在地址欄上顯示
提交的資料有限制，大小最大為1kb
post:隱式提交方式，安全，資訊不會在地址欄上顯示
提交的資料理論上沒有限制
2.表單元素
1.文字框：<input type="text" />
name:定義單行文字框名稱
size:定義單行文字框的寬度
maxlength:定義單行文字框可以輸入的最大字 符/位元組數
value:定義單行文本的初始值，上傳給伺服器的值
2.密碼框：<input type="password" />屬性和文字框一樣
3.按鈕：普通按鈕:<input type="button" value="普通" />
提交按鈕：<input type="submit" value="提交" />
重設按鈕：<input type="reset" value="重設" />
圖片按鈕：<input type="image" src="路徑" />
4.複選框：<input type="checkbox" checked="checked" />(checked:設定預設選項)
注意：可以選擇多個，也可以不選，但是同一組的複選框name屬性要一致
5.選項按鈕：<input type="radio" name="" /> (name用來設 置選擇其中某一個選項按鈕)
6.檔案域：<input type="file" />
在檔案域之前的<form>標籤裡加上
<form method="post" action="XXXXX" nctype="multipart/form-data">
因為檔案的資訊量較大
7.下拉式清單方塊：<select >(selected設定預設選項)
<option selected="selected">內容</option>
</select>
8.多行文本域：<textarea cols="寬(位元組數)" rows="高">
內容</textarea>
9.隱藏欄位：<input type="hidden" />
二.唯讀和禁用
1.唯讀(readonly)：顏色不會發生變化，只能讀取，不能操作
2.禁用(disabled)：顏色變灰色，無法使用
三.語義化（把表單中的元素用框框起來）：
1.作用：結構合理代碼簡單
便於瀏覽器識別
便於搜尋引擎搜尋
符合W3C規範
2.域和域標題
<fieldset>--------域
<legend>標題</legend>----域標題
放其他內容
</fieldset>
3.文字標籤：
<label for="標識名"></label>
注意：標識名要和按鈕（單選/複選）中的id名相同，點擊<label>標籤中間的文本也可以選中按鈕，增強滑鼠的可用性
第四章 CSS樣式
一、字型樣式
font-style:字型風格：正常normal/傾斜oblique/意大利體italic
font-weight:字型粗細bold
font-size:字型大小
font-family：字型類型
font在一個聲明中設定所有字型屬性
font:italic bold 36px "宋體";
font設定順序:風粗大類
字型風格-->字型粗細-->字型大小-->字型類型
二.CSS：層疊樣式表
1.優勢：使頁面更加美觀
頁面和樣式分離
使代碼更加簡潔
利於搜尋引擎搜尋
符合W3C的規範
2.選取器：
a.標籤選取器：整個文檔中所有的該標籤內容都實現該樣式
文法：標籤名{樣式1;
樣式2;
}
b.類別選取器：出現特殊情況，使用多次的樣式
文法：.類名{樣式1;
樣式2;
}
c.ID選取器：只能使用一次的樣式
文法：#id名{樣式1;
樣式2;
}
3.選取器的優先順序：(有相同樣式按優先順序,沒有相同樣式都會使用)
ID選取器 > 類別選取器 > 標籤選取器
三.樣式表
1.行內樣式表：寫在標籤內
使用方便，不利於後期維護
2.內部樣式表：寫在<head></head>中
只設定一個網頁的樣式
3.外部樣式表：建立一個CSS檔案
多個網頁可以共用一個css頁面
<link href="css頁面的路徑" type="text/css" rel="stylesheet" />
<style type="text/css">
@import url("css頁面的路徑");
</style>
4.樣式表的優先順序：(就近原則)
行內樣式表 > 內部樣式表 > 外部樣式表
第五章 美化網頁元素
一.<span>範圍標籤</span>，本身不內建任何樣式
<div></div>塊級標籤，獨佔一行
二.文本樣式
color:文本顏色
line-height：行高，作用：垂直置中或設定行距
text-decoration:文本修飾，加底線underline
中劃線line-through(刪除線）
上劃線overline
閃爍blink（只在Firefox瀏覽器中有效）
不加線none
text-align:水平對齊,left:左 center:中 right:右
vertical-align：垂直對齊，居上top
置中middle
居下bottom
文本首行縮排設定：text-indent:2em;
長度單位：px,em(中文網頁通常用em作為縮排單位)
文本不換行：white-space:nowrap;
三.超連結偽類樣式
a:link 超連結未訪問
a:visited 超連結訪問後
a:hover 超連結懸浮
a:active 超連結單擊未釋放
四.滑鼠形狀樣式：可以作用於任何標籤
cursor: default:預設游標
pointer：超連結的指標(一隻手)
wait：正忙(漏鬥)
help：協助(問號)
text：文本(游標)
crosshar：十字狀
五、背景樣式+div標籤
<div></div>是一個塊級標籤，具有高度和寬度
經常使用div布局,div+table經典布局之一
background-color:設定背景色
background-image:url(圖片名稱.尾碼名);
background-repeat:設定圖片平鋪方式
有4個值:
background-repeat：repeat //表示水平和垂
直兩個方向平鋪（水平和垂直方向圖片都重複）
background-repeat：no-repeat//表示不平鋪(只顯示一次)
background-repeat:repeat-x //表示只沿水平方向平鋪
background-repeat:repeat-y //表示只沿垂直方向平鋪
background-position:背景定位兩種方式
background-position :30% 30%;//通過百分比的方式定位第一個參數表示水平方向 ，第二個參數是垂直方向
background-position:left top;
水平方向有 left(左) right（右） center（中）
垂直方向有 top（上） middle bottom（下）
background:顏色 圖片 位移 平鋪;
簡寫：background:#c00 url(圖片地址) 205px 10px no-repeat;
順序：背景顏色-背景圖片-背景定位-背景重複方式
六、列表樣式
list-style-type
none無標記符號 disc實心圓（預設類型）
circle空心圓 square實心正方形
decimal數字
列表圖片代替標記
list-style-image:url(圖片地址)
列表圖片定位
list-style-position
兩個值：inside outside
inside：表示標記圖片在文本以內，且環繞文本標記對齊
outside:是預設值，它保持在標記文本的左側，清單項目標記放置在文本外，且環繞文本不根據標記對齊。
第六章 盒子模型
一.盒子模型：包含border，padding，margin屬性
二.border：邊框（top、right、bottom、left)
1.border-width:寬度(border-top-width:上邊框的寬度) 1px
thin:細的
medium:加粗
thick：更粗
2.border-style:樣式(實線solid，虛線dashed,雙線double,點dotted...)
3.border-color:顏色（四條邊顏色不同，順時針）
4.border:縮寫,順序可以打亂
例：border:1px solid red;
三.margin和padding
1.margin：設定盒子以外的間距(外間距)
2.padding：設定內容和盒子邊框的間距(內間距)
3.縮寫：margin和padding一樣
padding:10px;（四個方向都是10px間距）
padding:10px 20px;（10px:上下 20px:左右）
padding:10px 20px 30px;(10px:上 20px:左右 30px:下)
padding:10px 20px 30px 40px(上 右 下 左)順時針方向
四.display:
1.display:block;/*將內嵌元素轉換為區塊層級元素，顯示元素內容*/
2.display:inline;/*將區塊層級元素轉換為內嵌元素*/
3.display:none;/*隱藏元素*/
浮動
一.浮動：float
float:left;向左浮動
right;向右浮動
none;不浮動
特性：脫離標準文檔流
將區塊層級元素轉換為內嵌元素
文字將會環繞浮動元素顯示
二.clear:清除浮動(不是去掉浮動，讓後面的元素不受上面浮動元素的影響)
left:清除上一個浮動元素的左浮動
right:清除上一個浮動元素的右浮動
both:清除所有的浮動
三.overflow：溢出處理：它規定當內容溢出盒子時發生的事情，例如內容不會被修剪而呈現在盒子之外，內容會被修剪，修剪內容隱藏等
visible:預設的，超出的部分繼續顯示
hidden：超出部分不顯示(隱藏)
scroll:顯示捲軸(橫向和縱向都會出現)
auto：自動調整捲軸的出現(縱向出現)
定位
一.定位方式position：
1.absolute;絕對位置：相對瀏覽器而言（上一級元素而言）
2.relative;相對定位：相對於自己原來的位置而言
3.fixed;固定定位：定位到一個位置，位置將不會發生變化，少用，很多瀏覽器不識別
4.static:靜態定位，預設
5.注意：一個元素有絕對位置，它的上級有定位，則這個元素不再相對瀏覽器定位，而是相對於上級有定位的元素定位
二.z-index:處理層次
1.值越大越在上層，值越小越在下層
2.z-index結合定位用，如果沒有定位的元素預設
z-index:0;（註：值為整數）
三.背景元素透明度（一般設定時前兩種同時設定為了相容不同版本的瀏覽器）
1.opacity:x x值為0-1 值越小越透明(ie9之前的版本不支援)
2.filter：alpha（opacity=x）x值為0-100值越小越透明
3.html5之後設定背景元素透明度
background:rgba(0,0,0,0.4) a為不透明度 值為0-1
rgb值可以設定顏色 值為0-255
HTML + CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
