整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML:htper text markup language超文本標記(標簽)語言
由各種標簽組成，用來制作網頁，告訴瀏覽器如何顯示頁面
w3c:world wide web consortium萬維網聯盟，制定web技術相關標準和規范的組織，HTML技術hi由w3c制定的標準
兩個版本:HTML4.0.1、HTML5.0-----通常H5
官網：http://www.W3shcool.com.cn
HTML文檔是以.html或.htm結尾
記事本notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等
使用步驟：
使用技巧：
常見的瀏覽器：IE瀏覽器微軟、chrome谷歌瀏覽器、fifirefox火狐、safari蘋果
瀏覽器的作用是讀取html文件，并以網頁的形式來顯示
瀏覽器不會直接顯示html標簽，而是使用標簽來解釋網頁的內容
一個完整的html標簽的組成：
<標簽名 屬性名="屬性值">內容</標簽名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標簽</title>
</head>
<body bgcolor="red" text="blue">
html從入門到精通!
</body>
</html>
12345678910屬性值要用雙撇號括起來，一般用雙引號
根據標簽是否關閉，分為，關閉型和非關閉型
<html></html>
<head></head>
<title></title>非關閉型：沒有結束標簽
<meta>
<br>
<h1>....<h6>根據標簽是否獨占一行，分為塊級標簽和行級標簽
塊級標簽：顯示為塊狀，獨占一行
<h1>大家好</h1>
<hr>行級標簽：在行內顯示，可與其他內容在同一行顯示
<span></span>
注釋在瀏覽器中不會顯示,是用來標注解釋html語句,但通過查看源代碼的方式可以看到
語法:
<--注釋內容-->
也稱為特殊字符,用于顯示一些特殊符號,如<>&空格等
語法:
<&實體字符的名稱>
在html文檔的第一行,使用<!DOCTYPE html>
聲明HTML文檔的類型用來告訴瀏覽器頁面的文檔嘞型,用來制定html版本的規范
目前基本上最常用的html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
123456789101.基本標簽
1.1 有序列表
ol:ordered listli:list item默認使用阿拉伯數字、從1開始標記，可以通過屬性進行修改
· type屬性：設置列表的符號標記、取值；數字1（默認）、字母（a或A）、羅馬數字(i或I) · start屬性：設置起始值，值必須是數字
1.2 無序列表
ul:unodered list
li:list item
默認情況下使用實心圓表作為符號標記，可以通過屬性進行修改
· type屬性：設置列表的符號標記、取值：disc實心圓（默認）、circle空心圓、square正方形、none不 顯示項目符號
1.3 定義列表
dl:definition list
dt:definition title
dd:definition description
1.4 水平線標簽
hr:horizontal
常用屬性：
· color:顏色
兩種方式：
顏色名稱：如red、green、blue、white、black、pink、orange等
16進制的RGB表示法：Red、Green、Blue用法：#RRGGBB 每種顏色的取值范值0-255，轉換為16 進制00-FF
如: #FF0000 紅色 #00FF00綠色 #0000FF藍色 #FFFFFF白色、#CCCCCC #FF7300桔色
· size:粗細，數值
· width寬度
兩種寫法：
? 像素：絕對值（固定值）
? 百分比：相對值，相對于水平線標簽所在父容器寬度的百分比
· align對齊
? 取值：center居中 left right
1.5圖像標簽
img:image
常見的圖片格式：.jpg .png .gif .bmp
常見的屬性：
· src:source指定圖片的路徑（來源），必選叁數
如果圖片與html源代碼在同一個文件夾中，可以直接在src中寫圖片名稱即可
習慣上，我們會將多個圖片與html代碼文檔分別放在同一個文件夾project中的不同目錄下，此時需要 在src中指定圖片的路徑為相對路徑
路徑的分類：
? · 相對路徑
? 表示： ./當前路徑
…/當前位置的上一級文件夾
? 提示：…/image
? · alt:當圖片無法顯示時顯示的提示信息
? · title:當鼠標放到圖片上時顯示的提示信息
? · width和 height:設置圖片的寬度和高度
默認圖片以原始尺寸顯示
? 如果只設置其中一個，則另一個會按比例縮放
? 如果同時設置寬和高，可能導致圖片變形
? 兩種寫法：
? 像素：絕對值（固定值）
? 百分比：相對值，相對于父容器的尺寸的百分比
2.其他標簽
為了更好語義化
3.頭部標簽
· meta定義網頁的摘要信息，如字符編碼，關鍵詞，描述，作者等
· title定義網頁的標題
· style定義內容css樣式
· link引用外部css樣式
· script定義或引用腳本
· base定義基礎路徑
默認以當前頁面文件所在的位置為相對路徑參照
4.標簽嵌套
一個標簽中嵌套另外一個標簽
標簽不能亂嵌套
瀏覽器渲染后顯示的頁面代碼與編碼時有所不同
chrome瀏覽器提供的開發工具：幫助開發人員查看和調試頁面的
如何打開：
· Elements:從瀏覽器的角度來看頁面，瀏覽器渲染頁面時內部的結構
· console:控制臺，顯示各種警告和錯誤信息
· network:查看網絡請求信息，瀏覽器向服務器請求了哪些資源，資源大小，
加載資源所消耗的時間
四、超鏈接
1.簡介
使用超鏈接可以從一個頁面跳轉到另外一個頁面，實現頁面之間導航
當鼠標移動到超鏈接文本或圖片時，鼠標箭頭會變成一只小手
超鏈接有三種類型:
普通鏈接/頁面間的鏈接，跳轉到另一個頁面 錨鏈接：鏈接到錨點（鏈接到同一個頁面的指定位置） 功能鏈接：實現特殊功能(發郵件，下載)
2.基本用法
使用 標簽來創建超鏈接
語法格式：
常用屬性：
href:鏈接地址或路徑,鏈接地址
world
鏈接文本或圖片
1 2 3 4 5 1 target:鏈接打開的位置,取值
路徑分類：
絕對路徑 以根開始的路徑
file:///D:/software/b.html https://www.baidu.com/img/bd_logo1.png
相對路徑 相對于當前頁面文件所在的路徑,不是以根開始的路徑 ./ 當前路徑 …/ 當前位置上一級目錄
3.錨鏈接
3.1簡介
點擊鏈接后跳轉到某一個頁面的指定位置（錨點anchor）
錨鏈接的分類：
頁面內的錨鏈接 頁面間的錨鏈接
3.2 頁面內的錨鏈接
步驟：
3.3 頁面間的錨鏈接
4.功能鏈接
5.URL
5.1 簡介
URL:Uniform Resource Locator 統一資源定位器,用來定位資源所在的位置，最常見的就是網址
5.2 組成
一個完整的URL由8個部分組成：
協議：prococol 如 http:超文本傳輸協議，用來訪問WEB網站Hyper text Transfer protocal https:更加安全的協議 SSL安全套接子層 ftp文件傳輸協議，用來訪問服務器上的文件，實現文件的上傳和下載File Transfer protocol file:文件協議，用來訪問本地文件 主機名hostname服務器地址或服務器Netbios名稱,如www.baidu.com ftp://10.255.254.254 端口：port位于主機名的后面，使用冒號進行分隔 不同的協議使用不同的端口，如http使用80端口,https使用的443端口,ftp使用20和21 如果使用的是默認端口，則端口可以省略 如果使用的不是默認端口，則必須指定端口http://59.49.32.213:7070/ 路徑：path目標文件所在的路徑結構，如:www.baidu.com/img/ 資源resource要訪問的目標文件，如bd_logo1.png 查詢字符串：query string 也稱為參數 在資源后面使用?開頭的一組名稱/值
鏈接文本
鏈接文本
https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male https://www.w3school.com.cn/html/html_quotation_elements.asp file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html http://www.sxgjpx.net/ ftp://10.255.254.253/
1
1
1 2 3
4 5
名稱和值之間以=分隔，多個之間用&分隔，如:name=tom&age=2&sex=male 錨點anchor，在資源后面使用#開頭的文本，如#6 身份認證authentication,指定身份信息，如：ftp://賬戶:密碼@ftp.bbshh010.com
五、表格
1.簡介
表格是一個規則的行列結構，每個表格是由若干行組成，每行由若干個單元格組成
table row column
2.基本結構
2.1 table標簽
用來定義表格
常用屬性：
border:表格邊框 默認為0 width/height：寬度/高度 bordercolor:邊框的顏色 align:對齊方式，取值：left(默認) center居中 right居右 bgcolor:背景顏色 background:背景圖片 cellspacing間距：單元格與單元格之間的距離 cellpadding邊距：單元格中的內容到邊界之間的距離
2.2 tr標簽
用來定義行：table row
常用屬性：
align:水平對齊 取值：left(默認) center right valign垂直對齊 取值：top center bottom bgcolor:背景顏色 background:背景圖片
2.3 td標簽
用來定義單元格，table data
常用屬性：align、valign、bgcolor、background
注意：表格必須是由行組成，行必須由單元格來組成，數據必須放到單元格中
3.合并單元格
合并單元格也稱為單元格的跨行跨列
兩個屬性：
rowspan 設置單元格所跨的行數 colspan 設置單元格所跨的列數
步驟：
六、表單
1.簡介
表單是一個包含若干個表單元素的區域，用于獲取瑣類型的用戶數據
表單元素是允許用戶在表單輸入信息的元素，如文本框、密碼框、單選按鈕、復選框、下拉列表、按鈕等
2.表單結構
2.1表單語法
1
2.2form標簽
用來定義表單，可以包含多個表單元素
常用屬性：
action:提交數據給誰處理，即處理數據的程序，默認為當前頁面 method:提交數據的方式或方法，取值：get(默認)，post get和post的區別： get:以查詢字符串的形式提交，在地址欄中能看到，長度有限制，不安全 post以表單數據組的形式進行提交，在地址欄中看不到，長度無限制，安全 enctype(encode type)編碼類型：提交數據的編碼，取值：application/X-www-form-urlencoded(默 認)、multipart/form-data(文件上傳)
3.表單元素
大多數的表單元素都是使用 標簽來定義的，通過設置屬性type來定義不同的表單元素
1
3.1單行文本框
常用屬性：
·name名稱，很重要，如果沒有定義name屬性，則該表單元素的數據是無法提交的
·value初始值
·size顯示寬度
·maxlength:大字符數，默認是沒有限制
·readonly只讀：readonly=“readonly”,可簡寫readonly,即只寫屬性名
·disabled禁用：disabled=“disabled”, 可簡寫disabled完全禁用
表單元素被提交的兩個條件，1.有name屬性2.非disabled
3.2 單選按鈕
常用屬性：
·name名稱：多個radio的name屬性必須相同，才能實現互斥（單選）
·value值
·checked:是否被選中，兩種狀態，選中，未選中 checked=“checked” 簡寫 checked
3.3 復選框
常用屬性與單選按鈕radio類似
3.4 文件選擇器
常用屬性：
·name:名稱
·accept設置可選擇的文件類型，用來限制上傳的文件類型
使用MIME格式字符串對資源類型進行限制
常見的MIME類型：
·純文本：text/plain text/xml text/html
· 圖像：image/png image/jpeg image/gif
4.特殊表單元素
4.1下拉列表
select常用屬性：
·name名稱
·size行數，同時顯示多個選項
·multiple允許同時選擇多個
option常用屬性：
·value選項值
·selected設置默認選中項
optgroup常用屬性：
·label分組的標簽
4.2文本域
·name名稱
·rows行數
·cols列數
5、其他標簽
5.1 label標簽
為表單元素提供標簽，當選中label標簽中的文本內容時會自動將光標切換到與之相關聯的表單元素。
常用屬性：
·for必須將該屬性值設置為與相關聯的表單元素的Id屬性值相同。
注：幾乎所有HTML標簽都具有id屬性，且id值必須唯一。
5.2 button標簽
也表示按鈕，與input按鈕類似
語法：
1按鈕文字或圖像
常用屬性：
·type按鈕的類型，取值: submit（默認）、reset、button
5.3 fieldset和legend標簽
fieldset標簽，對表單元素進行分組
legend標簽，對分組添加標題
七、內嵌框架
1、簡介
使用iframe可以在一個頁面中引用另一個頁面，實現復用、靈活
2、基本用法
語法：
1
常用屬性：
· src:引用的頁面
· width/height寬度/高度 ，像素或百分比
· frameborder是否顯示邊框，取值：1(yes) 0(no)—默認
· scrolling是否顯示滾動條，取值：yes no auto
· name屬性 為框架定義名稱
3、在框架中打開鏈接
1
2
3鏈接的文本或圖像
八、HTML5簡介
1、發展
W3C于1992年12月發布了HTML4.0.1標準
W3C于2014年10月發布了HTML5標準
2、特點
· 取消了過時的標簽，如font、center等，它們僅具有展示外觀的功能
· 增加了一些更具有語義化的標簽，如header、footer、aside等
· 增加了一些新功能標簽，如canvas、audio、video
· 增加了一些表單控件，如email、date、time、url、search等
· 可以直接在瀏覽器中繪畫（canvas），無需flash
· 增加了本地存儲的支持
3、兼容性
http://caniuse.com
提供了各種瀏覽器版本對HTML5和CSS規范的支持度
九、HTML5新增內容
1、結構相關的標簽
用來進行頁面結構布局，本身無任何特殊樣式，需要使用CSS進行樣式設置
· article定義一個獨立的內容，完整的文章
· section定義文檔的章節、段落
· header文章的頭部、頁眉、標題
· footer文章的底部、頁腳、標注
· aside定義側邊欄
· figure圖片區域
· figcaption為圖片區域定義標題
· nav定義導航菜單
結構標簽只是表明各部分的角色，并無實際的外觀樣式，與普通div相同
2、語義相關的標簽
2.1 mark標簽
標注，用來突出顯示文本，默認添加黃色背景
2.2 time標簽
定義日期和時間，便于搜索引擎智能查找
2.3 details和 summary標簽
默認顯示summary中的內容，點擊后顯示details中的內容
注：并不是所有的瀏覽器都兼容，chrome、opera支持、Firefox、IE瀏覽器不支持
2.4 meter標簽
計數儀，表示度量
常用屬性：
· max定義大值，默認為1
· min定義小值，默認為0
· value定義當前值
· high定義限定為高的值
· low定義限定為低的值
· optimum定義佳值
規則：
當value大于high時為綠色
當value在low與high之間時為黃色
當value小于low時為紅色
當value小于low時為綠色
當value在low與high之間時為黃色
當value大于high時為紅色
2.5 progress標簽
進度條，表示運行中的進度
常用屬性：
· value定義當前值
· max定義完成的值
3.表單相關
3.1 新增表單元素
新增以下type類型：
· email接收郵箱
· url接收URL
· tel接收電話號碼，目前僅在移動設備上有效
· search搜索文框
· number/range接收數字/數字滑塊,包含min,max,step屬性
· date/month/week/time/datetime日期時間選擇器，兼容性不好
· color顏色拾取
作用：
· 具有格式校驗的功能
· 可以與移動設備的鍵盤相關聯
3.2新增表單屬性
form標簽的屬性：
· autocomplete是否啟動表單的自動完成功能， 取值:on(默認)、o?
· novalidate提交表單時不進行校驗，默認會進行表單校驗
3.3 新增表單元素的屬性
新增表單元素屬性：input/select/textarea等
· placeholder提示文字
· required是否必填
· autocomplete是否啟用該表單元素的自動完成功能
· autofocus設置初始焦點元素
· pattern使用正則表達式（RegExp后面會講解），進行數據校驗
· list使文本元素具有下拉列表的功能，需要配合datalist和option標簽一起使用
· form可以將表單元素寫在form標簽外面，然后通過該屬性關聯指定的表單
4、多媒體標簽
4.1audio標簽
在頁面中插入音頻，不同的瀏覽器對音頻格式的支持不一樣
audio常用屬性：
· src音頻文件的來源
· controls是否顯示控制面板，默認不顯示
· autoplay是否自動播放，默認不自動播放
· loop是否循環播放
· muted是否靜音
· preload是否預加載，取值：none不預加載、auto預加載（默認）、metadata只加載元數據
如果設置了autoplay屬性，則該屬性無效
可以結合source標簽使用，指定多個音頻文，瀏覽器會檢測并使用第一個可用的音頻文件
4.2 video標簽
在頁面中插入視頻，不同的瀏覽器對視頻格式的支持不一樣
用法與audio標簽基本相同，增加屬性：
· widht/height視頻播放器的寬度/高度
· poster在視頻加載前顯示的圖片
<html>
<body>
<tiele>HTML技術</tiele>
</body>
<body>
大家好，歡迎學習html技術!
</body>
</html>1234567效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-h271e4v6-1593240920352)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例1.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標簽</title>
</head>
<body text="blue">
標簽的組成
<br>
html從入門到精通！
<hr>
<h1>標簽的分類</h1>
<hr>
<h2>標簽的分類</h2>
<hr>
<h6>標簽的分類</h6>
<hr>
<span>哈哈</span>嘿嘿
</body>
</html>1234567891011121314151617181920212223效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jx6zJE1P-1593240920354)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例2.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
圖書:<<HTML從入門到精通<<
<hr>
北京 上海 廣州
<hr>
在HTML中用<表示<小于號
<hr>
“HTML語言” 或 &qout;HTML語言&qout;
<hr>
版權所有? 2000-2020 高教培訓
<hr>
×關閉符號
</body>
</html>123456789101112131415161718192021222324效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nuFLl3hm-1593240920355)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例3.png)]
（剩下的下期出）
原文鏈接：https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html
作者：WanXuang
出處：從CSDN
們先來看一下案例：
在瀏覽器中輸入網址可以看到需要瀏覽的網頁，那這個網頁是怎么生成的呢？那我們先了解一下什么是web（互聯網總稱）:Web：web（World Wide Web）即全球廣域網，也稱為萬維網，它是一種基于超文本和HTTP的、全球性的、動態交互的、跨平臺的分布式圖形信息系統。是建立在Internet上的一種網絡服務，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問的直觀界面，其中的文檔及超級鏈接將Internet上的信息節點組織成一個互為關聯的網狀結構。
Web又分為Web前端和Web后端。
什么又是Web前端和Web后端呢？前端：就是在Web應用中用戶可以看得見碰得著的東西。包括Web頁面的結構、Web的外觀視覺表現以及Web層面的交互實現。后端：更多的是與數據庫進行交互以處理相應的業務邏輯。我們這里著重介紹web前端相關的知識點。
web前端分為網頁設計師、web前端開發工程師。
網頁設計師是對網頁的架構、色彩負責；網站得做的漂亮，客戶滿意。主要需要有美術功底，會photoshop等。
web前端開發工程師是負責交互設計的，需要和后臺程序猿進行交互設計的配合。需要掌握的有腳本技術javascript、HTML+CSS現下最流行的頁面搭建技術，ajax和jquery等。
我們此階段就是web前端開發工程師。
大家都上過網，都瀏覽過網頁，那什么是網站，什么又是網頁，網站或者網頁是怎么形成的呢？
網站是用于展示相關內容的網頁的集合。
網頁是網站中的任何一頁面，通常文件擴展名為html、或htm ，那我們要實現一個網頁首先需要學習哪些技術呢？那就是HTML，其次是CSS，還有還javascript等一些相關的技術。
我們了解了網站從無到有的過程，總之就是設計要給我們一個設計好的效果，我們需要用相關技術把它生成網頁。那我們來學習一下如何生成吧。生成網頁要從以下幾方面入手學習。
√什么是HTML
√HTML的發展史
√HTML的特點
√HTML的基本組成單位
√HTML的基本結構
√HTML的常用標簽
√ HTML4.0及XHMTL1.0及HTML5的基本規范
√HTML4.0及HTML5.0的區別
√ Photoshop的基本使用
一、什么是HTML
HTML（Hyper Text Mark-up Language）即超文本標記語言或超文本鏈接標示語言，是目前網絡上應用最廣泛的語言，也是構成網頁文檔的主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。也就是說文字、圖片、表格、音視頻都被看成是文本，這些部分都是用HTML的標簽生成的。
二、HTML的發展史
三、HTML的特點
1.簡易性
2.可擴展性
3.平臺無關
四、HTML的基本組成單位
HTML的基本組成單位-----標簽。那什么是標簽，標簽有那些特點呢？我們一一介紹一下。
標簽：“標簽”是一些符號，用來區分文檔中的不同部分 。
標簽的分類
–單標簽
–雙標簽
標簽的基本寫法
單標簽 ：某些標簽只需單獨使用就能完整地表達意思，控制網頁效果，這類標簽的語法是：
<標簽名/>
雙標簽：標簽成對使用，由一個開始標簽和一個結束標簽構成。開始標簽告訴Web瀏覽器從此處開始執行該標簽所代表的功能，而結束標簽告訴Web瀏覽器在這里結束該功能，結束標簽的形式是在開始標簽前加上一個斜杠。語法：
<標簽名></標簽名>
標簽屬性
在單標簽和雙標簽的開始標簽里，還可以包含一些屬性，以達到個性化的效果。
<標簽 屬性=""屬性="">內容</標簽>
標簽的組成
標簽和標簽屬性及標簽內容組成。
五、HTML的基本結構
了解了以上的知識我們開學習HTML吧。應該那里寫HTML呢？在那里運行呢？
HTML的編輯工具 :
HTML的運行環境：
我們可以用這么多的瀏覽器可以瀏覽頁面，每個瀏覽器對HTML代碼的解析是會有差異的地方的，那我們在寫代碼的時候要兼容五大主流瀏覽器（IE、Chrome、FF、Safari 、Opera）。看看這些瀏覽器的市場占有率吧!
好了開始寫HTML吧！首先要先寫個HTML的基本結構。
網頁的標題、其它的說明信息及不需要在瀏覽器中顯示的內容放在head這對標簽中。
在瀏覽器中需要顯示的內容放在body這對標簽中。
另外我們在真正寫網頁時除了以上的標簽之外，我們還需要添加其它的標簽，比如文檔聲明，中文編碼聲明等，為什么加這些呢？因為我們大家都知道瀏覽器特別多對吧。瀏覽器對HTML的代碼解析不一樣，不加文檔聲明，不同的瀏覽器會按自己的標準去解析HTML代碼！所以我們在HTML最開始的位置加<!DOCTYPE HTML>這句話,每個瀏覽器都會按著符合標準的HTML代碼去解析，說到標準，我們還要知道HTML是應該遵循誰的標準，HTML要遵循W3C標準，那W3C標準又是什么呢？
W3C標準：萬維網聯盟創建于1994年。到目前為止，W3C已發布了200多項影響深遠的Web技術標準及實施指南，（W3C）標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。
對應的標準也分三方面：結構化標準語言主要包括HTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由W3C起草和發布。
另外加中文編碼聲明，是為了瀏覽器解析中文時以簡體中文形式顯示。
那中文編碼有那些呢？有UTF-8（用在網頁上可以統一頁面顯示中文簡體繁體及其它語言）、GB2312(信息交換用漢字編碼字符集)等。完整的HTM基本結構如下：
/面包理想
一轉眼已經2018年，前端行業也風風雨雨地走過了10多年，網頁布局也從最原始的文檔變成了精彩紛呈的交互。當我看到第四代CSS布局技術的時候，在驚嘆互聯網發展如此突飛猛進的同時，不禁會有一個疑問：CSS經歷1.0到3.0的版本變遷，最終又將走向哪里？
今天我們就回顧一下CSS簡史和四次布局技術的躍遷。
1.CSS簡史
為什么我們需要回顧一下CSS簡史呢？
1.了解過去能夠更好地預測未來，畢竟太陽底下沒有什么新鮮事。
2.相比預測未來，通過了解CSS發展演變趨勢，能夠科學合理地評判CSS的發展，指導我們學習CSS的核心技術，讓我們在有限的精力和時間內學對知識，學好知識。
那是1989年的第一場雪，比1988年來的更早一些，伯納斯·李（Tim Berners-Lee）以超人的智慧和消耗了前額無數濃密的頭發為代價發明了World Wide Web，沒有他就沒有我們今天互聯網相關的工作，也就沒有了這個專欄教程，請允許我代表廣大前端致以崇高的敬意。我們先一睹大神的風采。
對互聯網之父，我只想對他說一句話，有一款洗發水增發效果挺好的，我一直用，你要不要試試？
互聯網誕生了以后，最初的網頁僅僅是純文本，但是隨著互聯網的發展，大家意識到web的原始版本根本就沒有提供一種裝飾網頁的方法。這就好比一個嬰兒不會穿著衣服出生一樣，孩子大了，總不能裸奔吧？這個時候兩個大神提供了解決方案Pei Yaun Wei和Andreesen。
Pei Yaun Wei說，這個好辦，我們可以給孩子穿上紙尿褲。
Pei-Yuan Wei在1991年創建圖形瀏覽器 ViolaWWW ，他整合了自己提出的樣式語言到自己開發的瀏覽器中，還期望自己的樣式語法最終能成為web關于樣式的官方標準。雖然這個目標并未達到，但是他提出的樣式語法確實為其它的一些樣式語法提供了一些靈感。
Andreesen說，那玩意得換多麻煩，我給孩子畫一身衣服吧，當然你懂的，最后Pei Yaun Wei的方案被采用了，但是我們還是看看Andreessen畫出來的情況有多亂。
與此同時，Andreessen 在他開發的網景瀏覽器中進行了不同的嘗試。他并沒有創建一種分離式的標記語言，而是采取拓展HTML標簽的方法來包含非標準化的HTML標簽已達到裝飾網頁的目的。不幸的是，沒過多久，網頁就失去了所有的語義化并看起來像下面這樣混亂：
<MULTICOL COLS="3" GUTTER="25"> <P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P></MULTICOL>
最終被大家采納的語言是由Hakon Wium 在 1994年 10月提出的樣式語法。它被稱為樣式層疊表，簡稱CSS，但是直到1996年的時候，CSS才演變成我們熟悉的樣子。
html { margin-left: 2cm; font-family: "Times", serif;
}h1 { font-size: 24px;
}
然后在1998年5月W3C發表了CSS2，緊接著一個讓我們深惡痛覺的瀏覽器誕生了！對沒錯，就是你深惡痛絕的那個萬能的IE6，2001年微軟發布了IE6，不過搞笑的是，IE6最初的出現確實很大程度推動了CSS發展。那時候的網頁已經變成跟現在很接近了。
按照常理你肯定會想，后面我就知道了，你不用說了，然后就是CSS3.0了。好吧，如果是我，我也這樣想，但是國際友人的腦回路可能跟我們不一樣，事實上，CSS3早于1999年已經開始制訂，直到2011年6月7日，CSS 3 Color Module終于發布為W3C Recommendation。這個故事告訴我們兩件事：
1.w3c這個組織活的真夠長，甚至比很多讀者年齡都大。
2.不是CSS正式版發布了你才放心使用，如果等到那個時候使用，你的項目可能未曾綻放就枯萎了。
細心的讀者可能會問了，CSS3正式版什么時候發布啊？另外CSS4.0什么時候發布？
好吧，我只能告訴你隨緣吧……而且沒有CSS4.0了，也不會有CSS5.0了。
來我們再看看國際友人的腦回路：
簡單地說，就是從CSS3開始，CSS規范就被拆成眾多模塊（module）單獨進行升級，或者將新需求作為一個新模塊來立項并進行標準化。因此今后不會再有CSS4、CSS5這種所謂大版本號的變更，有的只是CSS某個模塊級別的躍遷。
按照CSS工作組的說法，CSS歷史上并沒有版本的概念，有的只是“級別”（level）的概念。比如，CSS3其實是CSS Level 3，CSS2是CSS Level 2，而CSS Level 1當然就是CSS1。每個級別都以上一個級別為基礎。
大家可能說這個命名好亂啊，這事兒我只想跟你說，你就把CSS工作組當成你女朋友就好了，她開心就好，她說的都是對的，她說啥就是啥……
至于我們，會用就好了。
CSS出現的好處就是讓結構和表現分離，可以更靈活的修飾網頁,學習也很簡單。這里我更想說說它的不足。
1.CSS只有一個全局的命名空間，所以是無法避免出現選擇器沖突的。
2.模塊化做的不夠好，所以造成嵌套和覆蓋混亂，容易產生一大堆亂糟糟的樣式。
所以現在CSS也在向“模塊化、JS化發展”
不過客觀地說，CSS的出現確實是互聯網里程碑式的進步。
CSS其實就做了兩件事：
1.如何布局
2.元素怎么表現
說直白一點就是兩件事，一個房子是蓋成兩室一廳還是三室兩廳，另一件事是精裝修。
這里大家就會看到如果一個房子180平米隔成1個10平米的主臥170平米的廁所，你再怎么精裝修也不會是一個宜居的房間。所以布局在CSS中是極其重要的。與CSS發展簡史類似，CSS布局也經歷了一代又一代的迭代，才成為當前的樣子。
接下來我們就說說CSS布局簡史。
2.CSS布局簡史
初代table布局
在1997年的時候，David Siegel 改變了web，他自己研究出了一項網頁布局技術，利用html中的table元素和gif圖片縫合在一起，創造了表格布局技術，之后他就猶如一頭猛獸泛濫起來。
優點：布局容易、快捷、兼容性好
缺點：改動不便，需要重新調整，工作量大
由于互聯網網站越來越復雜，內容和業務更新頻繁，所以table布局是完全不能勝任的，以至于table布局的發明人都說：
“我把炸醬和面倒在了一起，并且沒法分開它。”
不過這個真不是我杜撰出來的，原文：
David Siegel：“有人說我毀掉了Web，我回答他們，的確如此。我毀掉了Web是因為我把巧克力和花生醬混合在一起卻再也不能把它們分開。我犯下了把結構跟表現混合在一起的錯誤。”
然后第二代布局技術登場了，
CSS+div布局
CSS+div布局總結起來有三大優點，
1.省時，學習容易，寫代碼也很容易，很快，效率高
2.省事，如果業務邏輯變了，改起來特別方便快捷
3.省錢，代碼量少，省帶寬，適合seo
基于這三年不難看出CSS+div布局人畜無害，人見人愛，也就不難解釋為什么被廣泛地使用成為目前主流的布局技術了。當然了他也有缺點：
1.需要考慮平臺兼容性，對制作人員的技能要求較高。
2.在移動端布局顯得有些力不從心，如未知寬高float內部元素居中、垂直水平布局、響應式布局等方面略顯繁瑣。
基于此，第三代布局技術應運而生。
Flex布局
優點：
1.CSS3的布局方式，可以在不使用其他框架的情況下，簡便、完整、響應式地實現各種頁面布局 2.移動端布局簡直太友好
缺點：
兼容性較差，IE瀏覽器版本在9.0以上，基本要10.0 對于其他瀏覽器，要求兼容性寫法
Flex布局日漸成為移動端主流布局技術，但是它是單一維度的布局，這個我會在專欄后面講到，有時候也會捉襟見肘，所以目前出現了第四代的布局技術：
grid布局
因為目前大部分瀏覽器并不支持這種技術，但是它代表了網絡發展，這里大家保持關注就好，這里我重點說下它為什么可以稱為第四代網絡布局技術。首先一個觀點大家先記住：
它并不會取代第三代的布局技術，而是顛覆和突破。就好像Flex遠比div+CSS布局更方便，但是div+CSS依然有用武之地。
我們說下它的突破之處：
1.flex對標的是float，本質上還是一維布局，這就跟別人開著夏利，你開奔馳都是地面上跑沒啥本質區別一樣。但是grid升維了，grid是飛機，在地面馬路這條線一維之上讓人能夠思考高度這個維度，以前是汽車一維交通工具（你只能在水平方向一個方向開），飛機是二維（能俯沖了（橫向、縱向同時）），所以grid可以說是拓寬了CSS布局的維度。不排除將來會有三維布局的出現。到時候CSS不僅僅能控制橫向布局，縱向布局，還可以深度布局（這個要依賴于三維展示的出現，如VR，AR三維立體的展示設備出現）。
2.grid布局里面采用了“可視化布局（template部分，所見即所得）”，這個是顛覆了傳統的，寫一句代碼刷一下瀏覽器這樣的開發方式，不排除以后會出現代碼即效果的開發模式。比如你在一個設備上畫一個區域，然后畫輪播圖。
這種方式類似于vc++控件方式，但是更智能，也更友好。誰說不可能呢？大家不要忘了grid布局的來源是早就廢棄的table布局。說到這里我多說一句搞笑的微軟，frontpage沒火，dreamwaver火了，最早提出“canvas”概念的 VML沒火，最后html5的canvas火了，連CSS3網格布局也是由微軟創建的一個模塊 ，最后火起來居然沒人認識它。心疼微軟一秒鐘。
說到這里大家對CSS簡史和布局也有所了解了，我們總結下，通過本文你應該學到：
（1）CSS的發展歷史。
（2）熟知布局的發展歷史，以便對未來布局技術的發展有一個客觀的判斷，來選擇是否學習。
通過本文的學習大家已經對CSS相關基礎知識有所了解，接下來我們就開始真正的進入技術的學習，大家是不是迫不及待了呢？
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
