HTML語法介紹

時間 2019-11-06

標籤 html 語法介紹欄目 HTML 简体版

原文原文鏈接

一基本標籤（塊級標籤和內聯標籤）

<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.

<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.

<b> <strong>: 加粗標籤.

<strike>: 爲文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角標 和 下角表.

<br>:換行.

<hr>:水平線

<div><span>

塊級標籤：<p><h1><table><ol><ul><form><div>javascript

內聯標籤：<a><input><img><sub><sup><textarea><span>css

block（塊）元素的特色

老是在新行上開始；
寬度缺省是它的容器的100%，除非設定一個寬度。
它能夠容納內聯元素和其餘塊元素

inline元素的特色

和其餘元素都在一行上；
寬度就是它的文字或圖片的寬度，不可改變
內聯元素只能容納文本或者其餘內聯元素

特殊字符

&lt; &gt; &quot; &copy; &reg;

<br>標籤

　　<br>可插入一個簡單的換行符。html

　　<br>標籤是空標籤（意味着它沒有結束符，所以下面的這個是錯誤的：<br></br>）java

1.1 HTML中塊級標籤和內聯標籤的區別

塊級元素	行內元素
獨佔一行,默認狀況下，其寬度自動填滿其父元素寬度	相鄰的行內元素會排列在同一行裏，直到一行排不下，纔會換行，其寬度隨元素的內容而變化
能夠設置width，height屬性	行內元素設置width，height屬性無效
能夠設置margin和padding屬性	行內元素起邊距做用的只有margin-left、margin-right、padding-left、padding-right，其它屬性不會起邊距效果。
對應於display:block	對應於display:inline；

二，head標籤

　　咱們首先來介紹一下head標籤的主要內容和做用，文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題、編碼方式及URL等信息,這些信息大部分是用於提供索引,辯認或其餘方面的應用（移動端）的等。如下標籤是能夠用在head標籤中的：python

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

三，title標籤

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

　　下面作一個小練習，建立一個帶有咱們自定義標題內容的網頁：編程

<!DOCTYPE HTML>
<html>
    <head>
        <title>戰爭熱誠</title>
    </head>
    <body></body>
</html>

　　將上面的文件另存爲a.html，而後用瀏覽器打開，就能夠看到下面的內容。瀏覽器

上面咱們介紹了title標籤的用法，接下來咱們繼續看一下head標籤中可使用的其餘標籤：安全

上面咱們介紹了title標籤的用法，接下來咱們繼續看一下head標籤中可使用的其餘標籤：服務器

四，meta標籤

Meta標籤介紹：

　　元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。

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

　　提供的信息是用戶不可見的。 meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

經常使用的meta標籤：

http-equiv屬性

它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

<!--重定向 2秒後跳轉到對應的網址，注意分號-->
<meta http-equiv="refresh" content="2;URL=http://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屬性,meta跳轉">
<meta name="description" content="戰爭熱誠">

五，body標籤

　　想要在網頁上展現出來的內容必定要放在body標籤中。把咱們以前海燕那一段HTML代碼貼過來，保存到一個HTML格式的文件中。

<!DOCTYPE HTML>
<html>
    <head>
        <title>戰爭熱誠</title>
    </head>
    <body>
        <h1>海燕</h1>
        <p>在蒼茫的大海上，</p>
        <p>狂風捲集着烏雲。</p>
        <p>在烏雲和大海之間，</p>
        <p>海燕像黑色的閃電，</p>
        <p>在高傲地飛翔。</p>
    </body>
</html>

　　使用瀏覽器打開，看一下效果：

上面也出現了字體的大小，這是什麼呢？這裏就簡單介紹一下。

六，標題標籤h1~h6

　　<h1> - <h6> 標籤可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。因爲 h 元素擁有確切的語義，所以請您慎重地選擇恰當的標籤層級來構建文檔的結構。所以，請不要利用標題標籤來改變同一行中的字體大小。相反，咱們應當使用css來定義來達到漂亮的顯示效果。標題標籤一般用來製做文章或網站的標題。

h1~h6標籤的默認樣式：

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>戰爭熱誠</title>
    </head>
    <body>
        <h1>一級標題</h1><h2>二級標題</h2>
        <h3>三級標題</h3>
        <h4>四級標題</h4>
        <h5>五級標題</h5>
        <h6>六級標題</h6>
    </body>
</html>

　　請看上面代碼 <h1>和<h2>書寫在一行上展現，可是在瀏覽器的效果倒是換行了，以下：

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

1. `<b></b>`：加粗
2. `<i></i>`：斜體
3. `<u></u>`：下劃線
4. `<s></s>`：刪除線
5. `<sup></sup>`：上標 
6. `<sub></sub>`：下標

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

