溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
原來(lái)學(xué)習(xí)的HTML5&CSS3只是知道了一些Html5獨(dú)有的標(biāo)簽和CSS3新添加的特性，我以為這就是HTML5了。后來(lái)當(dāng)我和教研主任聊天中發(fā)現(xiàn)原來(lái)我所學(xué)習(xí)的方法——利用表格布局原來(lái)是幾年前的老套路了。后來(lái)在我不斷學(xué)習(xí)的時(shí)候發(fā)現(xiàn)，表格布局并不適用于移動(dòng)端，而且還有很多弊端，所以思考一下，我應(yīng)該重新認(rèn)識(shí)一下HTML5了。
術(shù)語(yǔ)HTML5，指一組共同構(gòu)成了未來(lái)開(kāi)放式網(wǎng)絡(luò)平臺(tái)的技術(shù)，也指HTML5規(guī)范。
HTML5規(guī)范是一個(gè)獨(dú)特的單元，它涵蓋了有限的功能集合，其中包括諸如新的HTML標(biāo)簽(<video>、<audio>、<canvas>)，HTML是用于互聯(lián)網(wǎng)上創(chuàng)建頁(yè)面的標(biāo)準(zhǔn)語(yǔ)言，HTML5是最新的版本。
一個(gè)基本的HTML頁(yè)面分成幾個(gè)部分，通常有<head>、<body>，新的HTML5規(guī)范增加了一些新的部分，例如<nav>、<article>、<header>、<footer>……。給我留下深刻印象的是，HTML4滿篇幅的div標(biāo)記讓人難以捉摸，HTML5盡量不使用無(wú)語(yǔ)義的容器，讓每個(gè)標(biāo)記都有其獨(dú)特的含義和功能。
<!DOCTYPE html> <html > <head> <meta charset="utf-8" /> <title>用于瀏覽器的標(biāo)簽頁(yè)的標(biāo)題</title> </head> <body> </body> </html>
用于聲明頁(yè)面為HTML5文檔。<html>這是標(biāo)記，meta元素用于說(shuō)明字符編碼。每個(gè)HTML頁(yè)面都需要頭部（<head>）和身體（<body>）這是最基礎(chǔ)的HTML5的頁(yè)面，一般在<head>標(biāo)簽中，通常提供給搜索引擎的信息和樣式表，也就是互相搭配的CSS3，還有可能加載JavaScript，不過(guò)一般這些都放在</body>標(biāo)簽結(jié)束之前了，因?yàn)槟阌袝r(shí)不能確保你的頁(yè)面一定會(huì)加載完成。
接著我們來(lái)仔細(xì)說(shuō)一下各個(gè)標(biāo)簽。
<title>標(biāo)簽，一般放在<head>標(biāo)簽中meta元素后，每個(gè)HTML頁(yè)面都必須有一個(gè)標(biāo)題。標(biāo)題都要做到簡(jiǎn)短、描述性、唯一。標(biāo)題不能有任何格式。標(biāo)題的使用對(duì)于搜索引擎的索引起到了很大的作用，我們應(yīng)該去足夠重視title元素。搜索引擎會(huì)根據(jù)60個(gè)字符為基準(zhǔn)進(jìn)行截取，標(biāo)題的話，建議把核心內(nèi)容放到前60個(gè)，為了用戶更好地體驗(yàn)。
HTML支持分級(jí)標(biāo)題h2-h7，數(shù)字越大，級(jí)別越低。最大的標(biāo)題h2，文字顯示最大，而且會(huì)自動(dòng)換一行，h3位子標(biāo)題，以此類推，為了方便不同文章的不同標(biāo)題。HTML5新的標(biāo)記有<hgroup></hgroup>用來(lái)標(biāo)記連續(xù)的幾層標(biāo)題，用來(lái)對(duì)瀏覽器說(shuō)明文章結(jié)構(gòu)的排列。
表示一個(gè)段落使用標(biāo)記<p>、</p>。在標(biāo)記中放入你的段落，段落會(huì)獨(dú)立出來(lái)，也就是段落前后會(huì)換一行。
<br>就是來(lái)用作換行，有時(shí)候你會(huì)見(jiàn)到<br />它沒(méi)有結(jié)束的標(biāo)記，所以表示它是自閉的，它本身就代表?yè)Q行所以不存在用一個(gè)結(jié)束的標(biāo)記來(lái)表示這是一個(gè)換行，在HTML5中，你可以直接<br>這樣使用。
使用header元素來(lái)為頁(yè)面的一塊包含一組介紹性或?qū)蛐詢?nèi)容的區(qū)域創(chuàng)建頁(yè)眉。頁(yè)眉中可以使用鏈接，也可以使用多個(gè)header元素在頁(yè)面中。
HTML 的早期版本沒(méi)有明確表示主導(dǎo)航鏈接的區(qū)域的元素，而 HTML5 則有這樣一個(gè)元素，即nav。nav的鏈接可以只想頁(yè)面中的其他內(nèi)容，也可以指向其他頁(yè)面和資源。用nav元素來(lái)包含頁(yè)面中的一些鏈接群。
main元素是HTML5新添加的一個(gè)元素，顧名思義，它代表一個(gè)頁(yè)面的主要部分，該元素在頁(yè)面中只能使用一次?！ ?nbsp;
article元素，另一個(gè)HTML5添加的新元素，用來(lái)添加文章，在HTML5中定義的不局限于文章、帖子等，是一種容器。在<article></article>中你可以添加你需要的內(nèi)容項(xiàng)，這個(gè)標(biāo)簽可以支持嵌套操作。
section元素代表文檔或應(yīng)用的一個(gè)一般的區(qū)塊。section標(biāo)記頁(yè)面的“通用”的區(qū)塊，包含相似主題的一組內(nèi)容。Section與artic在本質(zhì)上有區(qū)別，做一下對(duì)比。section 在組織性和結(jié)構(gòu)性更強(qiáng)，而 article 代表的是自包含的容器。
aside元素，頁(yè)面中與主體部分相關(guān)聯(lián)并不強(qiáng)的一部分，是附注欄，雖然經(jīng)常被看做成側(cè)欄，但是根據(jù)具體情況我們具體分析它的位置，還要依據(jù)上下文。
footer元素，與header元素一樣可以作用在你需要的地方，但是一般作為頁(yè)面的底部的頁(yè)腳，這里通常就放置版權(quán)聲明、指向隱私政策頁(yè)面的鏈接等等。footer元素可以嵌套在它的最近的 article、aside、blockquote、body、details、fieldset、figure、nav、section、td元素，只有它相距最近的，才是整個(gè)頁(yè)面的頁(yè)腳。
small元素標(biāo)記頁(yè)面的版權(quán)信息，包含在標(biāo)記中的字體小一號(hào)。
strong元素表示內(nèi)容的重要性，字體會(huì)加粗。
em元素表示內(nèi)容的著重點(diǎn)，字體同樣會(huì)加粗。在HTML5中,em表示強(qiáng)調(diào)的唯一元素，而strong表示的是重要程度。
figure元素用來(lái)創(chuàng)建圖，figcaption是其標(biāo)題，通常用來(lái)表示頁(yè)面中需要表示的圖表。
cite元素指明引用或者參考，cite只用于參考源本身，而不是從中引述的內(nèi)容，默認(rèn)格式會(huì)使用斜體。根據(jù)它的語(yǔ)義，來(lái)源的話使用cite，其他情況比如言論之類的引用，則使用下面兩種元素。
blockquote元素表示單獨(dú)存在的引述。瀏覽器默認(rèn)對(duì)blockquote文本進(jìn)行縮進(jìn)。
q元素用于短的引述。比如說(shuō)在一個(gè)句子中引述別人的言論。使用的話瀏覽器會(huì)自動(dòng)為你加上引號(hào)。
time元素標(biāo)記時(shí)間、日期或時(shí)間段。time元素會(huì)按照你在標(biāo)記中的文本來(lái)顯示時(shí)間，這是在使用datetime屬性的時(shí)候，反之忽略屬性，那么你就必須按照格式來(lái)表述你需要的時(shí)間。
abbr元素來(lái)解釋縮寫(xiě)詞，使用title屬性來(lái)把你需要解釋的含義寫(xiě)出來(lái)，當(dāng)用戶把鼠標(biāo)停留在使用abbr元素標(biāo)記過(guò)的詞語(yǔ)時(shí)，瀏覽器就會(huì)把title屬性顯示在一個(gè)提示框中。
dfn元素用來(lái)定義術(shù)語(yǔ)。后續(xù)再次使用術(shù)語(yǔ)的時(shí)候就不再出現(xiàn)，也就是說(shuō)dfn元素的使用至多一次，用法和abbr元素相同，也可以使用title屬性。
sub/sup元素創(chuàng)建下標(biāo)/上標(biāo)。
addresss元素用于添加作者聯(lián)系信息。address元素不只可以表示地址，也可以表示電子郵箱、聯(lián)系信息等等。具體表示的信息，取決于它出現(xiàn)的位置。
del元素標(biāo)記不再準(zhǔn)確、不再相關(guān)的文本，瀏覽器上的樣式一般是文本加一條刪除線。
ins元素對(duì)頁(yè)面內(nèi)容的編輯標(biāo)出來(lái)，瀏覽器上的樣式一般是文本下面加入一條下劃線，。以上兩個(gè)元素既可以包括短語(yǔ)內(nèi)容，又可以包括塊級(jí)內(nèi)容元素。
code元素表示其中的是代碼或文件名，默認(rèn)的字體為等寬字體。
pre元素用來(lái)和code元素搭配，可以使用預(yù)格式化的文本，就是說(shuō)把你在HTML文檔中的格式保留下來(lái)，非常適合展示計(jì)算機(jī)代碼的元素。
mark元素，HTML5新的元素，用來(lái)突出顯示文本，標(biāo)記我們想突出文本的關(guān)鍵詞，默認(rèn)的樣式想×××熒光筆劃過(guò)一樣，引起用戶的注意。
u元素，HTML5重新定義了該元素，富裕新的語(yǔ)義，一塊文字添加明顯的非文本注解，就是標(biāo)記專有名詞或者拼寫(xiě)有誤的詞語(yǔ)，瀏覽器默認(rèn)會(huì)把文本下添加下劃線。
wbr元素，HTML5為br元素引入了一個(gè)相近的元素，代表一個(gè)可換行處，它同樣是自閉的，使用的時(shí)候英文居多，如果瀏覽器顯示文本到可換行的元素時(shí)，則換行。
meter元素表示分?jǐn)?shù)的值或已知范圍的結(jié)果，瀏覽器在顯示meter時(shí)，顯示一個(gè)表示測(cè)量值得顏色條。
progress元素表示某項(xiàng)任務(wù)的完成進(jìn)度。根據(jù)不同的屬性，使progress顯示不同的進(jìn)度條。
img元素在頁(yè)面中插入圖像，自閉的標(biāo)記，<img src="p_w_picpath.url" />其中引號(hào)中的是你需要的圖片的位置。使用alt屬性，為圖像添加一段描述性的文本，如果讓你的圖像因?yàn)槟承┰虿荒茱@示在頁(yè)面上的時(shí)候，這段文本變回代替圖像來(lái)呈現(xiàn)給用戶。在img標(biāo)簽中，src 屬性的后面，輸入width=”x” height=”y”默認(rèn)的單位是像素，x代表寬度，y代表高度，制定圖像尺寸的屬性是不改變?cè)瓉?lái)圖像，只改變的是圖像展示在頁(yè)面上的效果。
a元素用來(lái)創(chuàng)建鏈接，鏈接來(lái)把網(wǎng)頁(yè)聯(lián)系到一起，其實(shí)這也是當(dāng)時(shí)互聯(lián)網(wǎng)的想法。輸入<a href=”page.html”>，page.html 是目標(biāo)網(wǎng)頁(yè)的URL，點(diǎn)擊就會(huì)轉(zhuǎn)到另一個(gè)頁(yè)面，停留在a標(biāo)簽上瀏覽器就會(huì)在左下角標(biāo)出鏈接到的URL。a元素還可以應(yīng)用塊級(jí)鏈接，可以在a標(biāo)簽中嵌套其他大部分元素，讓這些塊級(jí)元素一同指向目標(biāo)。a標(biāo)記還有一個(gè)作用是——錨。顧名思義也能猜到它的用途，把與一對(duì)元素關(guān)聯(lián)起來(lái)，a元素使用“#”加目標(biāo)id的屬性值，另一個(gè)標(biāo)簽為錨id賦一個(gè)有意義的名稱。這樣就能實(shí)現(xiàn)跳轉(zhuǎn)。a元素可以創(chuàng)建指向其他類型的各種URL的鏈接，也可以是任何文件。
接觸了這么多的標(biāo)簽，相信你已經(jīng)對(duì)HTML5標(biāo)記有了印象，個(gè)別標(biāo)記雖然有些樣式，那是古老的遺留問(wèn)題，并不推薦這樣。HTML5標(biāo)記表示結(jié)構(gòu)，想要不同的展示方式和布局，那就需要CSS（層疊樣式表）。CSS3是目前最新的版本，雖然沒(méi)有成為規(guī)范，但是它的很多特性還是可以滿足我們的需要的。
CSS有三種方式添加的到HTML5的頁(yè)面中，第一種是做一個(gè)外部的CSS文件，然后鏈接到HTML5頁(yè)面，第二種是在頁(yè)面頭部（head標(biāo)記中）加入一對(duì)style標(biāo)記，定義一系列CSS規(guī)則，第三種是在單個(gè)標(biāo)記中加入style屬性，加入CSS樣式來(lái)規(guī)定顯示樣式。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
