網(wǎng)頁設(shè)計(jì)中，你放內(nèi)容的地方和你放內(nèi)容的方式一樣重要。位置可以影響用戶體驗(yàn)的各個(gè)方面，在web前端培訓(xùn)中，您將了解CSS位置屬性以及它如何與HTML頁面上的元素一起工作。

CSS位置屬性是做什么的？

CSS位置屬性幫助您定義要在HTML頁面上獲取的元素的位置。CSS位置屬性有六個(gè)值，您可以分配給它來確定定義的位置。了解這些值之間的差異可以讓你知道在哪里和何時(shí)使用它們。

CSS位置：靜態(tài)值

這是CSS位置屬性的默認(rèn)值。在這種模式下，目標(biāo)元素與自然文檔流一起定位。請(qǐng)注意，頂部、右側(cè)、底部、左側(cè)以及Z索引屬性不會(huì)顯示任何效果。

CSS位置：相對(duì)值

該位置值與靜態(tài)值非常相同，但是，該值允許上述方向?qū)傩詫?duì)目標(biāo)元素的位置產(chǎn)生影響。方向?qū)傩詫⒃貜钠湓谖臋n中相對(duì)于其自身屬性（例如左側(cè)或底部）的自然位置移動(dòng)。偏移量不影響任何其他元素的位置。想要對(duì)CSS有更多的了解，建議參加web前端培訓(xùn)，可以有更全面的認(rèn)識(shí)和理解。

CSS位置：固定值

使用此位置值，目標(biāo)元素將不包括在自然文檔流中。這意味著文件不會(huì)像通常那樣為布局中的元素固有地創(chuàng)造空間。這些元素相對(duì)于文檔或初始包含塊放置，除非其中一個(gè)祖先將轉(zhuǎn)換、透視或篩選器屬性設(shè)置為非任何對(duì)象（請(qǐng)參閱CSS轉(zhuǎn)換規(guī)范），在這種情況下，祖先充當(dāng)包含塊。值得注意的是，滾動(dòng)不會(huì)影響具有此CSS位置值的元素。一個(gè)固定的元素不會(huì)在頁面上留下它通常所在的位置的空白。

CSS位置：絕對(duì)值

與固定值一樣，具有絕對(duì)值的元素將從自然文檔流中刪除，并且在頁面布局中不會(huì)為元素創(chuàng)建空間。元素將根據(jù)最近放置的祖先元素進(jìn)行定位。如果該選項(xiàng)不可用，則元素將使用文檔主體并隨頁面滾動(dòng)一起移動(dòng)。Web前端培訓(xùn)有很多關(guān)于CSS的課程，感興趣的同學(xué)可以報(bào)名學(xué)習(xí)一下，有專業(yè)講師面授指導(dǎo)教學(xué)，相信會(huì)更容易快速掌握這些知識(shí)。

CSS位置：粘性值

使用粘性值，目標(biāo)元素從HTML文檔的自然流接收其位置。位置的改變是從最近的滾動(dòng)祖先元素及其包含塊中進(jìn)行的。從某種意義上說，這個(gè)值在達(dá)到“粘滯”點(diǎn)之前與“相對(duì)”相同，偏移量不會(huì)影響任何其他元素的位置。你可以把它看作是相對(duì)值和固定值的混合體。

理解Z索引屬性

Z索引屬性處理重疊或可能重疊的元素的位置，這取決于頁面的布局，這個(gè)位置處理元素相互堆疊的方式，它有助于保持對(duì)要顯示的元素的可見焦點(diǎn)。用一個(gè)較大的Z索引覆蓋那些用較小的Z索引覆蓋的重疊元素。

把頁面上的元素想象成一張卡片。你把其中四個(gè)放下來，但要確保王牌總是在最上面顯示什么。Z索引屬性可以更改堆棧順序。

每個(gè)元素都有一個(gè)位置值。請(qǐng)記住，默認(rèn)值設(shè)置為靜態(tài)。任何具有其位置值更改為靜態(tài)以外的任何元素都將顯示設(shè)置為靜態(tài)的元素。Z索引僅適用于已定位的元素（位置：絕對(duì)，位置：相對(duì)，位置：固定，位置：粘滯）和彎曲元素（顯示的直接子元素：彎曲元素）。否則，所有元素都會(huì)出現(xiàn)在頁面上，好像它們的位置值設(shè)置為靜態(tài)；因此，與Z指數(shù)無關(guān)。

