初识 HTML5（一）
H5其實就是H4的一個增強版本，我們在利用H5進行網頁的構造會更簡便，標簽語義更簡潔明了。首先，我們要理解HTML4，它是HTML的標記+css2+JavaScript的一些基本應用，簡言之，就是API+語法；而H5無非就是在原先的基礎上面提供了一些新的功能。
1、H5的語義標簽 1）:html 的定義 ，它的一個文檔聲明?<!DOCTYPE html> 語法跟html4 差不多，w3c 提供了一個網站可以用來檢測html 的語法. https://validator.w3.org/ 2）html 的語義標簽，多了很多新的語義標簽. 這些標簽用起來跟div 和span 差不多。 1 <nav> 表示導航 2 <header> 表示頁眉 3 <footer> 表示頁腳 4 <section> 表示區塊 5 <article> 表示文章 如文章、評論、帖子、博客 6 <aside> 表示側邊欄 如文章的側欄 7 <figure> 表示媒介內容分組 與 ul > li 做個比較 8 <!--以上是常用到的--> 9 <mark> 表示標記 (帶用“UI”，不怎么用) 10 <progress> 表示進度 (帶用“UI”，不怎么用) 11 <time> 表示日期 12 <hgroup> 標題列表 (據說已廢棄) 13 <details> 14 <bdi> 15 <command> 16 <summary> 17 <rp> 18 <rt> 19 <ruby> 20 <!--盡量避免全局使用header、footer、aside等語義標簽。-->3）兼容處理
①在不支持HTML5新標簽的瀏覽器里，會將這些新的標簽解析成行內元素（inline）對待，將其轉換成塊元素（block）即可； ②在IE9版本以下，并不能正常解析這些新標簽，但是可以識別通過document.creatElement('tagName')創建的自定義標簽 ③實際開發中，我們采用的是通過檢測IE瀏覽器的版本來加載三方的一個JS庫來解決兼容問題。 <!-- [if lte IE 8]><script src="./js/html5shiv.min.js"></script> <![endif]-->【注意】<footer></footer> 這個是html5 里面的標記，相當于div，只不過有語義；然后放在ie6 里面，它會把這個footer 這個不認識的標記當做行內元素來處理；所以我們就需要屏蔽兼容性，這個時候我們就需要導入一個js 庫。
?html5shiv.min.js
2、表單
——form 是用來聲明表單. input 是用來表示表單項，type 是用來控制表單項的類型.（html5 在表單上面進行一些增強）
1）輸入類型（表單類型、表單元素、表單屬性、表單事件）
1 <input type="text" /> 2 email 輸入email格式 3 tel 手機號碼 4 url 只能輸入url格式 5 number 只能輸入數字 6 search 搜索框 7 range 范圍 8 color 拾色器 9 time 時間 10 date 日期 不是絕對的 11 datetime 時間日期 12 month 月份 13 week 星期部分類型是針對移動設備生效的，且具有一定的兼容性，在實際應用當中可選擇性的使用
2）新增了一些標簽
? ? ? ?① 數據列表：? <datalist></datalist>
? ? ? ? ②用來做安全的表單提交數據傳輸的安全：<keygen></keygen>
? ? ? ? ③用來做度量：?<meter></meter>
? ? ? ? ④想表單里面輸出，沒什么作用：<outputer><outputer>
3）新增了一些屬性:
1 placeholder 占位符 2 autofocus 獲取焦點 3 multiple 文件上傳多選或多個郵箱地址 4 autocomplete 自動完成，用于表單元素，也可用于表單自身 5 form 指定表單項屬于哪個form，處理復雜表單時會需要 6 novalidate 關閉驗證，可用于<form>標簽 7 required 驗證條件，必填項 8 pattern 正則表達式 驗證表單 9 手機號:<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$">【PS】我們用新增的這些屬性，可以來完成我們之前要使用js 才能實現的效果.
4）表單里面的事件
? ? ①監聽文本框的數據的輸入：?oninput 事件
? ? ②當驗證不通過的時候觸發：?oninvalid
? ?③進度這個標記，我們使用 progress
?
3、多媒體
1）早之前我們做網頁播放器
? ? ? ? ①我們是通過js 去調用windows 里面自帶的一個播放器 ?media player ?操作系統捆綁的
? ? ? ? ②adobe 的這樣的一個flash ，基本上面每個用戶電腦上面都會安裝.
? ? ? ? ③后期我們出現了一個東西，每個電腦上面都可以裝一個快播，js 調用快播.
【javascript 里面的內容】? javascript 分為三部分：
? ? ? ? ? ? ①ECMAScript
? ? ? ? ? ? ? ? (定義了js 的語法，變量，語句)
? ? ? ? ? ? ②BOM 瀏覽器對象模型
? ? ? ? ? ? ? ? (我們可以通過瀏覽器的自帶的一些對象，可以調出瀏覽器的功能.)
? ? ? ? ? ? ③Dom ?文檔對象模型
? ? ? ? ? ? 我首先有一個html 文件，我通過瀏覽器去打開這個html 文件；瀏覽器會去解析這個html 文件，把這個文件解析之后放在一個document 對象里面；?我以后要操作html 里面的內容，我就直接操作document 就可以
1 //(操作dom 就是熟練dom 的api) 2 // (操作dom 的前期，要操作dom 必須先得到dom) 3 document.getElementById(""); 4 document.getElementsByTagName("");2）?html5 可以提供一些標簽來完成播放.
? ? ? ? 我們做這種音頻文件，以及視頻文件，最麻煩地方就是解碼【音頻文件，以及視頻文件，都有格式，各種各樣的格式】
? ? ? ? 1:假設你網站的視頻資源是自己產生的
? ? ? ? 2:假設網站的資源是用戶上傳上去的，我們需要在用戶上傳的時候對這個資源進行轉碼.
【H5中】這個h5 在這個的基礎上面進行了擴展，提供了一些更加強大的方法. //根據class 的值去獲取document.getElementByClassName("") // 這個里面支持css 里面的選擇器 //這里返回的是第一個元素..document.querySelector(".username") //獲取的所有的,返回的是一個集合.document.querySelectorAll(".username>li");【表單的總結】我現在有一個表單，定義屬性，什么時候id ，什么是時候使用name，什么時候使用class
? ?① 我為一個元素加id 的目的，為了js 方便去獲取這個元素
?? ②name?：如果我要跟服務器進行交互，服務器到時候要獲取客戶端表單提交的數據.它是根據name?的值去獲取? ?
<input type="text" name="username" value="zhangsan"> // username=zhangsan③class 一般，如果我要通過樣式去批量控制元素，我就為元素添加class 屬性.
? ? 我們以后做案例：第一步，我要把頁面的基本布局畫好（html,css）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 第二步：分析功能，根據功能找到對應的事件
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 第三步：事件出來了，方法就出來了
【ps】我看要完成什么功能，一般情況下我們都是操作dom； 獲取dom，操作dom （api 操作.）；即使調試,一個案例，都是調出來的
【小結】? html5 概念：就是在html4 上面的一個增強版本。在 標簽，css，js 上面的一個增強。
?標簽：出現了一些新的比較具有顛覆性的標記.
? ? ? ?1:html5 的聲明
? ? ? ?2:語義標簽(大家當做div ，或者span 來理解就可以.)
? ? ? ?3:兼容性處理，需要導入一個js 庫.
? ? ? ?4:表單，我們傳統的表單，難以完成比較復雜的頁面應用
? ? ? ? ? ? 4.1：新增了一些類型 type=""
? ? ? ? ? ? 4.2: 新增了一些標簽 ?datalist
? ? ? ? ? ? 4.3: 新增了屬性 ?(文檔)
? ? ? ? ? ? 4.4：事件 ?oninput
? ? ? ? ? 小案例：學生檔案，案例.
多媒體處理:
? ? ? ? audio ?針對mp3 音頻
? ? ? ? video ? 針對視頻的
?解碼；做客戶端不用處理.
dom 的處理
? ? ? ? 新增了一些api ，來讓我們去獲取頁面上面的內容.
? ? ? ? document.getElementByTagName
? ? ? ? document.querySelector();
? ? ? ? document.querySelectorAll();
? ? ? ? 新增了屬性操作:
? ? ? ? ?document.getElementById("").classList.add();
? ? ? ? ?document.getElementById("").classList.remove();
? ? ? ? ?document.getElementById("").classList.toggle();
? ? ? ? ?document.getElementById("").classList.contains();
? ? ? ? 自定義屬性：
? ? ? ? ? 我可以為元素自定義屬性 我們是在元素上面加 ?data-itcast-name="";
? ? ? ? ? 遵守駝峰命名法則
? ? ? ? ? tabs 選項卡切換.(就是屬性api )
?
4、CSS3 與 JS 的區別
1）css:出現了css3，支持3d 效果.
? js:定位（直接在網站里面可以嵌入地圖.），重力感應
2）css3 肯定可以使頁面的顯示更加的豐富效果
javascript 新增了一些api，定位（百度地圖），重力感應 ?js 的一些對象
?
?
轉載于:https://www.cnblogs.com/DF-fzh/p/5582456.html
總結
以上是生活随笔為你收集整理的初识 HTML5（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： eclipse中多个工程编译到同一个目录
- 下一篇： HTML5 本地存储