1 | 運(yùn)維開(kāi)發(fā)應(yīng)該掌握的 HTML 常用標(biāo)簽

本文鏈接：http://www.reibang.com/p/27fa6c3ad56f
作者：西瓜甜

一挟冠、初始 HTML

1. 基本介紹

超文本標(biāo)記語(yǔ)言（英語(yǔ)：Hyper Text Markup Language框咙，簡(jiǎn)稱：HTML）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。

HTML常與CSS、JavaScript 一起被眾多網(wǎng)站用于設(shè)計(jì)令人賞心悅目的網(wǎng)頁(yè)、網(wǎng)頁(yè)應(yīng)用程序以及移動(dòng)應(yīng)用程序的用戶界面儿咱。

網(wǎng)頁(yè)瀏覽器可以讀取HTML文件翘单，并將其渲染成可視化網(wǎng)頁(yè)。

  • HTML 負(fù)責(zé)展現(xiàn)網(wǎng)頁(yè)的內(nèi)容

  • CSS 層疊樣式表伪冰，負(fù)責(zé)以什么樣的樣式展現(xiàn)網(wǎng)頁(yè)的內(nèi)容誓酒，比如字體的大小和顏色，背景圖片和內(nèi)容放在什么位置贮聂。

  • JavaScript 負(fù)責(zé)用戶和網(wǎng)頁(yè)內(nèi)容的交互靠柑，就是讓網(wǎng)頁(yè)內(nèi)容動(dòng)起來(lái)。

維護(hù)HTML和CSS標(biāo)準(zhǔn)的組織是萬(wàn)維網(wǎng)聯(lián)盟（W3C）

2. 標(biāo)記

HTML標(biāo)記包含標(biāo)簽（及其屬性）吓懈、基于字符的數(shù)據(jù)類型歼冰、字符引用和實(shí)體引用等幾個(gè)關(guān)鍵部分。

HTML標(biāo)簽是最常見(jiàn)的耻警，通常成對(duì)出現(xiàn)隔嫡，比如<h1>與 </h1>。
這些成對(duì)出現(xiàn)的標(biāo)簽中甘穿，第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽腮恩，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽。
兩個(gè)標(biāo)簽之間為元素的內(nèi)容温兼，有些標(biāo)簽沒(méi)有內(nèi)容秸滴，如 <img>, 這個(gè)稍后會(huì)介紹。

HTML另一個(gè)重要組成部分為文檔類型聲明這會(huì)告訴瀏覽器改用哪一種標(biāo)準(zhǔn)來(lái)渲染募判。

下面是一個(gè)經(jīng)典的Hello World程序的例子荡含，一個(gè)用于比較編程語(yǔ)言咒唆、腳本語(yǔ)言和標(biāo)記語(yǔ)言的不同之處的通用測(cè)試。這個(gè)例子用9行代碼寫成：

<!DOCTYPE html>
<html>
  <head>
    <title>這是標(biāo)題</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

文檔標(biāo)記類型<!DOCTYPE html>用于表示這是一個(gè) HTML5 類型的文檔内颗。

<html>和</html>之間的文本用于描述整個(gè)網(wǎng)頁(yè)部分钧排。

<body>和</body>之間的文本是你真正能在頁(yè)面上看到的內(nèi)容，即瀏覽器的窗口內(nèi)容均澳。

<title>這是標(biāo)題</title>定義了瀏覽器的頁(yè)面標(biāo)題恨溜，就是在瀏覽器每個(gè)標(biāo)簽上展現(xiàn)的內(nèi)容。

image.png

3. HTML 文檔總體結(jié)構(gòu)

<!DOCTYPE html>
<!--
 我是 HTML 語(yǔ)言中的注釋,可以單行找前，
 也可以多行糟袁。
