html5新增標(biāo)簽大致如下:
創(chuàng)新互聯(lián)是一家專業(yè)提供禹王臺(tái)企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、做網(wǎng)站、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為禹王臺(tái)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
canvas 新元素
canvas ? ?標(biāo)簽定義圖形,比如圖表和其他圖像。該標(biāo)簽基于 JavaScript 的繪圖 API?
新多媒體元素
audio ? ?定義音頻內(nèi)容 ?
video ? ?定義視頻(video 或者 movie) ?
source ? ?定義多媒體資源 video 和 audio ?
embed ? ?定義嵌入的內(nèi)容,比如插件。 ?
track ? ?為諸如 video 和 audio 元素之類的媒介規(guī)定外部文本軌道。?
新表單元素
datalist ? ?定義選項(xiàng)列表。請與 input 元素配合使用該元素,來定義 input 可能的值。 ?
keygen ? ?規(guī)定用于表單的密鑰對生成器字段。 ?
output ? ?定義不同類型的輸出,比如腳本的輸出。?
新的語義和結(jié)構(gòu)元素
HTML5提供了新的元素來創(chuàng)建更好的頁面結(jié)構(gòu):
article ? ?定義頁面獨(dú)立的內(nèi)容區(qū)域。 ?
aside ? ?定義頁面的側(cè)邊欄內(nèi)容。 ?
bdi ? ?允許您設(shè)置一段文本,使其脫離其父元素的文本方向設(shè)置。 ?
command ? ?定義命令按鈕,比如單選按鈕、復(fù)選框或按鈕 ?
details ? ?用于描述文檔或文檔某個(gè)部分的細(xì)節(jié) ?
dialog ? ?定義對話框,比如提示框 ?
summary ? ?標(biāo)簽包含 details 元素的標(biāo)題 ?
figure ? ?規(guī)定獨(dú)立的流內(nèi)容(圖像、圖表、照片、代碼等等)。 ?
figcaption ? ?定義 figure 元素的標(biāo)題 ?
footer ? ?定義 section 或 document 的頁腳。 ?
header ? ?定義了文檔的頭部區(qū)域 ?
mark ? ?定義帶有記號的文本。 ?
meter ? ?定義度量衡。僅用于已知最大和最小值的度量。 ?
nav ? ?定義導(dǎo)航鏈接的部分。 ?
progress ? ?定義任何類型的任務(wù)的進(jìn)度。 ?
ruby ? ?定義 ruby 注釋(中文注音或字符)。 ?
rt ? ?定義字符(中文注音或字符)的解釋或發(fā)音。 ?
rp ? ?在 ruby 注釋中使用,定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。 ?
section ? ?定義文檔中的節(jié)(section、區(qū)段)。 ?
time ? ?定義日期或時(shí)間。 ?
wbr ? ?規(guī)定在文本中的何處適合添加換行符。 ?
初學(xué)者建議多訪問下菜鳥教程:網(wǎng)頁鏈接,都是比較全面的基礎(chǔ)知識(shí),可以看做編程詞典,即使老司機(jī)也經(jīng)常去查一些資料。
article 定義頁面獨(dú)立的內(nèi)容區(qū)域。
aside 定義頁面的側(cè)邊欄內(nèi)容。
bdi 允許您設(shè)置一段文本,使其脫離其父元素的文本方向設(shè)置。
command 定義命令按鈕,比如單選按鈕、復(fù)選框或按鈕
details 用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)
dialog 定義對話框,比如提示框
summary 標(biāo)簽包含 details 元素的標(biāo)題
figure 規(guī)定獨(dú)立的流內(nèi)容(圖像、圖表、照片、代碼等等)。
figcaption 定義 figure 元素的標(biāo)題
footer 定義 section 或 document 的頁腳。
header 定義了文檔的頭部區(qū)域
mark 定義帶有記號的文本。
html5新增標(biāo)簽如下:
1、結(jié)構(gòu)性標(biāo)記結(jié)構(gòu)性標(biāo)記主要用來對頁面結(jié)構(gòu)進(jìn)行劃分,就像在設(shè)計(jì)網(wǎng)頁時(shí)將頁面分為導(dǎo)航、內(nèi)容部分、頁腳等,確保HTML文檔的完整性。
2、多媒體標(biāo)記多媒體標(biāo)記主要解決了以往通過Flash等進(jìn)行視頻的一些展示,新增的標(biāo)記使HTML功能變得更加強(qiáng)大了。
3、表單標(biāo)記表單標(biāo)記主要用于功能性的內(nèi)容表達(dá),會(huì)有一定的內(nèi)容和數(shù)據(jù)的關(guān)聯(lián)。
html5的意義及應(yīng)用。
在HTML頁面中,帶有“ ”符號的元素被稱為HTML標(biāo)簽,如上面提到的 HTML、head、body都是HTML標(biāo)簽。所謂標(biāo)簽就是放在“ ” 標(biāo)簽符中表示某個(gè)功能的編碼命令,稱為HTML標(biāo)簽。
該語法中“標(biāo)簽名”表示該標(biāo)簽的作用開始,一般稱為“開始標(biāo)簽(start tag)”,“/標(biāo)簽名” 表示該標(biāo)簽的作用結(jié)束,一般稱為“結(jié)束標(biāo)簽(end tag)”。和開始標(biāo)簽相比,結(jié)束標(biāo)簽只是在前面加了一個(gè)關(guān)閉符“/”。
新增的結(jié)構(gòu)標(biāo)簽:
1、header元素
表示頁面中一個(gè)區(qū)塊或真?zhèn)€頁面的標(biāo)題。
2、內(nèi)hgroup元素
表示對真?zhèn)€頁面或頁面中的容一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。
3、article元素
表示頁面中一塊與上下文不相關(guān)的獨(dú)立內(nèi)容。比如一篇文章。
4、aside元素
表示article元素內(nèi)容之外的、與article元素內(nèi)容相關(guān)的輔助信息。
5、footer元素
表示整個(gè)頁面或頁面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來說,他會(huì)包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息。
HTML5新規(guī)則:
新特性應(yīng)該基于 HTML、CSS、DOM 以及 JavaScript。 減少對外部插件的需求(比如 Flash),更優(yōu)秀的錯(cuò)誤處理,更多取代腳本的標(biāo)記,HTML5 應(yīng)該獨(dú)立于設(shè)備開發(fā)進(jìn)程應(yīng)對公眾透明 ;
HTML5 新特性:
新的特殊內(nèi)容元素,比如 article、footer等,新的表單控件,比如 calendar、date、time、email、url、search;用于媒介回放的 video 和 audio 元素;用于繪畫的 canvas 元素
對本地離線存儲(chǔ)的更好的支持。
一、Html的基本結(jié)構(gòu):
!DOCTYPE html
html
head
meta ?charset=utf-8"
title/title
/head
body
網(wǎng)頁的文本、圖片等信息;
/body
/html
二、Head部分:用于表示網(wǎng)頁的元數(shù)據(jù)即描述網(wǎng)頁的基本信息
其常用標(biāo)簽及屬性有:
1、title標(biāo)簽:瀏覽器標(biāo)簽頁顯示的標(biāo)題
2、meta標(biāo)簽:其常用屬性
①charset:設(shè)置文檔的字符集編碼格式。HTML5中設(shè)置字符集編碼:meta charset="UTF-8"
常見的字符集編碼格式:
a.GB-2312:國標(biāo)碼,簡體中文
b.GBK:擴(kuò)展的國標(biāo)碼
c.UTF-8:萬國碼 Unicode 常用
②http-equiv屬性:將我們的信息寫給瀏覽器看,讓瀏覽器按照這里面的要求執(zhí)行,可選屬性值:Content-Type(文檔類型)?refresh(網(wǎng)頁定時(shí)刷新)?set-cookie(設(shè)置瀏覽器cookie緩存) 需要配合content屬性使用。(http-equiv屬性只是表明需要設(shè)置哪一部分,具體的設(shè)置內(nèi)容,放到content屬性中)
③name屬性:使用方法同“http-equiv”。將我們的信息寫給搜索引擎看
常用且需要掌握的屬性值:author(作者)?keywords(網(wǎng)頁關(guān)鍵字)?description(網(wǎng)頁描述) 這兩個(gè)屬性設(shè)置,網(wǎng)頁必不可少。
3、link標(biāo)簽:鏈接網(wǎng)頁圖標(biāo)(title前的小logo),其常用屬性有:
①rel屬性:聲明鏈接文件的類型,此處選icon
②type屬性:可以省略
③href屬性:表示圖片的路徑地址
三、body部分:網(wǎng)頁的文本、圖片等信息
標(biāo)簽的分類:
塊級標(biāo)簽:顯示為塊,前后隔一行(自動(dòng)換行)
行級標(biāo)簽:按行從左往右逐一顯示。
1、 常見的塊級標(biāo)簽:
①h1/h1......h6h6:標(biāo)題標(biāo)簽,自動(dòng)加粗,h1最大,h6最小。
②hr/:水平線標(biāo)簽,添加一條水平線。
③p/p:段落標(biāo)簽,
④br/:換行標(biāo)簽,
⑤blockquote//blockquote:引用標(biāo)簽,cite屬性,表明引用的來源,一般引用網(wǎng)址
瀏覽器默認(rèn)首行縮進(jìn)。
⑥pre/pre:預(yù)格式標(biāo)簽,用于重載代碼。瀏覽器默認(rèn)顯示樣式:1、顯示為等寬字體。 2、代碼中的換行、
空格等元素能在瀏覽器中顯示。
【補(bǔ)充】html 文件中空格的表示:nbsp;
2、 基于布局的塊級標(biāo)簽
列表:無序列表、有序列表、定義列表
①有序列表:ol/ol 列表項(xiàng):li/li
②無序列表:ul/ul 列表項(xiàng):li/li
③定義列表(實(shí)現(xiàn)圖文混排):dl/dl
列表標(biāo)題:dt一般只有一項(xiàng)/dt
列表描述項(xiàng):dd可以有很多項(xiàng)/dd
3、組合標(biāo)簽:figure/figure用于顯示圖片及圖片標(biāo)題
他有兩個(gè)子標(biāo)簽:img /圖片
figcaption/figcaption圖片的標(biāo)題
例如:figure
img src="img/EZ.jpg" height="20%" width="20%" alt="探險(xiǎn)家"/
figcaption探險(xiǎn)家 伊澤瑞爾/figcaption
/figure
4、分區(qū)標(biāo)簽:div/div
5、常見的行級標(biāo)簽
1span(文本):無實(shí)際意義,用于包裹某部分文字,修改特定樣式,例如:
這是span style="color: red;font-size: 36px;"span/span中的文字
img(圖片):其常用屬性:①src:表示引用圖片的地址。
路徑地址的寫法:相對路徑:以當(dāng)前文件為最準(zhǔn),去尋找圖片地址
a、與文件處于同一層的圖片,直接寫圖片名
b、圖片在當(dāng)前文件下一層:文件名/圖片名
c、圖片在當(dāng)前文件上一層:../圖片名
絕對路徑:盤符:/文件夾/圖片名,但 是嚴(yán)禁使用
圖片網(wǎng)址:網(wǎng)絡(luò)上的圖片鏈接,但是一般不用
②height和width:圖片的高度和寬度??梢杂肅SS樣式代替
③title:圖片標(biāo)。當(dāng)鼠標(biāo)指上之后顯示的文字
④alt:當(dāng)圖片無法顯示的時(shí)候,顯示的文字
2em(傾斜強(qiáng)調(diào))
3strong(加粗強(qiáng)調(diào))
4b(加粗)
5i(傾斜)
Strong、em、b、i的區(qū)別
1、Strong、em都表示強(qiáng)調(diào),Strong為粗體,em為斜體,而Strong的強(qiáng)調(diào) 程度逗比em高
2、Strong和b都能加粗,em和i都能傾斜,,但是Strong和em多了一層強(qiáng)調(diào)的語義 。H5要求標(biāo)簽盡可能實(shí)現(xiàn)語義化。
6q(短引用)
7small/big(縮小/放大字體):small和big分別是縮小和擴(kuò)大字體,都可以多層嵌套直至上限或下限
8a(超鏈接)
1、href:超鏈接的路徑,可以是網(wǎng)絡(luò)鏈接,也可以是本地文件。
2、target:跳轉(zhuǎn)頁面打開的位置。_self自身頁面,_blank新頁面。
3、title:鼠標(biāo)指在超鏈接上顯示的名稱。
4、Rel(被鏈接是當(dāng)前的前/后一篇):指定被鏈接文檔與當(dāng)前文檔的關(guān)系,搜索引擎 會(huì)利用該屬性 獲取更多的有關(guān)鏈接的信息:
rel="prev"被鏈接文檔是當(dāng)前文檔的前一篇文 檔,
rel="next"被鏈接文檔是當(dāng)前文檔的后一篇文檔,
rel="icon"被鏈接文檔是當(dāng)前文檔的圖標(biāo)
rel="stylesheet"被鏈接文檔是當(dāng)前文檔的樣式表
5、Rev(當(dāng)前是被鏈接的前/后一篇)
錨鏈接:
①本頁面錨鏈接:a、設(shè)置錨點(diǎn):a name="top"/a
b、跳轉(zhuǎn)錨點(diǎn):#name名
①頁面間錨鏈接:a、在即將跳轉(zhuǎn)頁面的指定位置設(shè)置錨點(diǎn)
b、跳轉(zhuǎn)錨點(diǎn):頁面地址.html#name名
a href="02_常見的塊級標(biāo)簽.html#Hbuilder"頁面間錨鏈接/abr/
功能性鏈接: mailto用于給指定郵箱發(fā)送郵件
file:///e:/aaa.png打開本地文件
tencent://message/?uin=1315618220 給指定QQ發(fā)送息
9s標(biāo)簽,有誤文本:刪除線
s這是S標(biāo)簽中的文字/sbr /
10cite標(biāo)簽:瀏覽器顯示為傾斜,常用于書、畫作、作品的引用
cite這是cite中的文本/citebr /
11code:計(jì)算機(jī)代碼,不保留代碼格式
pre
code/code
/pre
12bdo:表示文本方向,屬性:dir="ltr"表示從左往右,dir="rtl"表示從右往左
bdo dir="rtl"1234567/bdobr /
kbd:表示需要用戶用鍵盤輸入的內(nèi)容,瀏覽器顯示為等寬字體
請輸入“kbdEsc/kbd”推遲系統(tǒng)br /
13sup:上標(biāo)文本,sub:下標(biāo)文本
xsub6/subbr /
? copy; 空格 nbsp;
? copy; 空格 nbsp;br /
14u:下劃線
u這是下劃線/ubr /
mark:高亮或標(biāo)記文本,瀏覽器顯示為黃色背景
markmark/markbr /
文章名稱:html5頁面標(biāo)簽,html5圖像標(biāo)簽
鏈接分享:http://chinadenli.net/article16/dsdehdg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、電子商務(wù)、品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、微信小程序、移動(dòng)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)