前端開發 - HTML
阿新 • • 發佈：2018-08-28
des js文件 str 高度 推薦 splay word 特定 pos
1.index
2.head標簽相關內容
3.常用標簽一
4.常用標簽二 table
5.常用標簽二 form
6.標簽分類
1.index
<!--聲明文檔的類型 標記該文檔為HTML5的文件--> <!DOCTYPE html> <!-- 頁面的根節點 --> <!-- html中的標簽都是閉合標簽 閉合標簽包含 雙閉合和單閉合 雙閉合：<html></html> 單閉合：<meta /> --> <html> <head> <!-- 聲明頭部的元信息 對我們文檔 規定編碼格式 --> <meta charset="utf-8"> <!-- 包含頭部的信息 是一個容器 包含 style title meta script link等 --> </head> <body> <!-- 包含瀏覽器顯示的內容標簽 div p a img input等等 --> 這是我們的文檔結構 </body> </html>
2.head標簽相關內容
<!DOCTYPE html> <!--en 能翻譯網頁--> <html lang="en"> <head> <!-- 文檔的標題、編碼方式及URL等信息,這些信息大部分是用於提供索引,辯認或其他方面的應用（移動端） --> <!--文檔的標題--> <title>路飛學城</title> <!-- 常用兩個屬性 http-equiv:它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。 --> <!--指定文檔的內容類型和編碼類型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- 5秒之後 重定向 到路飛學城的網站 --> <meta http-equiv="refresh" content="5;URL=https://www.luffycity.com" /> <!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!-- 為了我們的SEO優化 工作的時候下面這兩句 要寫--> <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="路飛學城"> <!-- 定義我們的網站圖標 --> <link rel="icon" href="fav.ico"> <!-- 引入外部樣式表 --> <link rel="stylesheet" type="text/css" href="index.css"> <!--定義內部樣式表--> <style type="text/css"> </style> <!--定義內部腳本文件--> <script type="text/javascript"> </script> <script src="index.js"></script> </head> <body> </body> </html> <!--這裏是用 html:5 + Tab 自動生成的！！--> <!--<!doctype html>--> <!--<html lang="en">--> <!--<head>--> <!--<meta charset="UTF-8">--> <!--<meta name="viewport"--> <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">--> <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">--> <!--<title>Document</title>--> <!--</head>--> <!--<body>--> <!--</body>--> <!--</html>-->
3.常用標簽一
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>常用的標簽一</title> </head> <body> 獲得體面的 工作和 生 活 獲得體面的 工作和生活 <div class="p1"> <p style="height: 2000px;" id="p1">頂部</p> </div> <div class="heading" style="height: 700px"> <!--body相關標簽--> <!--heading:標題h1-h6 沒有h7 不要隨意的通過 h 標簽改變文字的大小 h 標簽換行了 --> 囊括行業<h2>最前沿</h2>的技術，為你提供最全面、最優質、最精彩的精品專題課程 <!--塊級元素：獨占一行 可以設置寬高--> <h1>路飛學城</h1><h2>路飛學城</h2> <h3>路飛學城</h3> <h4 style="height: 100px;width: 100px">路飛學城</h4> <h5>路飛學城</h5> <h6>路飛學城</h6> <!--<h7>路飛學城</h7>--> </div> <div class="p1"> <!--段落標簽 塊級元素 獨占一行--> <p><strong>路飛學城</strong>立誌幫助有<b>誌向</b>的<i>年輕人</i>通過<u>努力學習</u>獲得<s>體面</s>的<sup>工作</sup>和<sub>生活</sub>!路飛學員通過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啟職業生涯新可能</p> <p><em>路飛學城</em>立誌幫助<br>有誌向<br>的年輕人<hr>通過努力學習<hr>獲得體面的工作和生活!<hr><span>路飛學員</span>通過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啟職業生涯新可能</p> <p id="p2">我們</p> </div> <div class="anchor" > <!-- a 標簽屬於行內標簽：在一行內展示 --> <!-- _self:默認值：在當前網站啊打開資源 _blank:在新的網站打開資源 --> <a href="https://www.luffycity.com" target="_blank" title="luffy" >路飛學城</a> <a href="a.zip">下載壓縮包</a> <!-- a 標簽一行顯示 設置高度 寬度 不起作用 --> <a href="mailto:[email protected]" style="width: 1000px;height: 300px">聯系我們</a> <!--返回頁面頂部內容--> <a href="#">跳轉到頂部</a> <a href="#p1">跳轉到頂部的段落標簽</a> <a href="#p2">跳轉到我們標簽</a> <!-- javascript: 是表示在觸發<a>默認動作時，執行一段JavaScript代碼 javascript:; 表示什麽都不執行，這樣點擊<a>時就沒有任何反應。把a的默認動作取消了 --> <a href="javascript:alert(1)">內容</a> <a href="javascript:">內容吧</a> <!--1. `<b></b>`：加粗--> <!--2. `<i></i>`：斜體--> <!--3. `<u></u>`：下劃線--> <!--4. `<s></s>`：刪除線--> <!--5. `<sup></sup>`：上標--> <!--6. `<sub></sub>`：下標--> <!----> <!--現在如果想在一段文字中特別強調某幾個字，這時候就可以用到`<em>`或`<strong>`標簽。--> </div> <div class="lists"> <!-- ul ol li 塊級元素--> <!--無序列表 默認時實心圓disc--> <ul type="square" style="height: 200px;width: 200px"> <li>我的賬戶 ></li> <li>我的訂單 ></li> <li>我的優惠券 ></li> <li>我的收藏 ></li> <li>退出 <</li> </ul> <!--有序列表 默認是數字--> <ol style="list-style: none"> <li style="height: 200px;width: 200px">我的賬戶 ></li> <li>我的訂單 ></li> <li>我的優惠券 ></li> <li>我的收藏 ></li> <li>退出 ></li> </ol> <!-- ol標簽的屬性： type：列表標識的類型 1：數字 a：小寫字母 A：大寫字母 i：小寫羅馬字符 I：大寫羅馬字符 列表標識的起始編號 默認為1 ul標簽的屬性： type：列表標識的類型 disc：實心圓(默認值) circle：空心圓 square：實心矩形 none：不顯示標識 --> </div> <div class="image"> <!--img 行內塊標簽 1.在一行內顯示 2.可設寬高--> <img src="homesmall1.png" alt="python的圖片" style="width: 200px; height: 200px; " /> <img src="homesmall2.png" alt="linux的圖片" style="width: 200px; height: 200px" /> </div> <div class="image"> <ul type="none"> <li> <a href="javascript:"><img src="homesmall1.png" alt="python的圖片" /></a> </li> <li> <img src="homesmall2.png" alt="linux的圖片" style="cursor: pointer" /> </li> </ul> </div> <!-- 總結： 1.塊級元素 特點：獨占一行，可設寬高，如果不設寬度，則是瀏覽器的寬度 (div p h ul ol li ) 2.行內元素 特點：在一行內展示，不能設置寬高，它的寬高時根據內容去填充 (a span ) 3.行內塊元素 特點：在一行內展示，可設寬高 （img） --> <!-- 小練習： 展示兩張圖片獨占一行，鼠標移上去顯示小手的狀態！ --> <!-- 其他標簽： <br> 換行 <hr> 分割線 特殊符號： 瀏覽器顯示時 會移除源代碼中多余的空格和空行；所有連續的空格或空行都會被算作一個空格； 註意：html代碼中所有連續的空行（換行）空格 都會被顯示為 一個空格 空格： 特殊符號對照表： http://tool.chinaz.com/Tools/HtmlChar.aspx eg: < < > > --> </body> </html>
4.常用標簽二 table
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!--表格 給table 對象添加屬性 cellspacing 單元格之間的距離 --> <table border="1" cellspacing="0"> <!--表格頭--> <thead> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!--表格主體--> <tbody> <!--表格主體的每一行--> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> </tbody> <!--<tfoot></tfoot>--> </table> <table border="1" cellspacing="0"> <!--表格頭--> <thead> <tr> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!--表格主體--> <tbody> <!--表格主體的每一行--> <tr> <td rowspan="3">上午</td> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td rowspan="2">下午</td> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> </tbody> <tfoot> <tr> <td colspan="6">課程表</td> </tr> </tfoot> </table> </body> </html>
5.常用標簽二 form
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>表單控件</title> </head> <body> <div class="form"> <!--form標簽是一個塊級元素 被提交--> <form action="https://www.baidu.com" method="get"> <!--label標簽行內元素--><!--input是行內塊元素--> <p> <label for="user">用戶名：</label> <input type="text" name="username" id="user" placeholder="請輸入用戶名" > </p> <p> <label for="password">密碼：</label> <input type="password" name="password" id="password" placeholder="請輸入密碼"> </p> <!--單選框 checked 會被默認選中 產生互斥 name 值要相同--> <p> 用戶性別： <input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女 </p> <!--復選框--> <p> 用戶的愛好： <input type="checkbox" name="checkfav" value="吃" checked="checked">吃 <input type="checkbox" name="checkfav" value="喝">喝 <input type="checkbox" name="checkfav" value="玩" checked>玩 <input type="checkbox" name="checkfav" value="樂">樂 </p> <!--文件上傳 file 表單的method的方法是 post 不能是get --> <p> <input type="file" name="textfile"> </p> <!--文本域--> <p> 自我介紹 <textarea cols="20" rows="5" name="txt" placeholder="請做自我介紹"></textarea> </p> <!--下拉列表 size設置高度 multiple可多選 selected默認選中 --> <p> <label for="sel">城市：</label> <select name="sel" id="sel" size="3" multiple> <option value="北京">北京</option> <option value="上海" selected>上海</option> <option value="廣州">廣州</option> <option value="深圳">深圳</option> </select> </p> <!--按鈕--> <p> <!--顯示普通的按鈕--> <input type="button" name="btn" value="提交" disabled> <!--重置按鈕--> <input type="reset" name="" > <!--提交form表單使用 type=submit 按鈕--> <input type="submit" name="btn" value="submit"> </p> </form> <button type="button">按鈕</button> <!--類似 普通的按鈕--> <!-- 總結： 按鈕： button reset submit 文本： label text password radio checkbox file textarea 下拉框： select option --> <!-- 總結： html標簽： head 標簽： title 標簽，顯示網站的標題 meta 標簽，提供有關頁面的原信息 style 標簽，定義內部樣式表 link 標簽，鏈接css資源文件、網站圖標 script 標簽，鏈接腳本js文件 body 標簽： h1 - h6 標題標簽 p 段落標簽 ul 無序列表標簽 ol 有序列表標簽 div 盒子標簽 table 表格標簽 th 定義表頭 tr 定義表行 td 定義表單元格數據 form 表單標簽 ... action method enctype 表單控件分類： textarea select option input label ... img 標簽 br 換行標簽 hr 分割線標簽 空格字符 a 超鏈接標簽 span 標簽 button 按鈕 --> </div> </body> </html>
6.標簽分類
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>標簽分類</title> </head> <body> <!-- 1.標簽屬性 註意事項： 1.HTML標簽除一些特定屬性外可以設置自定義屬性，一個標簽可以設置多個屬性用空格分隔，多個屬性不區分先後順序。 2.屬性值要用引號包裹起來，通常使用雙引號也可以單引號。 3.屬性和屬性值不區分大小寫，但是推薦使用小寫。 2.標簽分類： HTML中標簽元素三種不同類型：塊狀元素，行內元素，行內塊狀元素。 常用的塊狀元素： <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> 常用的行內元素 <a> <span> <br> <i> <em> <strong> <label> 常用的行內塊狀元素： <img> <input> 塊級元素特點：display:block; 1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。獨占一行 2、元素的高度、寬度、行高以及頂和底邊距都可設置。 3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。 行內元素特點：display:inline; 1、和其他元素都在一行上； 2、元素的高度、寬度及頂部和底部邊距不可設置； 3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。 行內塊狀元素的特點：display:inline-block; 1、和其他元素都在一行上； 2、元素的高度、寬度、行高以及頂和底邊距都可設置 註意 我們可以通過display屬性對塊級元素、行內元素、行內塊元素進行轉換，為後面頁面布局做好了準備。 3.標簽嵌套規則： 塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素，例如： <div><div></div><h1></h1><p><p></div> ?? <a href=”#”><span></span></a> ?? a 可以包含 img <span><div></div></span> ? 某些塊級元素不能放在p標簽裏面，比如 <p><ol><li></li></ol></p> ?? <p><div></div></p> ? 個別例外，大家註意 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標簽是： h1、h2、h3、h4、h5、h6、p li元素可以嵌入ul，ol，div等標簽 <ul> <li> <ul> <li> <div> </div> </li> <li> <ol> <li></li> <li></li> <li></li> <li></li> </ol> </li> </ul> </li> </ul> --> <div class="wrapper"> <!--塊級元素： div p h1~h6 ol ul li table form 塊狀元素： 1.獨占一行 2.可以設寬度和高度，如果設置了寬度和高度，則就是當前的寬度和高度 如果沒有設置，寬度就是父盒子的寬度，高度根據內容填充 --> <div class="left"> 這是路飛學城的戰場 <div>這是我的段落 <div style="width:500px;height: 100px">這是我的愛好</div> <ul> <li> <h2>讀書</h2> </li> <li> <ol> <li>運動</li> <li>學習</li> </ol> </li> </ul> </div> </div> <div class="right"> <!--行內標簽 a span br i en strong label hr 可以設置寬高； br 不可設置寬高； 行內元素：在一行內展示，不能設置寬度和高度，寬度和高度根據內容填充 --> <a href="#" style="width: 200px;height: 100px">百度</a> <a href="#">luffy</a> <span style="width: 100px;height: 100px">一些文本</span> <span>一些文本</span> <i>我是i</i> <hr style="height: 100px;width: 100px"> <em>我是em</em> <br style="width: 200px;height: 100px"> <strong style="height: 200px;width: 100px;">我是strong</strong> </div> <div class="inline-block"> <!--行內塊 1.在一行內展示 2.可設置寬高 --> <img src="homesmall1.png" alt="一張圖片" style="height: 500px;width: 500px"> <label for="txt">測試</label> <input type="text" name="username" id="txt" style="width: 200px;height: 50px"> </div> </div> </body> </html>
前端開發 - HTML