HTML5-CSS學習筆記（2）HTML表單標簽

單

1 ：表單標簽

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

2 ：表單控件

<input>
屬性：
type='控件類型'
name：屬性標識表單域的名稱；
Value：屬性定義表單域的默認值，其他屬性根據(jù)type的不同而有所變化。
maxlength：控制最多輸入的字符數(shù)，
Size：控制框的寬度（以字符為單位）
1）文本框
<input type="text" value="默認值"/>
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：表單補充

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

4：表單標簽補充

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

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

拓展：post/get

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

轉(zhuǎn)自：知乎Eric

.注釋標記()

語法：

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

語法： <html>…</html>

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

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

語法： <head>…</head>

說明：

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

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

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

語法： <title>文件標題文字</title>

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

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

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

語法： <body>…</body>

說明：

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

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

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

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

1. 頁面布局：

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

2. details、summary（折疊）

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

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

3. 進度條（progress）

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

<progress>定義任務(wù)進度</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>定義對話框或窗口</dialog>
<!-- 
  示例：
  與form配合，這時點擊兩個按鈕都會自動關(guān)閉
  不與form配合，可手動調(diào)用close()關(guān)閉，從而避免自動關(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對應(yīng)button上的value
  });
</script>

5. figcaption（包含的容器）

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

6. mark（標記）

<mark>定義重要或強調(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>今天加班了，下班時記得<mark>打卡</mark></p>

7. meter

IE 瀏覽器不支持 meter 標簽。

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

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

<article>定義頁面內(nèi)的文章</article>
<section>定義文檔中的節(jié)</section>
<!-- 示例： -->
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9（簡稱 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)用的命令/菜單項目</menuitem>

二、文本標簽

1. h-（標題）

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</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>定義日期/時間</time>
<!-- 示例： -->
<article>
<time datetime="2011-09-28" pubdate="pubdate"></time>
Hello world. This is an article....
</article>

5. wbr（單詞換行時機）

IE不支持。

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

6. abbr、acronym （縮寫）

IE 6 或更早版本的 IE 瀏覽器不支持 <abbr> 標簽

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

7. del（刪除線）

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

三、表單

1. fieldset（帶標題的邊框）

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

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

Internet Explorer 8 以及更早的版本不支持 <output> 標簽。

<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"，自動播放
width、height 寬高
loop="loop" 無限循環(huán)，loop="1"只循環(huán)播放1次
muted="muted" 靜音
poster="" 預覽圖（包括下載的文件）
preload 預加載，與autoplay沖突（只使用其中一個）

<video src="">
您的瀏覽器不支持 video 標簽。
</video>

2. audio（音頻）

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

<audio src="">
您的瀏覽器不支持 audio 標簽。
</audio>

3. source（源文件）

Internet Explorer 8 以及更早的版本不支持 <source> 標簽。

<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)

還會完善一些常用的元素，比如input；如果有補充內(nèi)容，請在評論區(qū)留言。

在線咨詢

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

您的項目需求

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

整合營銷服務(wù)商

HTML5-CSS學習筆記（2）HTML表單標簽

單

1 ： 表單標簽

2 ： 表單控件