整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
一、學習html學的是什么？
1.1學標簽
我要什么內容，就用什么標簽 在去思考使用標簽的什么屬性
比方說：文字就用文字標簽，HelloWorld 6號字 顏色變成紅色
<html>
<head>
<title></title>
</head>
<body>
<font size="6" color="red" >HelloWorld </font> //這個就是文字標簽 屬性尺寸是6，顏色是紅色
</body>
</html> 二、編寫格式
1、每個網頁頁面都是一個單獨的文件，頁面的后綴是XXXX.html 或者 XXXX.htm
2、編譯器/解釋器就是瀏覽器，瀏覽器會一行行編譯，不會像C 或者PLC等還需要再次編譯。
3、用記事本做演示，需要把后綴名改成.html ,如果后綴名被隱藏了，需要在文件菜單-查看-選項-查看-把隱藏已知文件類型的拓展名去掉
<html> //html開始
<head> //頭標簽開始
<title></title>
</head> //頭標簽結束
<body> //身體標簽開始
HelloWorld //主體內容
</body> //身體標簽結束
</html> //html結束三、常用標簽及其屬性：
3.1 文本修飾
font 行內標簽 （沒有換行效果）
size 字體的大小，最大值是7
color 顏色值
顏色的第一種表示形式：顏色單詞 red green blue
顏色的第二種表示形式： 顏色的RGB 如：rgb(0,0,255) 第一個0表示R紅色的份數，第二個表示G綠色的份數 ，第三個0表示B藍色的份數
顏色的第三種表示形式：十六進制表示，把顏色這個寫成#0000ff ,就是第一個紅綠藍十六進制，
face 字體族 黑體 楷體 宋體 華文彩云等 但必須是瀏覽器支持的字體
節課開始前，我們先回憶一個事情，我們小時候寫作文時，老師都會教我們一些“規矩”，比如說：題目要在中間寫，也就是居中，要分段，要有標點符號，第一段要空兩個格子等等。那同樣的！ HTML文件也有他們的書寫規則 ？那他們都有什么規則呢？我來慢慢告訴你！
通過上節課學習，你已經認識了，在瀏覽器中運行的文件就是網頁，那么這個文件到底是什么呢？其實就是一個以 html 為后綴的普通文件，說到這，你可能會出現疑問了，這個文件我也沒見過，應該怎么創建和書寫呢？
先來嘗試一下，新建一個 test.html 文件（注意是html為后綴名哦！如果不能改后綴名的話，度娘查一下，如何顯示文件后綴名，就可以更改了），右鍵點擊文件， 使用記事本打開。
可以看到 html 文件可以直接在這里面進行讀寫了 但是記事本的功能比較少 不夠強大 ，就像我們要編輯一個文字文件需要Word一樣，我們需要用到一個專業讀寫 html 文件的軟件 我們叫它代碼編輯器
市面上有各種各樣的代碼編輯器 比如說 Notepad++， sublime， DreamWeaver， webStorm， Hbuilder， 等等。
今天為大家推薦的一款編輯器 是開發工程師們使用頻率比較高的一款軟件 vscode 它是一款輕量級編輯器 上手方便 操作簡單
只需要來到官網（Visual Studio Code - Code Editing. Redefined） 點擊下載 下載好以后雙擊安裝 你可以自己選擇安裝路徑 也可以用默認安裝路徑 安裝好以后 桌面上會出現一個圖標 這就是我們的VScode代碼編輯器了
那我們吃飯的家伙有了 我們先來認識一下它，雙擊圖標 打開軟件一看是是英文的，根本看不懂！沒關系 我們只需要安裝一個漢化插件就好了。
首先點擊左側這個按鈕 在輸入框內輸入 Chinese 對應搜索結果的第一個 點擊 install 稍等一會 即可安裝完成 此時 我們只要重啟 vscode 這個編輯器 會發現 英文變成中文了
接下來就可以使用這個vscode 來進行 html 文件的創建和編輯了
首先在電腦桌面上面點擊鼠標右鍵 新建一個文件夾 命名為千鋒學習 這個文件夾用來存儲其他文件夾和網頁相關的文件，用編輯器打開文件夾可以右擊選擇→通過code打開，也可以直接直接將文件夾拖到編輯器里直接打開
接下來新建一個文件，在這里關于文件的命名 希望你遵循以下規范
根據文件命名規則 我們在 vscode 里創建一個文件，點擊這里的新建文件圖標 書寫文件名 start.html 注意 你要手動寫上文件后綴 這樣一個標準的 html 文件就創建好了
點擊文件 我們看到在右側打開了這個文件 目前內容還是空白的 我們直接寫入 hello world 點擊這里的保存按鈕 也可以使用快捷鍵 ctrl + s 完成文件保存 此時 一個簡單的 html 文件就寫好了 我們趕緊到瀏覽器內運行一下吧
返回到文件夾——右鍵點擊文件——打開方式——用瀏覽器打開
好啦！我們的第一個網頁運行成功了。
到這里 細心的小朋友發現了 每次這樣打開文件豈不很麻煩 其實可以在 vscode 內安裝一個的插件 直接打開瀏覽器 就像安裝 Chinese 漢化版插件一樣。
再次點擊 擴展 按鈕 搜索 open in browser 點擊安裝 在文件位置點擊右鍵 選擇 open in default browser 就可以直接在瀏覽器打開了 或者你可以直接使用快捷鍵 alt + b
回到編輯器的 start.html 再來寫點內容 前端培訓界的扛把子——千鋒HTML5大前端 首先記得ctrl+s保存文件，然后打開瀏覽器
點擊刷新按鈕—看到新增的文字也出現了，仔細觀察發現：所有的文字格式都一樣，如果你想把某些文字變得不一樣。該怎么辦呢？
這時候就需要用到標簽了 比如：我們來書寫一個 < h1 >再寫一個</h1> 兩個組合在一起形成一個完整標簽 ，這個標簽對中間可以書寫一段內容，把我們的這一段內容復制進去，再次打開瀏覽器刷新，這一段內容變得不一樣了 這就是 h1 標簽的作用
在HTML 中 有很多不同的標簽 各自有不同的作用 我們就是用這些標簽來組成頁面的骨架。
這節課你學會了編寫一個簡單的網頁 并了解了文件的書寫規范，我們也只是了解了冰山一角，九牛一毛。那其他的標簽，都有什么呢？標簽又有什么書寫規范呢？
我們下一篇文章等你哦！
什么學習HTML？
理解HTML代碼是制作網頁的基本技能。在互聯網高度發達的今天，網頁制作技術開始變的和修圖、處理視頻一樣重要。
第一，學會制作網頁就可以把自己想要展示的信息讓其他人使用瀏覽器觀看，無論是文字、照片還是視頻都可以通過瀏覽器觀看，甚至是分享自己制作的小游戲。
第二，理解網頁運行的基本原理后可以更好的瀏覽他人的網頁，尋找有用信息，更合理的使用第三方工具，簡單高效的制作自己的網頁。
HTML學習難度與重要性
HTML代碼本身非常容易理解，使用也非常簡單，但是單純使用HTML代碼寫出的網頁效果和我們平時看到的網頁相差甚遠。要想做出一個漂亮的頁面，我們還需要CSS和JavaScript的幫助。
HTML、CSS、JavaScript這些不同的代碼都有什么作用呢？簡單來說，HTML代碼可以為網頁提供基本內容，比如文字、圖片、音樂、視頻等。CSS代碼可以為頁面安排布局，比如標題的位置、字體、顏色、大小等，籠統的說就是為HTML代碼添加的內容增加樣式信息，例如修改位置、尺寸、顏色等屬性。JavaScript代碼可以為頁面提供交互（互動）功能，例如通過按鈕控制頁面內容的隱藏、出現，或者為多張圖片添加輪播功能等。
對比起來，HTML的學習難度最低，但作用是最重要的，因為一切頁面的基礎是內容，沒有內容，樣式與交互都不存在。
認識HTML基本結構
第一行 <!DOCTYPE HTML>
第二行 <html>
第三行 <head>
第四行 </head>
第五行 <body>
第六行 </body>
第七行 </html>
以上七行代碼是一個網頁文件的HTML代碼的基本結構。
大家觀察一下可以發現一個規律，每一行的內容都是寫在“<>”里面的。原因說來話長，先記住就行。每個寫在“<>”里面的內容叫做“標簽”。以后“標簽”這個詞會經常出現。
第一行<!DOCTYPE HTML>標簽指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令（這句話可以暫時不必理解）。重要的是這句傲嬌的代碼只能存在在HTML代碼的第一行！
第二行<html>標簽與第七行的</html>標簽是一對，“<html>”叫做開始標簽，“</html>”叫做結束標簽。他們之間的區別在于結束標簽比開始標簽多一個“/”。這是HTML代碼的一個重要規律，以后我將要學到的大部分標簽都是這樣的，可能瀏覽器有些強迫癥吧，如果沒有結束標簽它會很不舒服，有可能會消極怠工而產生麻煩（不能正常顯示）。不過遺憾的是<!DOCTYPE HTML>太傲嬌，至今沒有另一半。<html> 與 </html> 標簽限定了文檔的開始點和結束點。
第三行與第四行組成一對，叫做“head”標簽。顧名思義，這個“頭”標簽里的內容統領全局，比如控制布局與樣式的CSS代碼文件和添加互動功能的JavaScript代碼文件在這里添加或導入；搜索頁面用的關鍵詞信息在這里添加；頁面信息的編碼方式也是由此指定；瀏覽器窗口的標題也在這里顯示。
第五行與第六行組成一對，叫做“body”標簽。用來顯示所有的頁面內容信息。
畫個圖來表示一下這四個標簽的層級關系（就是誰包含誰的意思，或者誰在誰的勢力范圍內出現）：
邊學邊練------寫一個最簡單的頁面
正所謂萬丈高樓平地起，下面我們就動手做我們的第一個網頁文件。
工具：電腦，安裝一個瀏覽器（IE 火狐 谷歌瀏覽器都可以），確定“記事本”工具可用。
有了以上工具我們就可以寫了。
Step1 新建一個.txt文件。
操作如下：
（1）選擇合適的磁盤，比如D盤或F盤新建一個文件夾，命名為“網頁”。點擊進入。
（2）在空白處點擊鼠標右鍵新建一個文本文件，命名為“第一個頁面”。這時我們就有了一個“第一個頁面.txt”文件了。
如果你的電腦不顯示“.txt”這樣的文件后綴，可以在屏幕左上方尋找“查看”菜單，如圖2
圖 2
點擊后，出現如下菜單如圖3，點擊“選項”。
圖 3
點擊“查看”，去掉“隱藏已知文件類型的擴展名”選項前的“對號”，如圖4所示。這時就能顯示或修改文件后綴了。
圖 4
Step2 添加內容
（1）雙擊打開“第一個頁面.txt”文件，把HTML基本結構共七行代碼輸入進去。
（2）保存，關閉文件，在“第一個頁面.txt”文件上點擊鼠標右鍵，選擇“重命名”，將“.txt”修改為“.html”。這時，系統會提示，如圖1，大膽點“是”。
圖 1
這時我們的文件就變成了html網頁文件了。
我們雙擊這個文件發現瀏覽器內一片空白，這就好比我們在桌子上擺了個碟子，里面并沒有放美食。瀏覽器中的一片白就是空碟子的顏色，而HTML基本結構就是這個碟子。
下面我們往碟子里加點東西。
Step3 添加內容
（1）在“第一個頁面.html”文件上點擊鼠標右鍵，選擇“打開方式”，選擇“記事本”，如果沒有“記事本”選項，請點擊“選擇其他應用”，點擊選擇最下面的“更多應用”，選擇“記事本”。下一次選擇“打開方式”時，“記事本”就會出現了。
（2）在<head></head>標簽之間添加“<title>學習寫第一個網頁</title>”。在<body></body>之間添加“<h1>第一個網頁</h1>”；“<p>隨著學的內容越來越多，網頁就會越來越漂亮了！</p>”完成如圖5
圖 5
（3）保存，關閉，雙擊打開！效果如圖6
圖6
今天的邊學邊做就到這里，下一次會詳細解釋<head>標簽、<body>標簽中常出現的子標簽以及它們各自的作用。
第二篇《邊學邊做網頁篇——<head>標簽里裝點啥？》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
