天天看點
傳回

web前端之 HTML标簽詳細介紹 - 奮鬥中的碼農

web前端之 HTML标簽詳細介紹

html标簽的分類

點我檢視完整的html标簽介紹

在html中，标簽一般分為塊級标簽和行内标簽

  • 塊級标簽：塊元素一般都從新行開始，它可以容納内聯元素和其他塊元素,常見塊元素是段落标簽"p"、"div"、"form"這個塊元素比較特殊，它隻能用來容納其他塊元素。 
例如：div、h1、p form 等
  • 行内标簽：又稱為内聯标簽，内聯元素隻能容納文本或者其他内聯元素 
例如：a、span、select 等

看下代碼和效果圖就知道了

  • html代碼 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span style="background-color: #aa614f">我是内聯标簽</span>
    <div style="background-color: red">我是塊級标簽</div>
</body>
</html>
  • 效果圖

web前端之 HTML标簽詳細介紹 - 奮鬥中的碼農

DOCTYPE标簽

該标簽告訴浏覽器使用什麼樣的規範來解析html文檔 

<!-- 推薦使用html規範進行解析 -->
<!DOCTYPE html>

點我檢視有關Doctype的規範

head标簽的子标簽

1、meta标簽 (metadata information)

meta标簽為自閉和标簽，該标簽提供有關頁面的元資訊，例：頁面編碼、重新整理、跳轉、針對搜尋引擎和更新頻度的描述和關鍵詞

  • 頁面編碼（告訴浏覽器是什麼編碼） 
<!-- 下面這兩種寫法是一個意思，使用其中一種就可以了 -->
<meta http-equiv=“content-type” content=“text/html;charset=utf-8” />
<meta charset="UTF-8" />
  • 重新整理和跳轉 
<!-- 每隔30秒重新整理一次頁面 -->
<meta http-equiv=“Refresh” Content=“30″>

<!-- 打開頁面5秒後跳轉到百度的連接配接上 -->
<meta http-equiv=”Refresh“ Content=”5; Url=http://www.baidu.com“ />
  • 關鍵詞（SEO相關） 
<!-- 該關鍵詞取自部落格園的首頁 -->
<meta name="keywords" content="開發者,部落格園,開發者,程式猿,程式媛,極客,程式設計,代碼,開源,IT網站,Developer,Programmer,Coder,Geek,技術社群" />
  • 描述（SEO相關） 
<!-- 該描述取自部落格園的首頁 -->
<meta name="description" content="部落格園是一個面向開發者的知識分享社群。自建立以來，部落格園一直緻力并專注于為開發者打造一個純淨的技術交流社群，推動并幫助開發者通過網際網路分享知識，進而讓更多開發者從中受益。部落格園的使命是幫助開發者用代碼改變世界。" />
  • X-UA-Compatible 主要用來解決ie6相容性的問題 
<!-- 如果使用ie6浏覽器打開，則使用ie最新的工業版處理html，而不是用原生的ie6的模式來處理html -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

2、title标簽

該标簽主要顯示網頁的标題 

<!-- 該标題顯示在浏覽器标簽頁，顯示效果如下圖所示 -->
<title>web前端學習</title>

web前端之 HTML标簽詳細介紹 - 奮鬥中的碼農

3、link标簽

該标簽主要用來引入css樣式和引入浏覽器标簽頁标題左側的小圖示

  • 引入css 
< link rel="stylesheet" type="text/css" href="css/common.css" >
  • 引入圖示icon 
< link rel="shortcut icon" href="image/favicon.ico">

4、style标簽

該标簽主要用來在html檔案中寫css樣式, 更多的樣式會在CSS博文中詳細介紹 

< style type="text/css" >
    .bb{
        background-color: red;
    }
< /style>

5、script标簽

該标簽主要用來在html檔案中寫js代碼或者引入js檔案，有關JS的操作會在JS的博文中詳細介紹

  • 引入檔案 
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
  • 寫js代碼 
<script type="text/javascript">
    var num = 10;
    ...
</script>

body标簽中常用的子标簽

1、html特殊符号的表示方式

例如要在html頁面上顯示一個大于号和小于号 

使用 &gt; 來表示大于号
使用 &lt; 來表示小于号

點我檢視網頁特殊符号HTML代碼大全

2、p标簽

p标簽表示一個段落，預設段落之間是有間隔的，例如 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>這裡是第一個段落</p>
    <p>這裡是第二個段落</p>
</body>
</html>

web前端之 HTML标簽詳細介紹 - 奮鬥中的碼農

3、br标簽

