HTML筆記-第二天

圖片標(biāo)簽（單標(biāo)簽 ，行內(nèi)標(biāo)簽）

圖片的語法：<img 屬性名=”屬性值” />
圖片的屬性

• 圖片的路徑 src=”圖片的地址”（圖片要放到同一個(gè)站點(diǎn)下，放同一個(gè)文件夾下）
• 圖片的寬度 width=”數(shù)值”  以像素為單位的px,不寫單位 例如width=”300”
• 圖片的高度height=”數(shù)值” 以像素為單位px 例如 height=”200”
• 圖片的邊框border=”數(shù)值”
• 圖片的解釋說明alt=”對(duì)圖片的描述內(nèi)容”
• 圖片和內(nèi)容左右之間的距離 hspace=”數(shù)值”
• 圖片和內(nèi)容上下之間的距離 vspace=”數(shù)值” （了解，css樣式實(shí)現(xiàn)）

注意：圖片等比例縮放，只設(shè)置寬度或高度
要求：插入一張圖片圖片的寬度為200像素，高度為160像素，邊框?yàn)?

表格介紹

語法：
  <table>
      <tr>
          <td>內(nèi)容</td>
<td>內(nèi)容</td>
<td>&nbsp;</td>
      </tr>
      <tr>
        <td>內(nèi)容</td>
<td>圖片內(nèi)容</td>
<td>內(nèi)容</td>
 
      </tr>
  </table>
  通常表格<table></table>包括行 <tr></tr>行里面包括單元格 <td></td>
  注意：內(nèi)容一定要放入最底層的標(biāo)簽里面
  需求：表格，三行 四列

  表格的<table>的屬性

1. 表格的邊框border=”數(shù)值” 默認(rèn)是0
2. 表格的寬度 width=”數(shù)值”
3. 表格的高度height=”數(shù)值”（w3c推薦不建議使用高度）
4. 表格的居中方式 align=”水平對(duì)齊方式”  取值 left  center  right
5. 表格中的內(nèi)容和單元格之間的距離 cellpadding=”數(shù)值” 默認(rèn)數(shù)值是2像素
6. 表格中單元格和單元格之間的距離 cellspacing=”數(shù)值” 默認(rèn)數(shù)值是2像素
7. 表格的背景顏色 bgcolor=”顏色值” 例如 bgcolor=”red”
8. 表格的背景圖片 background=”圖片的地址”（背景圖片不能含有中文）---修飾的作用
9. 表格的合并邊框線 rules=”all” (w3c不推薦使用，css樣式來實(shí)現(xiàn))
10. 表格的邊框顏色 bordercolor=”顏色值”例如 bordercolor=”#ff0000”(不建議使用)

注意：背景圖片的優(yōu)先級(jí)高于背景顏色
需求：插入三行五列的表格，表格的寬度為990像素，表格的邊框粗細(xì)為2
需求：插入兩行五列的表格，表格的寬度為1000像素，表格居中顯示，表格的邊框?yàn)槟J(rèn)，在第一行的每一個(gè)單元格中放入圖片，圖片的寬度為190像素，高度為160像素，第二行放入內(nèi)容

<tr>的屬性

• Height 行的高度 例如 height=”300”
• Bgcolor背景顏色 例如 bgcolor=”blue”
• Background背景圖片 例如 background=”images/33.jpg”
• Align 水平對(duì)齊方式 例如  align=”left //center//right”    //或者
• Valign 垂直對(duì)齊方式 例如 valign=”top //middle //bottom”

單元格的屬性

• Bgcolor 背景顏色
• Background 背景圖片 例如 background=”images/XX.jpg”
• Width 單元格的寬度 例如 width=”300”
• Height 單元格的高度 例如height=”40”
• Align 內(nèi)容在單元格中的水平對(duì)齊方式 align=”left/center/right”
• Valign 內(nèi)容在單元格中垂直對(duì)齊方式  valign =”top/middle/bottom”;

表格的擴(kuò)充

合并單元格的問題
 
橫向合并 左右合并（若干個(gè)單元格合并成一個(gè)單元格）
Colspan=“數(shù)值” 例如colspan=”3” 橫向合并三個(gè)
 
上面的表格  縱向合并rowspan=”數(shù)值” 例如rowspan=”3” 縱向合并3個(gè)
 

鏈接

 語法<a 屬性=”屬性值”>內(nèi)容</a>
屬性

• 鏈接的地址  href=”鏈接的地址url”,url 絕對(duì)地址   相對(duì)地址
• Target 打開目標(biāo)文件的窗口
• 在新的窗口中打開目標(biāo)文件
• 默認(rèn)的打開方式，在原來的窗口中打開目標(biāo)文件（原來的窗口被覆蓋）
• Name 定義錨點(diǎn)的名稱

絕對(duì)地址（網(wǎng)絡(luò)地址）---http:

語法<a  href=http://www.taobao.com>淘寶</a>

本地的地址  ----在你的本機(jī)上測(cè)試
 

相對(duì)地址

在同一個(gè)站點(diǎn)下，在同一個(gè)文件夾

