xhtml & css 簡易學習筆記(一)

zyearn發表於2012-07-19
HTMLCSS筆記
xhtml和css是用來製作網頁的語言。

1、推薦編輯軟體： Notepad++


2、一般格式
<html>
     <head>
     .......
     </head>
     <body>
     .......
     </body>
</html>


3、給網頁加title：
<head>
<title> xxxxxx </title>
</head>


4、註釋：
<!--     註釋內容    -->


5、換行   ：<br />
     水平線：<hr />，水平線效果如下：


6、標題：
<h1> xxxx <h1>
當然也可以
<h2> xxxx <h2>
1字型最大，h2、h3...依次減小。


7、段落： 
<p> xxxxxxxxxxxxxxxxxxxxxx </p>


8、字型顏色：
<font color="green">xxxxxxxxxxxxxx </font>
 green可以替換為red、blue.....


9、粗體：
<strong>xxxxxx</strong>


10、斜體：
<em>xxxxxxx</em>


11、超連結：
<a href="http://google.com">This is a link</a>
即跳轉到谷歌
如果要在新視窗開啟連結，則需要加上target="_blank"。


12、在頁面內進行跳轉：在需要的跳轉到的地方加上程式碼 
<a name="xxxx"></a>
此處xxxx為自定義的名字，然後在頁首（或別的任意顯眼的地方），加上程式碼 
<a href="#xxxx">linkname</a>
這裡的‘#’必不可少，xxxx是前面取得名字，linkname也是自定義名字，然後點選linkname就可以跳轉到設定的地方。


13、email連結：
<a href="mailto:xxxxx@xxxx.com">Email me </a>
其中“mailto:”是必不可少的，後面加上自己的郵箱。


14、Tool tips：當滑鼠放到一個連結上時，會顯示一些額外資訊。
<a href="http://google.com" title="Search Engine!">Google</a>


15、怎麼加圖片：首先把圖片和html檔案放在同一個資料夾，然後加入以下程式碼
<img src="xxxxx.png"/>
怎麼使圖片成為連結？只需巢狀上鍊接程式碼即可：
<a href="http://blog.csdn.com/Zyearn"><img src="xxxxx.png"/></a>


16、怎樣設定圖片的高和寬：
<img src="xxxxx.png" height="xxx" width="xxx"/>
如果只加height或者只加width，那麼圖片同比例放大或縮小


17、怎樣製作表格：
例：2*3的表格
<table border="#">     	<!-- #是一個數字，表示邊界的厚度，1最薄，然後依次增加 -->
     <tr>               <!-- tr代表table row -->
          <td>1</td>    <!-- td代表table data -->
          <td>2</td>
          <td>3</td>
     </tr>
     <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
     </tr>
</table>



18、怎麼製作表格標題：<th></th>   // stands for table header
例:
<table border="1">  
     <tr>                      
          <th>name</th>      
          <th>sex</th>
          <th>job</th>
     </tr>
     <tr>
          <td>bob</td>
          <td>m</td>
          <td>doctor</td>
     </tr>
     <tr>
          <td>Alice</td>
          <td>f</td>
          <td>nurse</td>
     </tr>
</table>



效果如下：

表格標題加粗，並且居中。


19、怎樣使表格合併列：<th colspan="2">Odd people</th>     //2代表合併2列
例：
<table border="1">
     <tr>   
         <th colspan="2">Odd People</th>
     </tr>
     <tr>
          <th>Type</th>
          <th>Reason</th>
     </tr>
     <tr>
          <td>Cat People</td>
          <td>17 cats is just too many</td>
     </tr>
     <tr>
          <td>Loud People</td>
          <td>Speaks too loud</td>
     </tr>
</table>


效果如下：





20、怎樣改變表格的長寬：
<table border="1" height="xxx" width="xxx">
xxx為數字。也可是設定成百分比，例如
<table border="1" height="50%" width="100%">
表格大小隨著遊覽器的大小而變化

       怎樣改變表格的單位格邊距（字和邊之間的距離）：設定單位格邊距為xxx
<table border="1" cellpadding="xxx">

       怎樣改變表格的單位格間距（邊和邊之間的距離）：設定單位格間距為xxx
<table border="1" cellspacing="xxx">


當然可以混合使用：
<table border="1" width="400" height="100" cellpadding="10" cellspacing="20">












相關文章