前端開發：HTML

時間 2019-11-11

標籤前端開發 html 欄目 HTML 简体版

原文原文鏈接

靜態頁面：沒有與用戶進行交互，而僅僅是用戶瀏覽的一個網頁javascript

動態網頁：就是用戶不只僅能夠瀏覽網頁，還能夠與服務器交互css

Web前端應用場景：公司官網（在PC經過瀏覽器訪問公司網站）、移動端網頁（在手機上瀏覽公司信息、小遊戲等）、移動端APP（如：淘寶）、微信小程序（不佔用手機空間）等html

Python全棧開發：不只須要後端開發的技術，還要必定程度的前端開技術；Python基礎語法、函數、面向對象、網絡編程及數據庫相關的內容，這些是後端開發的範疇。前端

前端（網頁）主要由3部份內容組成：結構（HTML）、表現（CSS）和行爲（JavaScript）（標準是W3C）java

HTML： Hyper Text Markup Lauguage（超文本標記語言），是一門描述性的語言，網頁就是用HTML語言製做的；用於搭建網頁結構python

CSS：全稱「層疊樣式表」，能夠修飾、改變網頁的字體、字體大小、字體顏色和背景顏色等；數據庫

JavaScript：是一門腳本語言，用於控制網頁的行爲，例如經過JavaScript定義鼠標一個行爲，鼠標移動到某個字體上時，背景顏色會改變等編程

總結： HTML是網頁的結構，CSS是網頁的外觀，JavaScript是網頁的行爲小程序

HTML：後端

HTML是一個網頁的主題部分；是一種用於建立網頁的標記語言。標記語言是一種將文本（Text）以及文本相關的其餘信息結合起來，展示出關於文檔結構和數據處理細節的計算機文字編碼；使用標記（Markup）進行標識。

標籤：HTML做爲一門標記語言，是經過各類各樣的標籤來標記網頁內容的。學習HTML主要就是學習HTML的標籤

標籤的特色：

　　1. 在HTML中規定標籤使用英文的尖括號即「<」和「>」包起來

　　2. HTML中標籤一般都是成對出現的，分爲開始標籤和結束標籤，結束標籤比開始標籤多了一個「/」

　　3. 標籤之間一般是能夠嵌套的（不是全部的標籤都支持互相嵌套）

HTML文檔結構：

一個HTML文件有本身固定結構的，以下：

<!-- 在HTML跟節點以前，必需要先聲明這個文檔爲HTML5的文件 -->
<!DOCTYPE HTML>  
<html>
    <head>...</head>
    <body>...</body>
</html>

<!-- 用於註釋 -->

<!-- 
1. <html></html> 稱爲根標籤，全部的網頁標籤都在<html></html>中;
2. <head></head> 標籤用於定義文檔的頭部，它是全部頭部元素的容器。常見的頭部元素有<title>、<script>、<style>、<link>和<meta>等標籤;
3. 在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在<body>標籤中的內容最終會在瀏覽器中顯示出來
 -->

注意：一、HTML註釋不支持嵌套； 2. HTML註釋不能寫在HTML中

建本身的第一個HTML文件

<!-- 聲明文檔的類型 標記該文檔爲HTML5的文件 -->
 <!DOCTYPE html>

<!-- html中的標籤都是閉合標籤，閉合標籤包含雙閉合和單閉合
雙閉合：<html> </html>
單閉合：<meta />
 -->

 <html>
 <head>
     <!-- 聲明頭部的元信息 對咱們的文檔規定編碼格式 -->
     <meta charset="utf-8">
     <!-- 是一個容器，包含頭部的信息 -->
 </head>
 <body>
     <!-- 包含瀏覽器顯示的內容標籤 -->
     這是咱們的文檔結構
 </body>
 </html>

head標籤相關內容：

head標籤的主要內容和做用：文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題、編碼方式和URL等信息，這些信息大部分是用於提供索引、辨認或其餘方面的應用（移動端）等。

如下標籤能夠用在head標籤中：

<head lang="en">
    <title>標題信息</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>