盡管CSS提供了所有的工具，但有時(shí)很難掌握您控制的內(nèi)容。想要更熟練地使用CSS技能，不妨去web前端培訓(xùn)去學(xué)習(xí)，那里有更加系統(tǒng)規(guī)范的課程，讓你獲得全面提升。

能改進(jìn)和DOM節(jié)點(diǎn)的附加屬性的類型檢查使新的Vue值得更新。Vue團(tuán)隊(duì)確實(shí)做了很多工作。實(shí)際上，他們?cè)谕惶彀l(fā)布了兩個(gè)子版本。Vue 3.3.5 和 3.3.6 都在2023年10月20日發(fā)布。

免費(fèi)體驗(yàn) Gpt4 plus 與 AI作圖神器，我們出的錢 體驗(yàn)地址：體驗(yàn)

WeakMaps

其中一個(gè)得到改進(jìn)的是在可能的情況下從 Maps 和 Sets 轉(zhuǎn)移到WeakMaps 和WeakSets。

那是什么，為什么這么重要？

如果你在 Maps或 Sets 中存儲(chǔ)東西，你會(huì)對(duì)這些東西做一個(gè)引用。這意味著，只要Map或Set被使用，這個(gè)東西就不會(huì)被垃圾收集器從內(nèi)存中釋放。

通常這是有意義的。但有時(shí)候不是。特別是當(dāng)你寫一些代碼，只是深入到數(shù)據(jù)的正常工作流中。例如，通過在系統(tǒng)中流動(dòng)的數(shù)據(jù)中添加診斷數(shù)據(jù)。

當(dāng)你需要時(shí)，你希望數(shù)據(jù)被釋放，你不希望保留保留數(shù)據(jù)的權(quán)利。

這就是 WeakMaps 和 WeakSets 開始發(fā)揮作用的地方，Vue現(xiàn)在在內(nèi)部更多地使用這些來防止內(nèi)存泄漏并提高整體性能。

對(duì) contenteditable="plaintext-only" 的支持

我認(rèn)為 contenteditable可以是true或false。但顯然，有第三個(gè)值 "plaintext-only"。

通常，當(dāng)你將參數(shù)設(shè)置為true時(shí)，你也可以編輯格式，粘貼富文本。使用plaintext-only值則不行。

現(xiàn)在的變化是，Vue不會(huì)為HTML規(guī)范中定義的合法值拋出 Typescript 錯(cuò)誤。

延遲加載圖像

再次，這只是對(duì)HTML特性的類型支持。它在3.3.5中被添加，并使你能夠?qū)mg的加載參數(shù)設(shè)置為lazy。

這樣，圖像不會(huì)立即加載，而是當(dāng)你的瀏覽器決定你很快就能看到它時(shí)加載。

這是一個(gè)標(biāo)準(zhǔn)的HTML特性，已經(jīng)存在了一段時(shí)間，但這個(gè)修復(fù)是一個(gè)很好的提醒，用它來提高應(yīng)用程序的性能。

此版本中還有其他的錯(cuò)誤修復(fù)和性能改進(jìn)。

Vue 3.2.40的新功能

Vue的最新版本，受歡迎的Web框架于2022年9月28日發(fā)布，為開發(fā)者提供了修復(fù)的錯(cuò)誤，為3.3版本做準(zhǔn)備。

錯(cuò)誤地禁用按鈕

上面的代碼說明了按鈕不應(yīng)該被禁用，因?yàn)椤癴alse”在屬性中實(shí)際上是一個(gè)字符串，而不是一個(gè)布爾值。在Vue的最新版本中，它通過檢查屬性的類型來修復(fù)。

V-on不會(huì)拋出錯(cuò)誤

上面的代碼和類似的最近拋出了錯(cuò)誤，而它們本應(yīng)該正常工作，它也被修復(fù)了。

事件被正確地觸發(fā)

上述代碼并沒有導(dǎo)致 onBlur被調(diào)用，而它應(yīng)該被調(diào)用。動(dòng)態(tài)和靜態(tài)v-on的合并導(dǎo)致這個(gè)bug消失。

修復(fù)了一個(gè)內(nèi)存泄漏

在上述情況下，在dev場(chǎng)景中內(nèi)存沒有被正確清理。它是由于提升的 vnodes不正確地保留了DOM節(jié)點(diǎn)引起的。現(xiàn)在也修復(fù)了。

