HTML基礎（二）
全文手打，轉載請注明出處
全文手打，轉載請注明出處
全文手打，轉載請注明出處
一）標簽通用屬性
標簽=標簽名+標簽屬性+文本內容（單標簽無文本內容）
標簽屬性：對標簽的描述
標簽屬性分類：通用屬性；自有屬性；自定義屬性
通用屬性：所有標簽都具有的屬性
id：為標簽取1個唯一的名稱，多個地方用到p標簽，取不同的id名，區分相同標簽
class：為標簽取1個類名，不同標簽取相同類名，進行批量操作
style：設置標簽的行內樣式
title：鼠標移到標簽上的提示文本
<p id = "p1">段落1</p> //id名稱在1個網頁中必須是唯一的 <p id = "p2">段落1</p> <div class = "test">div</div> <p class = "test">p</p> <p style = "color:red;width:200px;border:1px solid #00f;">測試段落</p> <p title = "鼠標放上去的提示文本">段落</p>
自定義屬性：屬性不夠用，用戶自定義屬性，用來傳值，或圖片的懶加載
格式：data-單詞
<img src = "圖片名" alt = "提示文本" /> 圖片懶加載：淘寶每一頁很多圖片，先只加載展示的部分，其他的先不加載 <img data-src = "圖片名" alt = "提示文本" />
二）table表格標簽
表格用于呈現格式化數據
<table> <tr> //先行tr后列td <th></th> //表頭th，自動居中加粗 <th></th> </tr> <tr> <td></td> <td></td> </tr> ... </table> table屬性 //border：邊界寬度，默認單位像素px //align：table整體對齊方式（默認left，center，right） //cellspacing： 單元格邊框間距 //cellpadding：表格內文字距離左側邊框距離 <table border = "1" width = "400" cellspacing = "0" cellpadding= "10" align = "center"> </table>
三）表格跨行跨列（合并行，合并列）：
跨行：rowspan
跨列：colspan
<table border = "1" width = "500" align = "center"> <tr> //valign：垂直對齊（top/middle/bottom） <th rowspan = "2" align = "center" valign = "bottom">101</th> //101和201同一列的合并為合并行，合并2行rowspan="2" <th>102</th> <th>103</th> </tr> <tr> <td>202</td> <td>203</td> </tr> <tr> <td colspan = "3">301</td> //301，302，303合并，同一行的合并為合并列 //<td>302</td> //<td>303</td> </tr> </table>
四）完整表格
caption（標題），thead（表頭），tbody（表體），tfoot（表尾）
<table border = "1" width = "500" align = "center"> <caption>學生信息表</caption> <thead> <tr> <th>學號</th> <th>姓名</th> <th>分數</th> <th>備注</th> </tr> <thead> <tbody> <tr> <td align = "center">001</td> <td>張安*</td> <td>98</td> <td>優秀學生</td> </tr> <tr> <td align = "center">002</td> <td>李四</td> <td>67</td> <td>加油</td> </tr> </tbody> <tfoot> <td colspan = "4">附錄：*為優秀學生</td> </tfoot> </table>
五）form表單標簽
form表單標簽：所有標簽最核心標簽之一，用來實現前后端交互的重要標簽
常用屬性：name：表單名稱
action：表單數據提交的地方（一般為后臺文件名或網址）如果是#表提交到當前文件
method：前端提交數據到后端的方法，主要有：get（默認）和post
<form name="stuInfo" action="test.jsp" method="get"> <input type = "submit"> <input type = "text" name = "username" placeholder = "請輸入您的姓名"> //get會把輸入的暴露在地址欄后面，post不會 </form>
六）表單元素（表單主鍵）
input標簽：主要用來輸入，選擇或發出指令
type：text，password，radio，checkbox，file，button，image，submit，reset
<form action=""> //①text：單行文本輸入框，默認type = "text" //屬性：placeholder（提示）/value（默認值）/name（命名）/minlength（最小輸入的字符個數）/maxlength/disabled（失效）/readonly（只讀）/pattern（正則匹配：是否符合規范） <input> <input type = "text"> <input type = "text" name = "test" placeholder = "請輸入數字" value = "100"> //當value設置值，placeholder將不顯示被替代了 <input type = "text" value = "100" disabled> //不可修改，灰色 <input type = "text" value = "100" readonly> //不可修改，非灰色，可激活但不可修改 //②password：密碼框，輸入內容為...，提升隱秘性 //屬性：和text一樣 <input type = "password"> //③radio：單選鈕 //屬性：name（命名必須有）/value（默認值）/checked（默認選中）/disabled（失效）/readonly（只讀） <input type = "radio" name = "sex">男 //有name值才相互排斥 <input type = "radio" name = "sex" checked>女 //默認選女 //④checkbox：復選框，可選擇0項或多項 //屬性：name（命名必須有）/value（默認值）/checked（默認選中）/disabled（失效）/readonly（只讀） <input type = "checkbox" name = "hobby" checked>聽音樂 <input type = "checkbox" name = "hobby">睡覺覺 <input type = "checkbox" name = "hobby" checked>恰飯飯 //⑤button：普通按鈕，用于調用腳本js代碼 //屬性：value（按鈕標題）/disabled（失效） <input type = "button" value = "登錄" disabled> //value為button標題 //⑥file：文件上傳按鈕，可傳到后臺 <input type = "file"> //點擊按鈕后，可上傳本地文件到后臺 //⑦image：圖片按鈕，用法和submit相同 //屬性：src（加載提示圖片）/disabled（失效） <input type = "image" src = "img/btn.png" title = "刷新"> //⑧submit/⑨reset：提交將表單數據提交到后臺/重置將輸入的內容還原 <input type = "submit"> <input type = "reset" value = "按鈕標題"> </form>
textarea標簽：文本域，多行文本框，輸入多行文本
<form action = ""> //屬性：name（）/id（）/cols（列數）/rows（行數）/required（必須輸入）/value/placeholder/minlength/maxlength <textarea name = "memo" id = "memo" cols = "30" rows = "10">備注：</textarea> </form>
select標簽：下拉列表框，默認用于單項選擇
radio會把選項全部列舉出來，select更節省空間
<form action = ""> //屬性：selected（默認選中）/multiple（可實現多選）/size=2（展示2行，用滾動條展示） <label for = "hobby">愛好：<label> //label的for為select的id做提示 <select id = "hobby" multiple size = "2"> <option selected value = "music">聽音樂</option> //用option呈現選項 <option value = "sleep">睡覺覺</option> <option value = "eat">恰飯飯</option> </form>
button標簽：普通按鈕，提交，可單獨使用不寫在form元素中；如果寫在form也有提交功能
<button id = "btnOK">確認</button> //用來調用js腳本代碼 <form action = "test.aspx"> <input type = "text" name = "info"> <button>提交</button> //把input輸入的內容提交到test.aspx </form>
七）iframe框架標簽：減少使用
iframe：框架集，將多個網頁文件組合成一個文件
//屬性：name（框架名）/src（引入的外部html文件）/scrolling（滾動條：yes/no/auto）/width（）/height（）/frameborder（是否有框架邊框：1有/0無）/marginheight（框架離頂部和底部的距離）/marginwidth（框架離左側和右側的距離）
//屬性：name（框架名）/src（引入的外部html文件）/scrolling（滾動條：yes/no/auto） //width（）/height（）/frameborder（是否有框架邊框：1有/0無） //marginheight（框架離頂部和底部的距離）/marginwidth（框架離左側和右側的距離） //banner <iframe src = "iframe/banner.html" scrolling = "no" width = "100%" frameborder = "0"></iframe> //導航 <iframe src = "iframe/nav.html" scrolling = "auto" width = "20%" height = "300px" frameborder = "0"></iframe> //核心內容區 <iframe src = "iframe/content1.html" scrolling = "no" width = "70%" frameborder = "0"></iframe>
nav.ntml文件 導航欄一般用ul寫 <ul> <li>分類1 <ul> <li><a href = "contnt1.html" target = "main">內容一</a></li> <li><a href = "contnt2.html" target = "main">內容二</a></li> <li><a href = "contnt3.html" target = "main">內容三</a></li> </ul> </li> <li>分類2 <ul> <li><a href ="">1內容一</a></li> <li><a href ="">2內容二</a></li> <li><a href ="">3內容三</a></li> </ul> </li> <li>分類3 <ul> <li><a href ="">11內容一</a></li> <li><a href ="">12內容二</a></li> <li><a href ="">13內容三</a></li> </ul> </li> </ul>
浙公網安備 33010602011771號