記-------

You jump，i jump。

上次小編發(fā)完文章后，就有好多小伙伴問(wèn)我GIF圖是在哪里找的。哈哈哈，哪里是找的，是小編自己做的。真是有種車(chē)到山前必有路的感覺(jué)。本來(lái)想著寫(xiě)公號(hào)，寫(xiě)好代碼就ok啦，一旦真正處在這個(gè)環(huán)境才發(fā)現(xiàn)，有太多東西需要學(xué)習(xí)，包括今天給大家分享的工具---GifCam。

好啦，言歸正傳，今天的主題就是教會(huì)每個(gè)人制作高大上的GIF圖，不需要ps，不需要安裝復(fù)雜的軟件（明天就520啦，說(shuō)不定你還能用上奧）。接下來(lái)就follow me：

第一步：一個(gè)很小很小的文件GifCam.exe可執(zhí)行文件。沒(méi)有很復(fù)雜的安裝包，雙擊exe文件就可直接打開(kāi)。

第二步：接下來(lái)你就可以錄制你的GIF圖啦。首先你打開(kāi)你要錄制的視頻，然后把GIFcam窗口放到你視頻窗口（GIFcam的窗口大小是可調(diào)節(jié)的）。然后點(diǎn)擊錄制（Rec）就開(kāi)始啦，然后根據(jù)你錄制的時(shí)間長(zhǎng)短，點(diǎn)擊結(jié)束，再點(diǎn)擊保存，一張高清無(wú)碼的GIF圖就呈現(xiàn)在你面前啦。

當(dāng)然，這些都是很簡(jiǎn)單的操作。如果僅僅是這些功能，豈不是小看了小編。

大家可能也看到了，在GIFcam的右側(cè)，有四個(gè)功能條，第一個(gè)就是錄制的，里面的10 FPS（默認(rèn)設(shè)置，每幀圖片在屏幕上顯示0.1秒）16 FPS（每幀圖片在屏幕上顯示0.06，秒）33 FPS（每幀圖片在屏幕上顯示0.03秒）分別是這三個(gè)意思。所以大家要選擇好自己喜歡的幀率，還有一個(gè)就是捕捉光標(biāo)，就是可以再gif上顯示那個(gè)鼠標(biāo)的動(dòng)態(tài)。

第二種就是單幀方式，就是你沒(méi)點(diǎn)一次單幀按鈕，它就會(huì)錄制一張圖片，最后就把這些圖片合成，就成一個(gè)GIF

錄制好了還可以編輯那么這個(gè)編輯是怎么樣的呢，如果是編輯就可以在里面添加，幀數(shù)，或者減少幀數(shù)，還可以加入文本啊，或者剪載等等都可以，其中一些自己回去探索，注意編輯是從左往右來(lái)編輯的。這就是它的第三個(gè)功能

第四個(gè)功能，錄制完成后，那么我們就可以保存了，保存了又有幾個(gè)選項(xiàng)量化、仿色、灰度、256色等，他們分別是什么意思呢。量化，顏色保持的最好，圖片體積也最大，仿色的官方說(shuō)法是用算法減小圖片體積，256色圖片會(huì)有明顯的噪點(diǎn)，體積卻不一定比量化的小，還有自定義等功能，不過(guò)可以自己定義。還有一些小功能，用戶自己體驗(yàn)咯。

OK,基本的功能就是這些，小編為了這個(gè)素材，特意重溫了一遍《泰坦尼克號(hào)》，對(duì)啦，高潮部分在2小時(shí)18分45秒。

最后送上我之前做的一個(gè)HTML5特效，錄制成的表白GIF，只能幫你們到這啦，希望你們，你們明天成功。

你的支持和鼓勵(lì)，是我最大的動(dòng)力。如果感覺(jué)是干貨，歡迎收藏和分享。

言：萬(wàn)物之始，大道至簡(jiǎn)，演化至繁。水滴不染塵世浮華，方能純凈如冰川靈動(dòng)如絲絨。落紅不逐春日絢爛，方有一年春盡一年春。

一、html5的介紹

1.1介紹

html號(hào)稱(chēng)超文本標(biāo)記語(yǔ)言，代表著瀏覽器技術(shù)發(fā)展的一個(gè)階段。html版本1到版本5的更新迭代都是由組織W3C管理的。當(dāng)時(shí)到html4.1的時(shí)候，W3C組織就聲稱(chēng)不再更新版本了。而改用XHTML。但是由于瀏覽器的各種不兼容的問(wèn)題，于是乎W3C這個(gè)組織就和其他的瀏覽器產(chǎn)商一起聯(lián)合起來(lái)將這門(mén)語(yǔ)言再次更新到html5

比喻：

html5 >機(jī)器人的骨骼

css3 >機(jī)器人的外在修飾

js > 機(jī)器人的行為如行走、抬腿

Jquery > 封裝好的控制行為的庫(kù)，可以提高效率

1.2優(yōu)勢(shì)

• 易用性

• 支持視頻和音頻

• 互動(dòng)性高

• 支持移動(dòng)設(shè)備

• 未來(lái)的趨勢(shì)

1.3開(kāi)發(fā)工具

HBuild、WebStrom、sublime Text

二、代碼規(guī)范

2.1代碼規(guī)范

新建一個(gè)Web項(xiàng)目

相比html4來(lái)說(shuō)，html5的語(yǔ)法更加簡(jiǎn)潔并且在規(guī)定上也更加寬松。

• 單標(biāo)簽不用寫(xiě)關(guān)閉符號(hào)

• 雙標(biāo)簽省略結(jié)束標(biāo)簽

• html、head、body、colgroup、tbody可以完全省略

• 刪除其中一些，打開(kāi)瀏覽器的檢查元素功能，也不會(huì)報(bào)錯(cuò)

三、各類(lèi)標(biāo)簽

