HTML5-CSS學(xué)習(xí)筆記（2）HTML表單標(biāo)簽

單

1 ：表單標(biāo)簽

<form></form>
屬性：
action='接口地址'
method='get / post'
name='表單名稱'

2 ：表單控件

<input>
屬性：
type='控件類型'
name：屬性標(biāo)識(shí)表單域的名稱；
Value：屬性定義表單域的默認(rèn)值，其他屬性根據(jù)type的不同而有所變化。
maxlength：控制最多輸入的字符數(shù)，
Size：控制框的寬度（以字符為單位）
1）文本框
<input type="text" value="默認(rèn)值"/>
2)密碼框
<input type="password" />
3)提交按鈕
<input type="submit" value="按鈕內(nèi)容" />
4)重置按鈕
<input type="reset" value="按鈕內(nèi)容" />
5)空按鈕
<input type="button" value="按鈕內(nèi)容" />

3：表單補(bǔ)充

1）單選按鈕組
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral”
checked=“checked”/>(默認(rèn)選中)女
2）復(fù)選框組
<input type="checkbox" name="" />
<input type="checkbox" name="" disabled="disabled" />
* disabled="disabled" (禁用)
* checked="checked" (默認(rèn)選中)
3）下拉列表（菜單）：
<select >
<option>下拉選項(xiàng)1</option>
<option>下拉選項(xiàng)2</option>
…………
</select>
表示下拉列表，name屬性不是必須的
默認(rèn)選擇項(xiàng)用selected屬性；
4）表單域多行文本定義：
語法: <textarea name="" cols="" rows="" ></textarea>
多行文本。rows屬性和cols屬性用來設(shè)置文本輸入窗口的高度和寬度，單位是字符。
阻止瀏覽器對(duì)窗口的拖動(dòng)設(shè)置:{resize:none;}（css屬性）
5)上傳文件：
語法：<input type="file">

4：表單標(biāo)簽補(bǔ)充

1）表單字段集
語法：<fieldset></fieldset>

說明：相當(dāng)于一個(gè)方框，在字段集中可以包含文本和其他元素。該元素用于對(duì)表單中的元素進(jìn)行分組并在文檔中區(qū)別標(biāo)出文本。fieldset元素可以嵌套，在其內(nèi)部可以在設(shè)置多個(gè)fieldset對(duì)象。disabled定義空間禁制可用；
?
2）字段級(jí)標(biāo)題：
語法：<legend align="left/center/right/justify"></legend>
說明：legend元素可以在fieldset對(duì)象繪制的方框內(nèi)插入一個(gè)標(biāo)題。legend元素必須是fieldset內(nèi)的唯一個(gè)元素。
3)提示信息標(biāo)簽：
語法：<label for="綁定控件id名"></label>
?
說明：label元素用來定義標(biāo)簽，為頁面上的其他元素指定提示信息。要將label元素綁定到其他的控件上，可以將label元素的for屬性設(shè)置為與該控件的id屬性值相同。

拓展：post/get

(1). 從功能上講，GET一般用來從服務(wù)器上獲取資源，POST一般用來更新服務(wù)器上的資源；
(2). 從REST服務(wù)角度上說，GET是冪等的，即讀取同一個(gè)資源，總是得到相同的數(shù)據(jù)，而POST不是冪等的，因?yàn)槊看握?qǐng)求對(duì)資源的改變并不是相同的；進(jìn)一步地，GET不會(huì)改變服務(wù)器上的資源，而POST會(huì)對(duì)服務(wù)器資源進(jìn)行改變；
(3). 從請(qǐng)求參數(shù)形式上看，GET請(qǐng)求的數(shù)據(jù)會(huì)附在URL之后，即將請(qǐng)求數(shù)據(jù)放置在HTTP報(bào)文的請(qǐng)求頭中，以?分割URL和傳輸數(shù)據(jù)，參數(shù)之間以&相連。特別地，如果數(shù)據(jù)是英文字母/數(shù)字，原樣發(fā)送；否則，會(huì)將其編碼為 application/x-www-form-urlencoded MIME 字符串(如果是空格，轉(zhuǎn)換為+，如果是中文/其他字符，則直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX為該符號(hào)以16進(jìn)制表示的ASCII)；而POST請(qǐng)求會(huì)把提交的數(shù)據(jù)則放置在是HTTP請(qǐng)求報(bào)文的請(qǐng)求體中。
(4). 就安全性而言，POST的安全性要比GET的安全性高，因?yàn)镚ET請(qǐng)求提交的數(shù)據(jù)將明文出現(xiàn)在URL上，而且POST請(qǐng)求參數(shù)則被包裝到請(qǐng)求體中，相對(duì)更安全。
(5). 從請(qǐng)求的大小看，GET請(qǐng)求的長(zhǎng)度受限于瀏覽器或服務(wù)器對(duì)URL長(zhǎng)度的限制，允許發(fā)送的數(shù)據(jù)量比較小，而POST請(qǐng)求則是沒有大小限制的。

轉(zhuǎn)自：知乎Eric

.注釋標(biāo)記()

語法：

