當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML入门第二天

發(fā)布時(shí)間：2024/8/26 HTML 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML入门第二天小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一. URL
?url:統(tǒng)一資源定位符
?組成: 協(xié)議://域名:端口號(hào)/文件?參數(shù)名1=值1&參數(shù)名2=值2
?例子:http://www.163.com:80/index.html?username=zhangkun&sex=nan
?協(xié)議: http://??? file://??? ftp://
?端口號(hào): 取值范圍是0-65535, 通常使用的是1-1024, (已經(jīng)被占用) http協(xié)議默認(rèn)的端口號(hào)是80 。
?文件: 請(qǐng)求的文件
?參數(shù): 通常是以鍵值對(duì)的形式出現(xiàn). 每個(gè)參數(shù)之間使用&隔開
二. 超鏈接
??標(biāo)簽: <a></a>
??屬性: href: 要跳轉(zhuǎn)的鏈接地址或者本地訪問文件
?????　 mailto: 發(fā)郵件?
?????? ?tel:??? 打電話
?????#錨點(diǎn)名
?????去該文件:?? #錨點(diǎn)名稱
?????去另外一個(gè)文件:?? 文件路徑#錨點(diǎn)名稱
???? target: 打開目標(biāo)方式
??????_self (默認(rèn)打開方式)在當(dāng)前窗口打開
??????_blank(在新窗口打開)
???? title: 光標(biāo)放上去的提示信息
???? name: (錨點(diǎn)) 給錨點(diǎn)起名字

??
三. 圖片
??標(biāo)簽: <img />
??屬性: src: 文件路徑
?????? ?width: 寬度
?????? ?height: 高度
??????? title: 光標(biāo)放上去的提示信息或者圖片加載失敗時(shí)的提示信息
??????? alt:?? 圖片加載失敗時(shí)的提示信息
??[注]1.設(shè)置圖片時(shí),若只設(shè)置一個(gè),圖片會(huì)按照設(shè)置的等比例縮放
???? ?2.若設(shè)置兩個(gè)時(shí),圖片會(huì)按照設(shè)置的尺寸發(fā)生變化(可能變形)
???

??文件路徑:
??? 絕對(duì)路徑: (唯一確定的值)
????磁盤絕對(duì):? C:\1705\html\day2\meinv.jpg
????網(wǎng)絡(luò)絕對(duì):? 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下對(duì)文件夾分割符可以使用/或者\(yùn),但是在linux下只能使用/,為了統(tǒng)一起見,我們都使用/作為文件夾分割符.
????2 在windows下的文件夾就是linux下的目錄
???相對(duì)路徑: (有參照物)? / 文件夾分割符
????當(dāng)前文件夾指:執(zhí)行文件所在的文件夾就是當(dāng)前文件夾
????.??:表示當(dāng)前文件夾
????子級(jí)文件夾: ./image/image1/image2/meinv.jpg
????..:表示上一級(jí)文件夾(這個(gè)在window的dos命令可以查看的到)
????
??
四. 多媒體
??音頻: <audio></audio>
??屬性:? src:? 文件路徑
????? controls: 控制播放界面
????? loop: 循環(huán)
????? autoplay: 自動(dòng)播放

其中controls是必須要有的他是一個(gè)控制條!

??視頻: <video></video>
??屬性: src:? 文件路徑
???? controls: 控制播放界面
???? loop: 循環(huán)
???? autoplay: 自動(dòng)播放
???? width: 寬度
???? height: 高度
???注: 同時(shí)設(shè)置,會(huì)發(fā)生失真.

這里的controls也不能少!

五. 表格
?? 表格: <table></table>
????border:?? 設(shè)置邊框的像素
????width:?? 寬度
????height:? 高度
????cellspacing: 邊框與邊框之間的距離
????cellpadding:? 內(nèi)容與邊框之間的距離
????bgcolor:?? 背景顏色
????bordercolor: 邊框顏色
????align:? 水平方向的對(duì)齊方式??? left? right? center? 默認(rèn)left
????valign:? 垂直方向的對(duì)齊方式??? top? bottom? middle
?? 一行: <tr></tr>