3.1文本標(biāo)簽

• b標(biāo)簽：表示關(guān)鍵字和產(chǎn)品名稱(chēng)。<b>html</b>其實(shí)它的實(shí)際作用就是將一段文字加粗。但是并不是特別強(qiáng)調(diào)它的重要性。比如說(shuō)：在一段文字當(dāng)中出現(xiàn)的某些關(guān)鍵字或者產(chǎn)品的名稱(chēng)就可以用b標(biāo)簽

• strong標(biāo)簽：表示比較重要的文字<strong>html</strong>它的作用也是加粗，只是它在強(qiáng)調(diào)一段比較重要的文本

• br單標(biāo)簽：換行

• wbr標(biāo)簽：安全換行you've no idea how worried <wbr> i was當(dāng)用戶對(duì)網(wǎng)頁(yè)進(jìn)行縮放的時(shí)候可能會(huì)有一些單詞被擠到下一行。如果不行某個(gè)單詞被分離的話，可以使用安全換行標(biāo)簽

• i標(biāo)簽：傾斜。em標(biāo)簽語(yǔ)義一樣，但em表示強(qiáng)調(diào)<i>傾斜標(biāo)簽</i>它用于表示外文詞匯或科技術(shù)語(yǔ)

• s標(biāo)簽：刪除線。del標(biāo)簽表示強(qiáng)調(diào)。<s>html</s>刪除線

• u標(biāo)簽：給文字加下劃線。ins標(biāo)簽表示強(qiáng)調(diào)<u>html</u>下劃線

• small標(biāo)簽：添加小號(hào)字體<small>放小一號(hào)</small>將文本放小一號(hào)。通常用于免責(zé)聲明和澄清聲明。

• sub和sup標(biāo)簽：添加上標(biāo)和下標(biāo)X₅和Y²（sub和sup長(zhǎng)差不多，這個(gè)要如何去記憶呢？大家可以看到b的肚子在下面，所以呢它是下標(biāo)，而p的頭部在上方，所以記錄是上標(biāo)。那這樣一來(lái)是不是就感覺(jué)清晰了許多呢）

• q標(biāo)簽：引用來(lái)自其它出處的內(nèi)容<q>有朋自遠(yuǎn)方來(lái)</q>

• ruby標(biāo)簽：語(yǔ)言元素。常用于幫助讀者正確發(fā)音。<ruby>夔<rp>（</rp><rt>kui</rt><rp>）</rp></ruby><rp><rt>用來(lái)幫助讀者掌握表意語(yǔ)言文字的正確發(fā)音。比如說(shuō)漢語(yǔ)拼音在文字的上方。

• bdo標(biāo)簽：設(shè)置文字方向<bdo dir="rtl">設(shè)置文字方向</bdo>dbo必須使用屬性dir才可以設(shè)置，一共兩個(gè)值：rtl從右到左和ltr從左到右。一般默認(rèn)是ltr。還有一個(gè)bdi元素也是處理方向的，由于是特殊語(yǔ)言的效果，并且主流瀏覽器有些不支持，所以可以忽略。

• mark標(biāo)簽：突出顯示文本<mark>突出顯示文本</mark>加上一個(gè)黃色的背景，黑色的字。從語(yǔ)義上來(lái)看，與上下文相關(guān)而突出的文本，用于記號(hào)。

• a標(biāo)簽：超鏈接a元素屬于文本元素，有一些私有屬性。

  href屬性 <a >百度</a> 這個(gè)屬性是必須的，否則a元素就變得毫無(wú)意義。它的屬性值意味著點(diǎn)擊跳轉(zhuǎn)到指定的外部網(wǎng)站去。

  target屬性<a target="_blank">百度</a> 這個(gè)屬性告訴瀏覽器希望打開(kāi)的新窗口顯示在哪里。_blank表示在新窗口中打開(kāi)文檔。_self表示在當(dāng)前窗口打開(kāi)文檔。默認(rèn)_self。(_parent和_top這些要結(jié)合框架來(lái)使用，但是基本上用得已經(jīng)很少了。)

  錨點(diǎn)設(shè)置：用于將同一個(gè)文檔中的另一個(gè)元素移入視野。說(shuō)通俗一點(diǎn)就是通過(guò)點(diǎn)擊這個(gè)錨點(diǎn)定位到頁(yè)面中的某個(gè)位置。

<a href="#1">第一節(jié)</a>

<a href="#2">第二節(jié)</a>

<a href="#3">第三節(jié)</a>

</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

<a name="1">第一節(jié)的內(nèi)容 我?應(yīng)該說(shuō)點(diǎn)啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

&hellip;&hellip;以上省略一萬(wàn)行&hellip;&hellip;

==========以下全都是分隔符============</br>

<a name="2">第二節(jié)的內(nèi)容 我?應(yīng)該說(shuō)點(diǎn)啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

3.2分組標(biāo)簽

顧名思義，分組元素就是用來(lái)組織相關(guān)內(nèi)容的html元素，對(duì)它們進(jìn)行清晰有效的分類(lèi)。

• p標(biāo)簽：表示段落<p>這是一個(gè)段落</p> <p>這是一個(gè)段落</p>p標(biāo)簽就是將內(nèi)部包含的文本形成一個(gè)段落。它們可以自動(dòng)換行，而且段落與段落之間保持一定量的空隙。

• div標(biāo)簽：通用分組<div>這是一個(gè)塊標(biāo)簽</div> <div>這是另一個(gè)塊標(biāo)簽</div>在早期的版本中經(jīng)常用到，用div將其他數(shù)據(jù)或標(biāo)簽包裹起來(lái)，進(jìn)而進(jìn)行布局。但是在html5中，漸漸被其他元素替代。（它與p標(biāo)簽的區(qū)別就是兩段文本間沒(méi)有空隙。空隙間隔和br標(biāo)簽換行一樣）

