1. 前端概述
1.1 前端
前端和後端，站在程式碼執行位置的角度來區分的話，服務端所執行的程式碼被稱為後端程式碼，也就是這部分程式碼是在伺服器上執行的。
而我們所看到的網頁內容，是我們的瀏覽器獲取到伺服器處理後發來的結果（程式碼）之後，在本地進行渲染後所呈現的效果。
也就是說，這部分程式碼是在客戶端本地執行的，那麼這些在客戶端本地執行的程式碼就叫前端程式碼。
總的來說，前端就是在客戶端執行的程式碼，而後端，就是在服務端執行的程式碼。
1.2 HTML
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文字標記語言，超文字指的是超連結，標記指的是標籤，是一種用來製作網頁的語言。
這種語言由一個個的標籤組成，用這種語言製作的檔案儲存的是一個文字檔案，檔案的副檔名為html或者htm，一個html檔案就是一個網頁。
html檔案用編輯器開啟顯示的是文字，可以用文字的方式編輯它，如果用瀏覽器開啟，瀏覽器會按照標籤描述內容將檔案渲染成網頁，顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。
2. HTML的基本標籤
<!DOCTYPE> <!--告訴瀏覽器，以下的html文字按照標準模式(W3C標準)渲染--> <!--html標籤不區分大小寫--> <!--html標籤分為閉合標籤和自閉合標籤--> <!--html標籤的屬性通常是以鍵值對的形式出現，且只能出現先開始標籤中--> <!--如果屬性值和屬性名完全一樣，直接寫屬性名即可--> <!--標籤存在的意義是為了方便讓css、js對指定內容進行操作--> <html lang="en"> <head> <!-- html頁面的標題，head標籤中的內容除了title，其他使用者都看不見 --> <title>Pray の 小破站</title> <!-- 設定字元編碼，下面兩者等價，選一種即可 --> <meta charset="UTF-8"> <!-- 這裡其實是下面寫法的簡寫 --> <meta http-equiv="content-type" charset="UTF-8"> <!-- 設定搜尋引擎搜尋關鍵字和網站描述 --> <meta name="keywords" content="生活,日常,分享,扯淡"> <meta name="description" content="人生天地之間，如白駒之過隙"> <!-- 自動重新整理 --> <!-- <meta http-equiv="refresh" content="5;URL=http://cnblogs.com/hgzero">--> <!-- 顯示頁面的圖示，瀏覽器上方顯示的圖示 --> <link rel="icon" href="https://cdn.jsdelivr.net/gh/hgzerowzh/blog_website/data/image/my_head_phote.png"> </head> <body> <div id="first">這裡是頂部，這裡設了一個a標籤的錨點</div> <h1>1. 最基本的幾個標籤</h1> <!-- h1到h5的字型大小依次遞減 --> <h2>1.1 幾個特殊圖示和符號</h2> <p>這裡的nbsp代表一個空格 </p> <p>這裡的>和<分別表示大於和小於</p> <p>這裡的br標籤是<br>換行標籤</p> <h2>1.2 幾個字型格式</h2> <strong>這是加粗標籤，行內元素，表示非常重要的內容</strong> <hr> <!--這裡的hr標籤是用來列印一條橫線的--> <b>加粗，行內元素，原本沒有語義，w3c強加了語義，表示文件中的關鍵字或者產品名</b> <strike>這個標籤是在文字上加刪除線</strike> <em>斜體標籤，行內元素，表示語氣中的強調詞</em> <h2>1.3 塊級標籤和內聯標籤，所有的標籤都分為塊級標籤和內聯標籤</h2> <span>這是一個內聯標籤，</span> <span>span標籤只佔它所包含的內容的範圍，</span> <span>這裡定義了三個span標籤，它們顯示在同一行了。</span> <div>div是一個塊級標籤</div> <div>每個div獨佔一行</div> <div><a href="http://hgzerowzh.com">Pray の 小破站</a></div> <h3>塊級標籤</h3> <div>h1到h5的h系標籤，h系列標籤的自身特性是加大加粗</div> <div>div標籤是塊級標籤，div的特性就是一個白板</div> <div>p標籤，p標籤的特性是段落和段落之間有間隙</div> <h3>行內標籤</h3> <div>span標籤，它的特性就是一個白板</div> <h2>1.4 圖片和超連結標籤</h2> <a href="http://hgzerowzh.com" target="_blank"> <img src="https://cdn.jsdelivr.net/gh/hgzerowzh/blog_website/data/image/null-b836ed.jpg" alt="圖片顯示失敗後顯示這裡的內容" title="滑鼠懸浮此圖片上就顯示這裡的內容" width="150px" height="160px"> </a> <div></div> <!--這裡的target="_blank"表示點選a標籤後會新開一個視窗進行a標籤的跳轉--> <!--a標籤是行內標籤--> <a href="https://cdn.jsdelivr.net/gh/hgzerowzh/blog_website/data/image/wechat_code_money.png" target="_blank">打賞一下</a> <!-- 通過a標籤跳轉到指定的錨點--> <a href="#top">回到首部</a> </body> </html>
3. 列表和table表格
<!DOCTYPE> <html lang="en"> <head> <title>Pray の 小破站</title> <meta charset="UTF-8"> </head> <body> <h1>1. 列表和表格</h1> <h2>列表</h2> <h3>有序列表</h3> <!--有序列表，開頭以數字序號表示--> <ol> <li>a</li> <li>b</li> <li>c</li> </ol> <h3>無序列表</h3> <!--無序列表，開頭以點號表示--> <ul> <li>a</li> <li>b</li> <li>c</li> </ul> <h3>自定義列表</h3> <!--自定義列表--> <dl> <dt>第一章</dt> <dd>第一節</dd> <dd>第二節</dd> <dt>第二章</dt> <dd>第一節</dd> <dd>第二節</dd> </dl> <h2>table表格</h2> <table border="1px" cellpadding="5x" cellspacing="2px"> <!--border表示表格的邊框的厚度佔用1px--> <!--cellpadding表示內邊距，cellspacing表示外邊距--> <thead> <tr> <th rowspan="2">111</th> <!--rowspan表示單元格豎跨多少行--> <th>222</th> <th>333</th> </tr> </thead> <tbody> <tr> <td>111</td> <td colspan="2">222</td> <!--colspan表示單元格橫跨多少列--> </tr> </tbody> </table> <!--寫表格也可以直接用tr、th、td來寫--> <table border="1px" cellpadding="5px" cellspacing="2px"> <tr> <th rowspan="2">111</th> <!--rowspan表示單元格豎跨多少行--> <th>222</th> <th>333</th> <th>444</th> </tr> <tr> <td colspan="2">222</td> <!--colspan表示單元格橫跨多少列--> <td>333</td> </tr> </table> </body> </html>
4. form表單和input標籤
<!DOCTYPE> <html lang="en"> <head> <title>Pray の 小破站</title> <meta charset="UTF-8"> </head> <body> <h1>1. 登入註冊頁面,form表單,input系列</h1> <form action="http://127.0.0.1:8080/index" method="POST" enctype="multipart/form-data"> <!-- method預設以get方式提交, 這裡後面的enctype屬性是為了上傳檔案--> <!-- get方式提交會將內容新增作為url的字尾--> <!--這裡的placeholder中的值是顯示在input框中的文字內容--> <p>姓名<input type="text" name="username" placeholder="姓名"></p> <p>密碼<input type="password" name="password" placeholder="密碼"></p> <!--多選框--> <p>愛好： 音樂<input type="checkbox" name="hobby" value="music"> 電影<input type="checkbox" name="hobby" value="movie" checked="checked"> 電影<input type="checkbox" name="hobby" value="talking"> </p> <!--單選框--> <p>性別： 男<input type="radio" name="gender" value="man" checked="checked"> 女<input type="radio" name="gender" value="women"> </p> <!--上傳檔案時，必須在form表單中新增一個enctype的屬性--> <p><input type="file" name="put_file"></p> <!-- 這是上傳檔案按鈕 --> <p><input type="submit" value="提交註冊"></p> <!-- 這裡的value值就是此提交框中顯示的文字內容 --> <p><input type="reset" value="重置"></p> <!-- 這是一個重置按鈕 --> <p><input type="button" value="只是一個按鈕"></p> <!--input框的屬性：--> <!--name:表單提交項的鍵--> <!--value：表單提交項的值--> <!--checked：radio和checkbox預設被選中--> <!--readonly：只讀模式， text和password--> <!--disabled：禁用，失去所有的功能，對所有的input框都好使--> <!-- 以上表單標籤中的name屬性其實是傳遞給server端的鍵值對中的鍵(key)，對應的值(value)就是使用者選擇或輸入的選項--> <!-- 以上傳遞資訊被封裝成了一個字典傳遞給server端 ： {"username":"hgzero", "password":"12345", "hobby":["music", "movie"], "gender":"man"}--> </form> </body> </html>
5. select標籤和其他
<!DOCTYPE> <html lang="en"> <head> <title>Pray の 小破站</title> <meta charset="UTF-8"> </head> <body> <h1>4. select標籤和其他雜項</h1> <h2>select標籤</h2> 地區： <!--這裡的multiple是表示可以多選,size表示顯示的最大個數--> <select name="place" multiple="multiple" size="3"> <option value="beijing" selected="selected">北京市</option> <!--這裡的selected表示預設選中--> <option value="shanghai">上海市</option> <option value="hefei">合肥市</option> <option value="chongqing">重慶市</option> <option value="chengdu">成都市</option> </select> 安徽： <select name="place" multiple="multiple" > <!--這裡的optgroup標籤表示只是一個標題，不可選中--> <optgroup label="安徽省"> <option value="anqing" selected="selected">安慶市</option> <option value="合肥">合肥市</option> </optgroup> </select> <h2>其他雜項</h2> <!--一個大的文字輸入欄，cols：文字預設有多少列，rows：文字預設有多少行--> 簡介 <textarea name="desc" cols="20" rows="5"></textarea> <div></div> <input id="www" type="text"> <!--這裡的label標籤for中的值要與上面id中的值相同，以完成點選label標籤中的文字就可以啟用input輸入框的特效--> <label for="www">姓名</label> </body> </html>
6. 更多詳細內容