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