<title>標籤：在<title>和</title>標籤之間的文字內容是網頁標題信息，它會顯示在瀏覽器標籤頁的標題欄中。能夠把它當作一個網頁的標題，主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題迅速判斷出當前網頁的主題

meta標籤：

　　1.元素可提供頁面的元信息（mata-information），針對搜索引擎和更新頻度的描述和關鍵詞；

　　2.標籤位於文檔的頭部，不包含任何內容；

　　3. 提供的信息是用戶不可見的；

　　4. meta標籤的組成：meta標籤共有兩個屬性：http-equiv和name，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值實現了不一樣的網頁功能

meta標籤的屬性：

1. http-equiv屬性：它能夠用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確的顯示網頁內容，與之對應的屬性是content，content中的內容就是各個參數的變量值

<!-- 重定向 2秒後跳轉到對應的網址；注意分號 -->
<meta http-equiv="refresh" content="1;URL=https://www.baidu.com">

<!-- 指定文檔的內容類型和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<!-- 告訴IE瀏覽器用最高級的模式渲染當前網頁 -->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name屬性：主要用於頁面的關鍵字和描述，是寫給搜索引擎看的關鍵字能夠用「,」隔開，與之對應的防屬性值爲content，content中的內容主要是便於搜索引擎查找信息和分類信息用的

<meta name="keywords" content="meta總結,html,meta屬性">
<meta name="description" content="路飛學城">

其餘標籤：

<!-- icon圖標：網站的圖標 -->
<link rel="icon" href="fav.ico">

<!-- 引入外部樣式文件 -->
<link rel="stylesheet" href="mystyle.css">

<!-- 定義內部樣式表 -->
<style type="text/css"></style>

<!-- 定義JavaScript代碼或引入JavaScript文件 -->
<script type="text/javascript"></script>

<!-- 連接到外部javascript文件 -->

<script src="./index.js"></script>

把上述標籤拼到一塊兒，以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>路飛學城</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- <meta http-equiv="refresh" content="3;URL=https://www.baidu.com" /> -->

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <!-- 能夠用於優化SEO -->
    <meta name="keywords" content="meta總結,html,meta屬性">
    <meta name="description" content="路飛學城">

    <!-- 連接到外部圖標 -->
    <link rel="icon" href="./fav.ico">

    <!-- 引入外部的樣式表 index.css -->
    <link rel="stylesheet" type="text/css" href="./index.css">

    <!-- 定義內部樣式表 -->
    <style type="text/css">
        
    </style>

    <!-- 定義內部腳本文件 -->
    <script type="text/javascript"></script>

    <!-- 連接到外部javascript文件 -->
    <script src="./index.js"></script>

</head>
<body>

</body>
</html>

body相關標籤

標題標籤 h1~ h6：<h1> - <h6>標籤可定義標題，<h1>定義最大的標題， <h6>定義最小的標題。標題標籤一般來製做文章或網站的標題

不要利用標題標籤來改變同一行中的字體大小，應該使用CSS來定義達到想要的顯示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>經常使用標籤一</title>
</head>
<body>
    <!-- body相關標籤 -->

    <!-- heading：標題 h1~h6 -->
    路飛學城
    <h1>路飛學城</h1>
    <h2>路飛學城</h2>
    <h3>路飛學城</h3>
    <h4>路飛學城</h4>
    <h5>路飛學城</h5>
    <h6>路飛學城</h6>
    
</body>
</html>

若是<h1>和<h2>書寫在一行上，那在瀏覽器上的效果倒是換行了（由於一個<h>標籤獨佔一行）；

<h1>~<h6>是塊級元素；塊級元素有兩個屬性： 1. 獨佔一行； 2. 能夠設置寬度和高度（width和height）

段落標籤p： <p>內容 </p>，paragrapher的簡寫，定義段落。

瀏覽器展現特色：

　　1. 跟普通文本同樣，咱們能夠經過CSS來設置當前段落的樣式

　　2. 段落也是獨佔一行，由於其也是塊級元素

<!-- 文本樣式標籤主要用來對HTML頁面中的文本進行修飾，好比加粗、斜體、線條樣式等 -->

<b></b> ：加粗

<i></i> ：斜體

<u></u> ：下劃線

<s></s> ：刪除線

