HTML是前端的核心基礎技能之一,掌握HTML是前端所必須的.
下面我來解釋一下
HTML是誕生於1980年,是一種有tag的標記語言,關於這玩意的歷史,我就不贅述了,有興趣瞭解的可以看維基百科,下面給出鏈接:
http://zh.wikipedia.org/wiki/HTML
這裏面容易混淆幾個概念,HTML,DHTML,XHTML,XML,.dtd文件
這邊我不做過多說明,維基百科有詳細的解釋.有興趣可以詳細的瞭解
一.HTML聲明
<!DOCTYPE HTML>
此聲明說明這個文件是HTML5。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
除了HTML 4.01的嚴格文件類型描述之外，HTML 4.01也提供“過渡”和“框架集”文件類型描述。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
過渡文件類型描述是向嚴格的文件類型描述過渡的緩衝。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">以上幾種dtd的聲明,是一定要寫的,放在html文件的第一行,供瀏覽器解析,一般是隻寫一種.
爲什麼要把dtd拉出來單獨說,是因爲在IE6-8中,不嚴格的dtd聲明會引起很多css樣式問題.這個在解決多瀏覽器兼容問題的時候,是首先要看的一個注意點.
二.HTML基本結構
<dtd聲明>
<html>
<head>
<title>文檔的標題</title>
</head>
<body>文檔的內容... ... </body>
</html>
head標籤:<base>, <link>, <meta>, <script>, <style>, 以及 <title>
具體的作用可以點開鏈接看一看,我就不一一的去寫每個的作用了,看看w3c就蠻好的
body標籤:這個裏面的內容就是比較重要的一些東西,上面的東西可以記住就可以了,body裏面的東西需要靈活運用.
三.標籤元素及其語義化
從標籤的解析表現形式來看,標籤大致可以分兩種,行內元素(內聯元素),塊級元素,當然還有隱式的元素.比如style,跟script
html表現形式簡單的說,是標籤包裹文字,或者其他的信息例如:
<div>Hello world!</div>
行內元素簡單的說,是在文檔解析流中,不會主動換行的.而塊級元素是主動換行的.
這個特性是非常重要的點,就像寫文章的段落化一樣.一篇文章只有句段分明才能清晰表達文章中心思想.Html也是一樣的.
前一陣子有個朋友跟我提起除了塊級元素,內聯元素還有別的分類,就是把table,ul等具有清晰語義化的元素從塊級元素中分類出來.因爲這些元素本身就具有相關的表現能力,不應該放在籠統的塊級元素中.
組織html標籤最重要的一點就是語義化.這也是所有前端一致認可的首要原則.一旦發生樣式表分離的異常,html能以較好的表現形式呈現.
關於標籤,這塊我就不一一的去解釋了,多翻翻w3c的html標籤列表,體會每個標籤的意義,然後try it.多練練就知道.
如何做好語義化,這塊說起來還是比較複雜的.要清晰的知道每個常用元素的作用並正確的應用.
寫個簡單的例子:
<!DOCTYPE html>
<htmlang = "en">
<head>
<!--meta多用於頁面的初始化中的參數說明,常用的有字符串編碼,http鏈接頭信息等-->
<meta charset = "utf-8">
<!--頁面標題現實在瀏覽器窗口欄處-->
<title>HTML5佈局的demo</title>
</head>
<body>
<!--html5中的新標籤header,一般用於網站的頭部信息-->
<header>
<!--標題組,參考office中的標題-->
<hgroup>
<!--標題1-->
<h1>前端入門</h1>
<!--標題2-->
<h2>web程序開發</h2>
</hgroup>
</header>
<!--導航部分-->
<nav>
<!--列表-->
<ul>
<li>我是列表內容1</li>
<li>我是列表內容2</li>
</ul>
</nav>
<!--這個標籤多用於文檔塊區段等-->
<section>
<article>今天來講講html的一些知識<br/>
這個文檔結構就是目前比較激進一點的前端採用的語義化佈局方式
如何使用傳統佈局,這個在下面將css的時候會說到.
</article>
<br/>
<h4>一個簡單的表格信息</h4>
<table border=1px>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>年級</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>王小丫</td>
<td>18</td>
<td>女</td>
<td>幼兒班</td>
</tr>
<tr>
<td>2</td>
<td>王二丫</td>
<td>18</td>
<td>女</td>
<td>小班</td>
</tr>
<tr>
<td>3</td>
<td>王小蛋</td>
<td>18</td>
<td>女</td>
<td>大班</td>
</tr>
</tbody>
</table>
</section>
<br/>
<br/>
<br/>
<!--腳部信息-->
<footer>我是腳部,可以放授權信息,聯繫方式等等</footer>
</body>預覽效果:
這個文檔佈局,沒有使用任何樣式修飾,用了常用的一些標籤.表現的還算不錯.至少看起來不是亂糟糟的.
四.網站的seo優化
如果你有了良好的語義化標籤組織的意識,這時候再去了解搜索引擎在抓取網頁的時候,權重比就可以很輕鬆掌握相關的技巧.以下是SEO權重比較大的幾個標籤.具體可以找幾篇相關的介紹頁面看看.也就明白了,其實比較簡單的.
<title>頁面標題</title>
<meta name="description" content="網站描述">
<meta name="keywords" content="關鍵詞">
<h1>頁面內容標題</h1>
<h2>頁面相關性標題</h2>
<img src="xxx.jpg" alt="圖片說明">
<a href="/" title="鏈接說明">鏈接詞</a>
<strong>重點關鍵詞強調</strong>
ps:學習前端不是一日的功夫就可以成功的,基礎要打牢.以上雖然看着比較簡單,但是之後的內容,會越來越深入的剖析.