　　一列:?<th></th>　
??? 一列: <td></td>

　　td與th的區(qū)別:

　　　　　　1.th表示標(biāo)題位置,<th>姓名</th>

　　　　　　2.td表示元素位置,<td>小明</td>
????width:? 設(shè)置寬度,整列都會(huì)發(fā)生變化
????height : 設(shè)置高度,整行都會(huì)發(fā)生變化
????colspan:? 合并列
????rowspan:? 合并行
??表頭:? <th></th>
??標(biāo)題:? <caption></caption>

這里把表格著重講一下吧,這算一個(gè)小難點(diǎn).

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>學(xué)員表</h1></caption> 11 <tr> 12 <th colspan = "3">學(xué)員基本信息</th> 13 <th colspan = "2">成績</th> 14 </tr> 15 <tr align = "center"> 16 <th>姓名</th> 17 <th>性別</th> 18 <th>專業(yè)</th> 19 <th>課程</th> 20 <th>分?jǐn)?shù)</th> 21 </tr> 22 23 <tr align = "center"> 24 <td>小凱</td> 25 <td>男</td> 26 <td rowspan = "2">計(jì)算機(jī)</td> 27 <td rowspan = "2">PHP開發(fā)</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>

給大家寫了一個(gè)簡單的小例子,上述代碼打印出來是這樣的:

給大家講解一下這串代碼:

　　首先大家可以看到上一篇博文中講到的全局架構(gòu)標(biāo)簽<html><head></head><body></body></html>,而我們今天所講的table標(biāo)簽則寫在了body標(biāo)簽里面,而且還是一個(gè)雙邊標(biāo)簽.table的開始標(biāo)簽中出現(xiàn)了這幾個(gè)屬性:border,width,cellspacing,cellpadding?他們的含義在上文已經(jīng)講到了,其中需要注意的是border的值設(shè)為0時(shí),這個(gè)表格就沒有邊框了.大家可以把代碼敲一遍,然后自己改變這個(gè)屬性的值,通過看表格的變化,結(jié)果一目了然!接下來是caption標(biāo)簽,它是表示標(biāo)題的,會(huì)自動(dòng)居中在表格中間.然后就tr,th,td這三個(gè)標(biāo)簽,tr代表的是一行,表格顯示是一行一行的往下進(jìn)行的,所以上來先寫第一行的內(nèi)容.然后大家可以發(fā)現(xiàn),在表中第一行是標(biāo)題行,而且只有兩列,在其他行中最多有5列,因此在寫th標(biāo)簽的時(shí)候用到了cols屬性,它是指將幾列合為一列,這樣當(dāng)cols="3"的時(shí)候,學(xué)院基本信息這個(gè)標(biāo)題就占據(jù)了三列.接下來第二行也是用th來打印的標(biāo)題.然后第三行開始打印元素,在打印計(jì)算機(jī)的時(shí)候,發(fā)現(xiàn)兩個(gè)元素是一樣的,需要把兩行合為一個(gè),因此就用到了rows屬性.<td rows="2">計(jì)算機(jī)</td>這種形式就可以打印出結(jié)果.最后值得大家注意的一點(diǎn)是:在你應(yīng)用rows或者cols屬性時(shí),你已經(jīng)提前占據(jù)的行或者列在下面就不要在多賦值了,大家可以參考上述代碼中打印第四行的方法.

好了,今天就說這么多,希望能對(duì)廣大想要接觸HTML的博友有所幫助,有什么說的不到位的地方,也希望大家積極指正,互相鞭策,互相學(xué)習(xí)!

轉(zhuǎn)載于:https://www.cnblogs.com/phplk/p/6534259.html

總結(jié)

以上是生活随笔為你收集整理的HTML入门第二天的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。