這些是最有趣的修復(fù)，在其他一些與SSR有關(guān)的問題也被修復(fù)了，團(tuán)隊(duì)正在大力工作。

Vue 3.2.41-45 的3個(gè)最有趣的錯(cuò)誤修復(fù)

Vue團(tuán)隊(duì)上個(gè)月并沒有休息。剛剛介紹了Vue 3.2.40，現(xiàn)在已經(jīng)有了五個(gè)新的小版本。下面將帶你了解最重要的錯(cuò)誤修復(fù)。

Vue對(duì)奇怪的單文件組件(SFC)拋出錯(cuò)誤

傳遞給單文件組件解析器的代碼沒有 <template>，也沒有<script>。這是有效的HTML代碼，但很有可能傳遞這樣的代碼表示傳遞了錯(cuò)誤的變量。現(xiàn)在，如果組件不包含<template>或<script>標(biāo)簽，解析器將拋出錯(cuò)誤。

import { parse } from '@vue/compiler-sfc';

const result=parse(`
import a from 'vue'
`);
console.log(result.errors); // []

剝離HTML注釋不會(huì)導(dǎo)致空白被移除

通常，HTML 對(duì)于空白是寬容的。除非它不是，并且布局中斷。不幸的是，這種情況發(fā)生了，其中一個(gè)HTML注釋（如下所示）被剝離，而沒有被替換為空格。這發(fā)生在字符串插值附近。現(xiàn)在已經(jīng)修復(fù)了。

<template>
    <div class="foo">
        <h1>Message:</h1>
        <!-- A comment explaining the interpolation below -->
        {{ msg }}
    </div>
</template>

可以在CSS中使用內(nèi)聯(lián)注釋

以前，在內(nèi)聯(lián)CSS中添加注釋會(huì)導(dǎo)致下面的CSS規(guī)則停止工作。現(xiàn)在，你可以不受問題地使用注釋。

<div
    style="
      /* something */
      width: 300px;
      height: 300px;
      background-color: pink;
    "
  ></div>

Vue.js 3.3：優(yōu)秀的DX和10倍速度的構(gòu)建

Vue 推出了 3.3 成為了頭條新聞。我們都知道，Vue實(shí)際上是構(gòu)建web應(yīng)用程序的一種非常快速和高效的方式。它能變得更好嗎？

看起來可以。新版本放寬了 props 和 emits 類型的規(guī)則，使Typescript開發(fā)者高興。現(xiàn)在，定義 emits 也更容易，不需要樣板文件。為props提供默認(rèn)值現(xiàn)在也很簡(jiǎn)單。

新的 defineModel 使得定義雙向綁定更容易。

使用 defineSlots，我們可以為 slots 定義類型，這是一個(gè)有用的工具，可以很好地記錄代碼，并且易于使用。

使用 defineSlots，我們可以為slots定義類型，這是一個(gè)有用的工具，可以很好地記錄代碼，并且易于使用。

我們還可以享受通用組件。

Vue再次顯示它關(guān)心DX，并且能夠快速并直接地構(gòu)建應(yīng)用程序，而不需要很多線束。

它也關(guān)心性能。現(xiàn)在從 rollup構(gòu)建中分離類型檢查，ESBuild rolloup依賴都組合到根據(jù)發(fā)布說明的10倍更快的構(gòu)建時(shí)間。

Jest被Vitest替換，意味著現(xiàn)在編寫和執(zhí)行測(cè)試將更容易，更快。

更改類型生成器也有助于更精細(xì)地提高性能。

總的來說，這是一個(gè)很好的版本，涉及到每個(gè)人都應(yīng)該關(guān)心的兩個(gè)主要問題：簡(jiǎn)化使用和提高性能。

Vue團(tuán)隊(duì)每次發(fā)布都顯示出它是一個(gè)生產(chǎn)項(xiàng)目的有價(jià)值的框架。它彌補(bǔ)了輕巧、快速、但功能強(qiáng)大和強(qiáng)類型庫之間的差距。

憑借像真正的自動(dòng)導(dǎo)入和快速設(shè)置這樣的強(qiáng)大工具生態(tài)系統(tǒng)，它是現(xiàn)代web應(yīng)用程序的絕佳選擇。

作者：王大冶
原文鏈接：https://juejin.cn/post/7293804880706240550

用html標(biāo)簽使用介紹

