第十六章，表單

HTML5引入了新的表單元素、輸入類型和屬性，以及內置的對必填字段、電子郵件地址、URL以及定制模式驗證。 元素： <input type="email"> ? ? ---- ? ? 電子郵件框 <input type="search"> ? ? ---- ? ? 搜索框 <input type="tel"> ? ? ---- ? ? 電話框 <input type="url"> ? ? ---- ? ? URL框 以下元素得到部分瀏覽器支持： <input type="date"> ? ? ---- ? ? 日期 <input type="number"> ? ? ---- ? ? 數字 <input type="range"> ? ? ---- ? ? 范圍 <input type="text" name="favfruit" list="fruit"> ? ? ---- <datalist id="fruit"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ---- ?\ <option>Grapes</option> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?---- ? ?\ <option>Pears</option> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ---- ? ?數據列表? <option>Kiwi</option> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ---- ? / </datalist> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?---- 下面輸入或元素得到更少的支持 <input type="color" /> ? ? ---- ? ? 顏色 <input type="datetime" /> ? ? ---- ? ? 全局日期和時間 <input type="datetime-local" /> ? ? ---- ? ? 局部日期和時間 <input type="month" /> ? ? ---- ? ? 月 <input type="time" /> ? ? ---- ? ? 時間 <input type="week" /> ? ? ---- ? ? 周 <output></output> ? ? ---- ? ? 輸出 屬性：

屬性	總結
accept	限制用戶可上傳文件類型
autocomplete	對form元素或特定字段添加autocomplete=“off”，將關閉瀏覽器的自動填寫行為
autofocus	頁面加載后將焦點放到該字段
multiple	允許輸入多個電子郵件地址，或上傳多個文件
list	將datalist與input聯系
maxlength	指定textarea的最大字符數，文本框在H5之前就支持此屬性
pattern	定義一個用戶所輸入的文本在提交之前必須遵循的模式
placeholder	出現在文本框中的提示文本
required	在提交表單前必須填寫該字段
formnovalidate	關閉H5自動驗證功能，應用于提交按鈕
novalidate	關閉H5自動驗證功能，應用于表單元素

注：Ryan Seddon的H5F（http://github.com/ryanseddon/H5F）可以為舊瀏覽器提供模仿H5表單行為的js方案 method=“get”，表單提交后，表單中的數據會顯示在瀏覽器地址欄里，數據大小有限制，獲取信息等可公開的操作使用get操作 method=”post”，表單提交后，表達數據不會顯示在地址欄，可以發送更多的數據，用于在數據庫保存，刪除，添加數據等敏感操作使用post

對表單元素進行組織

可以使用fieldset元素將相關元素組合在一起，還可以使用legend元素為每個fieldset提供標題，用于描述每個組的目的，這些描述也可以使用h1~h6。如果需要包含legend元素，則它必須是fieldset的第一個元素。 建議：對于單選按鈕，最好總是使用fieldset和legend label標簽有一個特殊的屬性：for，當for的值與一個表單字段的id值一樣時，該label標簽就與該字段顯示地關聯了起來。 for，id，name屬性的值都可以是任意值，但對于包含多個單詞的值，for，id會使用連字符（-）分隔單詞，而name使用下劃線（_）連接。 注：必須建立服務端驗證，因為客戶端的js驗證有可能會被禁用，或者不支持H5的新屬性。 http://html5pattern.com有很多有用的模式

創建單選按鈕

同一組單選按鈕的input元素的name屬性必須都一樣，type="radio"

創建復選框

同一組復選框的input元素的name屬性必須都一樣，type="checkbox"

創建選擇框

1、創建選擇框 使用select元素。size=n代表選擇框高度，以行為高度，輸入multiple或者multiple="multiple"，可以允許訪問者選擇多個選項。 在select內部使用option元素表示選項。在option元素中，輸入selected或者selected="selected"，指定某個選項默認被選中。 2、對選擇框進行分組 對多個分在同一組的option元素使用optgroup元素，label屬性是子菜單標題。 如果添加了size屬性，那么選擇框看起來會更像一個列表，且沒有自動選中的選項，若size大于選項數量，訪問者可以點擊空白處，使所有選項處于未選中狀態

讓訪問者上傳文件

必須在form元素里面正確設置enctype屬性，創建input type="file"元素 對于允許上傳的表單，不允許使用get方法

創建隱藏字段

input type="hidden" 隱藏字段出現在表單標記中的位置并不重要，因為它們在瀏覽器中并不可見。 不要將敏感信息放到隱藏字段中，訪問者可以通過查看源碼看到