這兩個標籤都是表示強調，可是二者在強調的語氣上有區別:`<em>`表示強調，`<strong>`表示更強烈的強調。

在瀏覽器中`<em>`默認會用斜體表示，`<strong>`會用粗體來表示。兩個標籤相比，咱們一般會推薦你們使用`<strong>`表示強調。

七，段落標籤p

<p>,paragraph的簡寫。定義段落

<body>
        <p>咱們大多數都是想法太多實踐太少，或者簡單點說就是想坐享其成</p>
        <p>爲了改變本身，我決定好好學習，多作事情，少說話</p>

</body>

瀏覽器展現特色：

跟普通文本同樣，但咱們能夠經過css來設置當前段落的樣式
是否又獨佔一行呢？答案是的塊級元素

超連接標籤a

href:要鏈接的資源路徑 格式以下: href="http://www.baidu.com" 

target: _blank : 在新的窗口打開超連接. 框架名稱: 在指定框架中打開鏈接內容.

name: 定義一個頁面的書籤.

用於跳轉 href : #id.（錨）

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

<body>
    <h1>

        <!-- a連接 超連接  
        target:_blank 在新的網站打開連接的資源地址
                _self 在當前網站打開連接的資源地址
        title: 鼠標懸停時顯示的標題
        -->
        <a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
        <a href="a.zip">下載包</a>
        <a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a>
        <!-- 返回頁面頂部的內容 -->
        <a href="#">跳轉到頂部</a>

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


    </h1>
</body>

　　target:_blank 在新的網站打開連接的資源地址
　　target：_self 在當前網站打開連接的資源地址
　　title: 表示鼠標懸停時顯示的標題

連接其餘表現形式：

目標文檔爲下載資源例如：href屬性值，指定的文件名稱，就是下載操做(rar、zip等)
電子郵件連接前提：計算機中必須安裝郵件客戶端，而且配置好了郵件相關信息。例如：<ahref="mailto:zhaoxu@tedu.cn">聯繫咱們</a>
返回頁面頂部的空連接或具體id值的標籤例如：<a href="#">內容</a>或<a href="#id值">內容</a>
javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼。例如：<ahref="javascript:alert()">內容</a>
javascript:;表示什麼都不執行，這樣點擊<a>時就沒有任何反應例如：<a href="javascrip:;">內容</a

八，列表標籤ul，ol

<ul>: 無序列表

<ol>: 有序列表
         <li>:列表中的每一項.

<dl>  定義列表

         <dt> 列表標題
         <dd> 列表項

　　網站頁面上一些列表相關的內容好比說物品列表、人名列表等等均可以使用列表標籤來展現。一般後面跟`<li>`標籤一塊兒用，每條li表示列表的內容

　　<ul>:unordered lists的縮寫無序列表 <ol>:ordered listsde的縮寫有序列表

<!-- 無序列表 type能夠定義無序列表的樣式-->
    <ul type="circle">
        <li>個人帳戶</li>
        <li>個人訂單</li>
        <li>個人優惠券</li>
        <li>個人收藏</li>
        <li>退出</li>
    </ul>
    <!-- 有序列表 type能夠定義有序列表的樣式 -->
    <ol type="a">
        <li>個人帳戶</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>可定義文檔的分區 division的縮寫譯：區 <div> 標籤能夠把文檔分割爲獨立的、不一樣的部分,請看下面代碼咱們將他們進行分區

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

        <div class="anchor">
            我是普通的文本
            <h1>

                <a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
                <a href="a.zip">下載包</a>
                <a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a>
                <a href="#">跳轉到頂部</a>
                <a href="#p1">跳轉到p1</a>

                <a href="javascript:alert(1)">內容</a>
                <a href="javascript:;">內容</a>
            </h1>
        </div>
        <!-- <h2>戰爭熱誠</h2>
        <h3>戰爭熱誠</h3>
        <h4>戰爭熱誠</h4>
        <h5>戰爭熱誠</h4>
        <h6>戰爭熱誠</h6> -->
        <div class="para">
        <!-- 定義段落 一般指文章一段內容 -->
        <p>好好學習，每天向上</p>
        <p>有時候把，我以爲有些人真的厲害，爲何那麼厲害呢</p>
        <p>有時候把，又以爲本身超級笨，爲何本身那麼笨呢</p>
        </div>

        <div class="lists">
            <!-- 無序列表 -->
            <ul type="circle">
                <li>個人帳戶</li>
                <li>個人訂單</li>
                <li>個人優惠券</li>
                <li>個人收藏</li>
                <li>退出</li>
            </ul>
            <!-- 有序列表 -->
            <ol type="a">
                <li>個人帳戶</li>
                <li>個人訂單</li>
                <li>個人優惠券</li>
                <li>個人收藏</li>
                <li>退出</li>
            </ol>
        </div>
    </div>