本文主要記錄常用的html標(biāo)簽使用說明，用起來的時(shí)候偶爾查查。

常用html標(biāo)簽列表

常用標(biāo)簽使用說明

• 常用寫法：??<img src="" alt="" title=""width="" height=""??>
• src：圖片的來源（必寫屬性）
• alt：圖像不顯示時(shí)的替代文本
• title：鼠標(biāo)在移動(dòng)到元素上的文本提示
• width/height：圖片寬高，沒有定義寬高的時(shí)候，圖片按照百分之百比例顯示，更改圖片的寬度或者高度，圖片等比例縮放

普通用法

• 常用寫法：??<a href="" title="" target="">填寫內(nèi)容</a>??
• href：去往的路徑（必寫屬性）
• title：鼠標(biāo)在移動(dòng)到元素上的文本提示
• target：規(guī)定在何處打開路徑

• _blank：新頁面打開
• _parent：在父窗口中打開鏈接
• _self：當(dāng)前頁面跳轉(zhuǎn)（默認(rèn)值）
• _top：在當(dāng)前窗體打開鏈接，并替換當(dāng)前的整個(gè)窗體

• 當(dāng)href的值為javascript：void(0); 或 javascript：; ，表示超鏈接不做任何事情，不做任何跳轉(zhuǎn)
• 當(dāng)href的值為#，表示超鏈接為空鏈接，點(diǎn)擊此鏈接時(shí)會(huì)跳轉(zhuǎn)到頁首的位置

錨點(diǎn)鏈接

錨點(diǎn)鏈接通過點(diǎn)擊超鏈接，自動(dòng)跳轉(zhuǎn)到我們?cè)O(shè)置錨點(diǎn)的位置，類似于word的目錄導(dǎo)航。建立錨點(diǎn)的元素必須要有id或name屬性，最好兩個(gè)都有。這里只跳轉(zhuǎn)本頁面元素，其他頁面跳轉(zhuǎn)自行搜索。
具體做法如下：

1. 給目標(biāo)元素設(shè)置id值，如??<p id="id1"></p>??
2. 設(shè)置錨點(diǎn)超鏈接，錨點(diǎn)的超鏈接路徑一定包含"#"，后面緊跟元素的id或者name，如??<a href="#id1"></a>??

示例如下。為了顯示效果，通過使用lorem自動(dòng)生成隨機(jī)文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復(fù)lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超鏈接全局設(shè)置

在頁面head中寫入代碼可以設(shè)置超鏈接的全局跳轉(zhuǎn)設(shè)置

<head>
  <!-- 讓頁面所有的超鏈接新頁面打開 -->
  <base target="_blank">  
</head>

charset編碼

• 常用寫法： ??<meta charset="UTF-8">??
• charset：定義文檔的字符編碼

• ASCII/ANSI/Unicode：英語
• GBK：亞洲通用字符集
• GB2312：中文簡(jiǎn)體
• Big5：臺(tái)澳港繁體
• UTF-8：世界通用字符集

name

1. 關(guān)鍵字

• 常用寫法： ??<meta name="keywords" content="">??
• 描述：告訴搜索引擎網(wǎng)頁的關(guān)鍵字，盡量將重要的關(guān)鍵詞放在前面

2. 網(wǎng)頁描述

• 常用寫法： ??<meta name="keywords" content="">??
• 描述：告訴搜索引擎網(wǎng)頁的主要內(nèi)容

3. 作者

• 常用寫法： ??<meta name="author" content="">??
• 描述：告訴搜索引擎網(wǎng)頁的作者

4. 文件檢索

• 常用寫法： ??<meta name="robots" content="all | none | index | noindex | follow | nofollow">??
• 描述：有時(shí)候會(huì)有一些站點(diǎn)內(nèi)容，不希望被ROBOTS抓取而公開。為了解決這個(gè)問題，ROBOTS開發(fā)界提供了兩個(gè)辦法：一個(gè)是robots.txt，另一個(gè)是The Robots META標(biāo)簽。
• content: 文件檢索方式

• all：文件將被檢索，且頁面上的鏈接可以被查詢 （默認(rèn)值）
• none：文件將不被檢索，且頁面上的鏈接不可以被查詢
• index：文件將被檢索；
• noindex：文件將不被檢索，但頁面上的鏈接可以被查詢
• follow：頁面上的鏈接可以被查詢
• nofollow：文件將不被檢索，頁面上的鏈接可以被查詢

