h5及c3新增的一些內容

H5新增內容

1.H5新增語義化標籤

　　標籤語義化：在合適的地方放合適的標籤，利於SEO優化

　　

    <!-- 頭部 -->
    <header></header>
    <!-- 導航 -->
    <nav></nav>
    <!-- 網頁的主體內容 -->
    <main>
        <!-- 有聯繫的內容組 -->
        <section>
            <!-- 側邊欄 -->
            <aside></aside>
            <!-- 獨立完整的內容 -->
            <article></article>
        </section>
    </main>
    <!-- 底部 -->
    <footer></footer>

 

　　 main 標籤的語義化特性：能夠使輔助技術快速定位到頁面的主體。有些頁面中有 「跳轉到主要內容」 的連接，使用main標籤能夠使輔助設備自動得到這個功能。

　　article 標籤的語義化特性：是一個分段標籤，用於呈現獨立及完整的內容。這個標籤適用於博客入口、論壇帖子或者新聞文章。

　　section 標籤的語義化特性：用於對與主題相關的內容進行分組。它和article能夠根據須要嵌套着使用。舉個例子：若是一本書是一個article的話，那麼每一個章節就是section。

　　header 標籤的語義化特性：能夠使輔助技術快速定位到它的內容。

　　nav 標籤的語義化特性：用於呈現頁面中的主導航連接。它能夠使屏幕閱讀器快速識別頁面中的導航信息。

　　footer 標籤的語義化特性：能夠使輔助設備快速定位到它。它位於頁面底部，用於呈現版權信息或者相關文檔連接。

2.新增表單類型

　　email，tel，url，number，search（搜索框），range（自由拖動滑塊），color，time，date（日期，年月日），datatime（日期時間），month，week（年周）

3.表單元素

　　<datalist>數據列表 與input配合使用

4.表單屬性

　　autofocus自動獲取焦點

 

　　placeholder提示文字

 

　　required 必填的

 

　　autocomplete=」on」 自動完成，默認爲on開啓，關閉則爲off

 

　　multiple 用於上傳多個文件

 

　　pattern=」」 自定義驗證，直接寫正則表達式

 

　　form=」須要提交至那個表單的ID」 指定表單所屬的表單域

 

　　novalidate 關閉表單的驗證功能 加給form標籤。

5.表單事件

 

　　oninput:當用戶輸入時觸發

 

　　oninvalid:當驗證不經過時觸發，一般用於設置驗證不經過時的提示文字

6.多媒體標籤

　　 audio　　 音頻標籤

 

　　video　　  視頻標籤

 

　　canvas　　表示位圖區域

 

　　source　　 爲video和audio提供數據源

 

　　track 　　   爲video和audio指定字母

 

　　svg　　　　定義矢量圖

 

 

　　音頻、視頻對應屬性：

　　controls控制條 

　　autoplay自動播放 

　　

 

C3新增內容

　　 顏色：rgba

　　文字陰影：text-shadow

　　邊框：圓角（border-radius）、邊框陰影（box-shadow）

　　盒子模型：box-sizing

　　背景：設置背景圖片的尺寸（background-size）、設置背景圖片的原點（background-origin）、設置背景圖片的裁切區（background-clip）、以「，」分隔能夠設置多背景，用於自適應佈局

　　漸變：linear-gradient、radial-gradient

　　過渡：transition

　　自定義動畫

　　在c3中惟一引入的僞元素是：selection

　　2D轉換：transform：translate（x，y）、rotate（x，y）、skew（x，y）、scale（x，y）

　　3D轉換同上多了z軸

c3新增僞類

　　：first-of-type　　選擇屬於其父元素的首個元素

　　：last-of-type　　選擇屬於其父元素的最後一個元素

　　：only-of-type　　選擇屬於其父元素惟一的一個元素

　　：only-child　　選擇屬於其父元素的惟一子元素的每一個元素

　　：nth-child（n）　　選擇屬於父元素的第n個子元素

　　：enabled　　表單控件的開啓屬性

　　：disabled　　表單控件的禁用屬性

　　：checked　　單選或複選框的選中狀態