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

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

圖片標(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> </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>的屬性

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

郵件鏈接

空鏈接

在當(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編碼：其它國家，都對(duì)ASCII編碼進(jìn)行擴(kuò)展，用于顯示本國的語言。
          在中文操作系統(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： (多國語言編碼)
                   不同的字符，它會(huì)選擇合適編碼來進(jìn)行翻譯。