網(wǎng)頁自動(dòng)跳轉(zhuǎn)

• 常用寫法： ??<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />??
• 描述：網(wǎng)頁5秒后自動(dòng)跳轉(zhuǎn)到谷歌主頁
• url：為空則刷新本頁
• 常用寫法：
• 描述：規(guī)定當(dāng)前文檔與被鏈接文檔/資源之間的關(guān)系
• rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系。rel 是 relationship的英文縮寫（必寫屬性）
• type：規(guī)定被鏈接文檔的類型
• href：鏈接的文件路徑
• 示例：

• 鏈接外部樣式表：??<link rel="stylesheet" type="text/css" href="a.css">??
• 設(shè)置網(wǎng)頁icon圖標(biāo)：??<link rel="icon" href="a.ico">??

列表

無序列表

無序列表使用粗體圓點(diǎn)進(jìn)行標(biāo)記。簡(jiǎn)單示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用數(shù)字進(jìn)行標(biāo)記，我們可以通過整數(shù)值start指定列表編號(hào)的起始值。簡(jiǎn)單示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通過描述列表自定義列表，列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡(jiǎn)單示例如下。

<dl>
        <dt>A</dt> <!-- 小標(biāo)題 -->
            <dd>A1</dd> <!-- 解釋標(biāo)題 -->
            <dd>A2</dd> <!-- 解釋標(biāo)題 -->
        <dt>B</dt> <!-- 小標(biāo)題 -->
            <dd>B1</dd> <!-- 解釋標(biāo)題 -->
            <dd>B2</dd> <!-- 解釋標(biāo)題 -->
    </dl>

表格

基礎(chǔ)表格

• 常用寫法：??<table width="" height="" border="" cellspacing="" cellpadding=""></table>??
• width：表格寬度
• height：表格高度
• border：邊框?qū)挾?/li>
• cellspacing：?jiǎn)卧耖g距
• cellpadding：內(nèi)容與邊框間距

簡(jiǎn)單示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標(biāo)題</caption> <!-- 定義表格標(biāo)題 -->

<tr>
    <!-- 定義表格的行 -->
    <td>A1</td> <!-- 定義表格該行第一列中的數(shù)據(jù) -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定義表格的行 -->
    <th>A</th> <!-- 定義表格每一列的標(biāo)題 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

單元格合并

• 常用寫法：??<td colspan=“” rowspan=“”></td>??
• 描述：告訴表格該單元格可以橫跨colspan列，縱跨rowspan行

簡(jiǎn)單示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標(biāo)題</strong></caption> <!-- 定義表格標(biāo)題 -->
<tr height="100">
    <!-- 定義表格的行 -->
    <td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

對(duì)于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。

文本輸入框

• 常用寫法：??<input type="text" name="" maxlength="" readonly="" disabled="" value="">??
• type：規(guī)定輸入字段的類型
• name：輸入框的名字
• maxlength：輸入文本長(zhǎng)度
• readonly：輸入框是否只讀
• disabled：輸入框是否未激活
• value：輸入框默認(rèn)值

簡(jiǎn)單示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">

密碼輸入框

• 常用寫法：??<input type="password" name="">??
• type：規(guī)定輸入字段的類型
• name：輸入框的名字
• 密碼輸入框的其他參數(shù)和文本輸入框一樣

簡(jiǎn)單示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">

單選框

• 常用寫法：??<input type="radio" name="" checked="checked">??
• type：規(guī)定輸入字段的類型
• name：輸入框的名字
• checked：設(shè)定該輸入框被預(yù)先選定
• 想要多個(gè)單選框只能有一個(gè)被選中，設(shè)置所有單選框的name值相同即可實(shí)現(xiàn)

示例一，兩個(gè)單選框都可以被選中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，兩個(gè)單選框只能有一個(gè)被選中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

??<select>??

• 常用寫法：??<select multiple=""></select>??
• multiple：當(dāng)該屬性為true時(shí)，可選擇多個(gè)選項(xiàng)。

??<optgroup>??

• 常用寫法：??<optgroup label=""></optgroup>??
• label：設(shè)定選項(xiàng)組的描述。

??<option>??

• 常用寫法：??<option value="" selected="">選項(xiàng)值</option>??
• value：定義送往服務(wù)器的選項(xiàng)值。
• selected：當(dāng)該屬性為true時(shí)，該選項(xiàng)被默認(rèn)選擇。

