HTML基本代碼教學，第二天
HTML
咱們今天來看一下咱們這HTML能做些什麽，例如下圖（最低級的小實驗）
咱們來看一下圖片的最左上角<head> <title></ title></ head>部分
跟原百度網頁有什麽區別？對，百度得logo沒有，這個咱後面會有講到
上圖得標簽內容就是在title標記中寫入：百度一下，你就知道
這樣就會在網頁得標簽中呈現出來
<head> <title>百度一下，你就知道</ title></ head>
整個網頁可以看成一張巨大的表格：table ，其標記是：<table> </ table>
表格當中有行有列
咱們用以下標記來稱呼表格當中得行和列
<tr> </ tr> ：行
<td> </ td> ：列
行和列是包含和被包含的關系
代碼如下：
1 <table> 2 3 <tr> 4 <td></ td> 5 </ tr> 6 7 </ table>
講解下，以上代碼代表著一張表，表內有一行一列
咱們為了能讓大家看的明顯點兒，咱們創建一張含有兩行兩列的表格，代碼如下：
<table width="200px" height="200px" border="1"> <tr> <td></ td> <td></ td> </tr> <tr> <td></ td> <td></ td> </ tr> </ table>
為了給大家展示的比較清晰，特意加了幾個明顯得標記，這也是咱們必須要知道的
width : " " 寬度
height : " " 高度
border : " " 邊線
單位px ： 像素 顯示器包括瀏覽器都是按照像素px來丈量高度和長度的
呈現效果如下：
咱們現在看到的就是上面代碼的呈現效果
大家可以看的出來，每個小方框之間包括距離外層的大表格之間都有一個間距和邊距
其實咱們可以消除這個間距和邊距
1 <table width="200px" height="200px" border="1" cellpadding="0" cellspacing="0"> 2 3 <tr> 4 <td></ td> 5 <td></ td> 6 </ tr> 7 8 9 <tr> 10 <td></ td> 11 <td></ td> 12 </ tr> 13 14 15 16 </ table>table>
這裏又用到兩個代碼
cellspacing=" " 單元格之間的間距
cellpandding=" " 邊距
單位px ： 像素 顯示器包括瀏覽器都是按照像素px來丈量高度和長度的
呈現效果如下：
現在就是消除了間距和邊距，只有border=1px的情況下呈現出來的table效果，兩行兩列
1 <table width="200px" height="200px" border="1"> 2 3 <tr> 4 <td></ td> 5 <td></ td> 6 </ tr> 7 8 9 <tr> 10 <td></ td> 11 12 </ tr> 13 14 15 16 </ table>
呈現效果如下：
大家也發現了問題所在了，這可能也算是用table做網頁的一個小小的弊端，只是比較麻煩，相比較而言，用<div></ div>做起來可能就不會這樣子了，不過很多時候都會用到CSS樣式表，這個咱們以後會講
現在表格創建好了，咱們可以在表格得<td> </ td>中間填入你所想要呈現給大家的內容，像是文字、圖片、超鏈接等等
那咱們現在就來講一下文字同時變成可點擊得超鏈接（單純的呈現文字很簡單，在兩個標記中輸入你所想要呈現得文字即可）
在這裏咱們用到一組很簡單的標記
<a href=" "></ a>
咱們簡單的稱這對標記為 a 標記，a標記中的 href=“ ” 需要填充的是你所想要跳轉的鏈接地址，必須是完整的鏈接地址（一定別忘了協議）
1 <table width="700px" height="200px" border="1" cellspacing="0" cellpadding="0" > 2 3 <tr> 4 <td width="350px" height="100px"></ td> 5 <td width="350px" height="100px"></ td> 6 </ tr> 7 8 9 <tr> 10 <td width="350px" height="100px"></ td> 11 <td width="350px" height="100px"> 12 13 <a href="http://www.baodu.com">這是文字的跳轉超鏈接</a> 14 15 </ td> 16 17 </ tr> 18 19 20 21 </ table>
效果圖：
大家一定要記得給每個單元格添加長度和寬度，不然就會出現大小不一，如下
超鏈接的字體下方會出現下劃線，並且鼠標移入後會變成可點擊得小手樣子，這個沒辦法截圖，大家自己動腦想象
上面是文字超鏈接，現在咱們做一個圖片的超鏈接，很多網站都會有，最常見得淘寶、京東等等，點擊圖片就會進行鏈接跳轉，代碼如下：
1 <table width="700px" height="200px" border="1" cellspacing="0" cellpadding="0" > 2 3 <tr> 4 <td width="350px" height="100px"> 5 <a href="http://www.baidu.com"><img src="../0000000000.png"/></a> 6 </ td> 7 <td width="350px" height="100px"></ td> 8 </ tr> 9 10 11 <tr> 12 <td width="350px" height="100px"></ td> 13 <td width="350px" height="100px"> 14 15 <a href="http://www.baodu.com">這是文字的跳轉超鏈接</a> 16 17 </ td> 18 19 </ tr> 20 21 22 23 </ table>
截至到這裏，大家可以猜想一下，以上代碼會出現什麽問題，動動腦子，插入這張帶有鏈接得圖片後，網頁上的呈現效果回是什麽樣子
很明顯，型變，表和發生了型變，為了防止這種型變得發生，只需要在圖片上加上一組約束即可
1 <table width="700px" height="200px" border="1" cellspacing="0" cellpadding="0" > 2 3 <tr> 4 <td width="350px" height="100px"> 5 <a href="http://www.baidu.com"><img src="../0000000000.png" width="100%" height="100%"/></a> 6 </ td> 7 <td width="350px" height="100px"></ td> 8 </ tr> 9 10 11 <tr> 12 <td width="350px" height="100px"></ td> 13 <td width="350px" height="100px"> 14 15 <a href="http://www.baodu.com">這是文字的跳轉超鏈接</a> 16 17 </ td> 18 19 </ tr> 20 21 22 23 </ table>
是的，你沒有看錯，可以用百分比來給寬、高賦值，但是還是按照px（像素）來計算
以上就是文字和圖片的超鏈接制作方式
不知道大家有沒有發現一個問題，每次咱們制作好超鏈接，點擊之後都會刷新本頁面，然而在工作或者是逛淘寶得時候我不想刷新本頁面，因為我還要在本頁面買東西或者是兩個頁面我想對比下
這個時候怎麽辦？？？
咱們只需要添加如下代碼就好
1 <a href="http://www.baodu.com" target="new">這是文字的跳轉超鏈接</a>
target="new" 在新的頁面打開鏈接
呈現效果沒辦法放一個動圖，但是可以看標簽
截止到這兒是不是還有人在發懵，明明是baidu.com，怎麽出來一個寶都鋼構呢？請仔細看一下上面得代碼
強調多少遍了，要仔細仔細仔細，嚴謹嚴禁嚴謹，看錯的俯臥撐50個，麻溜的，沙棱的，做不完不許啪啪啪
現在咱們補充一點，鼠標指到圖片上就顯示文字和圖片無法加載的時候顯示的文字
1 <img src="../0000000000.png" title="楓葉" width="100%" height="100%"/>
title="XXXXXX" 鼠標移入顯示文字
上面是鼠標移入顯示文字
下面是圖片無法加載顯示文字
1 <img src="../0000000.png" alt="圖片加載失敗！" width="100%" height="100%"/
上面的代碼已經把圖片的地址修改成錯誤地址了，也就說程序找不到原圖片了
alt=" XXXXXX" 圖片加載失敗顯示文字
現在還有一些好學得同學會問到：不是超文本麽，那文檔可以麽，txt，doc可以麽
答案是：可以！！！
不過不是這種形式出現，而是以下載的方式呈現出來，而txt是可以打開看到的
咱們新建一個名字為Hello的txt放到桌面作為測試用
1 <table width="700px" height="200px" border="1" cellspacing="0" cellpadding="0" > 2 3 <tr> 4 <td width="350px" height="100px"> 5 <a href="http://www.baidu.com"><img src="../0000000.png" alt="圖片加載失敗！" width="100%" height="100%"/></a> 6 </ td> 7 <td width="350px" height="100px"><a href="../Hell.txt">點擊打開Hello.txt</a></ td> 8 </ tr> 9 10 11 <tr> 12 <td width="350px" height="100px"> 13 14 15 <a href="../補刀技巧.docx">點擊下載補刀技巧.docx</a> 16 17 18 </ td> 19 <td width="350px" height="100px"> 20 21 <a href="http://www.baodu.com" target="new">這是文字的跳轉超鏈接</a> 22 23 </ td> 24 25 </ tr> 26 27 28 29 </ table>
呈現效果如下
點擊打開Hello.txt，呈現效果如下
下圖是Hello.txt裏面得內容
一次不差
咱們再來看下HTML是怎麽打開 .doc這些文件的
創建一個.docx文件，如下
繼續
點擊下載補刀技巧.docx，會出現以下打開方式
對，是通過下載的方式來打開的
好，今天的課程咱們先講到這裏，新的HTML內容明天再講
HTML基本代碼教學，第二天