件引用規(guī)范

先說加載的規(guī)范，這個(gè)規(guī)范主要是為了提高頁面加載速度或者是首屏的速度。

1 CSS 文件或樣式在 head 標(biāo)簽中引用。頁面的渲染需要 CSS，所以盡量早的讓 CSS 文件加載出來。

2 JS 文件要放在 body 標(biāo)簽尾部。頁面里加載和運(yùn)行 JS 都會(huì)阻塞頁面的渲染過程，所以把 JS 放在尾部可以加快首屏顯示的速度，但對整個(gè)頁面完成加載的時(shí)間沒什么影響。

3 使用壓縮后的文件。線上使用的靜態(tài)文件，盡量都是壓縮好的，CSS 使用 .min.css 形式，JS 使用 .min.js 形式，這樣可以減少文件的體積，從而減少下載的時(shí)間。

4 減少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加載并解析后才會(huì)去請求, 會(huì)拖慢 CSS 文件的加載速度。

屬性的書寫規(guī)范

一、使用縮寫

在 CSS 中有很多屬性或?qū)傩灾悼梢钥s寫, 在能用縮寫的地方盡量使用縮寫。

1、屬性的縮寫。CSS 中有些屬性是可以合并的, 如:

margin-top: 10px;
margin-bottom: 0;
margin-left: 5px;
margin-right: 5px;

上面這幾組 margin 相關(guān)的屬性占了四條樣式, 我們可以使用一條 margin 屬性代替這四個(gè)方向的 margin：

margin: 10px 5px 0 5px;

一般帶有方向的屬性, 縮寫的時(shí)候各個(gè)方向的值都是按著"上 右 下 左"的順序?qū)懙摹Ａ硗馊绻膫€(gè)方向值一樣，可以直接用一個(gè)值代替四個(gè)方向；如果左右方向的值一樣，則可以省略最后一個(gè)左側(cè)的值。

上面這條縮寫也可以寫成：

margin: 10px 5px 0;

2、顏色的縮寫。在使用十六進(jìn)制顏色的時(shí)候, 如果 rgb 三個(gè)顏色位置中, 每兩位的顏色值相同, 可以把六位的顏色寫成三位。

如：color: #22ffcc;

就可以寫成：

color: #2fc;

這兩種寫法是等效的, 但要注意的是如果需要兼容低版本 IE 瀏覽器, 還是要用六位的顏色值。

3、數(shù)字的縮寫。在 CSS 中如果整數(shù)部分是 0 的小數(shù), 可以忽略小數(shù)點(diǎn)前面的 0; 如果屬性值是 0, 則可以忽略屬性值的單位。

如: font-size: 0.8rem; padding: 0px;

這兩條屬性就可以做簡寫：

font-size: .8rem; padding: 0;

二、屬性順序的規(guī)范

理論上, CSS 的屬性是一條一條解析執(zhí)行的。這種情況下, 就要把能確定大小和位置的屬性寫在前面, 把對布局沒什么影響的屬性寫在后面, 避免返工。

一般說的使用順序如下:

1. 位置屬性 (position, top, right, z-index, display, float等)　　

2. 大小 (width, height, padding, margin)　　

3. 文字系列 (font, line-height, letter-spacing, color- text-align等)　　

4. 背景 (background, border等) 5. 其他 (animation, transition等)

注釋規(guī)范

一 文件頭注釋

/*
* @Author: zhangsan
* @Date: 2023-04-18 20:09:21
* @Last Modified by: zhangsan
* @Last Modified time: 2023-05-05 10:21:21
*/

二 普通注釋

/* 頭部導(dǎo)航 */
.nav-top{
background: #ccc;
}

CSS-Reset

reamweaver的CSS面板分類

type(類型)

background(背景)

block(區(qū)塊)

box(方框) 或盒子意思

border(邊框)

list(列表)

positioning(定位)

extensions(擴(kuò)展)

共八個(gè)部分

1. type(類型)

type面板主要是對文字的字體，大小，顏色，效果等基本樣式進(jìn)行設(shè)置。

注意：屬性名帶*號(hào)的是指樣式效果不能在編輯文檔時(shí)顯示，要用瀏覽器打開才能看到效果。