示例一，單選下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默認(rèn)選中 -->
  </select>

示例二，帶組合的單選下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，帶組合的多選下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多選框

• 常用寫法：??<input type="checkbox" checked="">??
• type：規(guī)定輸入字段的類型
• checked：設(shè)定該輸入框被預(yù)先選定

簡(jiǎn)單示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

• 常用寫法：??<textarea cols="" rows="" placeholder=""></textarea>??
• cols：控制可見文本的列數(shù)
• rows：控制可見文本的行數(shù)
• placeholder：提示字符

簡(jiǎn)單示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上傳控件

• 常用寫法：??<input type="file" accept=""/>??
• accept：規(guī)定提交的文件的類型

簡(jiǎn)單示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他類型按鈕

<input type="submit">文件提交按鈕
  <input type="button" value="">普通按鈕
  <input type="image" src="">圖片按鈕
  <input type="reset">重置按鈕
  <input type="url">網(wǎng)址控件
  <input type="date">日期控件 
  <input type="time">時(shí)間控件
  <!--email提供了郵箱的完整驗(yàn)證，必須包含@和后綴，如果不滿足驗(yàn)證，會(huì)阻止表單提交-->
  <input type="email">郵件控件
  <input type="number" step="3">數(shù)字控件
  <input type="range" step="100">滑塊控件
  <input type="color">顏色控件

表單

示例一，普通表單

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，帶分組信息表單

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

與

??<progress>???與??<meter>??主要區(qū)別和用法見??HTML5 progress和meter控件??

??<progress>??

• 常用寫法：??<progress value="" max=""></progress>??
• value：規(guī)定進(jìn)程的當(dāng)前值
• max：規(guī)定需要完成的值

簡(jiǎn)單示例如下。

<progress value="60" max="100"></progress>

??<meter>??

• 常用寫法：??<meter min="" low="" high="" max="" value="" optimum=""></meter>??
• value：規(guī)定度量的當(dāng)前值
• max：規(guī)定被界定為高的值的范圍
• min：規(guī)定被界定為低的值的范圍
• low：規(guī)定被界定為低的值的范圍
• high：規(guī)定被界定為高的值的范圍
• optimum：規(guī)定度量的最優(yōu)值
• 具體使用見meter標(biāo)簽改變顏色規(guī)則

簡(jiǎn)單示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒體資源

??<audio>??

• 常用寫法：??<audio src="" controls autoplay loop></audio>??
• src：規(guī)定音頻文件的url
• controls：如果出現(xiàn)該屬性，顯示音頻播放器的控制面板（比如播放/暫停按鈕）
• autoplay：如果出現(xiàn)該屬性，自動(dòng)播放音頻
• loop：如果出現(xiàn)該屬性，循環(huán)播放音頻

簡(jiǎn)單示例如下

<audio src="demo.mp3" controls autoplay></audio>

??<video>??

• 常用寫法：??<video src="" width="" height="" poster="" controls autoplay loop></video>??
• src：規(guī)定視頻文件的url
• width：設(shè)置視頻播放器的寬度（pixels）
• height：設(shè)置視頻播放器的高度（pixels）
• poster：設(shè)置視頻未播放時(shí)展示的畫面
• controls：如果出現(xiàn)該屬性，顯示音頻播放器的控制面板（比如播放/暫停按鈕）
• autoplay：如果出現(xiàn)該屬性，自動(dòng)播放音頻
• loop：如果出現(xiàn)該屬性，循環(huán)播放音頻

簡(jiǎn)單示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

??<source>??

• 常用寫法：??<source src="" type="">??
• src：規(guī)定媒體文件的url
• type：規(guī)定媒體文件的類型
• 因?yàn)椴煌瑸g覽器支持的媒體格式不同，當(dāng)添加媒體文件時(shí)，需要考慮瀏覽器是否支持它們。我們可以準(zhǔn)備多種不同格式的媒體文件，然后使用source 標(biāo)簽，讓瀏覽器從上到下選擇支持的媒體格式

簡(jiǎn)單示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的瀏覽器不支持video元素。
  </video>

特殊字符

??HTML特殊字符編碼對(duì)照表??

參考

• ??HTML基礎(chǔ)??
• ??HTML 參考手冊(cè)??
• HTML中標(biāo)簽對(duì)應(yīng)的英文
• meter標(biāo)簽改變顏色規(guī)則
• HTML5 progress和meter控件