如何學好html，記住背好標簽是關鍵！
背會html標簽屬性是學好網頁的關鍵！
趁著周末接著上一期繼續與大家分享一下標簽完美版的標簽！
祝大家周末愉快哦！
圖像<img> 語法格式：
<img src="url"alt="?" width="?" height="?" border="?"align="?">
border屬性定義圖片邊框的寬度，默認值為0
align屬性設置圖片旁邊文字的位置
語法格式：<imgsrc="" align"">
可選值有：
top圖片和文字頂部對齊
middle圖片和文字居中對齊
bottom圖片和文字底邊對齊（默認）
left圖片居左對齊，文字沿圖片繞排
right圖片居右對齊，文字沿圖片繞排
absmiddle圖片對齊到目前文字行絕對中央
absbottom圖片對齊到目前文字行絕對底部
文字的排版
不換行空白標記
font元素
語法格式：
<font face="字體名稱" size="字體大小" color="字體顏色">
字體大小可選值為1——7，默認為3
例：〈fontface="黑體"size="4" color="#ff00ff">....</font>
水平線<hr>
語法格式：<hrwidth="寬度"align="對齊方式默認居中center"size="水平線厚度默認為2"color="顏色"noshade>
noshade無陰影，既實線
層〈div><span>兩種元素
<div>是塊級元素，和段落元素<p>相似，不同的是兩個<div>元素之間不會產生兩個<p>元素之間的空行，
<span>是行內元素，可以定義段落中部分文字的屬性
語法格式：
<div align=""style="">...</div>
align設置層中元素的水平對齊方式
stule設置元素應用css規范的屬性
<div>兼容性比<span>要好一點，最好使用<div>
表格語法格式：
<table width=""bgcolor="" background="" border=""cellspacing="" cellpadding="">
<tr>...<td>....</td>....</tr>
</table>
border邊框寬度默認值為0，既沒有邊框
cellspacing表格中單元格的邊距大小，默認值為兩個像素
cellpadding表格中單元格之間的間距大小，默認值為兩個像素
tr元素
語法格式：
<tr align=""bgcolor="">....</tr>
align屬性對齊方式可選值如下：left,center,tight,默認為left
bgcolor指定該行的背景顏色
td元素
語法格式：
<td width="寬度" height="高度" align="水平對齊方式" valign="垂直對齊方式" bgcolor=""background="" rowspan="單元格的行跨度" colapan="單元格的列跨度">.....</td>
align屬性的可選值有：left,center,right
valign屬性的可選值有：top,middle,bottom
rowspan和colapan跨行和跨列的數量，默認為1
input元素 語法格式：
<input type="">
type屬性的可選值有：
text 單行文本框
屬性：name 文本框名稱
value 文本框的初始值
size 文本框的長度
maxlength 可輸入字符串最大的長度
radio 單選框
屬性：name 單選框名稱
value 內部值
checked 默認選定
checkbox 復選框
屬性：name 復選框名稱
value 內部值
checked 默認選定
reset 重置按鈕
submit 確定按鈕
屬性：name 按鈕名稱
value 顯示在按鈕上的文字
password 密碼框
屬性與文本框的屬性完全相同
file 文件域
屬性：name文件域名稱
size 文件域的長度
maxlength 文件域可接受的字符數量的上限
hidden 隱藏域
屬性：name 隱藏域名稱
value 內定值
image 圖片域
屬性：name 所要代表的按鈕，可以是submit,reset,或其他.
src 按鈕圖片的url 地址
列表框<select>
語法格式：
<select>
.....
<option>....</option>
.....
</select>
select元素
語法格式：<selectname="" size=""multiple></select>
name 指定列表框的名字
size 指定列表框顯示列表項的條數，如果指定了該參數，select元素是個列表，否則是一個下拉列表框
multiple 指定了這個參數，則表示該列表框可選擇多項，否則只可選擇一項
option屬性
語法格式：<optionvalue="" selected></option>
value 該列表項的值
selected 如果設定了這個參數，默認為選定這一項
多行文本框<textarea>
<textarea name=""cols="" rows="" wrap="off/physical/virtual"></textarea>
屬性：
name文本框的名稱
cols文本框的寬度
rows文本框的高度
wrap文本框的折行方式可選值有：
off不保存換行信息
physical強迫瀏覽器在發送信息到web服務器端時必須將多行文本框的文字一行一行的送出，
virtual送出連續成串的字除非使用者按回車。
css 層疊樣式表
引入層疊樣式表的方法包括：
外聯式樣式表
例：<head>
<link rel="stylesheet"href="/css/default.css">
</head>
<body>
....
</body>
</html>
屬性：rel 用來說明<link>元素在這里要完成的任務是連接一個獨立的css文件。而href屬性給出了所要連接css文件的url地址
內嵌式樣式表：
例：<html>
<head>
<style type="text/css">
<!--
td{font:9pt;color:red}
.font105{font:10.5pt;color:blue}
-->
</style>
</head>
<body>....</body>
</html>
元素內定
格式：<pstyle="font-size:10.5pt">
導入式樣式表
〈html>
<head>
<style type="text/css">
<!--
@import url(css/home.css);
-->
</style>
<body>
....
</body>
</html>
css的優先級
越接近目標的樣式定義優先級越高，高優先級樣式將繼承低優先級樣式的未重疊定義但覆蓋重疊的定義
如果4種樣式表對同一元素定義了不同的樣式，那么他們的優先級順序從高到低是，元素內定，內嵌樣式表，導入樣式表，外聯樣式表。
css結構
例：td{font-size:10.5pt;color:#666666}
css樣式包含兩個基礎部分，
選擇符<td>和聲明{font-size:10.5pt;color:#666666}
聲明也有兩部分組成：
屬性font-size,color和值10.5pt,#666666
選擇符分為6種
1元素選擇符
當頁面上多個元素的樣式相同時，可以將多個元素放在一起定義，中間以逗號分開例：td,p,li,input,select{font-size:12px;}
2class(類)選擇符
例：〈head>
<title>.....</title>
<style type="text/css">
<!--
.red{font-size:10.5pt;color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p>士大夫井岡山地方官</p>
<p>九連環離開計劃</p>
</body>
還有一種方法就是限定可以應用它的頁面元素
例：〈head>
<title>.....</title>
<style type="text/css">
<!--
h1.red{color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p>士大夫井岡山地方官</p>
<h1>九連環離開計劃</h1>
</body>
3 id選擇符
與class選擇附類似，只是把'.'換成'#'
例：<body>
<head>
<style type="text/css">
<!--
#select{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250"border="1" height="50">
<tr>
<tdid="select">id選擇符</td>
</tr>
</table>
</body>
</html>
我們看到在調用ID選擇附時與CLASS選擇附類似，只是將class=""換成了id=""，方便頁面腳本語言的調用
關聯選擇符
<body>
<head>
<style type="text/css">
<!--
td p{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250"border="1" height="50">
<tr>
<td><p>關聯選擇符</p></td>
</tr>
</table>
<p>關聯選擇符</p>
</body>
</html>
我們設定了在元素中<td>的元素<p>所包含文字的樣式，只有在兩個條件都滿足是，樣式在會起作用，
偽類選擇符
是只能用在css選擇符里，而不能用在html代碼中的選擇符
例：
〈html>
<head>
<style type="text/css">
<!--
a:link{color:#000000}
a:visited{color:#cccccc}
a:hover{color:#ff0000}
a:active{color:#ooooff}
-->
</style>
</head>
<body>
<p><a href="#">關聯選擇符</a><p>
<p><a href="#">關聯選擇符</a><p>
<p><a href="#">關聯選擇符</a><p>
<p><a href="#">關聯選擇符</a><p>
〈/body>
</html>
正確的順序是a:link\a:visited\a:hover否則會引起頁面上連接顏色混亂
偽元素選擇符
與偽類選擇符定義類似，目前被大多數瀏覽器支持的有兩個：首行偽元素（first-line）和首字符偽元素(first-letter)是用來實現首行大寫和首行下沉效果的
例：首行
<html>
<head>
<style>
<!--
p:first-line{color:red;font-size:20pt}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
長度隨瀏覽器窗口大小而改變
首字
<html>
<head>
<style>
<!--
p:first-letter{color:red;font-size:50pt;float:left;}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
以上兩種都只能應用于塊狀元素上
css規則
1.繼承
例：<html>
<head>
<style type="text/css">
<!--
td{font-size:12pt}
p{color:red}
-->
</style>
</hesd>
<body>
<table width="300"border="1" height="150">
<tr>
<td>
<p>css規則</p>
</td>
</table>
</body>
</html>
<p>為最高級<td>次一級兩種css用在一個屬性元素上，相同的覆蓋，不同的繼承，
2.組合
例:td{font-size:12pt}
p1{font-size:12pt}
組合后
td,.p1{font-size:12pt}
3.層疊
在樣式里定義過后，在表格屬性中又定義一次
<html>
<head>
<style type="text/css">
<!--
red{color:#ff0000 limportant}
-->
</style>
</hesd>
<body>
<table width="300"border="1" height="150">
<tr>
<tdstyle="color:#0000ff">決撒地方官</td>
</tr>
</table>
</body>
</html>
css單位
分四大類：
1 長度單位
數值可以是整數，小數，正數，負數，0，后加單位（負值不要輕易使用）
換算關系：
1in(英寸)=6pc(派)
1in(英寸)=72pt(磅)
1in(英寸)=2.54(厘米)
1cm(厘米)=10mm(毫米)
1cm(厘米)=0.3937(英寸)
1pt(磅)=1/72in(英寸)=0.2478mm(毫米)
1pc(派)=1/6in(英寸)=我國新四號鉛字的尺寸
2 百分比單位
3 顏色單位
4 url單位
div屬性
color : #999999 文字顏色
font-family : 宋體 文字字型
font-size : 10pt 文字大小
font-style:itelic 文字斜體育
font-variant:small-caps 小字體
letter-spacing : 1pt 文字間距
line-height : 200% 設定行高
font-weight:bold 文字粗體
vertical-align:sub 下標字
vertical-align:super 上標字
text-decoration:line-through 加?h除線
text-decoration:overline 加頂線
text-decoration:underline 加底線
text-decoration:none ?h除連接底線
text-transform : capitalize 首字大寫
text-transform : uppercase 英文大寫
text-transform : lowercase 英文寫
text-align:right 文字*右對齊
text-align:left 文字*左對齊
text-align:center 文字置中對齊
這些是一些簡單的文字效果，可以應用到css的頁面中。
背景
background-color:black 背景顏色
background-image : none 背景圖片
background-attachment : fixed 固定背景
background-repeat : repeat 重復排列-網頁預設
background-repeat : no-repeat 不重復排列
background-repeat : repeat-x 在x軸重復排列
background-repeat : repeat-y 在y軸重復排列
background-position : 90% 90% 背景圖片x與y軸的位置
鏈接
A 所有超連接
A:link 超連接文字格式
A:visited 瀏覽過的連接文字格式
A:active 按下連接的格式
A:hover 鼠標移至連接
邊框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四邊框
虛線
<TEXTAREA STYLE="border:1px dashedpink">
實線
<TEXTAREA STYLE="border:1px solidpink">