• blockquite標(biāo)簽：引用大段其他地方的內(nèi)容<blockquote>引用別人的內(nèi)容的輔導(dǎo)費(fèi)打發(fā)打發(fā)可以換行哦他也有首尾縮進(jìn)的效果</blockquote>有段落空隙的功能，還包含了首尾縮進(jìn)的功能。

• pre標(biāo)簽：按照原格式展示數(shù)據(jù)<pre> 我就是 長(zhǎng)這樣的 參差不齊 </pre>（有時(shí)候某些文字就想要按照原來(lái)的格式顯示出來(lái)就要用到pre標(biāo)簽。它就是將數(shù)據(jù)原封不動(dòng)的顯示出來(lái)）

• hr標(biāo)簽：?jiǎn)螛?biāo)簽。添加一條分割線。

• ul和li標(biāo)簽：添加無(wú)限列表

<ul>

<li>貂蟬</li>

<li>大喬</li>

<li>小喬</li>

<li>孫尚香</li>

</ul>

ul標(biāo)簽表示無(wú)序列表（就像咱們平時(shí)說(shuō)的無(wú)符號(hào)整形，在前面也是加了一個(gè)u），而li標(biāo)簽則表示內(nèi)部的列表項(xiàng)

• ol和li：表示有序列表

• start屬性：表示從第幾個(gè)序列開(kāi)始統(tǒng)計(jì)。<ol start="2">

• reversed屬性：是否倒序排列。<ol reversed>（不過(guò)這個(gè)屬性有很多的瀏覽器不支持，所以要謹(jǐn)慎使用）

• type屬性：表示列表的編號(hào)的類(lèi)型 <ol type="A">

• value屬性：這是屬于li的屬性。表示強(qiáng)行設(shè)置某個(gè)項(xiàng)目的編號(hào)。<li value="7">安琪拉</li>

• dl、dt、dd：列表標(biāo)簽

<dl>

<dt>第一份內(nèi)容</dt>

<dd>第一行詳細(xì)內(nèi)容</dd>

<dd>第二行詳細(xì)內(nèi)容</dd>

<dl>

雖然說(shuō)這三個(gè)標(biāo)簽是一個(gè)整體，但是dt和dd標(biāo)簽并非都必須出現(xiàn)

• figure和figcaption標(biāo)簽：使用插圖的意思。一般用于圖片的布局。

<figure>

<figcaption>這里有一張圖哦</figcaption>

<img src="img.png">

</figure>

3.3表格標(biāo)簽

表格的用途是以網(wǎng)格的形式顯示二維數(shù)據(jù)。開(kāi)發(fā)者可以對(duì)表格中的元素標(biāo)簽設(shè)置不同的屬性如邊框?qū)挾取㈩伾仁贡砀癯尸F(xiàn)出不同的效果。

3.3.1 標(biāo)簽

• table：表示表格標(biāo)簽

• tr：代表某一行

• td：代表一個(gè)單元格。

<table border="1" style="width:300px;">

<tr> <!--相當(dāng)于行-->

<td>王昭君</td> <!--相當(dāng)于每行中的每一列-->

<td>沉魚(yú)落雁</td>

<td>法師</td>

</tr>

<tr> <!--相當(dāng)于行-->

<td>貂蟬</td> <!--相當(dāng)于每行中的每一列-->

<td>羞花閉月</td>

<td>刺客</td>

</tr>

</table>

• th：代表標(biāo)題單元格。代表標(biāo)題，作用是將內(nèi)部文字居中且加粗。

<tr>

<th>姓名</th>

<th>特征</th>

<th>職業(yè)</th>

</tr>

• thead：代表表頭。（某些時(shí)候，網(wǎng)頁(yè)上的表頭是由js動(dòng)態(tài)生成的。有可能沒(méi)按照先后的順序排列，如此一來(lái)表頭就有可能顯示到第二行、第三行甚至是表尾。用thead將tr括起來(lái)可以讓數(shù)據(jù)永遠(yuǎn)顯示在第一行）

<thead>

<tr>

<th>姓名</th>

<th>特征</th>

<th>職業(yè)</th>

</tr>

• tfoot:表示表尾：與表頭相反

• tbody:表示表格的主體部分

• (這里非常建議用分主體、表頭、表尾的方式寫(xiě)。因?yàn)榈胶笃谑褂肅SS樣式的時(shí)候只要拿到某個(gè)標(biāo)簽就可以設(shè)置總體的樣式了，這樣就會(huì)非常方便)

• caption:添加表格的標(biāo)題

• colgroup:群組。用于設(shè)置列的屬性。默認(rèn)設(shè)置第一個(gè)（有的時(shí)候需要設(shè)置單獨(dú)列的屬性，如果說(shuō)我只想設(shè)置第二列的屬性，則需要把第一列的設(shè)置成白色）

<!--<table border="1" style="width:300px;">-->

<colgroup style="background:white;" span="1"></colgroup> <!--設(shè)置第一個(gè)顏色為白-->

<colgroup style="background:red;" span="1"></colgroup> <!--設(shè)置第二個(gè)顏色為紅 span代表一列-->

• col：群組的子標(biāo)簽。更加靈活的設(shè)置列屬性。通過(guò)占位符設(shè)置不需要的屬性。

<colgroup>

<col> <!--占位，表示第一列不設(shè)置-->

<col style="background: pink;">

</colgroup>

3.3.2屬性

• border:表示邊框的寬度 <table border="1"></table>

• style:通用屬性。在css中做詳解。

• colspan：合并列 <td colspan="3">統(tǒng)計(jì)</td>這句代碼表示共占三個(gè)單元格

• rowspan:合并行

<tr>

<th rowspan="4">學(xué)員</th>

<th>姓名</th>

<th>特征</th>

<th>職業(yè)</th>