創建提交按鈕

1、input type="submit" 2、創建帶圖像的提交按鈕 input type="image" src="img.url" 3、創建結合文本和圖像的提交按鈕 使用button元素 <button type="submit" class="btn"><img src="check.png" width="21" height="21" alt="" />Create Profile </button>

注：如果表單需要一個以上的提交按鈕，就應避免使用button元素

<input type="reset"> <button type="reset">Reset</button> <!-- 都可以對表單進行重置 -->

禁用表單元素

為元素添加屬性，disabled或disabled="disabled"，禁用表單元素。 根據狀態為表單設置樣式 偽類

選擇器	應用	瀏覽器支持情況
:focus	獲得焦點的字段	IE8+及其他
:checked	選中的單選按鈕或復選框	IE9+及其他
:disabled	具有disabled屬性的字段	IE9+及其他
:enable	與:disabled相反	IE9+及其他
:required	具有required屬性的字段	IE10+、Safari5+及其他
:optional	與:required相反	IE10+、Safari5+及其他
:invalid	其值與pattern屬性給出的模式不匹配的字段等非法字段	IE10+、Safari5+及其他
:valid	與:invalid相反	IE10+、Safari5+及其他

第十七章，視頻、音頻和其他多媒體

視頻文件格式

HTML5支持三種視頻文件格式： 1、Ogg Theora使用的文件擴展名為.ogg/.ogv，支持的瀏覽器：Firefox3.5+、Chrome4+、Opera10.5+以及Android版Firefox 2、MP4（H.264）使用的文件擴展名為.mp4/.m4v，支持的瀏覽器：Safari3.2+，Chrome4-？，IE9+，iOS（Mobile Safari）和Android2.1+，Android版Chrome，Android版Firefox和Opera Mobile11+ 3、WebM使用的文件擴展名為.webm，支持的瀏覽器：Firefox4+、Chrome6+、Opera10.6+、Android2.3+、Android版Chrome、Android版Firefox和OPera Mobile 14 注：開發者至少要準備兩種視頻格式（MP4，WebM），才能確保獲得所有兼容H5的瀏覽器的支持。

在網頁中添加單個視頻

使用video元素， <video src="my-video.ext"></video> video屬性

屬性	描述
src	視屏URL
autoplay	視頻可播放時自動播放
controls	添加瀏覽器為視頻設置的默認控件
muted	靜音
loop	循環
poster	指定視頻加載時所要顯示的圖像（而不是視頻第一幀），接受所需圖像的URL
width	視頻寬度，默認300
height	視頻高度，默認150
preload	告訴瀏覽器要加載視頻內容的多少 none：不加載任何視頻 metadata：僅加載視頻元數據（長度、尺寸等） auto：讓瀏覽器決定怎么做

為視頻添加控件和自動播放

使用controls、autoplay屬性 <video src="my-video.ext" controls></video> <video src="my-video.ext" autoplay controls> </video>

為視頻指定循環播放和海報圖像

使用autoplay、loop、poster屬性，最好加上controls，不然會一直循環播放不能暫停，這會讓用戶非常火大。 <video src="my-video.ext" autoplay loop></video> <video src="my-video.ext" poster="paddle-steamer-poster.jpg" controls></video>

阻止視頻預加載

使用preload屬性 <video src="my-video.ext" proload="none" controls></video>

使用多種來源的視頻和備用文本

為了獲得所有兼容HTML5的瀏覽器的支持，至少要準備兩種視頻格式：MP4、WebM 可以使用source元素做到這一點。 一個video元素可以包含任意個source元素。 <body><video width="369" height="208" controls><source src="paddle-steamer.mp4" type="video/mp4"><!-- 瀏覽器支持則播放，忽視后面所有文件，否則跳到下一個source--><source src="paddle-steamer.webm" type="video/webm><!-- 類推 --><p><a href="paddle-steamer.mp4">Download the video</a></p><!-- 在瀏覽器不支持時顯示 --></video> </body>

source的屬性

名稱	描述
src	視屏來源URL
type	用于指定視頻類型，幫助瀏覽器決定是否能播放 該屬性的值反映的是視頻格式，即編解碼器， 如video/mp4,video/webm,video/ogg
media	用于為視頻來源指定CSS3媒體查詢，從而為不同屏幕尺寸設備指定不同的視頻

音頻文件格式

