整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          技術(shù)篇之點(diǎn)進(jìn)來(lái)你就是GIF制作高手

          技術(shù)篇之點(diǎn)進(jìn)來(lái)你就是GIF制作高手

          記-------

          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)在你面前啦。

          點(diǎn)擊開(kāi)始

          當(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<sub>5</sub>和Y<sup>2</sup>(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)陋,并且不同的瀏覽器支持的成熟度是不盡相同的。因此在大部分情況下,還是要借助jsjqury等前端庫(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)。


          主站蜘蛛池模板: 日本高清天码一区在线播放| 国产激情无码一区二区三区| 中文字幕乱码一区久久麻豆樱花| 久久久无码精品人妻一区| 中文字幕无码免费久久9一区9| 中文字幕无线码一区2020青青| 天堂Aⅴ无码一区二区三区| 欧美日韩国产免费一区二区三区| 亚洲日韩精品一区二区三区| 亚洲第一区在线观看| 国产成人精品亚洲一区| 亚洲日韩一区二区一无码| 一区二区三区视频在线观看| 久久久精品人妻一区亚美研究所 | 国产精品亚洲综合一区在线观看| 久久国产免费一区二区三区 | 精品国产一区二区三区色欲| 国产自产V一区二区三区C| 免费一区二区无码东京热| 三上悠亚日韩精品一区在线 | 国产在线一区二区视频| eeuss鲁片一区二区三区| 亚洲一区二区三区成人网站| 亚洲AV无码一区二区三区牛牛| 亚洲欧洲精品一区二区三区| 国产精品一区二区不卡| 亚洲国产AV一区二区三区四区| 极品尤物一区二区三区| 五十路熟女人妻一区二区| 亚洲色精品VR一区区三区| 无码AV中文一区二区三区| 国产一区在线视频| 国产午夜精品一区二区三区漫画| 亚洲一区二区三区自拍公司| 老熟妇仑乱视频一区二区| 亚欧在线精品免费观看一区| 国产精品无码一区二区三区不卡| 波多野结衣一区二区三区88 | 伊人色综合网一区二区三区| 成人区人妻精品一区二区三区 | 性色AV一区二区三区|