br标簽是一個換行标簽

  • 沒有br标簽的代碼和效果圖 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span>第一個span标簽</span>
    <span>第二個span标簽</span>
</body>
</html>

web前端之 HTML标簽詳細介紹 - 奮鬥中的碼農

  • 加了br标簽的代碼和效果圖 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span>第一個span标簽</span>
    <br />
    <span>第二個span标簽</span>
</body>
</html>

web前端之 HTML标簽詳細介紹 - 奮鬥中的碼農

4、a标簽

a标簽主要用來設定超文本連結，超連結可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點選這些内容來跳轉到新的文檔或者目前文檔中的某個部分。當您把滑鼠指針移動到網頁中的某個連結上時，箭頭會變為一隻小手。

預設情況下，連結将以以下形式出現在浏覽器中：

  • 一個未通路過的連結顯示為藍色字型并帶有下劃線
  • 通路過的連結顯示為紫色并帶上下劃線
  • 點選連結時，連結顯示為紅色并帶上下劃線

代碼如下 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
    使用 href 屬性可以指定點選該文字跳轉到哪裡去
        href="url"    href可以指定跳轉的url
        href="#aaa"    表示跳轉到目前頁面中id為aaa的标簽處，并将該标簽置頂顯示，href可以跳轉至指定頁面中标簽的id值
    使用 target 屬性，你可以定義被連結的文檔在何處顯示。
        target="_self"     預設不寫target就是這個屬性,在目前頁面打開百度頁面
        target="_parent"   在目前頁面中打開百度的頁面,感覺和_self是一樣的
        target="_top"      這個好像也是跟上面兩個是一樣的效果
        target="_blank"    在新的浏覽器頁面中打開

    -->
    <a href="http://www.baidu.com" target="_blank">點我打開百度首頁</a>
</body>
</html>

效果圖

web前端之 HTML标簽詳細介紹 - 奮鬥中的碼農

5、H标簽 

标題（Heading）是通過<h1>到<h6>标簽進行定義的，<h1>定義最大的标題。<h6> 定義最小的标題

代碼如下 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我是h1标簽</h1>
    <h2>我是h2标簽</h2>
    <h3>我是h3标簽</h3>
    <h4>我是h4标簽</h4>
    <h5>我是h5标簽</h5>
    <h6>我是h6标簽</h6>
</body>
</html>

效果圖

6、select标簽

select标簽是一個下拉清單

代碼如下 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--在option屬性中加selected="selected" 表示預設選擇該option标簽-->
    <select>
        <option value="1">上海</option>
        <option value="2">北京</option>
        <option selected="selected" value="3">廣州</option>
    </select>

    <!--在select标簽中加size屬性表示預設顯示2個option,不表示選中-->
    <select size="2">
        <option>上海</option>
        <option>北京</option>
        <option>廣州</option>
        <option>廣州</option>
    </select>

    <!--在select标簽中加multiple屬性表示同時可以選擇多個option,可按住ctrl多選,或者按住shift多選-->
    <select size="2" multiple="multiple">
        <option>上海</option>
        <option>北京</option>
        <option>廣州</option>
        <option>廣州</option>
    </select>


    <!--optgroup表示組的概念,可以實作一個層級效果-->
    <select>
        <optgroup label="河北省">
            <option>石家莊</option>
            <option>邯鄲</option>
        </optgroup>
        <optgroup label="山西省">
            <option>太原</option>
            <option>平遙</option>
        </optgroup>
    </select>
</body>
</html>

效果圖

7、input标簽系列

