HTML入门第二天
一. URL
?url:統一資源定位符
?組成: 協議://域名:端口號/文件?參數名1=值1&參數名2=值2
?例子:http://www.163.com:80/index.html?username=zhangkun&sex=nan
?協議: http://??? file://??? ftp://
?端口號: 取值范圍是0-65535, 通常使用的是1-1024, (已經被占用) http協議默認的端口號是80 。
?文件: 請求的文件
?參數: 通常是以鍵值對的形式出現. 每個參數之間使用&隔開
二. 超鏈接
??標簽: <a></a>
??屬性: href: 要跳轉的鏈接地址或者本地訪問文件
????? mailto: 發郵件?
?????? ?tel:??? 打電話
?????#錨點名
?????去該文件:?? #錨點名稱
?????去另外一個文件:?? 文件路徑#錨點名稱
???? target: 打開目標方式
??????_self (默認打開方式)在當前窗口打開
??????_blank(在新窗口打開)
???? title: 光標放上去的提示信息
???? name: (錨點) 給錨點起名字
?
<a href="http://www.baidu.com"?target="_blank">百度</a>??
三. 圖片
??標簽: <img />
??屬性: src: 文件路徑
?????? ?width: 寬度
?????? ?height: 高度
??????? title: 光標放上去的提示信息或者圖片加載失敗時的提示信息
??????? alt:?? 圖片加載失敗時的提示信息
??[注]1.設置圖片時,若只設置一個,圖片會按照設置的等比例縮放
???? ?2.若設置兩個時,圖片會按照設置的尺寸發生變化(可能變形)
???
??文件路徑:
??? 絕對路徑: (唯一確定的值)
????磁盤絕對:? C:\1705\html\day2\meinv.jpg
????網絡絕對:? https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488951235858&di=724a43c9fc6dc60b9e62e42e6ed22776&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F6a63f6246b600c33fe5527171e4c510fd8f9a1c5.jpg
???注意:
????1.在windows下對文件夾分割符可以使用/或者\,但是在linux下只能使用/,為了統一起見,我們都使用/作為文件夾分割符.
????2 在windows下的文件夾就是linux下的目錄
???相對路徑: (有參照物)? / 文件夾分割符
????當前文件夾指:執行文件所在的文件夾就是當前文件夾
????.??:表示當前文件夾
????子級文件夾: ./image/image1/image2/meinv.jpg
????..:表示上一級文件夾(這個在window的dos命令可以查看的到)
????
??
四. 多媒體
??音頻: <audio></audio>
??屬性:? src:? 文件路徑
????? controls: 控制播放界面
????? loop: 循環
????? autoplay: 自動播放
其中controls是必須要有的他是一個控制條!
??視頻: <video></video>
??屬性: src:? 文件路徑
???? controls: 控制播放界面
???? loop: 循環
???? autoplay: 自動播放
???? width: 寬度
???? height: 高度
???注: 同時設置,會發生失真.
這里的controls也不能少!
五. 表格
?? 表格: <table></table>
????border:?? 設置邊框的像素
????width:?? 寬度
????height:? 高度
????cellspacing: 邊框與邊框之間的距離
????cellpadding:? 內容與邊框之間的距離
????bgcolor:?? 背景顏色
????bordercolor: 邊框顏色
????align:? 水平方向的對齊方式??? left? right? center? 默認left
????valign:? 垂直方向的對齊方式??? top? bottom? middle
?? 一行: <tr></tr>
一列:?<th></th>
??? 一列: <td></td>
td與th的區別:
1.th表示標題位置,<th>姓名</th>
2.td表示元素位置,<td>小明</td>
????width:? 設置寬度,整列都會發生變化
????height : 設置高度,整行都會發生變化
????colspan:? 合并列
????rowspan:? 合并行
??表頭:? <th></th>
??標題:? <caption></caption>
這里把表格著重講一下吧,這算一個小難點.
?
1 <!doctype html> 2 <html> 3 <head> 5 <meta charset = "utf-8" /> 6 <title>表格</title> 7 </head> 8 <body> 9 <table border="1" width = "50%" cellpadding = "30" cellspacing = "0"> 10 <caption><h1>學員表</h1></caption> 11 <tr><!--這是第一行--> 12 <th colspan = "3">學員基本信息</th> 13 <th colspan = "2">成績</th> 14 </tr> 15 <tr align = "center"><!--這是第二行--> 16 <th>姓名</th> 17 <th>性別</th> 18 <th>專業</th> 19 <th>課程</th> 20 <th>分數</th> 21 </tr> 22 23 <tr align = "center"><!--這是第三行--> 24 <td>小凱</td> 25 <td>男</td> 26 <td rowspan = "2">計算機</td> 27 <td rowspan = "2">PHP開發</td> 28 <td><font color = "red">86</font></td> 29 </tr> 30 <tr align = "center"><!--這是第四行--> 31 <td>小珊</td> 32 <td>女</td> 33 <td><font color = "red">98</font></td> 34 </tr> 35 </table> 36 </body> 37 </html>給大家寫了一個簡單的小例子,上述代碼打印出來是這樣的:
給大家講解一下這串代碼:
首先大家可以看到上一篇博文中講到的全局架構標簽<html><head></head><body></body></html>,而我們今天所講的table標簽則寫在了body標簽里面,而且還是一個雙邊標簽.table的開始標簽中出現了這幾個屬性:border,width,cellspacing,cellpadding?他們的含義在上文已經講到了,其中需要注意的是border的值設為0時,這個表格就沒有邊框了.大家可以把代碼敲一遍,然后自己改變這個屬性的值,通過看表格的變化,結果一目了然!接下來是caption標簽,它是表示標題的,會自動居中在表格中間.然后就tr,th,td這三個標簽,tr代表的是一行,表格顯示是一行一行的往下進行的,所以上來先寫第一行的內容.然后大家可以發現,在表中第一行是標題行,而且只有兩列,在其他行中最多有5列,因此在寫th標簽的時候用到了cols屬性,它是指將幾列合為一列,這樣當cols="3"的時候,學院基本信息這個標題就占據了三列.接下來第二行也是用th來打印的標題.然后第三行開始打印元素,在打印計算機的時候,發現兩個元素是一樣的,需要把兩行合為一個,因此就用到了rows屬性.<td rows="2">計算機</td>這種形式就可以打印出結果.最后值得大家注意的一點是:在你應用rows或者cols屬性時,你已經提前占據的行或者列在下面就不要在多賦值了,大家可以參考上述代碼中打印第四行的方法.
好了,今天就說這么多,希望能對廣大想要接觸HTML的博友有所幫助,有什么說的不到位的地方,也希望大家積極指正,互相鞭策,互相學習!
轉載于:https://www.cnblogs.com/phplk/p/6534259.html
總結
- 上一篇： 算法---排序
- 下一篇： Gulp 前端自动化构建