</body>
</html>

　　分析上面代碼能夠下面的層次結構

<div id='wrap'>
    <div class='para'></div>
    <div class='anchor'></div>
    <div class='para'></div>
    <div class='lists'></div>    
</div>

　　咱們將文檔放在一個父級的區（div）中，它裏面包含四塊區（div）域，瀏覽器查看效果,你會發現每小塊區域都是獨佔一行的，因此div是塊級元素。另外，每塊區域表示獨立的一塊，id屬性和class屬性其實很簡單，你能夠當作給這個區域起個名字。id是惟一的，一個頁面中不能有兩個重複的id，跟身份證號碼同樣，class能夠設置一樣的屬性值，而且能夠設置多個，例如class=’para n1‘

十，圖片標籤<img>

src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

一個網頁除了有文字，還會有圖片。咱們使用`<img/>`標籤在網頁中插入圖片。

語法：

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

注意：

src設置的圖片地址能夠是本地的地址也能夠是一個網絡地址。
圖片的格式能夠是png、jpg和gif。
alt屬性的值會在圖片加載失敗時顯示在網頁上。
還能夠爲圖片設置寬度(width)和高度(height)，不設置就顯示圖片默認的寬度和高度

<div>
     <span>與行內元素展現的標籤<span>
     <span>與行內元素展現的標籤<span>
     <img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">
     <img src="./finance-right.png" alt="人工智能實戰"  style="width: 200px;height: 200px">
 </div>

瀏覽器查看效果：行內塊元素
5. 與行內元素在一行內顯示
6. 能夠設置寬度和高度
7. span標籤能夠單獨摘出某塊內容，結合css設置相應的樣式

十一，表格標籤table

　　表格由<table> 標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義），每行被分割爲若干單元格（由<td>標籤訂義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。

border: 表格邊框.

cellpadding: 內邊距

cellspacing: 外邊距.

width: 像素 百分比.（最好經過css來設置長寬）

<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan:  單元格豎跨多少行

colspan:  單元格橫跨多少列（即合併單元格）

<th>: table header <tbody>(不經常使用): 爲表格進行分區.

<div class="table">
        <table>
            <!--表格頭-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】這裏使用的是th-->
                    <th></th>
                </tr>
            </thead>
            <!--表格主體-->
            <tbody>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】這裏使用的是td-->
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td></td>
                </tr>
            </tfoot>
        </table>
</div>

表格行和列的合併

rowspan 合併行(豎着合併)
colspan 合併列(橫着合併)

　　小練習：

<body>
    <div class="table">
        <table border="1" cellspacing="0">
            <!--表格頭-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】這裏使用的是th-->
                    <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>化學</td>
                </tr>
                <tr>
                    <!--表格列，【注意】這裏使用的是td-->
                    <td>語文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <!--表格列，【注意】這裏使用的是td-->
                    <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>化學</td>
                </tr>
                <tr>
                    <!--表格列，【注意】這裏使用的是td-->
                    <td>語文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td colspan="6">課程表</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>

十二，表單標籤 form

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

表單的做用

表單用於顯示、手機信息，並將信息提交給服務器

1，語法

<form>容許出現表單控件</form>

表單標籤<form>

表單用於向服務器傳輸數據。

表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。

表單還能夠包含textarea、select、fieldset和 label 元素。

1.表單屬性

　　HTML 表單用於接收不一樣類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標籤, 要提交的全部內容都應該在該標籤中.

action: 表單提交到哪. 通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理，好比https://www.sogou.com/web

method: 表單的提交方式 post/get 默認取值就是 get（信封）

get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.

post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

get/post是常見的兩種請求方式.

2.表單元素

<input> 標籤的屬性和對應值

type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕            

             button 按鈕(須要配合js使用.) button和submit的區別？

             file 提交文件：form表單須要加上屬性enctype="multipart/form-data"   

 name:    表單提交項的鍵.注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；
而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客戶端編程，而在css和javascript中使用的

 value:   表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣：

 
  type 
  = 
  "button" 
  ,  
  "reset" 
  ,  
  "submit"  
  -  
  定義按鈕上的顯示的文本 
 
  type 
  = 
  "text" 
  ,  
  "password" 
  ,  
  "hidden"  
  -  
  定義輸入字段的初始值 
 
  type 
  = 
  "checkbox" 
  ,  
  "radio" 
  ,  
  "image"  
  -  
  定義與輸入相關聯的值　　 
 
    checked:  radio 和 checkbox 默認被選中

 readonly: 只讀. text 和 password

 disabled: 對所用input都好使.