• 目標(biāo)文件和當(dāng)前文件在同一個(gè)目錄 ，直接寫文件名稱 
• 目標(biāo)文件在當(dāng)前文件的下一級(jí)目錄，XX表示文件夾名     XX/文件名稱
• 目標(biāo)文件在當(dāng)前文件的下兩級(jí)目錄   xx/xx/文件名
• 目標(biāo)文件在當(dāng)前文件的上一級(jí)目錄   ../文件名稱
• 目標(biāo)文件在當(dāng)前文件的上兩級(jí) 目錄   ../../文件名稱    上三級(jí)../../../文件名稱
• 

特殊鏈接

 下載鏈接

那些文件不用下載可以直接做鏈接    .html   .jpg  .gif 
那些文件必須下載鏈接  .zip  .exe

 郵件鏈接

   <a href=mailto:郵件的地址>內(nèi)容</a>

 空鏈接

  在當(dāng)前頁面做鏈接  <a href=”#”>鏈接的內(nèi)容</a>

 Javascript鏈接

 <a href=”javascript:window.close()”>關(guān)閉</a>
  Firefox設(shè)置問題

Name定義錨點(diǎn)的名稱
同一個(gè)頁面的不同區(qū)域直接跳轉(zhuǎn)
定義錨點(diǎn)
  <a name=”自定義名稱”></a> 在<a></a>不加內(nèi)容，給鏈接中的target用
跳轉(zhuǎn)錨點(diǎn)
  <a href=”#錨點(diǎn)名稱”>內(nèi)容</a>
顏色代碼（理解）
 英文   red                        green                blue
 十六進(jìn)制 #ff0000                   #00ff00              #0000ff   
 十進(jìn)制   rgb(255,0,0)               rgb(0,255,0)           rgb(0,0,255)
十進(jìn)制：十個(gè)基本數(shù)0,1,2,3,4,5,6,7,8,9
十六進(jìn)制  十六個(gè)基本數(shù)構(gòu)成 0-9 a b c d e f     #ff6688
八進(jìn)制    八個(gè)基本數(shù)夠成  0 1 2 3 4 5 6 7
二進(jìn)制    兩個(gè)基本數(shù)構(gòu)成 0 1

字符集

為什么要有字符集，是因?yàn)橛?jì)算機(jī)只能處理二進(jìn)制數(shù)據(jù)。為了讓計(jì)算機(jī)能識(shí)別人類語言(0-9、a-z、A-Z、特殊符號(hào))，我們就需要對(duì)這每一個(gè)字符進(jìn)行“編碼”。所謂“編碼”就是：每一個(gè)字符，可以用不同的二進(jìn)制來表示。
假設(shè)：A 用二進(jìn)制表示 1000， B  用二進(jìn)制表示 1001
ASCII編碼：用1個(gè)字節(jié)(8位二進(jìn)制)來表示所有字符，共可以表示 2^8 = 256 。
ANSI編碼：其它國(guó)家，都對(duì)ASCII編碼進(jìn)行擴(kuò)展，用于顯示本國(guó)的語言。
          在中文操作系統(tǒng)   gb2312
          繁體操作系統(tǒng)   big5
                  
                   用2個(gè)字節(jié)(16位二進(jìn)制)(來表示，共可以表示 2^16 = 65536個(gè)字符。
                   Gb2312 收入了6763個(gè)漢字
GBK編碼：對(duì)GB2312進(jìn)行擴(kuò)充，收錄了一些冷門字、罕見字、古漢語等。。。大約2.1萬個(gè)漢字
 
Unicode編碼：計(jì)劃將世界上所有字符統(tǒng)一編碼，用4個(gè)字節(jié)(32位二進(jìn)制)來表示一個(gè)字符。
                   它的缺點(diǎn)：編碼表文件太大了，不方便使用。用32位二進(jìn)制表示一個(gè)字符，造成空間極大浪費(fèi)。
UTF-8： (多國(guó)語言編碼)
                   不同的字符，它會(huì)選擇合適編碼來進(jìn)行翻譯。

Meta標(biāo)簽

描述網(wǎng)頁文檔屬性
http-equiv  和name
http-equiv :模擬的是http文件頭信息，當(dāng)內(nèi)容從服務(wù)器端發(fā)送客戶端，告訴瀏覽器如何正確顯示信息

字符集

  <meta http-equiv=”content-type”content=”text/html;charset=UTF-8” />多國(guó)語言
  <meta http-equiv=”content-type” content=”text/html;charset=gbk” />國(guó)標(biāo)碼
  <meta http-equiv=”content-type” content=”text/html;charset=gb2312” />簡(jiǎn)體中文

網(wǎng)頁自動(dòng)刷新

<meta http-equiv=”refresh” content=”4” /> 間隔4秒網(wǎng)頁自動(dòng)刷新
<meta http-equiv=”refresh” content=”8;http://www.baidu.com” />  等待8秒自動(dòng)跳轉(zhuǎn)到百度頁面
Name可以設(shè)置網(wǎng)頁關(guān)鍵字，描述信息等
 
 <meta name=”keywords” content=”關(guān)鍵字” />
  便于搜索引擎的需要

<meta name=”description” content=”網(wǎng)站的描述信息” />
 便于搜索引擎需要
<meta name=”author” content=”作者” />
 網(wǎng)站的作者