前端學習總結
阿新 • • 發佈：2021-08-16
- 1.HTML標準格式
<!DOCTYPE HTML><!--這是HTML5的文件宣告--> <html><!--這是html的開始標籤--> <head><!--這是設定網頁標籤,html的編碼設定,以及標題和連結資源都寫在這裡--> <!--這是設定移動端觀看時,網頁不縮放--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--設定網頁在ie上觀看時,按照瀏覽器的最高版本的IE觀看--> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta charset="utf-8"> <!--這是設定網頁編碼--> <title>我的主頁</title><!--這是設定網頁標題--> </head> <body><!--這是網頁內容--> 你好! 歡迎訪問我的主頁 </body> </html>
<!--1、這是HTML的註釋 2、加上以下程式碼的第一行就表示HTML5語法。去掉就表示HTML4.0 3、HTML不區分大小寫，語法鬆散不嚴格。 -->
- 2.HTML的基本標籤
<!--段落標記--> <p>《黛玉葬花》</p> <!--標題字：是HTML預留的格式，和word中的標題字相同--> <h1>標題字</h1> <h2>標題字</h2> <h3>標題字</h3> <h4>標題字</h4> <h5>標題字</h5> <h6>標題字</h6> <!--換行標記，br標籤是一個獨目標記--> hello <br>world! <!--橫線，獨目標記--> <hr> <!--color和width都是hr標籤的屬性--> <hr color="red" width="50%"> <!--語法太鬆散了。--> <hr color='green' width=30%> <!--預留格式--> <pre> for(int i = 0; i < 10; i++){ System.out.println("i = " + i); } </pre> <del>刪除字</del> <ins>插入字</ins> <b>粗體字</b> <i>斜體字</i> 10<sup>2</sup> 10<sub>m</sub> <!--字型標籤--> <font color="red" size="50">字型標籤</font>
- 3.HTML的實體符號
實體符號特點是：以&開始，以;結束。< 是小於號 > 是大於號  是空格
- 4.HTML的表格
<table align="center" border="1px" width="60%" height="150px"> <!--align對齊方式--> <th> <td>表頭</td> </th> <tr align="center"> <td>a</td> </tr> <tr> <td align="center">z</td> </tr> </table> <!--注意事項： 1、row合併的時候，刪除“下面的”單元格 rowspan 2、col合併的時候，對刪除哪個沒有要求。 colspan -->
- 5.背景顏色和背景圖片
<!-- bgcolor : 設定背景色 background : 設定背景圖片 以上的設定都是對背景進行設定。 --> <body bgcolor="red" background="img/bd_logo1.png"> </body>
- 6.圖片img
<img src="img/bd_logo1.png" width="100px" title="我是百度圖片哦" alt="圖片找不到哦!"/> <!-- 1、設定圖片寬度和高度的時候，只設置寬度，高度會進行等比例縮放。 2、img標籤就是圖片標籤 3、src屬性是圖片的路徑 4、width設定寬度,height設定高度 5、title設定滑鼠懸停時顯示的資訊。 6、alt設定圖片載入失敗時顯示的提示資訊。 -->
- 7.超連結
<a href="http://www.baidu.com">百度</a> <!--圖片超連結--> <a href="https://www.hao123.com/"> <img src="img/hao123.png" width="120px"/> </a> <!-- 超連結有一個target屬性： 可取值： _blank : 新視窗 _self ： 當前視窗（預設就是這種方式。） _top ： 頂級視窗 _parent ： 父視窗 -->
- 8.無序列表ul 有序列表ol
<!--無序列表--> <ul type="circle"> <li>中國</li> <li>美國</li> <li>日本</li> </ul> <!--有序列表--> <ol type="I"> <li>水果 <ol type="a"> <li>蘋果</li> <li>西瓜</li> <li>桃子</li> </ol> </li> <li>蔬菜 <ol> <li>西紅柿</li> </ol> </li> <li>甜點</li> </ol>
9.表單form
<form action="http://localhost:8080/jd/login"> 使用者名稱<input type="text" /><br> 密碼<input type="password" /><br> <!--submit reset必須放到form標籤內部--> <input type="submit" value="登入" /> <input type="reset" value="清空" /> </form>
<!--一些表單控制元件。--> <!--file控制元件：檔案上傳專用。--> <input type="file" /> <!--隱藏域：網頁上看不到，但是表單提交的時候資料會自動提交給伺服器。--> <input type="hidden" name="userid" value="111" /> <input type="radio" name="gender" value="1" />男 <input type="radio" name="gender" value="0" checked/>女 <!--單選按鈕的value必須手動指定--> <br> <input type="checkbox" name="interest" value="smoke"/>抽菸 <input type="checkbox" name="interest" value="drink" checked/>喝酒 <input type="checkbox" name="interest" value="fireHair" checked/>燙頭 <br>
<input type="text" maxlength="3" /> <!--maxlength 設定文字框中可輸入的字元數量。-->
10.readonly disabled 表單控制元件的屬性
<!-- readonly和disabled相同點：都是隻讀不能修改。 但是readonly可以提交給伺服器，disabled資料不會提交（即使有name屬性也不會提交。） -->
11.id屬性
id的存在讓我們獲取元素（節點）更方便。
<!--id就是節點的身份證號碼，不能重複。--> <input type="text" id="username" />
12.div和span
<div id="div1">我是一個DIV</div> <!-- div獨自佔用一行（預設情況下）--> <span id="span1">我是一個SPAN標籤</span> <!-- span不會獨自佔用一行 -->