HTML5支持大量不同格式的音頻文件格式 1、Ogg Vorbis擴展名.ogg，支持瀏覽器：Firefox3.5+、Chrome5+、Opera10.5+ 2、MP3擴展名.mp3，支持瀏覽器：Safari5+、Chrome6+、IE9+、iOS 3、WAV擴展名.wav，支持瀏覽器：Firefox3.6+、Safari5+、Chrome8+、Opera10.5+ 4、AAC擴展名.aac，支持瀏覽器：Safari3+、IE9+、iOS3+和Android2+ 5、MP4擴展名.mp4，支持瀏覽器：Safari3+、Chrome5+、IE9+、iOS3+，Android2+ 6、Opus擴展名.opus，支持瀏覽器：Firefox 對于音頻最好的兩種格式是：Ogg Vorbis和MP3，可以獲得所有支持HTML5的瀏覽器的支持

在網頁中添加帶控件的單個音頻文件

使用audio元素，用法與video類似 audio元素屬性

名稱	描述
src	音頻文件URL
autoplay	音頻可播放時自動播放
controls	添加瀏覽器默認控件
muted	靜音
loop	循環
preload	與video一致

自動播放、循環和預加載，以及提供備用內容的多個視頻源操作均與操作video類似

source元素的type屬性： 可以幫助瀏覽器判斷是否能播放某個文件，對音頻文件來說，其值總是audio/格式本身，包括audio/ogg、audio/mp3、audio/aac、audio/wav、audio/mp4

添加具有備用Flash的視頻和音頻

可以通過使用MediaElement.js（http://mediaelementjs.com/）、Video.js（ http://www.videojs.com）、JWPlayer（http://longtailvideo.com/jw-player）、Flowplayer（http://flowplayer.org）來達到，JW Player和Flowplayer的免費版本會在媒體播放器上顯示它們的標識

高級多媒體

1、通過canvas操作視頻 使用canvas元素及相應的jsAPI可以在網頁上描制并創建動畫 2、聯合使用SVG和視頻

第十八章，表格

使用<table>元素，如果需要可以輸入<caption>元素，<caption>caption content</caption>，caption content用于描述表格。 可以根據需要使用<thead>、<tbody>、<tfoot>元素。使用tr行，th標題單元格，td數據單元格。 一個表格只能有一個thead和tfoot，但可以有多個tbody 如果包含了caption，則必須是表格的第一個元素。 如果包含了thead或tfoot則必須包含tbody。tbody不能位于thead之前。 可以通過scope屬性指定th為一組列的標題（scope="colgroup"），或者為一組列的標題（scope="rowgroup"） 通過對th或td的colspan或rowspan屬性進行改變可以創建跨越多行或多列的單元格。

第十九章，添加JavaScript

js最好都放在HTML頁面的最后面，即</body>的前面，如果非要在head元素內加載js文件，也應該是在所有加載CSS文件之后 還可以進行js代碼壓縮 1、Google Closure Complier http://code.google.com/closure/complier/（供下載的版本及文檔） http://closure-complier.appspot.com（在線版本） 2、UglifyJS（使用第二個鏈接） https://github.com/mishoo/UglifyJS2（供下載的版本及文檔） http://lisperator.net/uglifyjs（在線版本，選擇OpenDEmo） 3、YUI Compressor（使用第二個鏈接） http://developer.yahoo.com/yui/compressor（供下載的版本及文檔） http://refresh-sf.com/yui/（非官方的在線版本）

第二十章，測試和調試網頁

使用BrowserStack（www.browserstack.com）和SauceLabs（http://saucelabs.com）可以在很多瀏覽器和移動設備上免費測試頁面 檢查常見CSS錯誤 1、確保使用冒號(:)分隔屬性和值。 2、確保使用分號(;)結束每個屬性-值對。確保沒有多余的分號 3、不要忘了后括號 4、確保使用可接受的值 5、使用嵌入樣式表時，不要忘了</style>結束標簽 6、確保HTML文檔正確指向CSS文件 7、留意CSS選擇器之間的空格和標點 8、確保瀏覽器支持你編寫的代碼 9、使用瀏覽器的開發者工具

第二十一章，發布網站

1、獲得域名 2、尋找主機 3、將文件傳送至服務器，使用FileZilla（http://filezilla-project.org）、CyberDuck（http://cyberduck.ch）等FTP客戶端

轉載于:https://www.cnblogs.com/TwinklingZ/p/5308821.html

總結

以上是生活随笔為你收集整理的HTML5与CSS3基础教程第八版学习笔记16-21章的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。