初識 HTML5

時間 2019-11-30

標籤 html5 html 欄目 HTML5 简体版

原文原文鏈接

初識 HTML5（一）

　　H5其實就是H4的一個加強版本，咱們在利用H5進行網頁的構造會更簡便，標籤語義更簡潔明瞭。首先，咱們要理解HTML4，它是HTML的標記+css2+JavaScript的一些基本應用，簡言之，就是API+語法；而H5無非就是在原先的基礎上面提供了一些新的功能。javascript

一、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）兼容處理css

　　　　①在不支持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 庫。html

html5shiv.min.jshtml5

　　二、表單java

——form 是用來聲明表單. input 是用來表示表單項，type 是用來控制表單項的類型.（html5 在表單上面進行一些加強）css3

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

部分類型是針對移動設備生效的，且具備必定的兼容性，在實際應用當中可選擇性的使用windows

2）新增了一些標籤api

① 數據列表： <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

三、多媒體

　　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 )

四、CSS3 與 JS 的區別

1）css:出現了css3，支持3d 效果.

　　js:定位（直接在網站裏面能夠嵌入地圖.），重力感應

2）css3 確定可使頁面的顯示更加的豐富效果

　　javascript 新增了一些api，定位（百度地圖），重力感應 js 的一些對象

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。