HTML5新標籤 表單新類型、新屬性

課程目標

1. HTML的發展史
2. （web前端開發，HTML5前端開發，前端開發高級工程師，架構師，cto（首席技術總監））
3. 新的文檔類型聲明(DTD) 
4. 新增的HTML5標籤
5. 刪除的HTML標籤
6. 從新定義的HTML標籤
7. 嶄新新的頁面佈局
8. Html5瀏覽器的兼容

1、HTML5簡介

一、HTML5的發展歷史

 

二、HTML5的支持瀏覽器

 

不一樣的瀏覽器顯示的效果可能不同。由於HTML5沒有一個統一的標準，不一樣的瀏覽器解析時不同的，如今還處於一個推廣的階段，可是大部分的是同樣的.

三、HTML5的特色

增長了新特性：語義特性，本地存儲特性，設備兼容特性，鏈接特性，網頁多媒體特性，三維、圖形及特效特性，性能與集成特性，CSS3特性。

面試官常問題：HTML5有哪些特色（跟HTML5之前有什麼區別），css有哪些新屬性？

（文檔申明更簡單，HTML5更語義化，HTML5三維空間模式，canvas）

（css新屬性：圖片邊框，圓角變框，漸進背景色，3d動畫，陰影）

2、Html5新標籤

 

語義化

 

一、<header>

<header>標籤訂義文檔的頁眉，一般是一些引導和導航信息。一般<header>標籤至少包含（但不侷限於）一個標題標記（<h1>-<h6>），還能夠包括<hgroup>標籤，還能夠包括表格內容、標識、搜索表單、<nav>導航等。

<header> 標籤不能被放在 <footer>、<address> 或者另外一個 <header> 元素內部，但它不侷限於寫在網頁頭部，也能夠寫在網頁內容裏面。

二、<nav>

做爲頁面導航的連接組，其中的導航元素連接到其它頁面或者當前頁面的其它部分。在語義化方面更加精確，同時對於屏幕閱讀器等設備支持更好（簡而言之，就是導航欄）

 

三、<main>

在一個文檔中，不能出現一個以上的 <main> 元素。<main> 元素不能是如下元素的後代：<article>、<aside>、<footer>、<header> 或 <nav>。

四、<article>

比section具備更明確的語義，它表明一個獨立的、完整的相關內容塊，可獨立於頁面其它內容使用。例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等等。通常來講，article會有標題部分（一般包含在header內），有時也會包含footer。article能夠嵌套，內層的article對外層的article標籤有隸屬關係。例如，一篇博客的文章，能夠用article顯示，而後一些評論能夠以article的形式嵌入其中。

五、<section>

<section> 標籤訂義了文檔的節。好比章節、頭部、底部或者文檔的其餘區域，它表示一段專題性的內容，一般由內容及其標題組成。區塊

六、<aside>

用來裝載非正文的內容，被視爲頁面裏面一個單獨的部分。它包含的內容與頁面的主要內容是分開的，能夠被刪除，而不會影響到網頁的內容、章節或是頁面所要傳達的信息。例如廣告，成組的連接，側邊欄等等。（廣告，文章的連接，做者的簡介）

七、<footer>

眉腳通常會包含做者姓名、文檔版權信息、使用條款連接、聯繫信息等. （可多個）

八、<hgroup>

<hgroup> 標籤用於對網頁或區段（section）的標題進行組合。

九、<figure>、<figcaption>

<figure>用於對元素進行組合。通常用於圖片，文字組合。

<figcaption>是 figure的子元素，用於對figure的內容進行說明

 

 

 

十、<time>

用來表現時間或日期

 

 

datetime 屬性在全部瀏覽器中不會渲染任何特殊的效果。

 

十一、<datalist>

與<input>配合,實現相似於擁有輸入功能的下拉列表。<input> 元素的 list 屬性來綁定 <datalist> 元素的id。

 

 

十二、<details>