<sup></sup> ：上標
<sub></sub> ：下標

<!-- 若是想在一段文字是特別強調某幾個字，這時候就能夠用到 <em> 或 <strong> 標籤 -->

<em></em>和<strong></strong>的區別：
<em></em>表示強調，<strong></strong>表示更強烈的強調；在瀏覽器中<em>默認用斜體表示，<strong>用粗體表示。一般推薦使用<strong>表示比強調

超連接標籤a：超級連接<a></a>標記表明一個連接點，是英文anchor（錨點）的簡寫。它的做用是把當前位置的文本或圖片鏈接到其餘的頁面、文本或圖像

以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>經常使用標籤一</title>
</head>
<body>
    <p style="height: 1000px" id="p1">頂部區域</p>

    <!-- body相關標籤 -->

    <!-- heading：標題 h1~h6 -->
    路飛學城
    <h1>路飛學城</h1>
    <h2>路飛學城</h2>
    <h3>路飛學城</h3>
    <h4>路飛學城</h4>
    <h5>路飛學城</h5>
    <h6>路飛學城</h6>
    
    <p>我 年 拜 籍 舞 養 摩 的 凹 文 美 善 長 餘 正 生 走 凸 段 幹 你 萬 雨 不 看 特 自 乙 套 出 曹 心 盛 牛 小 州 成 有 用 發 筆 爲 物 那 辛 新</p>
    <p>我 年 拜 籍 舞 養 摩 的 凹 文 美 善 長 餘 正 生 走 凸 段 幹 你 萬 雨 不 看 特 自 乙 套 出 曹 心 盛 牛 小 州 成 有 用 發 筆 爲 物 那 辛 新</p>

    <!-- a連接 超連接 
    target: _self，表示在當前瀏覽器標籤打開(默認值)；
            _ blank，在新的瀏覽器窗口打開連接的資源地址；
    title：鼠標懸停時顯示的標題
    -->
    <a href="https://www.baidu.com" target="_blank" title="路飛學城">轉到百度</a>

    <!-- 轉到壓縮包並下載 -->
    <a href="body經常使用標籤.rar">下載壓縮包</a>

    <!-- 轉到郵箱並給目標郵箱發送郵件 -->
    <a href="mailto:andrewzheng@sina.cn">聯繫咱們</a>

    <!-- 返回頁面頂部   # 表明頂部 -->
    <a href="#">跳轉到頂部</a>

    <!-- 返回到某個id的區域；id經過#檢索； 同一個頁面id是惟一的 -->
    <a href="#p1">返回到p1段落區域</a>

    <!-- javascript: 是表示在觸發<a>默認動做時，執行一段javascript代碼，而 javascript:; 表示什麼都不執行，這樣點擊<a>時就沒有任何反應 -->
    <a href="javascript:alert(1)">內容一</a>
    <a href="javascript:;">內容二</a>

</body>
</html>

<a>標籤屬於行內標籤（在一行內顯示），對其設置width 和 height不起做用

列表標籤：ul，ol

網站頁面上一些列表相關的內容好比說物品列表、人名列表等等均可以使用列表標籤來展現。一般後面跟<li>標籤一塊兒用，每條<li>表示列表的內容；每一個<ul><ol><li>都是「塊級元素」

<ul> ：unordered lists的縮寫，無序列表； <ol>： ordered lists的縮寫，有序列表

    <!-- 無序列表；可加type屬性，用於定義列表的樣式-->
    <ul type="circle">
        <li>個人帳戶</li>
        <li>個人訂單</li>
        <li>個人優惠券</li>
        <li>個人收藏</li>
        <li>退出</li>
    </ul>

    <!-- 有序列表；可加type屬性，用於定義列表的樣式 -->
    <ol type="I">
        <li>個人帳戶</li>
        <li>個人訂單</li>
        <li>個人優惠券</li>
        <li>個人收藏</li>
        <li>退出</li>
    </ol>

列表的type屬性：

<ul>的：

disc 表示實心圓（默認值）
circle 表示空心圓
square 表示實心矩形
none 不顯示標識

<ol>的：

