全國(guó)咨詢(xún)/投訴熱線:400-618-4000

首頁(yè)技術(shù)文章正文

黑馬程序員PHP培訓(xùn)之HTML筆記第二天

更新時(shí)間:2017-04-13 來(lái)源:黑馬程序員PHP學(xué)院 瀏覽量:

圖片標(biāo)簽(單標(biāo)簽 ,行內(nèi)標(biāo)簽)

圖片的語(yǔ)法:<img 屬性名=”屬性值” />
圖片的屬性
  • 圖片的路徑 src=”圖片的地址”(圖片要放到同一個(gè)站點(diǎn)下,放同一個(gè)文件夾下)
  • 圖片的寬度 width=”數(shù)值”  以像素為單位的px,不寫(xiě)單位 例如width=”300”
  • 圖片的高度height=”數(shù)值” 以像素為單位px 例如 height=”200”
  • 圖片的邊框border=”數(shù)值”
  • 圖片的解釋說(shuō)明alt=”對(duì)圖片的描述內(nèi)容”
  • 圖片和內(nèi)容左右之間的距離 hspace=”數(shù)值”
  • 圖片和內(nèi)容上下之間的距離 vspace=”數(shù)值” (了解,css樣式實(shí)現(xiàn))
注意:圖片等比例縮放,只設(shè)置寬度或高度
要求:插入一張圖片圖片的寬度為200像素,高度為160像素,邊框?yàn)?

表格介紹

語(yǔ)法:
  <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樣式來(lái)實(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ò)充
合并單元格的問(wèn)題
 
橫向合并 左右合并(若干個(gè)單元格合并成一個(gè)單元格)
Colspan=“數(shù)值” 例如colspan=”3” 橫向合并三個(gè)
 
        上面的表格  縱向合并rowspan=”數(shù)值” 例如rowspan=”3” 縱向合并3個(gè)
         

                鏈接

                 語(yǔ)法<a 屬性=”屬性值”>內(nèi)容</a>
                屬性
                • 鏈接的地址  href=”鏈接的地址url”,url 絕對(duì)地址   相對(duì)地址
                • Target 打開(kāi)目標(biāo)文件的窗口
                • 在新的窗口中打開(kāi)目標(biāo)文件
                • 默認(rèn)的打開(kāi)方式,在原來(lái)的窗口中打開(kāi)目標(biāo)文件(原來(lái)的窗口被覆蓋)
                • Name 定義錨點(diǎn)的名稱(chēng)

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

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

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

                相對(duì)地址

                在同一個(gè)站點(diǎn)下,在同一個(gè)文件夾
                • 目標(biāo)文件和當(dāng)前文件在同一個(gè)目錄 ,直接寫(xiě)文件名稱(chēng) 
                • 目標(biāo)文件在當(dāng)前文件的下一級(jí)目錄,XX表示文件夾名     XX/文件名稱(chēng)
                • 目標(biāo)文件在當(dāng)前文件的下兩級(jí)目錄   xx/xx/文件名
                • 目標(biāo)文件在當(dāng)前文件的上一級(jí)目錄   ../文件名稱(chēng)
                • 目標(biāo)文件在當(dāng)前文件的上兩級(jí) 目錄   ../../文件名稱(chēng)    上三級(jí)../../../文件名稱(chēng)

                特殊鏈接

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

                 郵件鏈接
                   <a href=mailto:郵件的地址>內(nèi)容</a>
                 空鏈接
                  在當(dāng)前頁(yè)面做鏈接  <a href=”#”>鏈接的內(nèi)容</a>
                 Javascript鏈接
                 <a href=”javascript:window.close()”>關(guān)閉</a>
                  Firefox設(shè)置問(wèn)題

                Name定義錨點(diǎn)的名稱(chēng)
                同一個(gè)頁(yè)面的不同區(qū)域直接跳轉(zhuǎn)
                定義錨點(diǎn)
                  <a name=”自定義名稱(chēng)”></a> 在<a></a>不加內(nèi)容,給鏈接中的target用
                跳轉(zhuǎn)錨點(diǎn)
                  <a href=”#錨點(diǎn)名稱(chēng)”>內(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í)別人類(lèi)語(yǔ)言(0-9、a-z、A-Z、特殊符號(hào)),我們就需要對(duì)這每一個(gè)字符進(jìn)行“編碼”。所謂“編碼”就是:每一個(gè)字符,可以用不同的二進(jìn)制來(lái)表示。
                假設(shè):A 用二進(jìn)制表示 1000, B  用二進(jìn)制表示 1001
                ASCII編碼:用1個(gè)字節(jié)(8位二進(jìn)制)來(lái)表示所有字符,共可以表示 2^8 = 256 。
                ANSI編碼:其它國(guó)家,都對(duì)ASCII編碼進(jìn)行擴(kuò)展,用于顯示本國(guó)的語(yǔ)言。
                          在中文操作系統(tǒng)   gb2312
                          繁體操作系統(tǒng)   big5
                                  
                                   用2個(gè)字節(jié)(16位二進(jìn)制)(來(lái)表示,共可以表示 2^16 = 65536個(gè)字符。
                                   Gb2312 收入了6763個(gè)漢字
                GBK編碼:對(duì)GB2312進(jìn)行擴(kuò)充,收錄了一些冷門(mén)字、罕見(jiàn)字、古漢語(yǔ)等。。。大約2.1萬(wàn)個(gè)漢字
                 
                Unicode編碼:計(jì)劃將世界上所有字符統(tǒng)一編碼,用4個(gè)字節(jié)(32位二進(jìn)制)來(lái)表示一個(gè)字符。
                                   它的缺點(diǎn):編碼表文件太大了,不方便使用。用32位二進(jìn)制表示一個(gè)字符,造成空間極大浪費(fèi)。
                UTF-8: (多國(guó)語(yǔ)言編碼)
                                   不同的字符,它會(huì)選擇合適編碼來(lái)進(jìn)行翻譯。

                Meta標(biāo)簽

                描述網(wǎng)頁(yè)文檔屬性
                http-equiv  和name
                http-equiv :模擬的是http文件頭信息,當(dāng)內(nèi)容從服務(wù)器端發(fā)送客戶(hù)端,告訴瀏覽器如何正確顯示信息
                字符集
                  <meta http-equiv=”content-type”content=”text/html;charset=UTF-8” />多國(guó)語(yǔ)言
                  <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)頁(yè)自動(dòng)刷新
                <meta http-equiv=”refresh” content=”4” /> 間隔4秒網(wǎng)頁(yè)自動(dòng)刷新
                <meta http-equiv=”refresh” content=”8;http://www.baidu.com” />  等待8秒自動(dòng)跳轉(zhuǎn)到百度頁(yè)面
                Name可以設(shè)置網(wǎng)頁(yè)關(guān)鍵字,描述信息等
                 
                 <meta name=”keywords” content=”關(guān)鍵字” />
                  便于搜索引擎的需要

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


                本文版權(quán)歸黑馬程序員PHP培訓(xùn)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處,謝謝!
                作者:黑馬程序員PHP培訓(xùn)學(xué)院
                首發(fā):http://m.zhongqishi.cn/news/php.html
                分享到:
                在線咨詢(xún) 我要報(bào)名
                和我們?cè)诰€交談!