整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML5是新的HTML標(biāo)準(zhǔn)，是對(duì)HTML和XHML的繼承和發(fā)展。學(xué)習(xí)HTML5首先需要了解HTML5的語法基礎(chǔ)。本章將圍繞HTML5文檔基本格式、HTML5語法來進(jìn)行講解。
下面是HTML5最基本的代碼結(jié)構(gòu)：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>1.<!doctype>標(biāo)記
<!doctype>標(biāo)記位于文檔的最前面，用于向?yàn)g覽器說明當(dāng)前文檔使用哪種HTML標(biāo)準(zhǔn)規(guī)范。只有在開頭使用<!doctype>聲明，瀏覽器才能將該網(wǎng)頁作為有效的HTML文檔，并按指定的文檔類型進(jìn)行解析。使用HTML5的DOCTYPE聲明，會(huì)觸發(fā)瀏覽器以標(biāo)準(zhǔn)兼容模式來顯示頁面。
2.<html>標(biāo)記
<html>標(biāo)記位于<!doctype>標(biāo)記之后，也稱為根標(biāo)記，用于告知瀏覽器其自身是一個(gè)HTML文檔。<html>標(biāo)記標(biāo)志著HTML文檔的開始，</html>標(biāo)記表示HTML文檔的結(jié)束。他們之間是文檔的頭部和主體內(nèi)容。
3.<head>標(biāo)記
<head>標(biāo)記用于定義HTML文檔的頭部信息，也稱頭部標(biāo)記，是用來封裝其他位于文檔頭部標(biāo)記的標(biāo)記，如：<meta>、<title>、<link>、<style>、<script>標(biāo)記等。上面的代碼中，<meta>標(biāo)記的屬性charset指的是文檔的字符編碼，“utf-8”表示國際通用字符編碼。<title>標(biāo)記用于告訴用戶這個(gè)頁面是什么，如：百度頁面，在瀏覽器導(dǎo)航欄的最上方百度所屬頁面，會(huì)有一個(gè)百度的標(biāo)題。<link>標(biāo)記一般用來引入外部的CSS文件。<style>標(biāo)記用來包裹與html標(biāo)簽對(duì)應(yīng)的CSS樣式，通常與選擇器結(jié)合起來使用。<script>標(biāo)記用于引入外部的JavaScript（js）文件，如果<script>標(biāo)記位于<body>標(biāo)記中，就可以將js代碼寫在<script>標(biāo)記中。
注意：一個(gè)HTML文檔中只能包含一對(duì)<head>標(biāo)記，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示在頁面中。
部分標(biāo)記會(huì)在下一章節(jié)進(jìn)行詳細(xì)解釋
4.<body>標(biāo)記
<body>標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標(biāo)記內(nèi)，<body>標(biāo)記中的內(nèi)容才是最終展示給用戶看的。
一個(gè)HTML文檔只能包含一對(duì)<body>標(biāo)記，且必須位于<html>標(biāo)記內(nèi)部，<head>標(biāo)記的后面，與<head>標(biāo)記是并列關(guān)系。
1.標(biāo)簽不區(qū)分大小寫
為了兼容各個(gè)瀏覽器，HTML5采用寬松的語法格式，標(biāo)簽可以不區(qū)分大小寫就是HTML5語法變化的重要體現(xiàn)
<p>開始標(biāo)記的p標(biāo)記小寫，結(jié)束標(biāo)記的p標(biāo)記大寫</P>上面的代碼標(biāo)簽的開始和結(jié)束標(biāo)簽大小寫雖然不同，但它是符合HTML5語法的規(guī)范的。
2.允許屬性值不使用引號(hào)
在HTML5中，屬性值不放在引號(hào)中也是正確的，如：
<input type=text readonly=readonly/>
<input type=checkbox checked=a/>這段代碼等價(jià)于：
<input type="text" readonly="readonly"/>
<input type="checkbox" checked="a"/>3.允許部分屬性值的屬性省略
在HTML5中，部分標(biāo)志性的屬性的屬性值是可以省略的，如：
<input type="text" readonly="readonly"/>
<input type="checkbox" checked="checked"/>
可以省略為：
<input type="text" readonly/>
<input type="checkbox" checked/>下面是一張關(guān)于HTML5可以省略屬性值的屬性表：
提示：雖然HTML5對(duì)于語法的規(guī)范不是很嚴(yán)格，但是個(gè)人建議，標(biāo)簽采用小寫，引號(hào)加上，這兩點(diǎn)是為了讓頁面看起來美觀，也是為了方便后面頁面編寫出錯(cuò)時(shí)找錯(cuò)。
在前端開發(fā)編寫html文件的時(shí)候，我們可能會(huì)很熟練的寫出常見的html元素，但是如果問到某些元素的差別時(shí)，大家不一定能說的出來，今天就給大家總結(jié)一下那些很常見但容易混淆的屬性。
html與css
css樣式文件引入的方式有兩種，分別是link標(biāo)簽和@import。
link語法結(jié)構(gòu)
link語法結(jié)構(gòu)如下，注意rel='stylesheet'屬性要加上。
link語法結(jié)構(gòu)
@import語法結(jié)構(gòu)
當(dāng)@import用在html中時(shí)，需要配合style標(biāo)簽
@import在html中
當(dāng)@import用在css文件中，直接使用@import url()即可
@import在css中
既然link與@import都可以用來引入css，那么它們的區(qū)別是什么呢？我們又該如何選擇呢？
link是XHTML標(biāo)簽的一種，除了可以加載css外，還可以定義其他rel屬性，而@import只能用來加載css。
link標(biāo)簽在加載css時(shí)，與頁面一同加載，而@import需要等到網(wǎng)頁完全加載以后才進(jìn)行加載。
link是XHTML標(biāo)簽，不存在兼容問題，而@import是在CSS2.1中提出的，對(duì)于低版本的瀏覽器不支持。
link標(biāo)簽可以通過Javascript代碼去控制其屬性，而@import不可以。
javascript控制link
@import支持在css文件中再次引入其他css文件，方便對(duì)多個(gè)css文件的管理。
因?yàn)锧import引入的文件需要在網(wǎng)頁完全加載后再加載，如果在網(wǎng)絡(luò)速度較慢的情況下，會(huì)出現(xiàn)頁面閃現(xiàn)，因此建議使用link標(biāo)簽代替@import。
html元素的readonly與disabled屬性一般都是用于無法改變表單的內(nèi)容，但是兩者也是有區(qū)別的。
readonly屬性只針對(duì)input(text,password)和textarea元素，而disabled適用于所有表單元素，包括select,radio,checkbox,button等。
在表單元素使用了disabled后，該元素的的值不會(huì)隨著form的action請(qǐng)求傳遞到服務(wù)器端，而使用readonly的元素值可以傳遞到服務(wù)器端。
以下是一些關(guān)于兩者的使用建議。
在表單中為用戶預(yù)填的唯一標(biāo)識(shí)碼，不允許用戶改動(dòng)，而且需要傳遞到后臺(tái)的使用readonly屬性。
用戶提交完表單元素后，等待服務(wù)器端的驗(yàn)證，這個(gè)過程應(yīng)該將元素設(shè)為disabled，button和submit也應(yīng)該設(shè)為disabled，以防止重復(fù)提交。
title屬性
img標(biāo)簽的title屬性是用來提供一些建議性的信息，在鼠標(biāo)停留在上方時(shí)會(huì)顯示，它對(duì)于圖片來說只是一種注釋性的信息，重要性偏低。
alt屬性
alt屬性是為不能顯示圖像時(shí)，用來指定替換文字，需要注意的是替換文字是用來代替文字的，而不是用來注釋文字的。
屬性的使用
在做圖片為主的網(wǎng)頁時(shí)，考慮到網(wǎng)頁的SEO，應(yīng)當(dāng)設(shè)置圖片的alt屬性為圖片的真實(shí)內(nèi)容，而給title設(shè)置一些建議性的內(nèi)容。
今天這篇文章主要將了幾個(gè)html中容易混淆的屬性，你有收獲嗎？
紹input[type="hidden"],input[type="file"]兩種特殊的表單元素，readonly disabled只讀屬性與禁用屬性的區(qū)別于使用場(chǎng)景。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
