积跬步，聚小流------html知识大纲归纳总结
生活随笔
收集整理的這篇文章主要介紹了
积跬步，聚小流------html知识大纲归纳总结
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
習慣于從熟悉的地方入手的我，每要開始整理學習新東西之前，喜歡把熟悉的相關知識再溫習一遍，既是總有所得的緣故，也是如此會將斗志燃到最烈。我總感覺這是病，只是不愿治....
這次的前端整理，便直接從html入手開始：
html作為前端最基礎的知識，所有前端工作者都會，但是有相當一部分人對它的重視遠遠不夠。
萬里高樓平地起，html作為前端最底層，最基礎的元素，是一切“樣式”和“腳本”的根源，它是任務（頁面）完成度的重要指標。
以服務“樣式”和“腳本”為起點出發，我們在學習html的時候，大致應該做到如下幾點：
a、合理使用塊元素和行元素；
b、語義化結構；
做到上面兩點，我們得到的結構會更清晰明了，也更簡潔合理，說起來有些官方，舉個最簡單的例子：
有些人喜歡用div來進行分塊從而布局，當我們在寫菜單的時候，會在div里面再嵌套ul，但是，往往外層的div只是用來布局，沒有實際意義，而ul本身就是塊元素，我們可以直接放棄外層div，直接用ul來代替。
甚至有些教程也都喜歡直接用div+css來布局結構，在個人認為，還是有些偏頗的，一方面“網絡爬蟲”并不識別，另一方面啰嗦臃腫的結構，讓維護的工作量倍增。
早期的“前端工作”在我的理解里，就是切圖，做網頁嘛，雖然事實告訴我并不是，但是“網頁”這個詞卻是前端工作躲不開的，一切都是以“網頁”為中心展開的，那么究竟什么是“網頁”？
同時，我們要了解的還有如下幾個名詞：
html、html文檔、html標簽、html元素、html屬性、html注釋、html框架
如果這些名詞可以張口就來了，我想對于html的理解應該已經有個人的認識了，那希望如果你發現我文中有什么不合理或者不對的地方，留言給我。
html，超文本標記語言，核心詞匯：語言，也就是用來溝通的，而且是標記語言，也就是通過描述事物來進行溝通的，白話了說“我把一些想要告訴你的事物，用這種語言描述給瀏覽器，然后讓瀏覽器展示給你看，讓你明白我想表達的事物”；
而這種標記語言的標記方法，是一套標記標簽，一般是成對出現，由開始標簽（開放標簽）和結束標簽（閉合標簽）組成；
而html元素則是我想表達的具體事物，一般在一對標簽之間，通過外層標簽來進行描述，是標題，或者是鏈接，等等；
至于html文檔，則就是我們通常所說的“網頁”，是由html標簽+html元素=html文檔=網頁；
而具體的html屬性、html注釋、html框架可謂是語義化很明顯，至于“屬性”，相信在jquery的學習中，理解的會更深刻點。
前文提到過，網頁=html文檔，而文檔存在眾多文檔類型，而<!DOCTYPE>就是文檔的聲明，用來聲明用哪一種文檔來對下面的描述進行解釋。
目前常用的有：
html5：<!DOCTYPE html>
html4.0.1：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"??"http://www.w3.org/TR/html4/loose.dtd">
xhtml1.0：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"??"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html頭部元素是對當前html文檔的一些設定和描述，是瀏覽器在描述具體html元素前所做的功課。
主要包括：<title>、<base>、<script>、<link>、<style>、<meta>
<title>是最常見的，一個文檔的基本描述，也是打開網頁標簽頁上的內容；
<style>、<link>、<script>在平時應用中是最常見的，對于樣式表和腳本代碼的引入；
<base>標簽設定頁面上所有鏈接的target屬性，在新的標簽頁打開還是其它...
<meta>是head區一個輔助標簽，合理的應用有想不到的驚喜。在我一次面試的時候，也曾經兩次被問到相關問題，一次是頁面不動結構和樣式的情況下，兼容移動端，一次是不緩存頁面。
其實meta有兩個屬性，分別為http-equiv屬性和name屬性，不同屬性有不同的參數，從而實現不同的頁面功能。但是總體上來說，name屬性比較傾向于解釋描述，http-equiv屬性偏向于設定操作。
name屬性常用的參數有：Keywords（關鍵字）、description（網頁描述）、robots（機器人向導）、author（作者）、generator（實現軟件）等等
http-equiv屬性常用設定參數有：Pragma（cache緩存）、Expries（期限）、Refresh（刷新）、Content-Type（顯示字符集的設定）等等；
至于具體應用可以自行百度，這里只簡單就我曾碰到的兩個面試題目上代碼：
<meta?name="viewport"?content="width=device-width,?initial-scale=1.0,maximum-scale=1.0,?user-scalable=no"/>??
<meta?http-equiv="pragma"?content="no-cache">?? <meta?http-equiv="cache-control"?content="no-cache">?? <meta?http-equiv="expires"?content="0">??
前文提到過，曾有教程把網頁制作的直接稱作div+css，盡管感覺不對，但它存在必然是有其原因的。
在網頁發展過程中，最初是用table進行布局，整個頁面都是一個大table，然后不斷嵌套，不停嵌套，而div的出現則大大減少了冗余的代碼，table也恢復了它本身的應用：設計表格的目的是呈現表格化數據。
所以div+css也是當前布局的良方，但是語義化的層面上來看，語義化代碼更符合當前的需求。
html塊元素：<h1>-<h6>標題、<p>段落、<ul>列表、table表格、<div>等；
html行元素：<img>圖片、<a>鏈接、<td>表格中一個格、<span>等等；
另外，除了布局上語義化之外，合理的應用部分文本格式化標簽，也能減少樣式表甚至腳本代碼的堆砌。
舉幾個例子：
<b>加粗、<i>斜體、<sub>下標、<sup>上標、<ins>插入字、<del>刪除字、<pre>預定義文本等等
html本身是完全可以將你想到的事物展示出來的，所以如果靜態頁面你無法將其內容展示出來的話，我想肯定還是基礎上有漏洞，而事實上我也確實就這些問題返攻過幾次html。
“錨鏈接”我現在通常會用js去實現，只是因為想要更多的滾動效果，而在我工作最初的時候，<a name="">是給了我很大幫助的；
“上線快，高迭代”應該是facebook掀起的風潮，實際工作過程中的圖像映射可是起了大作用，<map>和<area>給我帶來的好處可是不只一點；
甚至當年為了寫個商標還頭疼了很久，差點用了圖片，直到看到了html實體字符
這次的前端整理，便直接從html入手開始：
1、html學習前的一些話
html作為前端最基礎的知識，所有前端工作者都會，但是有相當一部分人對它的重視遠遠不夠。
萬里高樓平地起，html作為前端最底層，最基礎的元素，是一切“樣式”和“腳本”的根源，它是任務（頁面）完成度的重要指標。
以服務“樣式”和“腳本”為起點出發，我們在學習html的時候，大致應該做到如下幾點：
a、合理使用塊元素和行元素；
b、語義化結構；
做到上面兩點，我們得到的結構會更清晰明了，也更簡潔合理，說起來有些官方，舉個最簡單的例子：
有些人喜歡用div來進行分塊從而布局，當我們在寫菜單的時候，會在div里面再嵌套ul，但是，往往外層的div只是用來布局，沒有實際意義，而ul本身就是塊元素，我們可以直接放棄外層div，直接用ul來代替。
甚至有些教程也都喜歡直接用div+css來布局結構，在個人認為，還是有些偏頗的，一方面“網絡爬蟲”并不識別，另一方面啰嗦臃腫的結構，讓維護的工作量倍增。
2、一些基本概念
早期的“前端工作”在我的理解里，就是切圖，做網頁嘛，雖然事實告訴我并不是，但是“網頁”這個詞卻是前端工作躲不開的，一切都是以“網頁”為中心展開的，那么究竟什么是“網頁”？
同時，我們要了解的還有如下幾個名詞：
html、html文檔、html標簽、html元素、html屬性、html注釋、html框架
如果這些名詞可以張口就來了，我想對于html的理解應該已經有個人的認識了，那希望如果你發現我文中有什么不合理或者不對的地方，留言給我。
html，超文本標記語言，核心詞匯：語言，也就是用來溝通的，而且是標記語言，也就是通過描述事物來進行溝通的，白話了說“我把一些想要告訴你的事物，用這種語言描述給瀏覽器，然后讓瀏覽器展示給你看，讓你明白我想表達的事物”；
而這種標記語言的標記方法，是一套標記標簽，一般是成對出現，由開始標簽（開放標簽）和結束標簽（閉合標簽）組成；
而html元素則是我想表達的具體事物，一般在一對標簽之間，通過外層標簽來進行描述，是標題，或者是鏈接，等等；
至于html文檔，則就是我們通常所說的“網頁”，是由html標簽+html元素=html文檔=網頁；
而具體的html屬性、html注釋、html框架可謂是語義化很明顯，至于“屬性”，相信在jquery的學習中，理解的會更深刻點。
3、<!DOCTYPE>聲明
前文提到過，網頁=html文檔，而文檔存在眾多文檔類型，而<!DOCTYPE>就是文檔的聲明，用來聲明用哪一種文檔來對下面的描述進行解釋。
目前常用的有：
html5：<!DOCTYPE html>
html4.0.1：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"??"http://www.w3.org/TR/html4/loose.dtd">
xhtml1.0：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"??"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4、html頭部元素
html頭部元素是對當前html文檔的一些設定和描述，是瀏覽器在描述具體html元素前所做的功課。
主要包括：<title>、<base>、<script>、<link>、<style>、<meta>
<title>是最常見的，一個文檔的基本描述，也是打開網頁標簽頁上的內容；
<style>、<link>、<script>在平時應用中是最常見的，對于樣式表和腳本代碼的引入；
<base>標簽設定頁面上所有鏈接的target屬性，在新的標簽頁打開還是其它...
<meta>是head區一個輔助標簽，合理的應用有想不到的驚喜。在我一次面試的時候，也曾經兩次被問到相關問題，一次是頁面不動結構和樣式的情況下，兼容移動端，一次是不緩存頁面。
其實meta有兩個屬性，分別為http-equiv屬性和name屬性，不同屬性有不同的參數，從而實現不同的頁面功能。但是總體上來說，name屬性比較傾向于解釋描述，http-equiv屬性偏向于設定操作。
name屬性常用的參數有：Keywords（關鍵字）、description（網頁描述）、robots（機器人向導）、author（作者）、generator（實現軟件）等等
http-equiv屬性常用設定參數有：Pragma（cache緩存）、Expries（期限）、Refresh（刷新）、Content-Type（顯示字符集的設定）等等；
至于具體應用可以自行百度，這里只簡單就我曾碰到的兩個面試題目上代碼：
a、頁面不動結構樣式情況下兼容移動端。
[html]?view plaincopy print?
b、不緩存頁面的設置
[html]?view plaincopy print?
5、body部分各司其職
前文提到過，曾有教程把網頁制作的直接稱作div+css，盡管感覺不對，但它存在必然是有其原因的。
在網頁發展過程中，最初是用table進行布局，整個頁面都是一個大table，然后不斷嵌套，不停嵌套，而div的出現則大大減少了冗余的代碼，table也恢復了它本身的應用：設計表格的目的是呈現表格化數據。
所以div+css也是當前布局的良方，但是語義化的層面上來看，語義化代碼更符合當前的需求。
html塊元素：<h1>-<h6>標題、<p>段落、<ul>列表、table表格、<div>等；
html行元素：<img>圖片、<a>鏈接、<td>表格中一個格、<span>等等；
另外，除了布局上語義化之外，合理的應用部分文本格式化標簽，也能減少樣式表甚至腳本代碼的堆砌。
舉幾個例子：
<b>加粗、<i>斜體、<sub>下標、<sup>上標、<ins>插入字、<del>刪除字、<pre>預定義文本等等
6、一些超實用的html自帶效果
html本身是完全可以將你想到的事物展示出來的，所以如果靜態頁面你無法將其內容展示出來的話，我想肯定還是基礎上有漏洞，而事實上我也確實就這些問題返攻過幾次html。
“錨鏈接”我現在通常會用js去實現，只是因為想要更多的滾動效果，而在我工作最初的時候，<a name="">是給了我很大幫助的；
“上線快，高迭代”應該是facebook掀起的風潮，實際工作過程中的圖像映射可是起了大作用，<map>和<area>給我帶來的好處可是不只一點；
甚至當年為了寫個商標還頭疼了很久，差點用了圖片，直到看到了html實體字符
我始終相信，只有厚實的基礎才能讓人走的更穩更遠，積跬步，聚小流，終能到達那遠方，加油2016....
同文還發表在：我的w3cfuns
from：?http://blog.csdn.net/marsmile_tbo/article/details/50668375
總結
以上是生活随笔為你收集整理的积跬步，聚小流------html知识大纲归纳总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML 30分钟入门教程
- 下一篇： 基于 Jenkins 快速搭建持续集成环