HTML基本代碼教學，第二天

本文轉載自查看原文 2017-09-10 17:24 1707

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 標記，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>