整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！
志同道合的小伙伴跟我一起學習交流哦！
1 HTML初識
一般先學習html+css，這里我們先定一個小目標，先學HTML，后學習CSS。
HTML（英文 Hyper Text Markup Language的縮寫）中文譯為超文本標簽語言"，主要是通過HTML標簽對網頁中的文本、圖片、聲音等內容進行描述。
<strong>我是加粗的字體</strong>
注：HTML就是一種文本標簽語言，唯一的標簽就是 < >
2 HTML骨架格式
日常生活的書信，我們要遵循共同的約定。
同理：HTML有自己的語言語法骨架格式：
<html> <head> <title></title> </head> <body> </body> </html>
3 我的第一個頁面及其標簽簡介
用記事本寫下如下代碼，保存為html文件，用瀏覽器打開，即可展示。
<html> <head> <title>我的第一個網站</title> </head> <body> 我終于制作了自己的第一個頁面！！ </body> </html>
html標簽：所有html中標簽的一個根節點。
head標簽：用于存放：title ,meta, base， style， script， link
注意，在head標簽中我們必須要設置的標簽是title
title標簽：讓頁面擁有一個屬于自己的標題。
body標簽：頁面在的主體部分，用于存放所有的html標簽：p， h， a， b， u， i， s， em， del， ins， strong， img
4 豬八戒版骨架記憶法
看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。
?
本章已結束，下篇文章將分享《04HTML常用標簽》小伙伴們不要錯過喲！
于想學習HTML5的同學都想了解，學習HTML5要學哪些內容？對于新手來說，如果學才能更好的掌握這些技術呢？今天給大家簡單講一下適合新手學習的方法步驟。
方法一：注重實踐，由實踐出真知在HTML5知識學習過程中，有些學員不喜歡動手，更喜歡聽講師講或者自己背誦，這種學習方法是萬萬不可取的。因為代碼的學習，是個需要動手的過程。掌握代碼不僅僅只有記憶還有嘗試。嘗試自己去寫代碼，然后發現問題，最后進行歸納總結，同時形成理論并記憶。
方法二：由整體到局部，由骨架到血肉我們在學習HTML和CSS時，會涉及到網頁的搭建等相關知識。在學習這部分知識時我們采取的是“由外及內”、“由整體到部分”、“由全局到細節”的學習方法。我們在接觸某一個新的知識點時，一定要從主干到枝葉，不要拘泥于某一個細節而沉溺于其中。主干如同知識的一個主線，這種先找主干后添枝葉的學習方法能夠讓知識遺漏變成最少，也會比較容易建立起知識與知識間的關系。
方法三：記憶很重要我們剛才在方法一中提到注重實踐，并不是讓我們忽略記憶。記憶也是同樣重要的，學習時我們通常會遇到需要記憶的知識點。如有哪些數據類型、有哪些標簽元素等等。遇到這類知識點時我們一定要通過記憶將其熟練掌握，很多人在學習的過程中覺得還是理解是最重要的，這種想法是錯誤的。因為如果連記都記不住還談什么理解呢?
方法四：類比在學習CSS引入方式這種知識點時，我們采用了另一種學習方法。類比，或者也可以叫做辨析。這種方法主要針對于區分相似的兩種或多種事物。如strong與em，塊元素與行元素，同步與異步等等此類知識具有相似性的知識，應多多思考，抓取幾種事物的不同點，結合去記憶。
方法五：循序漸進的學習學習是一個日積月累的過程，不能一口吃成一個胖子。在學習的過程中我們通常會遇到一些大型的知識，這種知識是比較難啃的。當我們遇到此類知識時，不要急于求成，要腳踏實地一步一步的來，例如動畫框架的學習就是一個典型的例子。在循序漸進的學習過程中，學習思路也是很重要的。換句話說，我們面對一個“大型”的知識點，知道要按部就班的一步一步的來完成，但是就是不知道該怎么開始，從哪兒開始。這時候就需要我們有明確的學習思路，在學習知識的過程中重點是關注思路，而具體的小知識點就是血和肉。
方法六：有一雙善于發現的眼睛，利用生活輔助學習。
這種學習方法簡單來講就是利用生活中的實際事物輔助抽象知識的學習。利用這種方法能夠讓我們更快更好的理解和吸收知識，例如在講解AJAX時我們利用了信件郵寄。在講解構造函數時，我們利用了毛坯房和裝修房。在講解引用類型變量的時候我們借助了鑰匙和倉庫的關系等等。學習并不是一蹴而就的，在學習過程中有一個良好的學習方法這是至關重要的。掌握一套自己的學習方法，日后必定受益終生的。
重點學習哪些技術的的內容重點分享：
第一階段：前端頁面重構
內容包含了：（PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目）
第二階段：JavaScript高級程序設計
內容包含：1）原生 JavaScript交互功能開發項目、面向對象進階與 ES5/ES6應用項目、JavaScript工具庫自主研發項目）
第三階段：PC端全棧項目開發
內容包含：（jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目）
第四階段：移動端項目開發
內容包含：（Touch端項目、微信場景項目、應用 Angular+Ionic開發 WebApp項目、應用 Vue.js開發 WebApp項目、應用 React.js開發 WebApp項目）
第五階段：混合（Hybrid,ReactNative）開發
內容包含：（微信小程序開發、React Native、各類混合應用開發）
第六階段：NodeJS全棧開發
內容包括：（WebApp后端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL數據庫）
第七階段：大數據可視化
內容包含：（大數據可視化化基礎與實戰、一、數據可視化入門、二、D3.js詳解、三、其他JS庫）
以下是福利時間：
HTML5近幾年可以說是很火，所以想學現在就開始是很好的時期，想要學習的同學，可以留言或者私信我，可以免費分享全套HTML5的視頻教程給大家。
篇目錄
本篇目錄
什么是HTML
HTML的作用
HTML發展史
IETF簡介
W3C簡介
網頁的固定格式
html標簽
head標簽
title標簽
body標簽
head內部標簽
meta標簽
HTML標簽
HTML標簽分類
HTML標簽關系分類
DTD文檔聲明
HTML和XHTML、HTML5區別
htm 和 .html擴展名區別
什么是HTML
HTML其實是HyperText Markup Language的縮寫, 超文本標記語言
HTML的作用
1.首先利用記事本保存了一個標題和兩段描述, 然后修改純文本文件的擴展名為.html, 然后再利用瀏覽器打開
2.打開之后發現顯示的格式不對, 不對的原因是因為在純文本文件中所有文字都是同級別的, 瀏覽器不知道哪些文字代表什么意思. 也就是瀏覽器不知道哪些文字是標題, 哪些文字是段落…., 所以導致了顯示的格式不正確
正是因為如此, 所以HTML應用而生. HTML就只有一個作用, 它是專門用來描述文本的語義的. 也就是說我們可以利用HTML來告訴瀏覽器哪些是標題, 哪些是段落.
這些用于描述其它文本語義的文本, 我們稱之為標簽. 并且這些用于描述文本語義的標簽將來在瀏覽器中是不會被顯示出來的
所以正是因為HTML的這些標簽是專門用來描述其它文本語義的, 并且在瀏覽器中不會被顯示出來, 所以我們稱這些文本為"超文本", 而這些文本又叫做標簽, 所以HTML被稱之為"超文本標記語言"
注意事項:
雖然我們利用H1標簽描述一段文本之后, 這段文本在瀏覽器中顯示出來會被放大和加粗, 看上去我們是利用HTML的標簽修改了被描述的那段文本的樣式. 但是一定要記住, HTML只有一個作用, 它是專門用來給文本添加語義的, 而不是用來修改文本的樣式的
H1標簽它的作用是什么?
錯誤: H1標簽可以用來修改文字的大小, 并且還可以將文字加粗
正確: H1標簽的作用是用來告訴瀏覽器, 哪些文字是標題. 也就是H1標簽是專門用于給指定的文字添加標題語義的
HTML發展史
IETF簡介
IETF是英文Internet Engineering Task Force的縮寫, 翻譯過來就是”互聯網工程任務組”
IETF負責定義并管理因特網技術的所有方面。包括用于數據傳輸的IP協議、讓域名與IP地址匹配的域名系統（DNS）、用于發送郵件的簡單郵件傳輸協議（SMTP）等
W3C簡介
W3C是英文World Wide Web Consortium的縮寫， 翻譯過來就是W3C理事會或萬維網聯盟, W3C是全球互聯網最具權威的技術標準化組織.
W3C于1994年10月在麻省理工學院計算機科學實驗室成立。創建者是萬維網的發明者Tim Berners-Lee
W3C負責web方面標準的制定，像HTML、XHTML、CSS、XML的標準就是由W3C來定制的。
Tim Berners-Lee（蒂姆·伯納斯-李），萬維網之父、html設計者、w3c創始人
百度百科
網頁的固定格式
1.編寫網頁和寫信一樣都有一套規范和要求, 這套規范和要求中規定了寫信的固定格式
2.寫信基本結構
3.編寫網頁的步驟:
3.1.新建一個文本文檔
3.2.利用記事本打開
3.3.編寫THML代碼
3.4.保存并且修改純文本文檔的擴展名為.html
3.5.利用瀏覽器打開編寫好的文件
4.網頁基本結構:
5.通過觀察我們發現, HTML基本結構中所有的標簽都是成對出現的, 這些成對出現的標簽中有一個帶/有一個不帶/, 那么這些不帶/的標簽我們稱之為開始標簽, 這些帶/的我們稱之為結束標簽html標簽
作用:
用于告訴瀏覽器這是一個網頁, 也就是說告訴瀏覽器我是一個HTML文檔
注意點:
其它所有的標簽都必須寫在html標簽里面, 也就是寫在html開始標簽和結束標簽中間
head標簽
作用:
指定網站的標題 / 指定網站的小圖片
添加網站的SEO相關的信息(指定網站的關鍵字/指定網站的描述信息)
外掛一些外部的css/js文件
添加一些瀏覽器適配相關的內容
用于給網站添加一些配置信息
例如:
注意點:
一般情況下, 寫在head標簽內部的內容都不會顯示給用戶查看, 也就是說一般情況下寫在head標簽內部的內容我們都看不到
title標簽
作用:
專門用于指定網站的標題, 并且這個指定的標題將來還會作為用戶保存網站的默認標題
注意點:
title標簽必須寫在head標簽里面
body標簽
作用:
專門用于定義HTML文檔中需要顯示給用戶查看的內容(文字/圖片/音頻/視頻)
注意點:
雖然說有時候你可能將內容寫到了別的地方在網頁中也能看到, 但是千萬不要這么干, 一定要將需要顯示的內容寫在body中
一對html標簽中(一個html開始標簽和一個html結束標簽)只能有一對body標簽
head內部標簽
meta標簽
1.為什么會有亂碼現象?
因為我們在編寫網頁的時候沒有指定字符集
2.如何解決亂碼現象?
在head標簽中添加<meta charset="GBK" />, 指定字符集
3.什么是字符集
字符集就是字符的集合, 也就是很多字符堆在一起. 其實字符集很像我們古代的”活字印刷術”, 在活字印刷術中就是將很多刻有漢字的小章放到一個盒子中, 然后需要印刷文字的時候再去盒子中取這個小章出來用, 正是因為如此, 所以導致了亂碼問題
假設北方人和南方人都擁有裝滿小章的盒子, 但是南方人和北方人在盒子中存儲小章的順序不太一樣, 那么這個時候如果北方人和南方人都需要去取”李”字, 在南方人記憶中李字在第6個盒子的第6行的第6列中(666), 在北方人的記憶中李字在第8個盒子的第8行的第8列中(888). 那么此時如果讓一個南方人去北方人的盒子中取”李”字的小章, 必然找不到,, 所以就導致了亂碼問題
這個地方北方人的存儲小章的盒子和南方人存儲小章的盒子就對應網頁中指定的字符集, 在網頁中我們常見的字符集有兩個GBK/UTF-8, GBK就對應北方人存儲的盒子, UTF-8就對應南方人存儲的盒子
所以在網頁中指定字符集的意義就在于告訴瀏覽器我用的是哪個盒子, 你應該如何去查找才能找到對應的正確的內容
4.GBK(GB2312)和UTF-8區別
提交比較大
體積比較小
GBK(GB2312)里面存儲的字符比較少, 僅僅存儲了漢字和一些常用外文
UTF-8里面存儲的世界上所有的文字
5.那么在企業開發中我們應該使用GBK(GB2312)還是UTF-8呢?
如果你的網站僅僅包含中文, 那么推薦使用GB2312, 因為它的體積更小, 訪問速度更快
如果你的網站除了中文以外, 還包含了一些其它國家的語言 , 那么推薦使用UTF-8
懶人推薦: 不管三七二十一, 一律寫UTF-8即可
6.注意點:
在HTML文件中指定的字符集必須和保存這個文件的字符集一致, 否則還是會出現亂碼
所以僅僅指定字符集不一定能解決亂碼問題, 還需要保存文件的時候, 文件的保存格式必須和指定的字符集一致才能保證沒有亂碼問題
HTML標簽
HTML標簽分類
單標簽
只有開始標簽沒有結束標簽, 也就是由一個<>組成的
雙標簽
有開始標簽和結束標簽, 也就是由一個<>和一個</>組成的
HTML標簽關系分類
并列關系(兄弟/平級)
嵌套關系(父子/上下級)
DTD文檔聲明
什么是DTD文檔聲明?
由于HTML有很多個版本的規范, 每個版本的規范之間又有一定的差異. 所以為了讓瀏覽器能夠正確的編譯/解析/渲染我們的網頁, 我們需要在HTML文件的第一行告訴瀏覽器, 我們當前這個網頁是用哪一個版本的HTML規范來編寫的. 瀏覽器只要知道了我們是用哪一個版本的規范來編寫之后, 它就能夠正確的編譯/解析/渲染我們的網頁
DTD文檔聲明格式:
注意事項:
不寫也能運行
H5網頁里面用H4也能運行
<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前
<!DOCTYPE> 聲明不是 HTML 標簽
<!DOCTYPE> 聲明沒有結束標簽
<!DOCTYPE> 聲明對大小寫不敏感
這個聲明瀏覽器會看, 但是并不是完全依賴于這個聲明, 瀏覽器有一套自己的默認的處理機制
HTML5之前有2大種規范, 每種規范中又有3小種規范
| 大規范 | 小規范 |
|---|---|
| HTML | Strict (嚴格的) |
| HTML | Transitional(過度的,普通的,寬松的) |
| HTML | Frameset(帶有框架的頁面) |
| XHTML | Strict (嚴格的) |
| XHTML | Transitional(過度的,普通的,寬松的) |
| XHTML | Frameset(帶有框架的頁面) |
HTML的DTD文檔聲明和XHTML的DTD文檔聲明有何區別?
XHTML本身規定比如標簽必須小寫、必須嚴格閉合、必須使用引號引起屬性等等, 而HTML會更加松散沒有這么嚴格
Strict表示嚴格的, 這種模式里面的要求更為嚴格.這種嚴格主要體現在有一些標簽不能使用
例如font標簽/u標簽等
font標簽可以修改一個文本的字號、顏色、字體,但這和HTML的本質有沖突,因為HTML只能負責語義,不能負責樣式,而font標簽是用于修改樣式的,所以在Strict中是不能使用font標簽
u標簽可以給一個文本加上下劃線,但這和HTML的本質有沖突,因為HTML只能負責語義,不能負責樣式,而u標簽是用于添加下劃線是樣式.所以在Strict中是不能使用u標簽
Transitional表示普通的, 這種模式是沒有一些別的要求
例如可以使用font標簽、u標簽等
但是在企業開發中不會使用這些標簽,因為這違背了HTML的本質, 而是將這些標簽作為css的鉤子使用
Frameset表示框架, 在框架的頁面使用
后面學到框架/NodeJS 再做詳細了解
常見的DOCTYPE有如下幾種
有這么多規范我們學習過程中到底使用哪一種比較合適呢?
www.baidu.com (B)
www.taobao.com (A)
www.qq.com (T)
www.sohu.com(大奇葩)
無論是HTML還是XHTML,過去企業級開發中用的比較多的大部分都是Transitional類型的文檔聲明
但是HTML5的時代已經到來,以上6中規范僅僅作為了解, 以后都用HTML5類型的文檔聲明, HTML5向下兼容(求此刻WC3心里陰影面積)
目前國內一線網站都更新到了HTML5的文檔聲明, 所以后續授課也是全程使用HTML5的文檔聲明
HTML和XHTML、HTML5區別
在HTML的早期發展中，大部分標準都是所謂的retro-spec，即先有實現后有標準。在這種情況下，HTML標準不是很規范，瀏覽器也對HTML頁面中的錯誤相當寬容。這反過來又導致了HTML開發者寫出了大量含有錯誤的HTML頁面
html語言本身有一些缺陷（例如： 內容和形式不能分離；標簽單一；數據不能復用等等），隨著xml的興起人們希望xml來彌補html的不足，但是目前有成千上萬的網頁都是用html編寫的，所以完全使用xml來替代html還為時過早，于是W3C在2000年推出了xhtml1.0， 建立xhtml的目的就是實現從html向xml的過度
為了規范HTML，W3C結合XML制定了XHTML 1.0標準，這個標準沒有增加任何新的標簽，只是按照XML的要求來規范HTML，并定義了一個新的MIME type application/xhtml+xml。W3C的初衷是要求瀏覽器對這個MIME type實行強錯誤檢查，如果頁面有HTML錯誤，就要顯示錯誤信息。但是由于已有的web頁面中已經有了大量的錯誤，很多開發者拒絕使用新的MIME type。W3C不得已，在XHTML 1.0的標準之后增加了一個附錄C，允許開發者使用XHTML語法來寫頁面，同時使用舊的MIME type，application/html，來分發頁面
W3C隨后在XHTML 1.1中取消了附錄C，即使用XHTML 1.1標準的頁面必須用新的MIME type來分發。于是這個標準并沒有很多人采用
有了XHTML的教訓，W3C在制定下一代HTML標準時（HTML5），就將向后兼容作為了一個很重要的原則。HTML5確實引入了許多新的特性，但是它最重要的一個特性是，不會break已有的網頁。你可以將任何已有的網頁的第一行改成<!DOCTYPE html>，它就成也一個HTML5頁面，并且可以照樣在瀏覽器里正常的展示。
簡而言之
HTML語法非常寬松容錯性強;
XHTML更為嚴格,它要求標簽必須小寫、必須嚴格閉合、標簽中的屬性必須使用引號引起等等;
HTML5是HTML的下一個版本所以除了非常寬松容錯性強以外,還增加許多新的特性
.htm 和 .html擴展名區別
DOS操作系統（win95或win98）下只能支持長度為3的后綴名，所以是htm
但在windows后綴長度可以大于3位，所以windows下無所謂htm與html，html是為長文件的格式命名的
所以htm是為了兼容過去的DOS命名格式存在的
關于課程的疑問和討論，可以登錄http://bbs.520it.com/forum.php?mod=viewthread&tid=2423。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
