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