(1)font-family：設(shè)置字體系列。什么叫字體系列呢?是指對文字設(shè)定幾個(gè)字體，當(dāng)遇到第一個(gè)字體不能顯示的文字時(shí)會(huì)自動(dòng)用系列中的第二個(gè)

字體或后面的字體顯示。

注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個(gè)系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，

也可以直接手動(dòng)在下拉框里寫字體名，字體之間用逗號(hào)隔開。中文網(wǎng)頁默認(rèn)字體是宋體, 一般就空著不要選取任何字體。

默認(rèn)值： not specified(取決于瀏覽器,系統(tǒng)默認(rèn)的字體, 如: 微軟雅黑)

注意：

1.如果有漢字, 那么我們要加引號(hào)

2.如果有多個(gè)英文字母組成的單詞, 我們也要加引號(hào); "microsoft yahei" 中間用空格隔開

3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...

為了避免在CSS中使用 font 或 font-family 設(shè)置中文字體時(shí)亂碼, 可以使用 Unicode 編碼來表示字體。

/* 示例:使用Unicode字體編碼設(shè)置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";

(2)font-size：定義文字的大小。你可以通過選取數(shù)字和度量單位來選擇具體的字體大小，或者你也可以選擇一個(gè)相對的字體大小。

最好使用pixels作為單位，這樣不會(huì)在瀏覽器中文本變形。一般字體用比較標(biāo)準(zhǔn)的12px或14px, 默認(rèn)值為16px。

注意：CSS中長度的單位分絕對長度單位和相對長度單位:

絕對長度單位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根據(jù)顯示的實(shí)際尺寸來確定長度。

此類單位不隨顯示器的分辨率改變而改變。

相對長度單位有：

px：(像素)根據(jù)顯示器的分辨率來確定長度。

em：當(dāng)前文本的尺寸。例如：{font-size:2em}是指文字大小為原來的2倍。

比如自身font-size: 30px; 那么此時(shí)1em=30px;

ex：當(dāng)前字母"x"的高度，一般為字體尺寸的一半。

%：是以當(dāng)前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。

small、large：表示比當(dāng)前小一個(gè)級(jí)別或大一個(gè)級(jí)別的尺寸。

默認(rèn)值：medium(標(biāo)準(zhǔn)大小)

(3)font-style：定義字體樣式為normal、italic、oblique。默認(rèn)設(shè)置為normal。

注意： italic 斜體 oblique 歪斜體 italic和oblique實(shí)際效果是一樣的。

默認(rèn)值:normal

(4)line-height：設(shè)置文本所在行的行高。默認(rèn)為normal。可以是行內(nèi)元素、行內(nèi)塊元素, 通常與height設(shè)置的高度值相同, 可以做到垂直居中的作用。

你也可以自己鍵入一個(gè)精確的數(shù)值并選取一個(gè)計(jì)量單位。

比較直觀的寫法用百分比, 例如140%是指行高等于文字大小的1.4倍。

最常用的方法: line-height:1.5em; /*行間距,相對數(shù)值,1.5倍行距,*/ 可有效的避免文字發(fā)生重疊

默認(rèn)值： normal

(5)text-decoration：在文本中添加underline(下劃線)、overline(上劃線)、line-through(中劃線)、blink(閃爍效果)。

這些效果可以同時(shí)存在，將效果前的復(fù)選框選定即可。

注意：鏈接的默認(rèn)設(shè)置是underline，我們可以通過選none去除下劃線。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持

默認(rèn)值： none

(6)font-weight：給字體指定粗體字的磅值。

normal 默認(rèn)值。定義標(biāo)準(zhǔn)的字符。

bold 定義粗體字符。

bolder 定義更粗的字符。

lighter 定義更細(xì)的字符。

100

200

300

400

500

600

700

800

900

inherit 規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。

定義由粗到細(xì)的字符。400 等同于 normal, 而 700 等同于 bold。

默認(rèn)值: normal

(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫字母)時(shí), 此樣式區(qū)域內(nèi)所有字母大寫。

normal表示正常的字體, 為默認(rèn)值；

默認(rèn)值: normal

(8)text-transform：將選區(qū)中每個(gè)單詞的第一個(gè)字母轉(zhuǎn)為大寫, 或者令單詞全部大寫或全部小寫。

