現現在科技進步,足不出戶盡曉天下事,一轉身便仿若隔世茫然。科技綻開時代,網絡技術對人們的觸變無疑是深遠而重大的,隱於繽紛絢麗的網頁背後,是前端的蛻變動新。html
現在,隨意點開頁面,絢麗華彩的特效及流暢的用戶體驗,是之前始料未及的。從切圖到框架,從組件到模塊,從簡單到系統,前端漸成一方世界。前端
1989年,出於地域交流不便,歐洲粒子物理實驗室研發出一套遠程資源共享系統,該系統基於瀏覽器實現文本信息的交換,萬維網(www,即world wide web)誕生。html5
1993年,伴隨萬維網的萌芽,超文本標記語言(html,即HyperText Markup Language)順勢誕生,語義化標籤讓頁面結構清晰簡潔。web
1994年,關於html標準化的萬維網聯盟(w3c,即world wide web consortium)創建,今後拉開萬維網標準化規範化的革命歷程。編程
在html的歷史裏,有兩大版本值得注意,html 4.01版本(1999年),html 5版本(2008年),儘管路不一樣起,但在各自的時代裏舉足輕重。瀏覽器
儘管不在編程語言的範疇裏,但它做爲一門標記語言,負責頁面的結構及語義,用正確的標籤解釋正確的頁面結構。所及即所得,是html較爲容易上手的的一點,從標籤入手很快便能寫出可讀可維護的頁面。網絡
網頁丶頁面及文檔,通俗地說,能夠理解爲同一事物。文檔分類型,除html類型外,還有xml,xhtml等類型,相較來講 html 類型的文檔較爲常見。框架
文檔聲明(DTD,即Document Type Denifition),聲明頁面的文檔類型及版本,文檔聲明的意義是讓瀏覽器能正確識別文檔類型,並調用相應的處理引擎處理該文檔。編程語言
現在的html,逐漸撇棄html4.01全面擁抱html 5,但有時仍需作兼容處理,在此介紹該兩個版本的兩種不一樣聲明方式:ide
//html 4.01文檔聲明:w3c標準,寫法繁瑣但兼容性較好。 <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> //html 5文檔聲明:去除部分非語義化標籤,新增部分語義化標籤,簡潔清晰。 <!doctype html>
<html>
爲文檔根標籤,除文檔聲明外,文檔全部內容均包含在<html>
標籤裏,而html標籤及其內容組成的元素成爲爲根元素。
根元素下,包含<head>
及<body>
兩大標籤:
<head>
即頭部標籤,主要包含文檔的元數據及各種聲明,如字符編碼,圖標,樣式表,腳本等,該元素內容一般不會在頁面中直接顯示,但對文檔的解析及處理很是關鍵;
<body>
即主體標籤,負責頁面內容的展現,該元素內的內容即是咱們在瀏覽器裏所看到的內容
元素
:語法概念,由標籤
丶內容
及屬性
組成,以元素爲語法單位能夠有更直觀的感覺。
標籤
:主要語法結構,可分爲單標籤及雙標籤,<hr>
爲單標籤,而<a></a>
爲雙標籤(其中<a>
爲開始標籤,</a>
爲結束標籤)。
內容
:即雙標籤內的內容,單標籤沒有元素內容(或說沒有直接內容)。
屬性
:存在於開始標籤內,以鍵值對的形式存在,布爾值類型的屬性能夠省略值,如hidden。
如下,以某元素爲例解釋下元素的組成內容:
<a href="http://www.html.com">Hello,World</a>
爲元素,<a></a>
爲標籤; Hello,World
爲元素內容,href="http://www.html.com"
爲元素屬性。
隨着html5的普及,語義化編寫顯得越來越重要,從前能夠是span+div的格局,或table+font的佈局,現在倒是難以支撐。時代在進步,技術在迭代,身處變革環境裏的咱們一樣須要緊隨科技的步伐。
從做用來說,語義化有助於盲視者的聽力理解,也利於搜索引擎的爬取,同時也利於往後代碼的維護。踏過html4.01的時代,html 5包含更多語義化的標籤,將來也許還會增長。