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內容明天再講

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM