前端之HTML

hgzero發表於2020-06-13

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代表一個空格&nbsp;&nbsp; </p>
                <p>這裡的&gt;&lt;分別表示大於和小於</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. 更多詳細內容

點此進入

 

相關文章