1 表示數字（默認值；默認起始編號爲1）
a 表示小寫字母
A 表示大寫字母
i 表示小寫羅馬字符
I 表示大寫羅馬字符

盒子標籤：<div>

<div>可定義文檔的分區，division（區）的縮寫；<div>標籤能夠把文檔分割爲獨立的、不一樣的部分；

以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>經常使用標籤一</title>
</head>
<body>
    <div class="para">
        <p style="height: 1000px" id="p1">頂部區域</p>
    </div>

    <!-- body相關標籤 -->

    <div class="heading">
        <!-- heading：標題 h1~h6 -->
        路飛學城
        <h1>路飛學城</h1>
        <h2>路飛學城</h2>
        <h3>路飛學城</h3>
        <h4>路飛學城</h4>
        <h5>路飛學城</h5>
        <h6>路飛學城</h6>
    </div>
    
    <div class="para">
        <p>我 年 拜 籍 舞 養 摩 的 凹 文 美<strong> 善 長 餘</strong> 正 生 走 凸 段 幹 你 萬 雨 不 看 特 自 乙 套 出 曹 心 盛 牛 小 州 成 有 用 發 筆 爲 物 那 辛 新</p>
        <p>我 年 拜 籍 舞 養 摩 的 凹 文 美 善 長 餘 正 生 走 凸 段 幹 你 萬 雨 不 看 特 自 乙 套 出 曹 心 盛 牛 小 州 成 有 用 發 筆 爲 物 那 辛 新</p>
    </div>
    
    <div class="a">
        <a href="https://www.baidu.com" target="_blank" title="路飛學城">轉到百度</a>

        <a href="body經常使用標籤.rar">下載壓縮包</a>

        <a href="mailto:andrewzheng@sina.cn">聯繫咱們</a>

        <a href="#">跳轉到頂部</a>

        <a href="#p1">返回到p1段落區域</a>

        <a href="javascript:alert(1)">內容一</a>
        <a href="javascript:;">內容二</a>
    </div>

    <div class="lists">
        <!-- 無序列表；可加type屬性，用於定義列表的樣式-->
        <ul type="circle">
            <li>個人帳戶</li>
            <li>個人訂單</li>
            <li>個人優惠券</li>
            <li>個人收藏</li>
            <li>退出</li>
        </ul>

        <!-- 有序列表；可加type屬性，用於定義列表的樣式 -->
        <ol type="I">
            <li>個人帳戶</li>
            <li>個人訂單</li>
            <li>個人優惠券</li>
            <li>個人收藏</li>
            <li>退出</li>
        </ol>
    </div>

</body>
</html>

瀏覽器查看效果以下：每小塊區域都是獨佔一行的，因此div是塊級元素

另外，每塊區域表示獨立的一塊，可爲其設置id屬性和 class屬性，來爲某個區域起個名字；id是惟一的，但class能夠設置一樣的屬性值，而且能夠設置多個

圖片標籤：<img/>

可經過使用<img/>標籤在網頁中插入圖片

語法：<img src="圖片地址" alt="圖片加載失敗時顯示的內容" title="提示信息" />

注意：

　　1. src設置的圖片地址能夠是本地的地址也能夠是一個網絡地址；

　　2. 圖片的格式能夠是png、jpg和gif；

　　3. alt屬性的值會在圖片加載失敗時顯示在網頁上；

　　4. 可爲圖片設置寬度（width）和高度（height），不設置就顯示圖片默認的寬度和高度；

　　5. 行內塊元素，與行內元素在一行內顯示

　　6. span標籤能夠單獨摘出某塊內容，結合CSS設置相應的樣式

    <div class="image">
        <!-- img是單閉合 -->
        <!-- img標籤的特色：1. 可設置寬高； 2. 在一行內顯示； 它是行內塊標籤 -->
        <img src="./python1.png" alt="python的圖片1" style="width:300px;height: 200px">
        <img src="./python2.png" alt="python的圖片2" title="python圖片">
    </div>

    <!-- HTML標籤有3種：
    1. 塊級元素（或標籤 ：特色：a.獨佔一行 b.可設寬高（若是不設置寬度，默認爲瀏覽器的寬度）
    2. 行內元素  特色：在一行內展現，不能設置寬高
    3. 行內塊元素  特色：在一行內展現，可設置寬高
     -->