-->
<!--設(shè)置頁(yè)面的語(yǔ)言： 英文。中文把 en 換成 zh-CN -->
<html lang="en">   <!--網(wǎng)頁(yè)開(kāi)始-->
   <head>          <!--網(wǎng)頁(yè)頭開(kāi)始-->   
       <title>千鋒教育</title> <!--頁(yè)面標(biāo)題-->
       <meta charset="UTF-8"/>
   </head>         <!--網(wǎng)頁(yè)頭結(jié)束-->
   
   <body>          <!--網(wǎng)頁(yè)體開(kāi)始-->
      
       <!--頁(yè)面正文標(biāo)簽開(kāi)始-->
       <div>     
        頁(yè)面正文內(nèi)容  
       </div>
       <!--頁(yè)面正文標(biāo)簽結(jié)束-->

    </body>        <!--網(wǎng)頁(yè)體結(jié)束-->
</html>           <!--網(wǎng)頁(yè)結(jié)束-->

4. HTML5 語(yǔ)法

實(shí)際上是沿用了之前的 html 語(yǔ)法躺盛，只是做的更加簡(jiǎn)單项戴、更加人性化。

  • 不區(qū)分大小寫 （規(guī)范化建議小寫）

  • 支持布爾值 <input type="text" required="true">

  • 屬性的值可以省略引號(hào)（規(guī)范化考慮槽惫，建議使用雙引號(hào)）

    <div class=c1></div>
<!--等同于-->
<div class="c1"></div>

5. 標(biāo)簽和元素的關(guān)系

HTML文檔由嵌套的HTML元素構(gòu)成周叮。它們用HTML標(biāo)簽表示，包含于尖括號(hào)中界斜，如 <div>仿耽。

在一般情況下，一個(gè)元素由一對(duì)標(biāo)簽表示：開(kāi)始標(biāo)簽<p>與結(jié)束標(biāo)簽 </p>各薇。元素如果含有文本內(nèi)容项贺，就被放在這兩個(gè)標(biāo)簽之間。

<p>我是段落標(biāo)簽峭判，用來(lái)表示一段文字</p>

在開(kāi)始與結(jié)束標(biāo)簽之間也可以嵌套另外的標(biāo)簽元素开缎，包括標(biāo)簽與文本的混合。
這些嵌套的標(biāo)簽是父與子的關(guān)系林螃。

<p>
    我是段落標(biāo)簽<a>我是 a 標(biāo)簽奕删，可以被點(diǎn)擊，
    點(diǎn)我</a>
</p>

6. 標(biāo)簽分類

a. 從書寫方式分治宣，標(biāo)簽分為:

  • 自閉合標(biāo)簽

    自閉合標(biāo)簽急侥，只有一個(gè)大于號(hào)和小于號(hào)組合而成，后面的反斜線可以有侮邀，也可以沒(méi)有。建議都有贝润。

<meta/>
<img/>

  • 主動(dòng)閉合標(biāo)簽

    主動(dòng)閉合標(biāo)簽都是成對(duì)兒出現(xiàn)的,并且后面的必須加反斜線 /,以表名此標(biāo)簽內(nèi)容結(jié)束绊茧。

<div>主動(dòng)閉合標(biāo)簽</div>

b. 從元素(標(biāo)簽) 在頁(yè)面中所占據(jù)的位置空間來(lái)分，可分為：

  • 塊級(jí)元素

在整個(gè)頁(yè)面上打掘，無(wú)論自己內(nèi)容的多少华畏，自己都會(huì)獨(dú)占一行鹏秋。

  • 內(nèi)聯(lián)標(biāo)簽，不獨(dú)占一行亡笑，只占據(jù)自己寬度大小的空間
標(biāo)簽分類

