手工SEO

手工SEO首頁 帝國教程 正文

Html5學習筆記第二課:html標簽的改變(上)

手工SEO 2020-02-24 16:46:07 帝國教程 52℃ 手工SEO

一、新的文檔類型生命(DTD)
    
    通常我們做網站是在網頁的第一行是這樣一段代碼:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

這是html4的DTD聲明,DTD是用來聲明瀏覽器渲染方式,各種瀏覽器的渲染有差異性,主要有兩個差異性,其一是css渲染效果的不同,其二是對javascript支持不同 。各種瀏覽器的渲染不同,我們可以稱為怪異模式。而符合w3c標準的模式就是標準模式。我們就是用上面的DTD聲明,來告訴瀏覽器我們的代碼是符合標準模式,如果沒有這個聲明,代碼就是怪異模式。

而html5的DTD聲明就比較簡單了:
<!doctype html>  
很短了,并且html5不區分大小寫。



二、新增的HTML5標簽
1、結構標簽:(塊狀元素)有意義的div
<article> 標記定義一篇文章
<header> 標記定義一個頁面或一個區域的頭部
<nav>   標記定義導航鏈接
<section>  標記定義一個區域
<aside>    標記定義內容部分的側邊欄
<hgroup>   標記定文件中一個區塊的相關信息,h1——h6
<figure>    標記定義一組媒體內容以及他們的標題
<figcaption>  標簽定義figure元素的標題
<footer>     標記定義一個頁面或一個區域的底部
<dialog>     標記定義一個對話框(會話框)類似微信

新的結構標簽有利于網頁布局和提升對搜索引擎的友好。


2、多媒體交互標簽
<video>   標記定義一個視頻
<audio>   標記定義音頻內容
<source>   標記定義媒體資源列表

<canvas>   標記定義圖片,用來在瀏覽器中畫圖的,并且可以用于小游戲什么的,效率比flash高。

<embed>   標記定義外部的可交互的內容或插件 比如flash

Html5的多媒體標簽的出現,意味著多媒體的發展以及不使用插件的情況下即可操作多媒體文件,極大的提升了用戶體驗。



3、web應用標簽
<menu>      命令列表
<menuitem>   menu命令列表標簽FF(嵌入系統)
<command>   menu標記定義一個命令按鈕

<meter>      狀態標簽(實時狀態顯示:氣壓、氣溫)C、O
<progress>    狀態標簽(任務過程:安裝、加載)C、F、O

<datalist>     為input標記定義一個下拉列表,配合option  F、O
<details>      標記定義一個元素的詳細內容,配合dt、dd  C

4、注釋標簽
<ruby>    標記定義注釋或音標
<rp>      告訴那些不支持Ruby元素的瀏覽器如何去顯示
<rt>       標記定義對ruby的注釋內容文本

5、其他標簽
<keygen>    標記定義表單里一個生成的鍵值(加密信息傳送)O/F
<mark>      標記定義有標記的文本(黃色選中狀態)
<output>     標記定義一些輸出類型,計算表單結果配合oninput事件

<time>    標記定義一個日期/時間,目前所有瀏覽器都不支持   


三、刪除的HTML標簽
1、純表現的元素:basefont ,big ,cneter ,font ,s ,tt ,u ;

2、對可用性產生負面影響的元素:frame ,frameset  , noframes


3、產生混淆的元素:acronym ,applet ,isindex ,dir


四、重新定義的HTML標簽
<b>  代表內聯文本,通常是粗體,沒有傳遞重要的意思
<i>   代表內聯文本,通常是斜體 ,沒有傳遞重要的意思。
<dd>  可以同details與figure一同使用,定義包含文本,dialog也可用
<dt>  可以同details與figure一同使用,匯總細節,dialog也可用
<hr>   表示主題結束,而不是水平線,雖然顯示相同
<menu>   重新定義用戶界面的菜單,配合commond或menuitem
<small>   表示小字體,例如打印注釋或者法律條款
<strong>   表示重要性而不是強調符號


五、嶄新的頁面布局
傳統的頁面布局很多的div,頁面復雜。如下圖:

Html5學習筆記第二課:html標簽的改變(上)




Html5的頁面布局,簡單明了,如下圖:

Html5學習筆記第二課:html標簽的改變(上)

上一篇:帝國cms內容頁圖片自動獲取alt和title的方法

下一篇:網站備案號被注銷的原因

相關文章

網站分類
標簽列表
德甲排行榜 体育彩票浙江20选5 分分彩工具 贵州捉鸡麻将下载安 大发pk10七码技巧 微信麻将作弊 二肖中特期期准 麟宝股票配资 20选8稳赚技巧大全 微乐麻将赢牌技巧 吉林快三直播开奖 欧洲超级杯 琼崖海南麻将怎么打 快3今天推荐豹 河北十一选五前三 山东麻将规则和牌 全民玩捕鱼官方