其餘標籤：

換行標籤：<br> （單閉合）

分割線：<hr> （單閉合），<hr>標籤用來在HTML頁面建立水平分隔線，一般用來分隔內容

特殊符號：瀏覽器在顯示的時候會移除源代碼中多餘的空格和空行，全部連續的空格或空行（或換行）都會被算做一個空格；

想要輸入空格，須要用特殊符號：  （&bnsp加分號）

HTML特殊符號對照表： http://tool.chinaz.com/Tools/HtmlChar.aspx

表格標籤：<table> </table> （塊級元素）

表格由<table>標籤來定義；每一個表格由表格頭（用<thead>定義）、表格主題（用<tbody>來定義）和表格底部（由<tfoot>來定義）組成；表格頭、表格主題和表格底部均有若干行（表格行，由<tr>來定義）；表格頭裏的單元格用<th> 來定義（默認加粗、居中），表格主題和表格底部裏的單元格用 <td> 來定義（<td>指表格數據 table data）。

數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等

以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>表格內容</title>
</head>
<body>
    <!-- 表格 -->
    <!-- 
        border="1" 表示顯示錶格的邊框；
        cellspacing="0" 表示取消單元格的間隙
    -->
    <table border="1" cellspacing="0">

        <!-- 表格頭；表格頭中須要有表格行<tr>,而且表格頭中的單元格要用 <th> 來表示 -->
        <thead>
            <!-- 一對 <tr></tr>就表示一行（表格行） -->
            <tr>
                <!-- 一對<th></th>就表示表格頭中的一個單元格 -->
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <!-- 表格主題中的單元格用 <td> 定義 -->
                <!-- rowspan="3" 表示合併3行 -->
                <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>
                <!-- 再合併2行 -->
                <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>
                <!-- colspan="6" 表示合併6列 -->
                <td colspan="6">課程表</td>
            </tr>

        </tfoot>
    </table>
</body>
</html>

<!-- 
    rowspan 表示合併行
    colspan 表示合併列
 -->

效果以下：

表單標籤：<form> （塊級元素）

表單是一個包含表單元素的區域；表單元素是容許用戶在表單中輸入內容。好比：文本域（textarea）、輸入框（input）、單選框（）；

表單的做用：用於顯示、收集信息，並將信息提交給服務器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>表單控件</title>
</head>
<body>
    <div class="form">
        <!-- form標籤是一個塊級元素，做用是被提交 -->
        <!-- 
            action 和 method是form標籤的兩個屬性：
            action：定義表單提交時發生的動做，用於提交給服務端處理程序的地址
            method：用於定義表單提交數據時的方式；取值有 get 和 post（默認爲get）
         -->
         <!-- 下面的action表示把表單提交到百度 -->
        <form action="https://www.baidu.com" method="get">
            
            <p>
                <!-- 
                    lable元素功能：用於關聯文本與表單元素的，點擊文本時如同點擊表單元素同樣，一般與for屬性一塊兒使用；
                    for屬性：表示與該lable相關聯的表單控件元素的ID值；
                    lable是行內元素
                -->
                <label for="user">用戶名：</label>
                <!-- 由於下面的input中有id="user"，lable中的 for="user" 就會把該lable和下面的input關聯在一塊兒 -->

                <!-- input是單閉合、行內塊元素，可設置寬高 -->
                <!-- 
                    type="text"表示類型爲文本（明文顯示用戶輸入的數據）；name：控件的名稱；placeholder="請輸入用戶名" 表示 輸入框中默認顯示「請輸入用戶名」 
                -->
                <input type="text" name="username" id="user" placeholder="請輸入用戶名">
            </p>

            <p>
                <label for="password">密碼：</label>
                <!-- type="password"表示類型爲password（密文顯示用戶輸入的數據） -->
                <input type="password" name="password" id="password" placeholder="請輸入密碼">
            </p>

            <p>
                <!-- 按鈕功能 -->

                <!-- 提交form表單用 type="submit" （submit功能固定化，負責將表中的表單控件提交給服務端）， value="submit"表示讓按鈕上顯示 submit（value控件的值：即要提交給服務器的數據） -->
                <!-- 點擊下面的submit 會把表單提交到百度 -->
                <input type="submit" name="btn" value="submit">

                <!-- 顯示普通的按鈕用 type="button"，（不具備提交功能，與form表單沒有任何關係）； disable=""表示禁用該控件 -->
                <input type="button" name="btn" value="提交" disable="">

            </p>
        </form>
    </div>