2.文件標(biāo)記(<html>…</html>)

語法： <html>…</html>

說明：<html>這對(duì)標(biāo)記是HTML文件的標(biāo)記。<html>處于文件的最前面，表示HTML文件的開始。即瀏覽器從<html>標(biāo)記開始解釋，直到遇到</html>標(biāo)記為止。

3.文件頭標(biāo)記(<head>…</head>)

語法： <head>…</head>

說明：

①由head這組標(biāo)記定義的元素中，并不放置網(wǎng)頁的任何內(nèi)容，是放置關(guān)于這份HTML文件的信息。就是說，它并不屬于HTML文件的主體，它包含文件的標(biāo)題、編碼方式和URL等。這些信息大部分用于提供索引、辨認(rèn)或其他應(yīng)用。

②這對(duì)標(biāo)記在HTML文件中并不是必需的。如果某個(gè)HTML文件并不需要提供相關(guān)信息，則可省略<head>標(biāo)記。

4.文件標(biāo)題標(biāo)記(<title>…</title>)

語法： <title>文件標(biāo)題文字</title>

說明：此標(biāo)記用于設(shè)定HTML文件的標(biāo)題名稱，它將顯示在瀏覽器的標(biāo)題欄中。

注意：<title>標(biāo)記用于<head>標(biāo)記中。但如果HTML文件中沒有使用<head>標(biāo)記，則<title>標(biāo)記仍然起作用。

5.文件主體標(biāo)記(<body>…</body>)

語法： <body>…</body>

說明：

①由<body>標(biāo)記所建立的元素是HTML文件的內(nèi)容主體，也是HTML文件的重點(diǎn)所在。HTML文件中要顯示在網(wǎng)頁上的所有內(nèi)容，也都放置在這個(gè)元素中。

②<body>具有一些特殊的屬性，可以設(shè)定背景及字符顏色等。

入我的主頁，查看更多HTML的分享！

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

1. 頁面布局：

<aside>定義頁面內(nèi)容之外的內(nèi)容</aside>
<footer>定義文檔或節(jié)的頁腳</footer>
<header>定義文檔或節(jié)的頁眉</header>
<main>定義文檔的主內(nèi)容</main>
<nav>定義文檔內(nèi)的導(dǎo)航鏈接</nav>
<!-- 示例： -->
<header>我是導(dǎo)航欄</header>
<nav>我是導(dǎo)航欄</nav>
<aside>我是側(cè)邊欄</aside>
<main>我是內(nèi)容</main>
<footer>我是頁腳</footer>

2. details、summary（折疊）

可配合CSS實(shí)現(xiàn)漂亮的折疊面板。

<details>定義用戶可查看或隱藏的額外細(xì)節(jié)</details>
<summary>定義 <details> 元素的可見標(biāo)題</summary>
<!-- 示例： -->
<details>
  <summary>HTML 5</summary>
  這是展開后看到的內(nèi)容
</details>

3. 進(jìn)度條（progress）

可以實(shí)現(xiàn)行業(yè)占比顯示、任務(wù)進(jìn)度、動(dòng)態(tài)進(jìn)度條等。

<progress>定義任務(wù)進(jìn)度</progress>
<!-- 示例： -->
<style>
progress {
    -webkit-appearance: none;
    width: 180px;
    height: 18px;
    background-color: transparent;
}
progress::-webkit-progress-bar {
    border-radius: 4px;
    background-color: #efefef;
    border: thin solid #efefef;
}
progress::-webkit-progress-value {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: teal;
}
progress::-moz-progress-bar {
    background: #34538b;
}
progress::-ms-fill {
    background: #34538b;
}
</style>
<progress value="40" max="100"></progress>

4. dialog（彈窗）

close() 關(guān)閉
open() 打開（注意css樣式的定位不變）
showModal() 打開（注意css樣式的定位變?yōu)閍bsolute，建議自定義樣式）

<dialog>定義對(duì)話框或窗口</dialog>
<!-- 
  示例：
  與form配合，這時(shí)點(diǎn)擊兩個(gè)按鈕都會(huì)自動(dòng)關(guān)閉
  不與form配合，可手動(dòng)調(diào)用close()關(guān)閉，從而避免自動(dòng)關(guān)閉
-->
<style>
  dialog:not([open]) {
    display: none;
  }
  dialog{}
  dialog::backdrop{}
</style>
<dialog id="dialog">
  <form method="dialog">
    <p>
      要關(guān)閉？
    </p>
    <button type="submit" value="false">取消</button>
    <button type="submit" value="true">確定</button>
  </form>
</dialog>
<script>
  let d=document.getElementById("dialog");
  let s=d.showModal();
  d.addEventListener("close", function() {
    console.log(d.returnValue); //returnValue對(duì)應(yīng)button上的value
  });
</script>

5. figcaption（包含的容器）

<figcaption>定義 <figure> 元素的標(biāo)題</figcaption>
<figure>定義自包含內(nèi)容，比如圖示、圖表、照片、代碼清單等等</figure>
<!-- 示例： -->
<figure>
  <img src="" alt="" width="200" height="200" />
  <figcaption>我是圖片的描述內(nèi)容</figcaption>