</tr>

3.3文檔元素

文檔元素的主要作用是劃分各個(gè)不同的內(nèi)容，讓整個(gè)布局更加清晰。 進(jìn)入代替div。讓整個(gè)布局元素都具有語(yǔ)義。

• header標(biāo)簽：表示頁(yè)面頭部。通常包括標(biāo)題或?qū)Ш降葍?nèi)容。下面內(nèi)容會(huì)換行（在頁(yè)面中一般會(huì)用樣式將它設(shè)置到居中）

• footer標(biāo)簽:表示頁(yè)面的尾部，一般用于版權(quán)聲明、友情鏈接等。

• h1-h6標(biāo)簽：標(biāo)題標(biāo)簽，有字體加粗的效果。從1-6字號(hào)依次減小

<h1>這里是一個(gè)大標(biāo)題</h1> <h3>這里是一個(gè)副標(biāo)題</h3>

• hgroup:組合標(biāo)題。hgroup的作用就是當(dāng)多個(gè)標(biāo)題出現(xiàn)，干擾到一對(duì)或多個(gè)本身需要整合的標(biāo)題。

<header>

<hgroup>

<h1>這里是一個(gè)大標(biāo)題</h1>

<h3>這里是一個(gè)副標(biāo)題</h3>

</hgroup>

</header>

<footer>

<h4>這里是尾部的副標(biāo)題</h4>

這里存放頁(yè)面的尾部：如版權(quán)聲明，友情鏈接

</footer>

如上面那段代碼，頭部的h4標(biāo)題就能與h1綁定起來(lái)，從而和尾部的h4分離。

• section標(biāo)簽: 定義一個(gè)文檔的主題內(nèi)容

• nav標(biāo)簽: 給文檔頁(yè)面添加一個(gè)導(dǎo)航

• aritcle標(biāo)簽：添加一個(gè)獨(dú)立成篇的文檔（像平常看到的論壇，貼吧，評(píng)論都有自己的頭、尾和內(nèi)容等）

<article>

<header>

<nav>&hellip;&hellip;</nav>

</header>

</article>

• aside標(biāo)簽：生成注釋欄。

<aside>這是一個(gè)注釋欄</aside>

• address表示文檔或者是article元素的聯(lián)系信息

• <address>聯(lián)系信息</address>

• 本身有傾斜的效果。如果是在article元素下表示其下的聯(lián)系信息，如果是在body元素下表示整個(gè)文檔的聯(lián)系信息

3.4嵌入元素

嵌入元素主要功能是把外部的一些資源插入到html中。

• img標(biāo)簽：用于顯示圖片

• src：嵌入圖像的url

• alt：（如果圖片能正常顯示則沒(méi)有任何效果。若圖片加載不成功會(huì)出現(xiàn)備用內(nèi)容）

• width/height:定義圖片的寬度和高度,單位是像素<img src="img.png" alt="風(fēng)景圖" width="320" height="400"/>

• ismap:獲取到圖片區(qū)域的像素點(diǎn)加入了ismap屬性之后，點(diǎn)擊圖片在瀏覽器中就會(huì)獲得圖片被點(diǎn)擊的地方的像素點(diǎn)。（把文件在目錄中打開(kāi)，講文件拷貝到谷歌瀏覽器打開(kāi)就能看見(jiàn)）

<a href="index.html">

<img ismap src="img_5.jpg" alt="風(fēng)景圖">

</a>

• usemap:創(chuàng)建分區(qū)的響應(yīng)圖。比如說(shuō)點(diǎn)擊圖片的某一部分，可以跳轉(zhuǎn)到某一個(gè)網(wǎng)頁(yè)。（當(dāng)點(diǎn)擊了coords這塊區(qū)域時(shí)，跳轉(zhuǎn)到指定的網(wǎng)頁(yè)）

<img src="img_5.jpg" usemap="#Map" />

<map name="Map">

<area shape="circle" coords="31,28,112,100" target="_blank" alt="方形">

</map>

• iframe標(biāo)簽：嵌入另一個(gè)文檔。表示在一個(gè)頁(yè)面內(nèi)建立一個(gè)區(qū)域引入另一個(gè)頁(yè)面。

<a href="index.html" >index</a>

<a target="in">百度</a>

<iframe src="http://www.baidu.com" width="300" heigth="300" name="in"></iframe>

• progress標(biāo)簽：用于顯示進(jìn)度

• 該標(biāo)簽會(huì)產(chǎn)生一個(gè)進(jìn)度條，一般我們會(huì)用js代碼來(lái)控制其內(nèi)部的值。(當(dāng)前值用value來(lái)表示，而最大值用max來(lái)表示)

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

• meter標(biāo)簽：顯示范圍里的值（類(lèi)似于進(jìn)度條,可以規(guī)定最大值和最小值max/min。low值規(guī)定它的值過(guò)低，high表示值過(guò)高。而optimun表示最佳值，但是這個(gè)屬性是呈現(xiàn)不出效果的）

<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>

3.5音頻和視頻標(biāo)簽

音頻和視頻文件其實(shí)都只是一個(gè)容器文件。視頻文件包含了音頻軌道、視頻軌道和其他一些元數(shù)據(jù)。視頻播放時(shí)，音頻軌道和視頻軌道是綁定在一起的。元數(shù)據(jù)包含了視頻的封面、標(biāo)題字幕等信息。在網(wǎng)頁(yè)實(shí)現(xiàn)中，有很多的瀏覽器廠商都有自己的標(biāo)準(zhǔn)，所以html5規(guī)范也沒(méi)有強(qiáng)制指定編解碼器了。所以在網(wǎng)頁(yè)上嵌入視頻和音頻時(shí)，最好提供mp4格式和webM格式的視頻。否則有可能由于瀏覽器不兼容的問(wèn)題導(dǎo)致視頻不能播放。