代碼如下 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <h1>input系列</h1>

    <h2>文本框和密碼框</h2>
    username: <input type="text" />
    <br/>
    password: <input type="password" />

    <br/>
    <h2>單選框redio</h2>
    請選擇性别:<br/>
    <!--通過使用name屬性來對類型為radio的input标簽進行限制,可以了解為相同name的radio标簽是一個組,
    可以使用屬性checked="checked"設定預設勾選的單選框
    radio标簽隻有一個能夠被選中,value屬性值用在使用form表單進行資料送出的時候,具體看form标簽-->
    男 <input type="radio" name="gender" value="man"/>
    女 <input type="radio" name="gender" value="woman"/>
    保密 <input type="radio" name="gender" value="no" checked="checked"/>

    <h2>複選框checkbox</h2>
    請選擇興趣愛好:<br/>
    <!--通過使用name屬性來對類型為checkbox的input标簽進行限制,可以了解為相同name的checkbox标簽是一個組,
    可以使用屬性checked="checked"設定預設勾選的複選框
    checkbox标簽可以同時選中多個,value屬性值用在送出form表單的時候,具體看form标簽-->
    籃球 <input type="checkbox" name="hobbies" value="basketball" />
    足球 <input type="checkbox" name="hobbies" value="football" checked="checked"/>
    羽毛球 <input type="checkbox" name="hobbies" value="badminton" checked="checked"/>
    <br/>

    <!--上傳檔案需要from表單的配合并在form标簽中進行特殊的設定，才可以進行上傳檔案，否則背景隻能夠擷取到檔案的名稱
    enctype="multipart/form-data"     在form标簽中設定該屬性才能夠送出檔案，例如：    -->
    <form action="xxx" method="post" enctype="multipart/form-data">
        <h2>上傳檔案</h2>
        <input type="file" />
    </form>

    <h2>按鈕</h2>
    <!--可點選的按鈕，但沒有任何行為。button 類型常用于在使用者點選按鈕時啟動 JavaScript 程式-->
    <input type="button" value="button"/>

    <!--送出按鈕。送出按鈕用于向伺服器發送表單資料。資料會發送到表單的 action 屬性中指定的頁面。-->
    <input type="submit" value="submit"/>

    <!--重置按鈕。重置按鈕會初始化目前input标簽所在的form表單中的所有input系列标簽的資料-->
    <input type="reset" value="reset">



</body>
</html>

效果圖如下

8、textarea标簽 多行文本輸入控件

代碼如下 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h2>textarea</h2>
    <textarea></textarea>
    
    <!--可以使用樣式控制該文本框的寬度和高度-->
    <textarea style="width:500px;height: 200px;"></textarea>

</body>
</html>

效果圖

web前端之 HTML标簽詳細介紹 - 奮鬥中的碼農

9、label标簽 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form>
    <!--把label标簽中的for屬性的值跟input标簽中的id值綁定到一起了,通過點選label中的文字,就可以選中于該label标簽綁定的标簽,文本框就是将光标挪動至文本框中-->
    <label for="man">男</label>
    <input type="radio" name="sex" id="man" />
    <br />
    <label for="woman">女</label>
    <input type="radio" name="sex" id="woman" />
</form>

</body>
</html>

效果圖

web前端之 HTML标簽詳細介紹 - 奮鬥中的碼農

10、清單标簽

清單分為無序清單、有序清單、層級清單 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--無需清單-->
    <ul>
      <li>北京</li>
      <li>上海</li>
      <li>廣州</li>
    </ul>

    <!--有序清單-->
    <ol>
      <li>北京</li>
      <li>上海</li>
      <li>廣州</li>
    </ol>

    <!--層級清單-->
    <dl>
        <dt>河北省</dt>
        <dd>邯鄲</dd>
        <dd>石家莊</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遙</dd>
    </dl>
</body>
</html>

效果圖

11、table标簽

table标簽在html中定義表格 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h2>table</h2>
    <!--broder指定表格的邊框-->
    <table border="1">
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
    <br>
    <br>

    <table border="1">
        <thead>     <!-- <thead> 标簽表示table标簽的頭部-->
            <tr>
                <!--合并行,colspan="3" 表示合并3行-->
                <th colspan="3">1</th>
            </tr>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
        </thead>
        <tbody>     <!-- <tbody> 标簽表示table标簽的身體部分-->
            <tr>    <!-- <tr>标簽表示行 -->
                <td>1</td>   <!-- <td>标簽表示列 -->
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <!--合并列, rowspan="3" 表示合并3列-->
                <td rowspan="3">1</td>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

效果圖

web前端之 HTML标簽詳細介紹 - 奮鬥中的碼農

12、fieldset标簽

個人感覺就是做出登入框的效果，看代碼和效果圖 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
    <!-- fieldset标簽需要配合着legend标簽來使用 -->
    <fieldset>
        <legend>登入</legend>
        <p>使用者名：</p>
        <p>密碼：</p>
    </fieldset>

</body>
</html>

效果圖

web前端之 HTML标簽詳細介紹 - 奮鬥中的碼農

13、form标簽

form表單主要用來做一些資料的送出,例如向百度送出一個搜尋的關鍵詞 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <form action="https://www.baidu.com/s" method="get">

        請輸入要搜尋的關鍵詞: <input type="text" name="wd" />
        <input type="submit" value="送出" />

    </form>

</body>
</html>

送出前

送出後

14、div标簽

div标簽主要用來比較友善的進行網頁布局 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div style="background-color:red; color:white">
        <h3>This is a header</h3>
        <p>This is a paragraph.</p>
    </div>

    fdafd

</body>
</html>

效果圖

上一篇: go語言hello world
下一篇: Golang入門筆記（一）go語言安裝及Hello World