參數(shù)：capitalize(單詞首字母大寫)、uppercase(轉(zhuǎn)換成大寫)、lowercase(轉(zhuǎn)換成小寫)、none(不轉(zhuǎn)換)。

默認(rèn)值：none

(9)color：定義文字顏色。包括對表單輸入的文字顏色。

CSS中顏色的值有三種表示方法：

#RRGGBB格式，是由紅綠藍(lán)三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進(jìn)制正整數(shù)。

例如：#FF0000表示紅色，#FFFF00表示黃色。

rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。

用顏色名稱。CSS可以使用已經(jīng)定義好的顏色名稱。例如：red表示紅色, yellow表示黃色。

顏色值的縮寫:

p{color:#000000} 可以縮寫為：p{color:#000}

p{color:#336699} 可以縮寫為：p{color:#369}

默認(rèn)值： not specified

color: transparent; 透明色

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1)

注意: 如果文字的顏色通過單獨(dú)的類選擇去設(shè)置沒有改變顏色, 則應(yīng)該通過組合選擇器(.header .top .topR .blue)去設(shè)置, 改變它的優(yōu)先級(jí)。

2. background(背景)

background面板主要是對元素的背景進(jìn)行設(shè)置，包括背景顏色、背景圖象、背景圖象的控制。

一般是對body(頁面)、table(表格)、div(區(qū)域)的設(shè)置。

(1)background-color：設(shè)置元素的背景色。包括對input表單輸入框的背景顏色;

默認(rèn)值: transparent(背景顏色為透明)

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1) 一般用于背景色

(2)background-image：設(shè)置元素的背景圖像。

默認(rèn)值:none

CSS3支持多重背景圖,只要加上一個(gè)url指定圖片路徑,并用逗號(hào)(,)將兩組url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

base64使用

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

(3)background-repeat：確定背景圖像是否以及如何重復(fù)。

repeat 默認(rèn)值。背景圖像將在垂直方向和水平方向重復(fù)。

repeat-x 背景圖像將在水平方向重復(fù)。

repeat-y 背景圖像將在垂直方向重復(fù)。

no-repeat 背景圖像將僅顯示一次。

inherit 規(guī)定應(yīng)該從父元素繼承background-repeat屬性的設(shè)置。

注意：如果定義的元素的body，可以控制頁面背景是否重復(fù)。

默認(rèn)值: repeat

(4)background-attachment：固定背景圖像或者跟隨內(nèi)容滾動(dòng)。

參數(shù)fixed表示固定背景(不隨屏幕滾動(dòng)而滾動(dòng)，決定背景圖像是否要固定在原來的位置), scroll表示跟隨內(nèi)容滾動(dòng)的背景。

注意：如果定義的元素的body, 可以使頁面背景固定。

默認(rèn)值: scroll

(5)background-position(X)：指定背景圖像的水平位置。

可以指定為left(左邊), center(居中)，right(右邊)；

也可以指定數(shù)值，如20px是指背景距離左邊20象素。

background-position(Y)：指定背景圖像的垂直位置。

可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數(shù)值。

background-position屬性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您僅規(guī)定了一個(gè)關(guān)鍵詞，那么第二個(gè)值將是"center"。

注意:采用英文單詞的水平位置和垂直位置的屬性值可以調(diào)換

x% y% 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是 50%。

xpos ypos 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。

如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是50%。

您可以混合使用 % 和 position 值。

默認(rèn)值：0% 0%

用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)到我們設(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：中文簡體
• 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)記。簡單示例如下。

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

有序列表

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

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

描述列表

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

<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：單元格間距
• cellpadding：內(nèi)容與邊框間距

簡單示例如下。

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

簡單示例如下。

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

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

文本輸入框

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

簡單示例如下。

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

密碼輸入框

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

簡單示例如下。

<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ù)先選定

簡單示例如下。

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

文本框

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

簡單示例如下。

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

文本上傳控件

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

簡單示例如下。

<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ī)定需要完成的值

簡單示例如下。

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

簡單示例如下

<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)播放音頻

簡單示例如下

<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)播放音頻

簡單示例如下

<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)簽，讓瀏覽器從上到下選擇支持的媒體格式

簡單示例如下

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

特殊字符

??HTML特殊字符編碼對照表??

參考

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