• video標(biāo)簽: 視頻標(biāo)簽屬性：

• src:視頻資源的url

• width：視頻寬度

• height:視頻高度

• <video src="test.mp4" width="320" height="400"></video>

• controls:設(shè)置后顯示播放控件（未設(shè)置這個(gè)屬性時(shí)，視頻就像一張圖片，設(shè)置controls之后才能顯示視頻播放控件）

• <video src="test.mp4" width="320" height="400" controls></video>

• autoplay:表示立即播放視頻

• loop:反復(fù)播放視頻（也就是說(shuō)在播放結(jié)束之后會(huì)重新播放視頻）

• muted:設(shè)置之后，視頻會(huì)處于靜音狀態(tài)

• poster:指定視頻數(shù)據(jù)載入時(shí)顯示的圖片。（相當(dāng)于視頻的一個(gè)封面）

<video src="test.mp4" width="320" height="400" controls

poster="img_5.jpg"></video>

• preload:預(yù)加載。不設(shè)置會(huì)在第一次播放自動(dòng)緩存。如果值為none會(huì)直到用戶點(diǎn)擊時(shí)再加載視頻。如果值為metadata表示播放之前只加載第一幀。auto是默認(rèn)的，表示要求瀏覽器盡快的加載視頻。

• 兼容多個(gè)瀏覽器 source標(biāo)簽

<video src="test.mp4" width="320" height="400" controls poster="img_5.jpg">

<source src="test.webm"/>

<source src="test.mp4"/>

</video>

• audio標(biāo)簽：用于嵌套音頻內(nèi)容。屬性與視頻元素類(lèi)似。只是沒(méi)有寬高設(shè)置和圖片。

• <audio src="test.mp3" controls></audio>

3.6表單標(biāo)簽

表單標(biāo)簽是用于獲取用戶的輸入數(shù)據(jù)的。

• form標(biāo)簽：表示定義html表單。用該標(biāo)簽包含的標(biāo)簽具有提交功能。也就是說(shuō)，在瀏覽器的地址欄里面能獲取到用戶的信息。(如果不定義表單，那么它是無(wú)法提交數(shù)據(jù)的)

<form>

用戶名：<input name="user">

<button>提交</button>

</form>

屬性

• action:表示表單提交到的頁(yè)面(也就是要把數(shù)據(jù)傳入到哪個(gè)頁(yè)面中)

• method:表示表單的提交方式。默認(rèn)是get。而get和post請(qǐng)求的區(qū)別就是post后面不跟請(qǐng)求體。也就是用戶信息。相對(duì)來(lái)說(shuō)更加的安全。（一般來(lái)說(shuō)，get是用于超鏈接提交居多，post用作表單提交居多）

• <form method="post" action="http://www.haosou.com"></from>

• enctype:表示瀏覽器對(duì)發(fā)送給服務(wù)器的數(shù)據(jù)采用的編碼格式。有三種格式。默認(rèn)是不能將文件上傳到服務(wù)器&rdquo;application/x-www-form-urlencoded&ldquo;、multipart/form-data用于將文件上傳到服務(wù)器、text/plain不建議使用

• name:設(shè)置表單名稱(chēng)，以便程序調(diào)用

• target:提交的目標(biāo)，與超鏈接無(wú)異

• autocomplete:設(shè)置瀏覽器記錄用戶輸入的信息。分為on和off兩個(gè)值。默認(rèn)為on。

• novalidate：設(shè)置是否執(zhí)行客戶端數(shù)據(jù)有效性檢查

• input標(biāo)簽：表示用來(lái)收集用戶輸入數(shù)據(jù)的控件。它默認(rèn)會(huì)出現(xiàn)一個(gè)單行的文本框。

• type:文本框的類(lèi)型。值為text時(shí)表示單行文本框；值為password表示密碼框；值為search時(shí)，除了火狐瀏覽器的其他瀏覽器外，會(huì)顯示一個(gè)叉來(lái)取消搜索內(nèi)容，值為number時(shí)，表示只限于數(shù)字輸入；值為range時(shí)，生成一個(gè)數(shù)值范圍文本框；當(dāng)type為date系列時(shí)，可以獲取日期和時(shí)間的值，有六種形態(tài)date、month、time、week、datetime、datetime-local；當(dāng)值為color代表可以獲取不同的顏色；當(dāng)值為checkbox、radio時(shí)表示復(fù)選框和單選。單選的name值必須一樣。checked表示默認(rèn)勾選狀態(tài)值為img是表示產(chǎn)生一張圖片按鈕，后面可以接src,alt,width等熟悉值為email,tel,url時(shí)表示輸入電子郵件、電話和網(wǎng)址格式值為hidden時(shí)，生成一個(gè)隱藏控件（看不見(jiàn)，但提交的時(shí)候會(huì)顯示，一般用于關(guān)聯(lián)主鍵id提交）值為file的時(shí)候，表示上傳文件。accept屬性表示限制文件<input type="text">

音樂(lè)<input type="checkbox" checked>

體育<input type="checkbox">

<input type="radio" name="sex" value="男" checked>男

<input type="radio" name="sex" value="女">女

<input type="hidden" value="1" name="id">

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

• maxlength:設(shè)置文本框最大字符長(zhǎng)度

• readonly:設(shè)置文本框?yàn)橹蛔x狀態(tài)。可以提交但是不能修改文本框的值。

• placeholder:占位符

• size:設(shè)置文本框的寬度

• required:表明用戶必須輸入一個(gè)值，否則無(wú)法通過(guò)輸入驗(yàn)證

• <input type="text" list="abc" required>

• autofocus:讓光標(biāo)聚焦在某個(gè)input元素上，方便用戶直接輸入。<input name="user" autofocus>

• disabled:禁止input元素 （連點(diǎn)擊都不能）

