*****html中的經常使用標籤組件

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:  不支持   

5a連接:

<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>

--------------------------------------------

8css樣式屬性:

佈局屬性: (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:  兩邊不容許有浮動對象

9html實體:

提示:使用實體名而不是數字的好處是,名稱易於記憶。不過壞處是,瀏覽器也許並不支持全部實體名稱(對實體數字的支持卻很好)。

當要在頁面中展示特殊字符時:

 >: &gt;    great than

 <: &lt;    less  than  或 &#60;

 空格: &nbsp;

瀏覽器老是會截短 HTML 頁面中的空格。若是您在文本中寫 10 個空格,在顯示該頁面以前,瀏覽器會刪除它們中的 9 個。如需在頁面中增長空格的數量,您須要使用 &nbsp; 字符實體

10HTML 中有用的字符實體

註釋:實體名稱對大小寫敏感!

顯示結果

描述

實體名稱

實體編號

 

空格

&nbsp;

&#160;

小於號

&lt;

&#60;

大於號

&gt;

&#62;

&

和號

&amp;

&#38;

"

引號

&quot;

&#34;

'

撇號 

&apos; (IE不支持)

&#39;

&cent;

&#162;

£

&pound;

&#163;

¥

日圓

&yen;

&#165;

歐元

&euro;

&#8364;

§

小節

&sect;

&#167;

©

版權

&copy;

&#169;

®

註冊商標

&reg;

&#174;

商標

&trade;

&#8482;

×

乘號

&times;

&#215;

÷

除號

&divide;

&#247;

相關文章
相關標籤/搜索