htmlcss
----------------------------------------html
html基本結構linux
<html>windows
<head></head>瀏覽器
<body></body>服務器
</html>網絡
body中的各類標籤組件:less
1、正文中的標題標籤:h1~h6ide
要注意的是:佈局
1)<h1>的字體最大,<h6>字最小。跟<font>標籤的size屬性是反的,size值爲1最小,值爲7最大。
2)必須是獨佔一行
3)使用<h1>到<h6>標籤,會讓文字變大變粗。但千萬不要由於想讓文字變大變粗就給他加一個標題標籤,這是錯誤!你可使用<font>或<b>標籤來實現
4)搜索引擎會把文章中出現的<h1>到<h6>標籤來做爲文章的結構與主次,從而進行索引。懂seo的朋友就知道,這個很重要!
2、段落與換行:
換行標記: <br/>
段落標記: <p></p>
把p標記中的文本當作一段文字, 一段文件完畢以後, 會天然換行.
3、分割線:
<hr 屬性名="屬性值" />
屬性:
width: 寬度 300px ;50% 佔用父標記寬度的百分比
align: 對齊方式:left 居左; center 居中; right 居右
4、圖片標籤: (單標記):能夠在頁面中顯示一張圖片
<img />
屬性:
src:指定目標圖片的路徑
width:寬度 px
height:高度
寬高同時設置時會出現失真的現象,若須要等比例 縮放,則只須要設置其中一個便可.
路徑:
①絕對路徑:
操做系統絕對路徑:windows: 以盤符開頭的路徑爲絕對路徑;c:\Program Files\xxxx.jpg
linux / Unix / Mac: 以/(根目錄)開頭的路徑爲絕對路徑
/home/soft01/xxx.jpg:網絡端絕對路徑:
以http://開頭的url路徑: http://tts6.tarena.com.cn/xxx.jpg
②相對路徑:
指的是經過當前html文檔和目標文件生成的路徑.
相對路徑也能夠指向目標文件.
不以盤符和/(根目錄)開頭的路徑:
網頁所支持的圖片格式:
JPG/JPEG: 體積小 圖像有較小的失真
png: 顯示顏色種類較多 體積較大 圖像保存無缺
gif: 支持動態圖 體積小 顯示的顏色很是少
png/gif: 支持透明色
jpg: 不支持
5、a連接:
<a> 連接文本 </a>
屬性:href: 點擊連接以後跳往的目標地址
點擊圖片跳轉 :
<a href="">
<img src=""/>
</a>
圖片熱點連接:這種效果的實質是把一幅圖片劃分爲不一樣的熱點區域,再讓不一樣的區域進行超連接。要完成地圖區域超連接要用到三種標籤:<img><map><area>。
<img src="圖形文件名" usemap="#圖的名稱">
<map name="圖的名稱">
<area shape=形狀 coords=區域座標列表 href="URL資源地址">
<!--可根據須要定義多少個熱點區域-->
<area shape=形狀 coords=區域座標列表 href="URL資源地址">
</map>
【1】shape -- 定義熱點形狀
shape=rect: 矩形
shape=circle:圓形
shape=poly: 多邊形
【2】coords -- 定義區域點的座標
a.矩形:必須使用四個數字,前兩個數字爲左上角座標,後兩個數字爲右下角座標
例:<area shape=rect coords=100,50,200,75 href="URL">
b.圓形:必須使用三個數字,前兩個數字爲圓心的座標,最後一個數字爲半徑長度
例:<area shape=circle coords=85,155,30 href="URL">
c.任意圖形(多邊形):將圖形之每一轉折點座標依序填入
語法:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
例:
<img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="12,37,181,88" href="http://www.qq.com" onFocus="this.blur()"/>
<area shape="rect" coords="12,97,182,143" href="http://www.yahoo.com" />
<area shape="rect" coords="18,155,179,200" href="http://www.sina.com" />
<area shape="rect" coords="18,211,182,260" href="http://www.baidu.com" />
<!--<area shape="rect" coords="12,444,182,490" href="sm-textfile.html" target="pcs"/> -->
<!-- onFocus="this.blur()" 去掉虛線框 -->
</map>
6、表格:
表格的第一種規範:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
table:表格標記
屬性:
width: 寬度
height: 高度
border: 邊框寬度
align: 對齊方式 left|center|right
cellpadding: 單元格的內邊距
cellspacing: 單元格與單元格之間的距離
tr: 表格行
td: 單元格
屬性:
rowspan: 合併行
colspan: 合併列
表格的第二種規範:
<table>
<caption></caption> 表格標題
<thead> 表頭
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody></tbody>表體
<tbody></tbody>
<tfoot></tfoot>表腳
</table>
使用時用第一種或第二種均可以.
第一種更簡單、第二種更規範
7、表單標籤:
表單用於收集用戶信息, 一個表單中能夠含有多個表單組件.
input標籤:
文本框
<input type="text" name="" value=""/>
type:定義了input組件的樣式(文本框)
name:定義了input組件的名稱, 只有寫上name屬性
的組件在提交的時候才能夠向服務器傳遞數據.
value:定義了頁面加載後文本框中的默認值.
提交按鈕:
<input type="submit" value=""/>
value:定義按鈕上的文字
密碼框:
<input type="password" name=""/>
單選按鈕:
<input type="radio" name="" value=""/>
name:多個單選按鈕 若name相同,則爲一組單選按鈕. 一組單選按鈕只能選擇一個.
value:提交給服務器的參數值.
checked="checked" 若但願某個單選鈕默認被選中,則須要添加該屬性.
多選框:
<input type="checkbox" name="" value=""/>
&pwd=&sex=m&hobby=swimming&hobby=coding
checked="checked" 默認被選中
普通按鈕:
<input type="button" value=""/>
value:表明按鈕上的文字
重置按鈕:
做用: 把當前表單中的全部組件的值恢復默認.
<input type="reset" value=""/>
非input標籤:
下拉列表框:
<select>
<option value="">text</option> 下拉項
<option></option> 下拉項
</select>
option:
text: 表示顯示在下拉項中的文字
value: 表明當前下拉項的值
多行文本域:
<textarea name=""></textarea>
列表標記:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
--------------------------------------------
8、css樣式屬性:
佈局屬性: (box模型)
1>外邊距(margin):
margin: 10px; 上下左右外邊距全爲10px
margin: 10px 20px; 上下外邊距爲10px 左右爲20px
margin: 0px auto; div水平居中
margin: a b c d; 上 右 下 左方向外邊距
margin-left: 10px
margin-right:
margin-top:
margin-bottom:
2>內邊距(padding):
padding:a;
padding:a b;
padding:a b c d;
padding-top:
padding-right:
padding-bottom:
padding-left:
經常使用的簡單樣式屬性:
1>背景屬性: background
background:">red | blue | black ;#ffffff ; #fff
background-image:url("目標圖片路徑");
background-repeat: 背景圖像平鋪方式
repeat:repeat-x:;repeat-y:;no-repeat:
background-position: 背景圖像定位
2>字體屬性: font-
color: 字體顏色
font-size: 字體大小 px
font-family: 字體 黑體 宋體 ...
font-weight: 磅值 (粗細):normal;bold;bolder;lighter;100~900
font-style:normal 普通;italic 斜體
3>文本屬性: text-
text-align: 文本對齊方式:left;center;right
line-height: 行高 主要用於控制文本的垂直居中
text-decoration:none;underline;overline;line-through
4>邊框屬性: border-
border:1px solid black;
border-width:
border-style:
border-color:
border-left-width:
...
5>列表相關屬性:
list-style:none;
6>複雜屬性:
display:能夠控制組件的隱藏與顯示
none: 隱藏組件
block: 顯示組件
block還能夠把行級標記當作塊級標記來顯示.
由於只有塊級標記能夠設置width和height
行級標記: 多個標記佔用一行
<a></a><input/> <span></span> <s></s> <b></b><strong>
塊級標記: 一個標記佔用一行h1~h6 p div li ul ol
float:浮動屬性
left:
right:
clear:清除浮動
left: 左邊不容許有浮動對象
right: 右邊不容許有浮動對象
both: 兩邊不容許有浮動對象
9、html實體:
提示:使用實體名而不是數字的好處是,名稱易於記憶。不過壞處是,瀏覽器也許並不支持全部實體名稱(對實體數字的支持卻很好)。
當要在頁面中展示特殊字符時:
>: > great than
<: < less than 或 <
空格:
瀏覽器老是會截短 HTML 頁面中的空格。若是您在文本中寫 10 個空格,在顯示該頁面以前,瀏覽器會刪除它們中的 9 個。如需在頁面中增長空格的數量,您須要使用 字符實體
10、HTML 中有用的字符實體
註釋:實體名稱對大小寫敏感!
顯示結果 |
描述 |
實體名稱 |
實體編號 |
|
空格 |
|
  |
< |
小於號 |
< |
< |
> |
大於號 |
> |
> |
& |
和號 |
& |
& |
" |
引號 |
" |
" |
' |
撇號 |
' (IE不支持) |
' |
¢ |
分 |
¢ |
¢ |
£ |
鎊 |
£ |
£ |
¥ |
日圓 |
¥ |
¥ |
€ |
歐元 |
€ |
€ |
§ |
小節 |
§ |
§ |
© |
版權 |
© |
© |
® |
註冊商標 |
® |
® |
™ |
商標 |
™ |
™ |
× |
乘號 |
× |
× |
÷ |
除號 |
÷ |
÷ |