• list：為文本框提供建議值

<form>

<input type="text" list="abc">

<button>提交</button>

</form>

<datalist id="abc">

<option value="1">湖南</option>

<option value="2">海南</option>

</datalist>

• value:默認(rèn)在輸入框內(nèi)出現(xiàn)的值

• form：與表單外的數(shù)據(jù)掛鉤一遍提交

<form id="register" name="reg" action="index.html">

用戶名：<input name="user">

<button>提交</button>

</form>

年齡：<input name="age" form="register">

• label標(biāo)簽:把文字和input標(biāo)簽包裹起來(lái)可以方便設(shè)置樣式，并且當(dāng)用戶點(diǎn)擊文字的時(shí)候，光標(biāo)會(huì)自動(dòng)移入到對(duì)應(yīng)的input框。（如果只是設(shè)置了文字用label包裹，又想點(diǎn)擊文字將標(biāo)簽自動(dòng)移入對(duì)應(yīng)的框，可以將label的屬性for的值設(shè)置成與input的id設(shè)置成一樣）

<label for="user"> 用戶名：</label>

<input id="user" name="user">

• fieldset標(biāo)簽:對(duì)表單進(jìn)行編組。三個(gè)屬性name、form、disabled

• legend標(biāo)簽：添加分組說(shuō)明的標(biāo)簽（也就是說(shuō)給分組加上一個(gè)標(biāo)題）

<fieldset>

<legend>注冊(cè)分組</legend>

<label for="user"> 用戶名：</label>

<input id="user" name="user">

<button>提交</button>

</fieldset>

• button標(biāo)簽:創(chuàng)建一個(gè)按鈕。type屬性有三個(gè)值，submit表示提交，reset表示重置，也就是把input的值變成初始值。button表示一個(gè)普通的按鈕。

• select標(biāo)簽：下拉列表。需要和option標(biāo)簽配合使用。

• name屬性：設(shè)定提交時(shí)的名稱(chēng)

• disabled屬性：將下拉列表禁用

• form屬性：將表單外部與內(nèi)部掛鉤

• size屬性：下拉列表的個(gè)數(shù)

• multiple屬性：設(shè)置是否可以多選

• required:選擇驗(yàn)證，必須選擇后才能通過(guò)

<select name="fruit" size="5" multiple >

<!--value值是真正要提交上去的值，而后面的是顯示到頁(yè)面的值-->

<option value="1">花花菇?jīng)?lt;/option>

<option value="2">文小喵</option>

</select>

optgroup標(biāo)簽:對(duì)列表進(jìn)行分組選擇。

<form action="http://www.baidu.com">

<select name="fruit" multiple size="5">

<optgroup label="表情包">

<option value="1">花花菇?jīng)?lt;/option>

<option value="2">文小喵</option>

</optgroup>

<optgroup label="書(shū)">

<option value="4" selected>微微一笑很傾城</option>

<option value="5">神雕俠侶</option>

</optgroup>

</select>

<button>提交</button>

</form>

• textarea標(biāo)簽:生成一個(gè)可變大小的多行文本框

<!--wrap表示是否插入換行符 有soft和hard兩種。hard提交之后在地址欄可以看見(jiàn)%插入的隱藏?fù)Q行符-->

<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>

• pattern：正則表達(dá)式。開(kāi)頭和結(jié)尾用^和$ novalidate屬性表示不要驗(yàn)證該表單

<input type="text" placeholder="請(qǐng)輸入?yún)^(qū)號(hào)和座機(jī)" pattern="^[\d]{2,4}\-[\d]{6,8}$">

html對(duì)網(wǎng)頁(yè)頁(yè)面的布局或者是表單驗(yàn)證等功能都相對(duì)簡(jiǎn)陋，并且不同的瀏覽器支持的成熟度是不盡相同的。因此在大部分情況下，還是要借助js或jqury等前端庫(kù)，來(lái)呈現(xiàn)豐富多彩的驗(yàn)證效果。

要：我們應(yīng)滿足用戶需求的建議，調(diào)整了內(nèi)容的方向，最開(kāi)始是寫(xiě)寫(xiě)科技吐槽的內(nèi)容，后來(lái)寫(xiě)評(píng)測(cè)，然后寫(xiě)盤(pán)點(diǎn)硬件產(chǎn)品、軟件產(chǎn)品，再而又寫(xiě)創(chuàng)業(yè)知識(shí)分享和辦公工具分享，但作為一個(gè)科技自媒體，走過(guò)了多個(gè)年頭，總想給用戶提供一些有價(jià)值的內(nèi)容，這一次，我們會(huì)從軟件系列拓展到網(wǎng)站、公司、書(shū)籍、創(chuàng)業(yè)項(xiàng)目等角度，為大家?guī)?lái)新的變化與期望。來(lái)，再分享一大波酷站，吐槽哥希望可以幫助你找到實(shí)用又好玩的工具與網(wǎng)站。

簡(jiǎn)報(bào)可視化PPT設(shè)計(jì)神器：iSlide

PPT在日常生活工作的方便性相信很多用戶都體驗(yàn)到了，而且制作過(guò)程也簡(jiǎn)單易學(xué)，網(wǎng)上各種大量的PPT也層出不窮，但為了避免在工作中使用幻燈片模板遇到“撞衫”的情況，有沒(méi)有想過(guò)自己設(shè)計(jì)一套屬于自己的PPT模板呢？又如何設(shè)計(jì)幻燈片模板？iSlide是一款PPT設(shè)計(jì)神器，即使你是小白，你也可以快速做出高大上的PPT。它將具有更多的實(shí)用功能：圖示庫(kù)、智能圖表、智能排布、色彩庫(kù)等。將PPT中不規(guī)則的字體，段落，色彩，參考線布局，風(fēng)格樣式等一鍵化全局統(tǒng)一設(shè)置，構(gòu)建專(zhuān)業(yè)和規(guī)范。擁有100000+扁平化圖標(biāo)素材資源，任意下載，一鍵插入PPT，可隨時(shí)根據(jù)需求修改替換，用戶可以隨時(shí)隨地快速檢索，一鍵插入到ppt文檔中，再配合富有吸引力的ppt圖表，可以讓你的數(shù)據(jù)呈現(xiàn)個(gè)性化，將PPT頁(yè)面按需排列組合，一鍵導(dǎo)出為長(zhǎng)圖，參數(shù)化調(diào)節(jié)可自由控制輸出圖片質(zhì)量和尺寸大小，同類(lèi)產(chǎn)品還有Slidebean等。