用於描述文檔或文檔某個部分的細節。

 <summary> 能夠爲<details>定義標題。標題可見，用戶點擊標題時，會顯示出 details中的內容。任何形式的內容都能被放在 <details> 標籤裏邊。

open屬性,規定 details中內容是否默承認見。<details open="open">

 

 

1三、<mark>

定義帶有記號的文本，在須要突出顯示文本時使用 <mark> 標籤。

 

1四、<progress>

定義進度條

 

 

1五、<meter>

度量尺

 

 

 

1六、註釋標籤

<ruby> 標記定義 註釋或音標

<rt> 標記定義對ruby的註釋內容文本

<rp> 告訴那些不支持 Ruby元素的瀏覽器如何去顯示

1七、<output>

<output> 標記定義一些輸出類型,計算表單結果配合oninput事件

<form oninput="res.value=no1.value*no2.value」 >

    <input type="text" name="no1">

    <input type="text" name="no2">

    <output name="res"></output>

</form>

1八、語義化標籤兼容IE8-6

1.能夠引用一個js插件解決HTML5語義化標籤在IE6-8不兼容問題。 

<!--[if lt IE 9]-->

<script src="路徑"></script>

<!--[endif]-->

2.HTML5在默認狀況下表現爲內聯元素，對這些元素進行佈局咱們須要利用CSS手工把它們轉爲塊狀元素方便佈局

<style>

   article, aside, canvas, details, figcaption, figure,main,

          footer, header, hgroup, menu, nav, section, summary

          {

                 display: block;

           }

</style>

下載地址：http://www.bootcdn.cn/html5shiv/

（複製連接-搜索-右鍵另存爲）

3、刪除的HTML標籤

純表現的元素：

basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：

frame，frameset，noframes；

產生混淆的元素：

acronym ，applet，isindex，dir。

從新定義的HTML標籤（語義化）

HTML元素	HTML5中的意義
<b>	表明內聯文本，一般是粗體，沒有傳遞表示重要的意思
<i>	表明內聯文本，一般是斜體，沒有傳遞表示重要的意思
<dd>	能夠同details與figure一同使用，定義包含文本，dialog也可用
<dt>	能夠同details與figure一同使用，彙總細節，dialog也可用
<hr>	表示主題結束，而不是水平線，雖然顯示相同
<menu>	從新定義用戶界面的菜單，配合commond或者menuitem使用
<small>	表示小字體，例如打印註釋或者法律條款
<strong>	表示重要性而不是強調符號

 

4、表單新增輸入類型

一、color  顏色選擇器（賣油漆）

二、email

email 輸入類型用於應該包含電郵地址的輸入字段。當提交表單時，會自動地對 email 字段的值進行驗證。（正則）

三、number  只能包含數字的輸入框

去掉number類型的上下箭頭。

 

四、tel  電話號碼，移動端會彈出數字鍵盤

 

五、url  網頁的URL，會在提交表單時對 url 字段的值自動進行驗證。

 

六、search 搜索

配合results="n"屬性

 

七、range

特定範圍內的數值選擇器，min、max、step( 步數 )、value

https://my.oschina.net/pauli/blog/270635

-----------------------------------------------------------------------------------------------------------------------

 

八、date、month、week  顯示日期

 

九、time  顯示時間

 

 

5、表單新增屬性

placeholder 佔位符

autofocus 獲取焦點

<input type="text" name="userName" placeholder="請輸入姓名" autofocus/>

<!-- 只有設置了name屬性的表單元素的值纔會提交到服務器-->

multiple 文件上傳多選或多個郵箱地址  

<!-- file :文件選擇表單控件-->

<input type="file" name="photo" multiple/>

 

required 驗證條件，必填項

<input type="text" name="phone" required >

</form>

Pattern 正則表達式  

輸入的內容必須匹配到指定正則 例如： pattern="\d{3}"

input的value值要知足pattern的屬性值的條件才能提交