HTML5簡介與標簽變化
標簽: html5
HTML5在2014年就定稿了!!
HTML5≈html+css+javascript+api
DOCTYPE聲明
定義和用法 –
1、必須在html文檔的第一行
2、html:5按下tab鍵/!+ctrl+e—>生成html5的標準形式
3、不是html的標簽
HTML5標簽變化
DTD – 文檔類型定義
1、DTD:可定義合法的xml文檔構建模塊,它使用一系列的合法的元素定義文檔的結構
2、在html中:DTD規定了標記語言的規則,這樣瀏覽器就能正確呈現器內容
3、html5:不在給予sgml,所以不需要再次引用dtd
(xml:擴充標記語言)
HTM DTD約束:
復制代碼
1 //用于XHTML 4.0 的嚴格型
2 !DOCTYPE HTMLPUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”
3
4 //用于XHTML 4.0 的過渡型
5 !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”
6
7 //用于XHTML 1.0 的嚴格型
8 !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
9
10 //用于XHTML 1.0 的過渡型
11 !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
新增的標簽
1、結構標簽
2、多媒體標簽
3、web應用標簽
4、其他標簽
結構標簽(塊狀元素) – 有意義的DIV
1、article – 標記定義一篇文章
2、header – 標記定義一個頁面或者一個區域的頭部
3、nav – 標記定義導航鏈接
4、section – 標記定義一個區域 – 用處比較大,因為網頁中到處都是一個一個的區域
5、aside – 標記定義頁面內容的側邊欄
6、hgroup – 標記定義一個文件中的一個區塊的相關信息
7、figure – 標記定義一組媒體內容以及他們的標記 – 包裹的視頻、音頻表示一種語義
8、figcaption – 標記定義figure元素的標題
9、footer – 標記定義一個頁面過著一個區域的底部
10、dialog – 標記定義一個對話框(會話框)類似于微信
結構標簽補充
1、header/section/aside/article/footer這五個大標簽不要嵌套在里面,他們作用大標簽存在于外面
2、header/section/footer – 這三個級別最大> aside/article/figure/hgroup/nav相對于前面三個標簽作為內層
3、以上前面三個和后面的五個不能互相嵌套
4、緊接著>div/figcaption這兩個是一個級別的
多媒體標簽
1、video – 標記定義一個視頻
2、audio – 標記定義一個音頻
3、source – 標記定義媒體資源
audio – 標記定義一個音頻內容
1、音頻屬性:
autoplay(自動播放)
controls(控件播放)
loop(循環;值為-1時,無線循環)
src(資源路徑)
controls(出現控制器)
2、音頻格式:MP3、ogg、wav…
video – 標記定義一個視頻
1、視頻屬性:
autoplay(自動播放)
controls(控件播放)
loop(循環;值為-1時,無線循環)
src(資源路徑)
controls(出現控制器)
height(設置播放器的高度)
weight(設置播放器的寬度)
canvas標簽 繪制圖像 JavaScript – 標記定義圖片使用
emed – 在html4中是存在的,但是備用標簽,幾乎不適用而且不被w3c認可,但是在html5中轉正了
1、標簽定義外部的可交互的內容或者插件,比如flash動畫,定義一個容器,用來嵌入外部的應用
2、是html5中新標簽(重新定義的)
3、可以插入flash動畫也可以插入image圖片
標簽的意義
多媒體標簽的出現意味著多媒體的發展以及支持,不使用插件的情況下即可隨機操作多媒體,極大的提高了用戶的體驗。
狀態標簽 – web應用標簽
meter – 狀態標簽(實時狀態顯示:氣壓、氣溫)
meter標簽定義度量衡,僅用于已知最大和最小的度量
例如:磁盤使用情況、查詢結果相關等
注意:meter不能作為一個進度條來使用!
是HTML5的新標簽
meter屬性
high(界定為高的范圍)
low(界定為低的范圍)
max(范圍內最大值)
min(范圍內最小值)
optimum(最優值)
value(實際值)
progress – 狀態標簽(任務狀態過程:安裝、加載)
定義運行中的進度(過程)
可以使用此標簽顯示
JavaScript(腳本語言)中耗費時間函數的進度
瀏覽器兼容性
1、meter – firefox、chrome、opera、以及safari6支持
2、progress – ie10+、firefox、opera、chrome、以及safari6支持
列表標簽 – web應用標簽
1、datalist – 為input標記定義一個下拉列表,配合option
兼容性:chrome、firefox、ie10以上及更高的版本;
2、details – 標記定義元素的詳細內容,配合summary(內容的題目)
兼容性:chrome、firefox、safari6以上及更高的版本;
注釋標簽 – web應用標簽
1、ruby – 標記定義注釋或者音標
2、rt – 標記定義對ruby的注釋內容文本
3、rp – 告訴那些不支持ruby元素的瀏覽器如何去顯示
rp標簽不可以放在rt標簽內
其他標簽
1、mark – 標記定義有標記文本(黃色選中狀態)
兼容性:ie9+、firefox、chrome、opera、safari
2、output – 標記定義一些輸出類型,計算表單配合oninput時間
HTML5刪除標簽 – 分為三類
1、純表現的元素: basefont、big、center、font、s、strike、tt、u(用css表現)
2、對可用性產生負面影響的元素:frame、frameset、noframes框架元素 (iframe網頁中的網頁)
3、產生混淆的元素:acronym、applet、isindex、dir
重新定義的標簽
顯示不變,只是表達的含義上進行重新定義的標簽
1、i/b(斜體/粗體;代表內聯標簽;失去表達重要的意思)
2、dd/dt(可以和details,figure,dialog一起使用,定義包含文本/匯總細節)
3、hr(不僅表示水平線,還可以表示主題結束)
4、menu(重新定義用戶界面的菜單,配合conmand或者menuitem使用)
5、samll(表示小字體;用途例如:打印注釋,法律條款)
6、strong(表示重要性胃不是強調符號)
文章中用到的部分標簽屬性的代碼與注釋(新人)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
</head>
<body>
<div>
<label>完成任務80%:</label>
<progress max="100" value="80" />
<!-- 任務過程:安裝加載 -->
</div>
<hr/>
<div>
<label>小明的成績是否在60~80分之間:</label><br/>
<meter value="70" max="100" min="0" high="80" low="60" optimum="75"></meter>
<!-- 實時狀態顯示:氣壓,溫度等 當前值;最大;最小;能到達的最好;能達到的最低;最優值。狀態標簽 -->
</div>
<hr/>
<div>
<label>小明的成績打敗了60%的學生:</label><br/>
<meter value="60" max="100" min="0%"></meter>
</div>
<hr/>
<div>
<input placeholder="請選擇學習的語言" list="yy"/>
<!-- placeholder文本框提示信息,list引用數據列表與datalist id必須一樣 -->
<datalist id="yy">
<!-- 下拉列表標簽,出現文本域,可以填寫沒有的選項 -->
<option value="JAVA">JAVA</option>
<option value="C++">C++</option>
<option value="JavaScript">JavaScript</option>
<option value=".NET">.NET</option>
<option value="C#">C#</option>
</datalist>
</div>
<hr/>
<div>
<details open="open">
<summary>早發白帝城</summary>
<p>朝辭白帝彩云間,千里江陵一日還。</p>
<p>兩岸猿聲啼不住,輕舟已過萬重山。</p>
<!-- 標記定義元素的詳細內容,summary詳細內容的名字 -->
</div>
<hr/>
<div>
<p>
<ruby>魑<rt>chi</rt></ruby>
<ruby>魅<rt>mei</rt></ruby>
<ruby>魍<rt>wang</rt></ruby>
<ruby>魎<rt>liang</rt></ruby>
<!-- ruby注釋或音標,rt是對ruby的注釋內容文本顯示 -->
</p>
<p>
<ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
<ruby>魅<rp>(</rp><rt>mei</rt><rp>)</rp></ruby>
<ruby>魍<rp>(</rp><rt>wang</rt><rp>)</rp></ruby>
<ruby>魎<rp>(</rp><rt>liang</rt><rp>)</rp></ruby>
<!-- rp是告訴不兼容ruby的瀏覽器怎么顯示,rp不可以放在rt里面。 -->
</p>
</div>
<hr/>
<div>
<P>你是<mark>猴子</mark>派來的救兵嗎?</P>
<!-- make標記文本,被標記為黃色選中狀態 -->
</div>
</body>
</html>
效果:
智能推薦
Html5 標簽
1.新的文檔類型聲明(DTD) HTML 5的DTD聲明為: 都是正確的,因為HTML語法是不區分大小寫的。 在編寫HTML5文檔時,要求指定文檔類型,以確保瀏覽器能在HTML5的標準模式下進行渲染。 2.新增的HTML5標簽 2.1 新增的結構標簽 結構標簽:(塊狀元素) 有意義的div 結構標簽 說明 <article> 標記定義:一篇文章 <header> 標記定義:...
HTML5 屬性變化
Input email url number range Date picker search color tel 表單屬性 autocomplete autofocus multiple placehold...
HTML5的變化
1、HTML5的變化 1.1 HTML5推出的理由 推出的緣由和目標: 目前web緩存存在一些問題,比如兼容性問題,同樣的頁面,在不同的瀏覽器上顯示效果不一樣,那么開發人員需要做很多額外的工作去解決這一問題,需要花費大把的時間在這上面:一些特殊的權限沒有開發給開發人員,比如:定位權限、拉起照相機拍照權限、動畫以及繪畫,那么H5推出就是為了解決這一系列問題。 H5解決了什么問題? (1)開發了一些特...
HTML5 <template>標簽元素簡介
HTML5 template元素先見后認識 元素,基本上可以確定是2013年才出現的。干嘛用的呢,顧名思意,就是用來聲明是“模板元素”。 目前,我們在HTML中嵌入模板HTML,往往是類似這樣的寫法: 實際上,并不存在type=”text/template”這樣的標準寫法,<template>元素的出現旨在讓HTML模板HTML變得更加標...
HTML5 基礎(2)—— 網頁布局的改變、標簽屬性的變化
一、網頁布局的改變 傳統布局 HTML5布局 HTML5布局的有點 使用更多語義化的標簽代替大量無意義的div可以網頁的質量 減少以前用于CSS調用的class和id屬性,減少代碼量 對搜索引擎的友好 HTML5標簽簡單兼容 在CSS中這樣寫,可以當瀏覽器不支持HTML5標簽的時候也知道該標簽代表的是塊級元素。 二、標簽屬性的變化 (一)input標簽新增類型 email url number r...
猜你喜歡
html5 Audio標簽
javascript動態創建audio標簽 在頁面中添加audio元素的方法主要是兩種,一種是在html中加入audio代碼,可以加入一些屬性(autoplay,preload)等,這些在之前的文章已經說過了。另外一種是js動態加載進來的。代碼如下: var audio=document.creatElement(“audio”); audio.src=”aud...
freemarker + ItextRender 根據模板生成PDF文件
1. 制作模板 2. 獲取模板,并將所獲取的數據加載生成html文件 2. 生成PDF文件 其中由兩個地方需要注意,都是關于獲取文件路徑的問題,由于項目部署的時候是打包成jar包形式,所以在開發過程中時直接安照傳統的獲取方法沒有一點文件,但是當打包后部署,總是出錯。于是參考網上文章,先將文件讀出來到項目的臨時目錄下,然后再按正常方式加載該臨時文件; 還有一個問題至今沒有解決,就是關于生成PDF文件...
電腦空間不夠了?教你一個小秒招快速清理 Docker 占用的磁盤空間!
Docker 很占用空間,每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時,我們的磁盤空間會被大量占用。 如果你也被這個問題所困擾,咱們就一起看一下 Docker 是如何使用磁盤空間的,以及如何回收。 docker 占用的空間可以通過下面的命令查看: TYPE 列出了docker 使用磁盤的 4 種類型: Images:所有鏡像占用的空間,包括拉取下來的鏡像,和本地構建的。 Con...