</body>
</html>

瀏覽器效果以下：

點擊submit以後會轉到百度，name屬性在URL標黃的部分：

input 的屬性： radio（單選）、 checkbox（多選） file（文件）；

textarea（文本域的標籤；雙閉合）的做用：容許用戶寫入多行內容到表單控件中；屬性：cols和rows；

select（列表的標籤；雙閉合），代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>input控件</title>
</head>
<body>
    <div class="form">
        <form action="https://www.baidu.com" method="get">
            <!-- 單選框：radio -->
            <p>
                用戶性別：
                <!-- type="radio"表示單選；checked=""表示該選項會被默認選中 -->
                <input type="radio" name="sex" value="男" checked="">男
                <!-- 想要單選框產生互斥的效果，則須要name的值相同 -->
                <input type="radio" name="sex" value="女">女
            </p>

            <p>
            <!-- 多選框：checkbox -->
            用戶的愛好：
            <!-- checked=""表示默認選中 -->
            <input type="checkbox" name="checkhobby" value="吃" checked="">吃
            <input type="checkbox" name="checkhobby" value="喝">喝
            <input type="checkbox" name="checkhobby" value="玩">玩
            <input type="checkbox" name="checkhobby" value="樂">樂
            </p>

            <p>
                請上傳文件：
                <!-- 若是文件須要提交給服務器，method必須爲post，enctype必須爲 multipart/form-data -->
                <input type="file" name="file">
            </p>

            <p>
                <!-- 文本域 textarea  雙閉合 -->
                自我介紹：
                <!-- cols設置列數，rows設置行數；placeholder設置文本域內的背景內容（當你輸入本身的內容後背景內容就會自動消失）；
                <textarea></testarea>內的內容也會顯示在文本中，但輸入本身內容前須要手動刪除此內容（優先級高於placeholder）
                 -->
                <textarea cols="20" rows="5" name="txt" placeholder="請作自我介紹111">請作自我介紹2</textarea>
            </p>

            <p>
                <!-- 下拉列表select； select 一般和 option 一塊兒使用 -->
                籍貫：
                <select name="selOne">
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <!-- selected表示預選；若是不設置selected屬性，那麼選項框中的第一項默認被選中 -->
                    <option value="上海" selected>上海</option>
                    <option value="廣州">廣州</option>
                </select>
            </p>

            <p>
                意向工做省份：
                <!-- 滾動列表  multiple設置後可實現多選效果（ctrl+鼠標左鍵進行多選） -->
                <!-- size取值大於1（size表示瀏覽器顯示幾個選項），則爲滾動列表；不然爲下拉列表 -->
                <select name="selMulti" size="2" multiple="">
                    <option value="北京">北京</option>
                    <option value="天津">天津</option>
                    <option value="廣東" selected="">廣東</option>
                    <option value="上海">上海</option>
                    <option value="江蘇">江蘇</option>
                    <option value="浙江">浙江</option>
                </select>
            </p>

            <p>
                <!-- 重置按鈕 reset  點擊重置按鈕會把輸入的內容所有清空  -->
                <input type="reset" name="">

                <input type="submit" name="btn" value="submit">
            </p>
        
        </form>
    </div>
</body>
</html>

瀏覽器效果以下：

補充：form標籤的enctype屬性，以下：

HTML標籤屬性和分類：

HTML標籤能夠設置屬性，屬性通常以鍵值對的方式在開始標籤中，如：

<div id="i1">這是一個div標籤</div>
<p class='p1 p2 p3'>這是一個段落標籤</p>
<a href="http://www.luffycity.com">這是一個連接</a>
<input type='button' onclick='addclick()'></input>