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

單

1 ：表單標簽

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

2 ：表單控件

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

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屬性用來設置文本輸入窗口的高度和寬度，單位是字符。
阻止瀏覽器對窗口的拖動設置:{resize:none;}（css屬性）
5)上傳文件：
語法：<input type="file">

4：表單標簽補充

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

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

拓展：post/get

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

轉自：知乎Eric

.注釋標記()

語法：

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

語法： <html>…</html>

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

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

語法： <head>…</head>

說明：

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

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

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

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

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

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

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

語法： <body>…</body>

說明：

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

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

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

一. 結構標簽

1. 頁面布局：

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

2. details、summary（折疊）

可配合CSS實現漂亮的折疊面板。

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

3. 進度條（progress）

可以實現行業占比顯示、任務進度、動態進度條等。

<progress>定義任務進度</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() 關閉
open() 打開（注意css樣式的定位不變）
showModal() 打開（注意css樣式的定位變為absolute，建議自定義樣式）

<dialog>定義對話框或窗口</dialog>
<!-- 
  示例：
  與form配合，這時點擊兩個按鈕都會自動關閉
  不與form配合，可手動調用close()關閉，從而避免自動關閉
-->
<style>
  dialog:not([open]) {
    display: none;
  }
  dialog{}
  dialog::backdrop{}
</style>
<dialog id="dialog">
  <form method="dialog">
    <p>
      要關閉？
    </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對應button上的value
  });
</script>

5. figcaption（包含的容器）

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

6. mark（標記）

<mark>定義重要或強調的內容</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>定義已知范圍（尺度）內的標量測量</meter>
<!-- 示例： -->
<meter value="0.6"></meter> 
<meter value="6" min="0" low="5" max="10"></meter>

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

<article>定義頁面內的文章</article>
<section>定義文檔中的節</section>
<!-- 示例： -->
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9（簡稱 IE9）于 2011 年 3 月 14 日發布.....</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>定義用戶能夠從彈出菜單調用的命令/菜單項目</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>定義關于字符的解釋/發音（用于東亞字體）</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（存放輸出內容）

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

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

2. audio（音頻）

controls="controls"，控制面板
autoplay="autoplay"，自動播放
loop="loop" 無限循環，loop="1"只循環播放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；如果有補充內容，請在評論區留言。

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商