type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕            

             button 按鈕(須要配合js使用.) button和submit的區別？

             file 提交文件：form表單須要加上屬性enctype="multipart/form-data"   

 name:    表單提交項的鍵.注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客
          戶端編程，而在css和javascript中使用的

 value:   表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣：

 
          type 
          = 
          "button" 
          ,  
          "reset" 
          ,  
          "submit"  
          -  
          定義按鈕上的顯示的文本 
         
          type 
          = 
          "text" 
          ,  
          "password" 
          ,  
          "hidden"  
          -  
          定義輸入字段的初始值 
         
          type 
          = 
          "checkbox" 
          ,  
          "radio" 
          ,  
          "image"  
          -  
          定義與輸入相關聯的值

 checked:  radio 和 checkbox 默認被選中

 readonly: 只讀. text 和 password

 disabled: 對所用input都好使.

上傳文件注意兩點：

1 請求方式必須是post

2 enctype="multipart/form-data"

<select> 下拉選標籤屬性

name:表單提交項的鍵.

          size：選項個數

          multiple：multiple 

                 <option> 下拉選中的每一項 屬性：

                       value:表單提交項的值.   selected: selected下拉選默認被選中

                 <optgroup>爲每一項加上分組

<textarea> 文本域

name:    表單提交項的鍵.

cols:    文本域默認有多少列

rows:    文本域默認有多少行

<label>

<label for="www">姓名</label>
<input id="www" type="text">

<fieldset>

<fieldset>
    <legend>登陸吧</legend>
    <input type="text">
</fieldset>

屬性見下表：

表單控件分類，見下圖：

<form action="http://www.baidu.com" method="get">
            <!-- input -->
            <!--文本框-->
            <p>
                用戶名稱：
                <input type="text" name="txtUsename" value="請輸入用戶名稱" readonly>
            </p>
            <p>
                用戶密碼：
                <input type="password" name="txtUsepwd">
            </p>
            <p>
                確認密碼：
                <input type="password" name="txtcfmpwd" disabled>
            </p>
            <!--單選框-->
            <p>
                用戶性別：
                <input type="radio" name="sexrdo" value="男">男
                <input type="radio" name="sexrdo" value="女" checked=''>女
            </p>
            <!--複選框-->
            <p>
                用戶愛好：吃
                <input type="checkbox" name="chkhobby" value="吃" checked> 喝
                <input type="checkbox" name="chkhobby" value="喝"> 玩
                <input type="checkbox" name="chkhobox" value="玩"> 樂
                <input type="checkbox" name="chkhobox" value="樂" checked>
            </p>
            <!-- 按鈕 -->
            <p>
                <input type="submit" name="btnsbt" value="提交">
                <input type="reset" name="btnrst" value="重置">
                <input type="button" name="btnbtn" value="普通按鈕">
            </p>
            <!--文件選擇框-->
            <p>
                請上傳文件：
                <input type="file" name="txtfile">
            </p>
            <!--textarea-->
            <p>
                自我介紹：
                <textarea name="txt" cols="20" rows="5"></textarea>
            </p>
            <!--選擇框-->
            <!--滾動列表 multiple設置之後實現多選效果，ctrl+鼠標左鍵進行多選-->
            <p>籍貫：
                <select name="sel" size="3" multiple>
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="廣州" selected>廣州</option>
                </select>
            </p>
            <!--下拉列表-->
            <p>意向工做城市：
                <select name="sel">
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="廣州" selected>廣州</option>
                </select>
            </p>        
        </form>

十三，其餘標籤

換行標籤 `<br>`

<br>標籤用來將內容換行，其在HTML網頁上的效果至關於咱們平時使用word編輯文檔時使用回車換行。

分割線 `<hr>`

<hr>標籤用來在HTML頁面中建立水平分隔線，一般用來分隔內容

特殊符號

瀏覽器在顯示的時候會移除源代碼中多餘的空格和空行。全部連續的空格或空行都會被算做一個空格。須要注意的是，HTML代碼中的全部連續的空行（換行）也被顯示爲一個空格。

舉個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>戰爭熱誠的博客</title>
</head>
<body>
    <p>
        好好學習

            咱們會掙好多錢的
    </p>
</body>
</html>

　　上面的代碼在瀏覽器中最終的顯示效果爲：

　　因此HTML代碼對縮進的要求並不嚴格，咱們一般使用縮進來讓咱們的代碼結構更清晰，僅此而已。