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