HTML5 源碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>標(biāo)簽分類</title>
  <style>
    .c1{
      border: 2px solid red;
      background-color:thistle;
      font-size: 20px;
    }
    .c2{
      border: 2px solid rgb(47, 28, 99);
      background-color:rgb(138, 179, 127);
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="c1">我就是霸道侣夷，這一行都是我的地盤</div>
  <a href="" class="c2">左青龍</a>
  <span class="c2">我最好說(shuō)話了，是兄弟站在我的兩邊</span>
  <a href="" class="c2">右白虎</a>
</body>
</html>

常見(jiàn)塊級(jí)標(biāo)簽有：

<div></div>
<p></p>

<h1></h1>
到
<h6></h6>

<ul></ul>
<table></table>

常用的內(nèi)聯(lián)標(biāo)簽有：

<a href="#"></a>   <i></i>   <span></span>

7. 認(rèn)識(shí)標(biāo)簽的屬性

幾乎在所有的標(biāo)簽中都可以針對(duì)標(biāo)簽的種類仑乌，設(shè)置自身的屬性百拓；如：

<a class="widget-controls">

這里 class 就是這個(gè) a 標(biāo)簽的屬
性名，這個(gè)屬性叫做類屬性晰甚。

widget-controls 是屬性的值衙传，也就是類的名字，規(guī)范要求用雙引號(hào)包裹起來(lái)厕九。
在一個(gè)HTML文本中同一個(gè)類的名字可給多個(gè)標(biāo)簽使用蓖捶。

具體有哪些屬性，下面會(huì)針對(duì)不同的標(biāo)簽來(lái)說(shuō)明扁远。

二俊鱼、HTML元素之間的關(guān)系結(jié)構(gòu)

了解一些瀏覽器的工作原理是很重要的。以下面這段 HTML 為例：

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

當(dāng)瀏覽器讀到這些代碼時(shí)畅买，它會(huì)建立一個(gè)“DOM 節(jié)點(diǎn)”樹(shù)來(lái)保持追蹤所有內(nèi)容并闲，如同你會(huì)畫一張家譜樹(shù)來(lái)追蹤家庭成員的發(fā)展一樣。

上述 HTML 對(duì)應(yīng)的 DOM 節(jié)點(diǎn)樹(shù)如下圖所示：

image.png

每個(gè)元素都是一個(gè)節(jié)點(diǎn)皮获。每段文字也是一個(gè)節(jié)點(diǎn)焙蚓。甚至注釋也都是節(jié)點(diǎn)。一個(gè)節(jié)點(diǎn)就是頁(yè)面的一個(gè)部分洒宝。就像家譜樹(shù)一樣购公，每個(gè)節(jié)點(diǎn)都可以有孩子節(jié)點(diǎn) (也就是說(shuō)每個(gè)部分可以包含其它的一些部分)。

三雁歌、 標(biāo)簽及其屬性詳解

先下面從一下幾個(gè)部分對(duì)標(biāo)簽分別進(jìn)行介紹

  • 結(jié)構(gòu)標(biāo)簽

  • 頭部標(biāo)簽

  • 功能標(biāo)簽

    • 文本文字

    • 超鏈接

    • 多媒體 (html5 中新增)

    • 表單

1. 結(jié)構(gòu)標(biāo)簽

在前面第 1.3 小節(jié) HTML 文檔總體結(jié)構(gòu) 中宏浩，已經(jīng)介紹了總體結(jié)構(gòu)標(biāo)簽，這里就不再贅述靠瞎。

在這里注意是說(shuō)一下 HTML5 中心增的結(jié)構(gòu)標(biāo)簽比庄，就是有語(yǔ)義化的標(biāo)簽。

也可以是說(shuō)是一看到標(biāo)簽名稱乏盐，就知道是啥意思佳窑。

結(jié)構(gòu)化標(biāo)簽

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 讓 html5 的語(yǔ)義化標(biāo)簽在 IE8 及其一下版本的支持 -->
  <!--[if lte IE 8]>
      <script src="./html5shiv.js"></script>
  <![endif]-->
</head>
<body>
 <header>
   <div>Logo</div>
   <nav>
     <a href="index.html">首頁(yè)</a>
     <a href="#">發(fā)現(xiàn)</a>
     <a href="#">關(guān)注</a>
     <a href="#">消息</a>
     <a href="#">個(gè)人中心</a>
   </nav>
 </header>
 
 <section>
   <article>
    <h3>標(biāo)題黨1</h3>
    <p>The article element represents a complete, or self-contained,
      composition in a document, page, application, or site and that is,
       in principle, independently distributable or reusable, e.g.
       in syndication. This could be a forum post,
       a magazine or newspaper article, a blog entry,
       a user-submitted comment, an interactive widget or gadget,
       or any other independent item of content.
       Each article should be identified, typically by including
        a heading (h1–h6 element) as a child of the article element.
    </p>
   </article>
 </section>
 <section>
    <article>
        <h3>標(biāo)題黨2</h3>
        <p>The article element represents a complete, or self-contained,
          composition in a document, page, application, or site and that is,
           in principle, independently distributable or reusable, e.g.
           in syndication. This could be a forum post,
           a magazine or newspaper article, a blog entry,
           a user-submitted comment, an interactive widget or gadget,
           or any other independent item of content.
           Each article should be identified, typically by including
            a heading (h1–h6 element) as a child of the article element.
        </p>
       </article>
 </section>
 <section>
    <article>
        <h3>標(biāo)題黨3</h3>
        <p>The article element represents a complete, or self-contained,
          composition in a document, page, application, or site and that is,
           in principle, independently distributable or reusable, e.g.
           in syndication. This could be a forum post,
           a magazine or newspaper article, a blog entry,
           a user-submitted comment, an interactive widget or gadget,
           or any other independent item of content.
           Each article should be identified, typically by including
            a heading (h1–h6 element) as a child of the article element.
        </p>
       </article>
 </section>
 <footer>表示底部，一般放置版權(quán)信息等</footer>
</body>
</html>

2. 頭部標(biāo)簽及其屬性

就是在 <head></head> 標(biāo)簽中定義的標(biāo)簽父能。

網(wǎng)頁(yè)標(biāo)題圖標(biāo) shark.ico

源數(shù)據(jù) meta 

<!--設(shè)置整個(gè)頁(yè)面的字符集編碼-->
<meta charset="UTF-8">

<!--主要是針對(duì)移動(dòng)設(shè)備而進(jìn)行優(yōu)化顯示效果的, 后面會(huì)有更詳細(xì)的解釋-->
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>


<!--設(shè)置用最新的 IE 引擎去渲染HTML,這是為了兼容IE瀏覽器-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!--設(shè)置頭部圖標(biāo)-->
<link rel="shortcut icon"  sizes="16x16"/>
       
<!--刷新,下面是定義每30秒刷新一次這個(gè)頁(yè)面-->
<meta http-equiv="Refresh" Content="30"/>
      
<!-- 禁用瀏覽器緩存 -->
<meta http-equiv="pragma" content="no-cache"/>
      
<!--設(shè)置頁(yè)面在打開(kāi)幾秒后跳轉(zhuǎn)到目標(biāo)URL-->
<!--<meta http-equiv="Refresh" Content="5; URL=http://www.qfedu.com"/>-->
     
<!--設(shè)置關(guān)鍵字神凑，用于在搜索引擎上通過(guò)這些關(guān)鍵字進(jìn)行搜索時(shí)，能夠搜索到這個(gè)網(wǎng)址-->
<meta name="keywords" content="鯊魚,千鋒，云計(jì)算溉委，python鹃唯， 運(yùn)維開(kāi)發(fā)， Vue"/>
      
<!--設(shè)置網(wǎng)址的描述性信息-->
<meta name="description" content="網(wǎng)站的簡(jiǎn)單介紹信息瓣喊，描述了網(wǎng)站的主要功能坡慌、業(yè)務(wù)范圍，等信息"/>

3. 功能標(biāo)簽

a. 盒子標(biāo)簽 div

首先它是一個(gè)塊級(jí)元素的標(biāo)簽藻三。

div 標(biāo)簽通常作為一個(gè)盒子或者說(shuō)容器洪橘，可以把其他的標(biāo)簽放在里面，在 html5 之前通常用于網(wǎng)頁(yè)的布局趴酣。

  <div class="header">網(wǎng)頁(yè)頭部</div>
  <div class="conntet">網(wǎng)頁(yè)內(nèi)容</div>
  <div class="footer">網(wǎng)頁(yè)底部</div>

現(xiàn)在大部分情況下只是作為一個(gè)盒子容器梨树，存放其他功能標(biāo)簽。

 <div>
   姓名<input type="text">
  </div>
 <div>
   年齡<input type="text">
 </div>
 <div>
   地址<input type="text">
 </div>

b. 文本文字

h1 到 h6 塊元素岖寞，主動(dòng)封閉抡四，用于書寫標(biāo)題內(nèi)容， 字體有大變小仗谆。

h5 中新增了 hgroup 標(biāo)簽指巡，假如網(wǎng)頁(yè)上出現(xiàn)了連續(xù)的 h 標(biāo)簽，可以把這些標(biāo)題標(biāo)簽放到 hgroup 中隶垮。

<hgroup>
    <h1>標(biāo)題一</h1>
    <h2>標(biāo)題二</h2>
<hgroup>

p 表示文章中的一個(gè)段落, 塊級(jí)元素

<p>段落內(nèi)容一</p>
<p>段落內(nèi)容二</p>

span

    <span>
      我也是比較純潔的標(biāo)簽藻雪，沒(méi)有太多的限制，比較有利于進(jìn)行CSS的修飾狸吞，同時(shí)我是內(nèi)聯(lián)標(biāo)簽 
    </span>
    <span>我是不會(huì)換行的勉耀，同時(shí)我是內(nèi)聯(lián)標(biāo)簽</span>

換行標(biāo)簽：
可以在內(nèi)聯(lián)標(biāo)簽中或者在一個(gè)塊標(biāo)簽內(nèi)換行

其實(shí)幾乎所有的成對(duì)兒出現(xiàn)的標(biāo)簽內(nèi)都可以寫文字內(nèi)容。

c.多媒體

示例圖片

妹子meizi.jpg

  • img 圖片
    <img src="https://upload-images.jianshu.io/upload_images/11414906-c60bbc1ca98d9924.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
         alt="小姐姐跑了"
         title="犀利的眼神"/>
  • src 　　 圖片文件的本地絕對(duì)或者相對(duì)路徑蹋偏，通常情況下都是一個(gè) url 地址便斥；
  • alt 　　假如圖片不能顯示，則顯示這里的文字,跳轉(zhuǎn)功能不受影響威始；
  • title 　當(dāng)鼠標(biāo)放在這個(gè)圖片上時(shí)枢纠，會(huì)出現(xiàn)的內(nèi)容
  • audio 音頻播放， h5 新增
  <audio src="music/隔壁老樊 - 多想在平庸的生活擁抱你.flac"  controls loop>無(wú)法播放黎棠，瀏覽器不支持</audio>
<br/>
<audio src="https://vipkshttps0.wiz.cn/ks/attachment/download/9d341970-76bb-11e9-8499-f9054e49814b/3dad2926-67e8-4cac-9131-4a0db35dda35/0a863399-01c6-4b0d-b63d-e040e7e44a10?clientType=web&clientVersion=3.0.0&apiVersion=10&lang=zh-cn"
           controls
          loop></audio>

上面示例中的視頻容量稍大晋渺，根據(jù)網(wǎng)速，需要等待幾分鐘

  • src 指定文件地址或 url
  • controls 顯示播放控件
  • loop 循環(huán)播放
  • video 視頻播放脓斩， h5 新增
    <div>
        <video src="video/我曾.mp4"
          width="800" height="680"
          loop
          autoplay
          muted
          controls="controls">
          對(duì)不起木西！ 您的瀏覽器不支持，請(qǐng)升級(jí)
        </video>
    </div>
  • autoplay 是自動(dòng)播放随静，谷歌瀏覽器不支持
  解決辦法同時(shí)加上 `muted` 屬性户魏，但是默認(rèn)是靜音狀態(tài)

d. 超鏈接

a 標(biāo)簽，同時(shí)它是一個(gè)內(nèi)聯(lián)標(biāo)簽

可以設(shè)置跳轉(zhuǎn),就是在頁(yè)面上點(diǎn)擊它挪挤，會(huì)跳轉(zhuǎn)到目標(biāo)頁(yè)面（稱為重定向）
或者同頁(yè)面的另一個(gè)標(biāo)簽處（稱為錨）

   <a  target="_blank">新標(biāo)簽打開(kāi)百度</a>
  
<!--錨,可以跳到同一個(gè)頁(yè)面的其他標(biāo)簽的位置叼丑，需要指定 id-->
   <a href="#p100">跳到 id 為 p100 的標(biāo)簽位置</a>
   
<!--設(shè)置點(diǎn)擊一個(gè)圖片進(jìn)行跳轉(zhuǎn)-->
<p>點(diǎn)擊下方圖片進(jìn)行跳轉(zhuǎn)</p>
<a >
     <img src="https://upload-images.jianshu.io/upload_images/11414906-c60bbc1ca98d9924.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
         alt="色即是空"
         title="犀利的眼神"/>
</a>
  • href 指定跳轉(zhuǎn)到地址
  • targe ="_blank" 是在一個(gè)新的標(biāo)簽頁(yè)面打開(kāi)跳轉(zhuǎn)到目標(biāo)頁(yè)面, 默認(rèn)是在當(dāng)前頁(yè)面跳轉(zhuǎn)。

e. 表單和表單中的元素

重點(diǎn)講解

form 用于向后臺(tái)服務(wù)端提交數(shù)據(jù)扛门，比如注冊(cè)時(shí)候的注冊(cè)信息等鸠信。塊級(jí)元素，使用頻率較高论寨，重點(diǎn)掌握星立。

 <form action="http://192.168.56.128/index/"
       method="POST"
       enctype="multipart/form-data">
  姓名： <input type="text" >
 </form>

  • action 把 input 標(biāo)簽的數(shù)據(jù)提交到哪兒，通常是一個(gè) url

  • method 把 input 標(biāo)簽的數(shù)據(jù)提交的方法：

    • GET 方法, 把提交的內(nèi)容放到請(qǐng)求的 url 地址后面葬凳， 數(shù)據(jù)被封裝在請(qǐng)求頭中绰垂，后臺(tái)接收到的數(shù)據(jù)內(nèi)會(huì)是一個(gè)字典的形式
    • POST 方法,把提交的數(shù)據(jù)放到請(qǐng)求體中，后臺(tái)接收到的數(shù)據(jù)也是一個(gè)字典的形式

  • enctype="mutipart/form-data" 是提交文件或圖片專用的屬性

form 標(biāo)簽中通常會(huì)有如下標(biāo)簽火焰，用于獲取用戶輸入的信息劲装。

  • input 輸入普通文本，內(nèi)聯(lián)元素

input 用于設(shè)置提交表單數(shù)據(jù)昌简，用于前端用戶和后臺(tái)交互占业，這個(gè)標(biāo)簽也是內(nèi)聯(lián)標(biāo)簽。很重要纯赎，必須掌握谦疾。

    <form action="http://www.qfedu.com" method="GET">
        <input type="text" name="user_name" placeholder="輸入用戶名" required /><br/>
        <input type="submit"/>
    </form>
  • type 定義輸入內(nèi)容的類型
    • text 是普通的文本輸入框
    • password 密碼輸入框，輸入的內(nèi)容在輸入框中看到的是小圓點(diǎn)
    • submit 提交按鈕
  • name 定義一個(gè) key
  • value 可以定義一個(gè)默認(rèn)值值
    最終后臺(tái)接收到的數(shù)據(jù)應(yīng)該是這種形式:
    {"user_name": "shark"}
  • input 提交文件

上傳文件/圖片犬金，一定要在form標(biāo)簽開(kāi)頭出設(shè)置屬性:enctype="multipart/form-data"

<div>
    <input name="submit_file" type="file"/>
</div>
  • input 單選框

實(shí)現(xiàn)方式把 type 屬性的值設(shè)置為 radio 念恍，并把 name 屬性的值設(shè)置為相同，就可以實(shí)現(xiàn)互斥晚顷，這種情況下只能選一個(gè)峰伙。

單選框
        <div>
            性別：<input type="radio" name="gender" value="1"checked="checked"/>男
            <input type="radio" name="gender" value="2" />女 <br>
        </div>
  • checked="checked" 設(shè)定選中。
  • value 的值會(huì)被提交到后臺(tái)服務(wù)器音同，比如上例選擇了 男 , 后臺(tái)收到的數(shù)據(jù)會(huì)是： {"gender": "1"}
  • input 實(shí)現(xiàn)多選框,
多選框
        <div>
            <input type="checkbox" name="cls_name" value="11" checked="checked"/>千鋒云計(jì)算好程序員
            <input type="checkbox" name="cls_name" value="12"/>千鋒云計(jì)算就業(yè)班
            <input type="checkbox" name="cls_name" value="13" checked="checked"/>千鋒網(wǎng)絡(luò)安全班
        </div>
  • select 下拉框
image.png
<div>
    <!--單選-->
    選擇你所在的城市：<br/>
    <select name="city">
        <option value="bj">北京</option>
        <!--selected 設(shè)定默認(rèn)值,不設(shè)定默認(rèn)是在代碼中第一個(gè)出現(xiàn)的-->
        <option value="sh" selected="default">上海</option>
        <option value="zz">鄭州</option>
    </select><br>
    <!--多選-->
    城市词爬，按住ctrl鍵可多選：<br/>
    <select name="multi_city" multiple>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="zz" selected="selected">鄭州</option>
    </select>
</div>
  • textarea 提交多行文本

頁(yè)面上顯示一個(gè)邊框，里面的有默認(rèn)的內(nèi)容权均，鼠標(biāo)拉動(dòng)邊框的邊緣顿膨，可以改變其大小

<div>
    <textarea name="submit_text">默認(rèn)內(nèi)容</textarea>
</div>
  • input 關(guān)于提交到類型
<input type="submit" value="Submit提交"/>
<input type="button" value="Button提交"/>
<input type="reset" value="重置"/>
  • submit 點(diǎn)擊后會(huì)把 form 便簽中的所有以上提到的數(shù)據(jù)提交到后臺(tái)。
  • button 點(diǎn)擊后不會(huì)通過(guò) form 提交到后臺(tái)叽赊，通常會(huì)綁定一個(gè) javascript 事件恋沃。

HTML5 中也新增了 input 標(biāo)簽的屬性(自修)

    姓名: <input type="text" name="name" id="" required="true"/> <br/><br/> 

    郵箱: <input type="email" name="user_email" /> <br/><br/>

    網(wǎng)址: <input type="url" name="url" /> <br/><br/>

    日期: <input type="datetime-local" name="date_local" /> <br/><br/>

    時(shí)間: <input type="time" name="t" id="input-time"> <br/><br/>

    數(shù)字: <input type="number" name="nub" min="2" max="10"/> <br/><br/>

    搜索: <input type="search" name="s" id="input-search"> <br/><br/>

f. 列表

ul 和 ol 用于在頁(yè)面中呈現(xiàn)出一個(gè)列表，塊級(jí)元素必指。

    <h3>以 點(diǎn) 標(biāo)識(shí)的菜單</h3>
        <ul>
            <li>菜單一</li>
            <li>菜單二</li>
        </ul>

    <h3>有序列表 </h3>
        <ol>
            <li>菜單一</li>
            <li>菜單二</li>
        </ol>
        <ol>
            <li>菜單一</li>
            <li>菜單二</li>
        </ol>

h. 表格

table 用于呈現(xiàn)一個(gè)表格囊咏，塊級(jí)標(biāo)簽，使用頻率較高，重點(diǎn)掌握梅割。

 <h3>表格</h3>
   
    <!--border="1" 表格最外邊的邊框線,粗細(xì)是 1 (基本是最小的了霜第，只接受整數(shù))-->
    <table border="1">
        <!-- thead table head的縮寫，表頭的意思-->
        <thead>
            <tr>
                <th>序號(hào)</th>
                <th>主機(jī)名</th>
                <th>端口號(hào)</th>
            </tr>
        </thead>
        <!--tbody 表的主體-->
        <tbody>
            <!--第一行-->
            <tr>
                <td>1</td>
                <td>host1.com</td>
                <td>80</td>
            </tr>
            <!--第二行-->
            <tr>
                <td>2</td>
                <td>host2.com</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

j. label + input 觸發(fā)獲取焦點(diǎn)

當(dāng)在頁(yè)面上用鼠標(biāo)點(diǎn)擊 lanbel標(biāo)簽定義的內(nèi)容時(shí)（這里是：用戶名）户辞，輸入框就會(huì)被自動(dòng)選中

<label for="inputUser">用戶名</label>
<input id="inputUser" type="text"/>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末泌类，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子底燎，更是在濱河造成了極大的恐慌刃榨，老刑警劉巖双仍，帶你破解...
    沈念sama閱讀 218,546評(píng)論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件枢希，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡朱沃，警方通過(guò)查閱死者的電腦和手機(jī)苞轿，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)为流，“玉大人呕屎，你說(shuō)我怎么就攤上這事【床欤” “怎么了秀睛？”我有些...
    開(kāi)封第一講書人閱讀 164,911評(píng)論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)莲祸。 經(jīng)常有香客問(wèn)我蹂安，道長(zhǎng)，這世上最難降的妖魔是什么锐帜？ 我笑而不...
    開(kāi)封第一講書人閱讀 58,737評(píng)論 1贊 294
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任田盈，我火速辦了婚禮，結(jié)果婚禮上缴阎，老公的妹妹穿的比我還像新娘允瞧。我一直安慰自己，他們只是感情好蛮拔，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布述暂。 她就那樣靜靜地躺著，像睡著了一般建炫。 火紅的嫁衣襯著肌膚如雪畦韭。 梳的紋絲不亂的頭發(fā)上，一...
    開(kāi)封第一講書人閱讀 51,598評(píng)論 1贊 305
  • 城市分裂傳說(shuō)
    那天肛跌，我揣著相機(jī)與錄音艺配，去河邊找鬼察郁。 笑死，一個(gè)胖子當(dāng)著我的面吹牛转唉，可吹牛的內(nèi)容都是我干的皮钠。 我是一名探鬼主播，決...
    沈念sama閱讀 40,338評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼酝掩，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼鳞芙！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起期虾，我...
    開(kāi)封第一講書人閱讀 39,249評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎驯嘱，沒(méi)想到半個(gè)月后镶苞，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,696評(píng)論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡鞠评，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年茂蚓，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片剃幌。...
    茶點(diǎn)故事閱讀 40,013評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡聋涨，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出负乡，到底是詐尸還是另有隱情牍白，我是刑警寧澤，帶...
    沈念sama閱讀 35,731評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布抖棘，位于F島的核電站，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏寥掐。R本人自食惡果不足惜蛔六，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評(píng)論 3贊 330
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望朝捆。 院中可真熱鬧般渡，春花似錦、人聲如沸芙盘。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,929評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)何陆。三九已至晨汹，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間贷盲，已是汗流浹背淘这。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,048評(píng)論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工剥扣， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人铝穷。 一個(gè)月前我還...
    沈念sama閱讀 48,203評(píng)論 3贊 370
  • 代替公主和親
    正文 我出身青樓钠怯，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親曙聂。 傳聞我的和親對(duì)象是個(gè)殘疾皇子晦炊，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評(píng)論 2贊 355