多人實(shí)時(shí)協(xié)作的設(shè)計(jì)工具：Figma

隨著Sketch越來(lái)越流行，基于矢量的繪圖軟件也變得越來(lái)越熱門(mén)。 Figma的實(shí)時(shí)協(xié)作功能在其核心設(shè)計(jì)工具集中尤為突出。 就像多個(gè)程序員可以將自己的代碼實(shí)時(shí)添加到一個(gè)項(xiàng)目中一樣，F(xiàn)igma允許多個(gè)設(shè)計(jì)師在遠(yuǎn)程協(xié)同工作。 你可能會(huì)想多個(gè)設(shè)計(jì)師實(shí)時(shí)準(zhǔn)備同一個(gè)項(xiàng)目的情況或許不太多見(jiàn)，但例如這個(gè)設(shè)計(jì)師經(jīng)常遇到的場(chǎng)景：在會(huì)議中，團(tuán)隊(duì)成員同時(shí)在看一個(gè)項(xiàng)目，并實(shí)時(shí)提供反饋來(lái)修改項(xiàng)目，F(xiàn)igma將是最合適不過(guò)的解決方案。大家都在一個(gè)畫(huà)板上工作，設(shè)計(jì)、討論，甚至直接在別人的工作上繼續(xù)修改，這些都是實(shí)時(shí)的。

幫助清理你的上網(wǎng)痕跡的工具：Deseat.Me

網(wǎng)絡(luò)在傳遞知識(shí)、開(kāi)拓視野的同時(shí)也充斥著各種危機(jī)，除了容易遭受網(wǎng)絡(luò)攻擊之外最大的困擾就是個(gè)人信息被竊。瑞典開(kāi)發(fā)者Wille Dahlbo和Linus Unneb?ck共同開(kāi)發(fā)了，這款網(wǎng)絡(luò)應(yīng)用只需幾個(gè)點(diǎn)擊就能輕松幫你清理你在網(wǎng)絡(luò)上留存的信息。使用帳號(hào)登陸該頁(yè)面之后，該網(wǎng)頁(yè)應(yīng)用就會(huì)自動(dòng)檢索通過(guò)帳號(hào)所使用的應(yīng)用和服務(wù)，并創(chuàng)建相關(guān)列表能夠讓你輕松刪除你在這些網(wǎng)站和應(yīng)用上的使用記錄。然后你的帳號(hào)捆綁的應(yīng)用和服務(wù)，并通過(guò)輕松點(diǎn)擊的方式來(lái)移除這些內(nèi)容。如果你對(duì)社交媒體或者網(wǎng)絡(luò)已經(jīng)感到厭倦，那么不妨使用這款工具來(lái)清理你的網(wǎng)上信息。

員工無(wú)需墊資的報(bào)銷(xiāo)神器：報(bào)銷(xiāo)吧

如何報(bào)的快又爽是每一家企業(yè)面臨的問(wèn)題，員工不用擔(dān)心墊錢(qián)出差、采購(gòu)，這款華為人也在使用的牛逼的報(bào)銷(xiāo)利器，你可以試試。報(bào)銷(xiāo)吧是一家在線的企業(yè)級(jí)差旅和費(fèi)用報(bào)銷(xiāo)管理工具，也支持移動(dòng)端。平時(shí)我們商務(wù)、銷(xiāo)售、市場(chǎng)、活動(dòng)、老板人員出差要訂票、打車(chē)、住酒店，而報(bào)銷(xiāo)吧整合國(guó)內(nèi)的眾多旅游服務(wù)商，比如：飛鶴航空、攜程與同程網(wǎng)的機(jī)票酒店、滴滴出行企業(yè)版、京東企業(yè)購(gòu)等，一款軟件內(nèi)可以實(shí)現(xiàn)商務(wù)出差全過(guò)程，從出差到報(bào)銷(xiāo)，無(wú)需再下載多個(gè)軟件應(yīng)用，只需一個(gè)報(bào)銷(xiāo)吧，就可以實(shí)現(xiàn)應(yīng)用內(nèi)一站式預(yù)訂機(jī)票、酒店、火車(chē)及打車(chē)和出差比價(jià)的功能。報(bào)銷(xiāo)吧打通了訂購(gòu)、報(bào)銷(xiāo)、支付、記賬的全流程，提交報(bào)銷(xiāo)（告別手寫(xiě)）-領(lǐng)導(dǎo)審批（多級(jí)審批）-出納支付（網(wǎng)銀/第三方）-財(cái)務(wù)記賬（ERP接口），幫助企業(yè)簡(jiǎn)化工作流程，更好的協(xié)作。

在線時(shí)間追蹤錄制工具：Teamito