</figure>

6. mark（標(biāo)記）

<mark>定義重要或強(qiáng)調(diào)的內(nèi)容</mark>
/*示例：*/
<style>
  mark {
    background-color: red;
    padding: 0 4px;
    margin: 0 4px;
    border-radius: 3px;
    font-size: 15px;
    color: #fff;
  }
</style>
<p>今天加班了，下班時(shí)記得<mark>打卡</mark></p>

7. meter

IE 瀏覽器不支持 meter 標(biāo)簽。

<meter>定義已知范圍（尺度）內(nèi)的標(biāo)量測(cè)量</meter>
<!-- 示例： -->
<meter value="0.6"></meter> 
<meter value="6" min="0" low="5" max="10"></meter>

8. article、sectionarticle：定義來自外部（引用）的論壇帖子、報(bào)紙文章、博客條目、用戶評(píng)論等，通常包含標(biāo)題、頁腳等標(biāo)簽，對(duì)比<section>更具體。

<article>定義頁面內(nèi)的文章</article>
<section>定義文檔中的節(jié)</section>
<!-- 示例： -->
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9（簡(jiǎn)稱 IE9）于 2011 年 3 月 14 日發(fā)布.....</p>
</article>
<section>
<h1>WWF</h1>
  <p>
    The World Wide Fund for Nature (WWF) is an international organization working on 
    issues regarding the conservation, research and restoration of the environment, 
    formerly named the World Wildlife Fund. WWF was founded in 1961.
  </p>
</section>

9. 其它

/* 僅Firefox 8.0 以及更高的版本支持 */
<menuitem>定義用戶能夠從彈出菜單調(diào)用的命令/菜單項(xiàng)目</menuitem>

二、文本標(biāo)簽

1. h-（標(biāo)題）

<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h4>四級(jí)標(biāo)題</h4>
<h5>五級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>

2. bdo（方向）

<bdo dir="rtl">定義相反的的文本方向</bdo></p>

3. ruby、rp、rt（注釋）

<rp>定義在不支持 ruby 注釋的瀏覽器中顯示什么</rp>
<rt>定義關(guān)于字符的解釋/發(fā)音（用于東亞字體）</rt>
<ruby>定義 ruby 注釋（用于東亞字體）</ruby>
<!-- 示例： -->
<ruby> 漢 <rp>(</rp><rt>Han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp> </ruby>

4. time


<time>定義日期/時(shí)間</time>
<!-- 示例： -->
<article>
<time datetime="2011-09-28" pubdate="pubdate"></time>
Hello world. This is an article....
</article>

5. wbr（單詞換行時(shí)機(jī)）

IE不支持。

<wbr>定義可能的折行（line-break）</wbr>

6. abbr、acronym （縮寫）

IE 6 或更早版本的 IE 瀏覽器不支持 <abbr> 標(biāo)簽

<abbr title=""></abbr>
<acronym title=""></acronym>

7. del（刪除線）

<del>位于中間的刪除線</del>

三、表單

1. fieldset（帶標(biāo)題的邊框）

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    體重：<input type="text" />
  </fieldset>
</form>

2. output（存放輸出內(nèi)容）

Internet Explorer 8 以及更早的版本不支持 <output> 標(biāo)簽。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">=<output name="x" for="a b"></output>
</form>

四、媒體

1. video（視頻）

controls="controls"，控制面板
autoplay="autoplay"，自動(dòng)播放
width、height 寬高
loop="loop" 無限循環(huán)，loop="1"只循環(huán)播放1次
muted="muted" 靜音
poster="" 預(yù)覽圖（包括下載的文件）
preload 預(yù)加載，與autoplay沖突（只使用其中一個(gè)）

<video src="">
您的瀏覽器不支持 video 標(biāo)簽。
</video>

2. audio（音頻）

controls="controls"，控制面板
autoplay="autoplay"，自動(dòng)播放
loop="loop" 無限循環(huán)，loop="1"只循環(huán)播放1次
muted="muted" 靜音
preload 預(yù)加載，與autoplay沖突（只使用其中一個(gè)）

<audio src="">
您的瀏覽器不支持 audio 標(biāo)簽。
</audio>

3. source（源文件）

Internet Explorer 8 以及更早的版本不支持 <source> 標(biāo)簽。

<video controls>
   <source src="" type="video/mp4">
   <source src="" type="video/ogg">
 Your browser does not support the audio element.
</video>

五、文檔

MDN(https://developer.mozilla.org/zh-CN/docs/Web/HTML)

W3Cschool(https://www.w3cschool.cn/html5)

菜鳥教程(https://www.runoob.com/html/html5-intro.html)

還會(huì)完善一些常用的元素，比如input；如果有補(bǔ)充內(nèi)容，請(qǐng)?jiān)谠u(píng)論區(qū)留言。

在線咨詢

上一篇：JavaScript命名規(guī)范很重要
下一篇：零基礎(chǔ)學(xué)會(huì)表格技巧標(biāo)題合并居中常用技巧三秒解決數(shù)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商