免费A级毛片无码专区网站-成人国产精品视频一区二区-啊 日出水了 用力乖乖在线-国产黑色丝袜在线观看下-天天操美女夜夜操美女-日韩网站在线观看中文字幕-AV高清hd片XXX国产-亚洲av中文字字幕乱码综合-搬开女人下面使劲插视频

  1. 首頁 > 生活 > >

day02-HTML02

生活百科day02-HTML02

4.HTML4.3HTML基本標(biāo)簽4.3.9表格(table)標(biāo)簽

  • 基本語法：
<table border="邊框?qū)挾? cellspacing="空隙大小" cellpadding="填充大小"></table>
  • 說明：
table 是表格標(biāo)簽，border 設(shè)置表格標(biāo)簽
width 設(shè)置表格寬度，height 設(shè)置表格高度
align 設(shè)置表格相對于頁面的對其方式
cellspacing 設(shè)置單元格間的空隙大小，0表示沒有空隙
tr 是行標(biāo)簽，th是表頭標(biāo)簽，td是單元格標(biāo)簽
align設(shè)置單元格文本對齊方式，b是加粗標(biāo)簽
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格標(biāo)簽</title></head><body><h1 align="center">標(biāo)簽表格的使用</h1><!--使用表格標(biāo)簽顯示三行三列的表格--><!--px表示像素，不寫單位默認(rèn)就是像素--><table width="500" border="5" align="center"><tr><th>姓名</th><th>地址</th><th>郵件</th></tr><tr><td>第1行第1列</td><td>第1行第2列</td><td>第1行第3列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr><tr><td>第3行第1列</td><td>第3行第2列</td><td>第3行第3列</td></tr></table></body></html>
day02-HTML02

文章插圖
  • 跨行跨列表格
    • 合并列：colspan="列數(shù)"
    • 合并列：rowspan="行數(shù)"
    • cellspacing：設(shè)置單元格間的空隙大小，0表示沒有空隙
    • bordercolor：指定表格邊框的顏色
    使用表格標(biāo)簽，展示如下的表格：

day02-HTML02

文章插圖
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>跨行跨列表格</title><!--思路：1.先把整個表格完整的行和列展示出來5*32.再使用合并的技術(shù)來處理3.十六進制表現(xiàn)的顏色前名要加#號--></head><body><h2>跨行跨列表格</h2><table border="1" bordercolor="#E87EFA" width="500" cellspacing="0"><tr><!--合并了三列--><td colspan="3" align="center">第1行第1列</td></tr><tr><!--合并行，跨行row--><td rowspan="2">第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr><tr><td>3.2</td><td>33</td></tr><tr><!--合并行，跨行row--><td rowspan="2">第4行第1列</td><td>42</td><td>43</td></tr><tr><td>52<img src="https://www.huyubaike.com/biancheng/imgs/2.png" width="100"></td><td>53</td></tr></table></body></html>
day02-HTML02

文章插圖
4.3.10表單form標(biāo)簽表單語法：
  • form 表示表單
  • action 表示提交到哪個頁面
  • method 表示提交方式，常用get和post
  • input type="text"輸入框
  • input type="password"密碼框
  • input type="submit" 提交按鈕
  • input type="reset" 重置按鈕
<form action="url" method=*>......<input type="submit"><input type="reset"></form>其中 url 表示定位一個web資源的路徑
method的星號可以為get，也可以是post，不寫的話默認(rèn)是get
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表單登錄</title></head><body><h1>登錄系統(tǒng)</h1><form action="ok.html" method="post">用戶名： <input type="text" name="username"><br/><!--為了漢字對齊，輸入全角的空格即可-->密　碼： <input type="password" name="username"><br/><input type="submit" value="https://www.huyubaike.com/biancheng/登錄">　<input type="reset" value="https://www.huyubaike.com/biancheng/重新填寫"></form></body></html>

經(jīng)驗總結(jié)擴展閱讀