這個(gè)工具對(duì)于做自由職業(yè)者的也很有用哦。Teamito是一款簡(jiǎn)單高效的團(tuán)隊(duì)項(xiàng)目管理和記錄工具，一鍵開(kāi)始錄像，再次點(diǎn)擊即可停止，每一個(gè)條目都可以在見(jiàn)客戶或者分配項(xiàng)目或者任務(wù)的時(shí)候記錄項(xiàng)目?jī)?nèi)容，所有參與的團(tuán)隊(duì)都可以在線收聽(tīng)。快速和簡(jiǎn)單的實(shí)時(shí)追蹤記錄，簡(jiǎn)單的操作即可記錄下來(lái)各種項(xiàng)目的說(shuō)明和要點(diǎn)，比下載紙質(zhì)上的方式要便捷的多，透明組織構(gòu)架，每個(gè)新建的條目客戶、項(xiàng)目、任務(wù)三層構(gòu)架，多個(gè)工作區(qū)，每一個(gè)賬戶下都有多個(gè)工作區(qū)，每個(gè)人可以有合作的成員。Teamito旨在幫助企業(yè)建立團(tuán)隊(duì)精神，你可以輕松的邀請(qǐng)成員加入你的團(tuán)隊(duì)，一起在工作區(qū)里實(shí)施項(xiàng)目，每一個(gè)部件都有不同的使用權(quán)限，管理員可以靈活控制。

在線思維組織工具（不是思維導(dǎo)圖）：CheckVist

在你的工作生活中，是否有很多的想法，卻無(wú)法很好的表達(dá)出來(lái)，你有一個(gè)好的想法，但是想要寫(xiě)出來(lái)是比較難的，或許一閃而過(guò)的想法在你提筆的瞬間就消失了。抑或你工作在一堆混亂的工作筆記中，苦于翻看和尋找，就像思維導(dǎo)圖，CheckVist是是一個(gè)非常簡(jiǎn)潔方便的知識(shí)、任務(wù)、大綱管理工具，適合于團(tuán)隊(duì)和個(gè)人，記錄你的想法和計(jì)劃清單，可以與好友或者同事分享，其特點(diǎn)是可以分層列表、共享和協(xié)作，支持搜索、篩選、注釋等。checkvist的好處就是可以非常方便自然地將任務(wù)細(xì)分。我也一直提到方便的力量，如果一個(gè)工具很方便，你就容易朝這個(gè)方向積累，雖然每天的積累很慢，但是長(zhǎng)期的效果還是很不錯(cuò)的，就像復(fù)利。有了checkvist，你就自然地要?jiǎng)澐肿尤蝿?wù)。

在線表格制作轉(zhuǎn)圖片工具：Venngage

信息圖表（Infographics）顧名思義就是信息（Information）+圖表（Graphics），用直觀的圖形來(lái)表現(xiàn)所要告訴人們的信息。那么，如何制作信息圖表呢？俗話說(shuō)：“工欲善其事必先利其器”，Venngage是一個(gè)比較適合市 場(chǎng)銷(xiāo)售人員和出版商的強(qiáng)大的信息圖在線創(chuàng)作平臺(tái)。它幫助用戶創(chuàng)建和發(fā)布信息圖表，提高用戶作品的體驗(yàn)，并跟蹤用戶反饋 。可以幫你設(shè)計(jì)無(wú)數(shù)的信息圖表，用作業(yè)務(wù)展示、營(yíng)銷(xiāo)材料甚至一些教學(xué)項(xiàng)目中去。同樣是選模板、主題再細(xì)化圖標(biāo)等小的視覺(jué)元素的流程，如果你想進(jìn)行完全的品牌定制也是可以的，甚至可以拿它制作動(dòng)畫(huà)。

創(chuàng)建Html5動(dòng)畫(huà)并生成移動(dòng)網(wǎng)站：KoolMoves

想要?jiǎng)?chuàng)建高影響力的網(wǎng)站和動(dòng)畫(huà)？KoolMoves是一個(gè)Html5，動(dòng)畫(huà)GIF，AVI和Flash創(chuàng)作工具，用于創(chuàng)建文字和圖像效果，幻燈片，游戲，動(dòng)畫(huà)人物和整個(gè)網(wǎng)站。KoolMoves使用PhoneGap和Adobe AIR SDK將HTML5，AVI，MP4，SVG，動(dòng)畫(huà)GIF，SWF和移動(dòng)應(yīng)用程序?qū)С觯憧梢詮拇笮蛨D庫(kù)中選擇效果和組件，導(dǎo)入矢量剪貼畫(huà)，附加音頻，填充顏色漸變或圖像，并向按鈕和框架添加操作。能夠制作動(dòng)畫(huà)GIF、制作文字特效、導(dǎo)入矢量剪貼畫(huà)、附加WAV 音頻文件；為文字按鈕和幀增加動(dòng)作... 完全支持漢字的文字特效。支持自定義文本效果，按鈕和剪貼畫(huà)、導(dǎo)出為移動(dòng)友好的Html5，GIF和AVI、添加令人印象深刻的3D文字和形狀效果、使用模板或創(chuàng)建自己的設(shè)計(jì)。

1000家網(wǎng)站：這是一個(gè)從0到1的歷程，是一個(gè)自媒體肩負(fù)起互聯(lián)網(wǎng)普及的歷程，是一段為了理想重新上路、累并快樂(lè)著的歷程。嗯，1000家網(wǎng)站，互聯(lián)網(wǎng)發(fā)展這么多年，很多人經(jīng)常使用的還是那些常用的網(wǎng)站（資訊、影視、社交、搜索....），有許多（優(yōu)秀的、好玩的、特色的、有趣的、實(shí)用的.....國(guó)內(nèi)外網(wǎng)站）未被發(fā)掘過(guò)，也沒(méi)有人去真正了解過(guò)，為此，我們推出了這個(gè)系列計(jì)劃，先讓這1000家網(wǎng)站走近大眾化，我們的理念是：讓人人都能了解，人人都會(huì)利用互聯(lián)網(wǎng)學(xué)習(xí)、工作、提升效率，增長(zhǎng)見(jiàn)識(shí)。如果你也喜歡，請(qǐng)關(guān)注我們的動(dòng)態(tài)。