代碼中第8行 h1 和 /h1 標(biāo)簽之間，輸入Hello World 字符串。

注意Hello World文字一定要寫到 h1 /h1 兩個(gè)標(biāo)簽之間。如： h1 Hello World /h1

二、Html和CSS的關(guān)系

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title Html和CSS的關(guān)系 /title  6 style type= text/css  7 h1{12 /style 13 /head 14 body 15 h1 Hello World! /h1 16 /body 17 /html 

學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術(shù)都是用來實(shí)現(xiàn)什么的：

1. HTML是網(wǎng)頁(yè)內(nèi)容的載體。內(nèi)容就是網(wǎng)頁(yè)制作者放在頁(yè)面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。

2. CSS樣式是表現(xiàn)。就像網(wǎng)頁(yè)的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。

3. JavaScript是用來實(shí)現(xiàn)網(wǎng)頁(yè)上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單?；蚴髽?biāo)滑過表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換?？梢赃@么理解，有動(dòng)畫的，有交互的一般都是用JavaScript來實(shí)現(xiàn)的。

用個(gè)面向?qū)ο?/u>的思想理解,好比一個(gè)人：
HTML (就是人的四肢眼睛骨頭這種實(shí)質(zhì)性的)
CSS (就是衣服，膚色，妝扮)
javaScript (就是人的行為動(dòng)作,比如吃飯，走路，說話)

試試:為Hello World添加樣式

1.在代碼的第8行，輸入font-size:12px;（font-size:12px;設(shè)置文字大小，注意結(jié)果窗口的文字大小的變化）。

2.在代碼的第9行，輸入color:#930;（color:#930;設(shè)置文字顏色，注意結(jié)果窗口的文字顏色的變化）。

3.在代碼的第10行，輸入text-align:center;（text-align:center;設(shè)置文字位置（居中），注意結(jié)果窗口的文字居中的變化）。

注意：

1.分號(hào);與：號(hào)都得在半角及英文狀態(tài)下輸入。

2.每行css代碼結(jié)尾都要加入;（h1{后不用加，因?yàn)樗皇且粭l語句）

3. #930顏色值前面的#號(hào)注意不要忘記了。

三、認(rèn)識(shí)html標(biāo)簽

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title 認(rèn)識(shí)html標(biāo)簽 /title  6 /head  9 body 10 h1 勇氣 /h1 11 p 三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒有這個(gè)勇氣來回答老師提出的問題。學(xué)校舉辦的活動(dòng)我也沒勇氣參加。 /p 12 p 到了三年級(jí)下學(xué)期時(shí)，我們班上了一節(jié)公開課，老師提出了一個(gè)很簡(jiǎn)單的問題，班里很多同學(xué)都舉手了，甚至成績(jī)比我差很多的，也舉手了，還說著： 我來，我來。 我環(huán)顧了四周，就我沒有舉手。 /p 13 img src= /uploads/allimg/190516/133003K06-0.jpg 14 /body 17 /html 

讓我們通過一個(gè)網(wǎng)頁(yè)的學(xué)習(xí)，來對(duì)html標(biāo)簽有一個(gè)初步理解。平常大家說的上網(wǎng)就是瀏覽各種各式各樣的網(wǎng)頁(yè)，這些網(wǎng)頁(yè)都是由html標(biāo)簽組成的。下面就是一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。效果圖如下：

我們來分析一下，這個(gè)網(wǎng)頁(yè)由哪些html標(biāo)簽組成：

“勇氣”是網(wǎng)頁(yè)內(nèi)容文章的標(biāo)題， h1 /h1 就是標(biāo)題標(biāo)簽，它在網(wǎng)頁(yè)上的代碼寫成 h1 勇氣 /h1 。

“三年級(jí)時(shí)...我也沒勇氣參加?！?是網(wǎng)頁(yè)中文章的段落， p /p 是段落標(biāo)簽。它在網(wǎng)頁(yè)上的代碼寫成 p 三年級(jí)時(shí)...我也沒勇氣參加。 /p

網(wǎng)頁(yè)上那張小女生的圖片，由img標(biāo)簽來完成的，它在網(wǎng)頁(yè)上的代碼寫成 img src= 1.jpg

網(wǎng)頁(yè)的完整代碼如下圖：

可以這么說，網(wǎng)頁(yè)中每一個(gè)內(nèi)容在瀏覽器中的顯示，都要存放到各種標(biāo)簽中。

 meta http-equiv= Content-Type content= text/html; charset=utf-8 

這個(gè)是寫在HTML文件的頭部中。

meta是html中的元標(biāo)簽，其中包含了對(duì)應(yīng)html的相關(guān)信息，客戶端瀏覽器或服務(wù)器端的程序會(huì)根據(jù)這些信息進(jìn)行處理。

主要是告訴瀏覽器這個(gè)的內(nèi)容類型是HTML文檔，里面的內(nèi)容是使用文本和HTML，字符集是UTF-8。

因?yàn)闆]有標(biāo)注字符集的話，有可能在網(wǎng)頁(yè)中默認(rèn)選擇GB的，這樣你在編譯時(shí)一般都是使用的是UTF-8的國(guó)際字符集進(jìn)行編碼，但是到了網(wǎng)頁(yè)中就會(huì)出現(xiàn)亂碼。

http-equiv= Content-Type 表示描述文檔類型，類似于HTTP的頭部協(xié)議，它回應(yīng)給瀏覽器一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁(yè)內(nèi)容。
content= text/HTML（內(nèi)容類型）; 文檔類型mime類型，這個(gè)網(wǎng)頁(yè)的格式是文本的，網(wǎng)頁(yè)模式，這里為html,如果JS就是text/javascript。（重要）
頁(yè)面字符集，

charset=utf-8（編碼）：特別重要?。?！這個(gè)網(wǎng)頁(yè)的編碼是utf-8，中文編碼，需要注意的是這個(gè)是網(wǎng)頁(yè)內(nèi)容的編碼，而不是文件本身的，其他類型的編碼中文可能會(huì)出現(xiàn)亂碼。其他編碼：eg:gb2312,iso-8859-1,utf-8

四、標(biāo)簽的語法

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title 標(biāo)簽的語法 /title  6 /head  7 body  8 h1 在本教程中，你將學(xué)習(xí)如何使用 HTML 來創(chuàng)建站點(diǎn) /h1  9 p 當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí)，就可以使用內(nèi)聯(lián)樣式。 10 /body 11 /html 

標(biāo)簽的語法

1. 標(biāo)簽由英文尖括號(hào) 和 括起來，如 html 就是一個(gè)標(biāo)簽。

2. html中的標(biāo)簽一般都是成對(duì)出現(xiàn)的，分開始標(biāo)簽和結(jié)束標(biāo)簽。結(jié)束標(biāo)簽比開始標(biāo)簽多了一個(gè)/。

如：

（1） p /p （2） p /p （3） span /span 

3. 標(biāo)簽與標(biāo)簽之間是可以嵌套的，但先后順序必須保持一致，如： p 里嵌套 p ，那么 /p 必須放在 /p 的前面。如下圖所示。

4. HTML標(biāo)簽不區(qū)分大小寫， h1 和 H1 是一樣的，但建議小寫，因?yàn)榇蟛糠殖绦騿T都以小寫為準(zhǔn)。

代碼的第9行缺少代碼，請(qǐng)補(bǔ)充。

1、結(jié)束標(biāo)簽別忘了加/。

開始標(biāo)簽 ... /結(jié)束標(biāo)簽

2、別忘了，在html中的標(biāo)簽代碼可都是成對(duì)出現(xiàn)的并且要正確嵌套。

如：

p p ... /p /p

五、認(rèn)識(shí)html文件基本結(jié)構(gòu)

1 !DOCTYPE HTML 3 head 4 meta http-equiv= Content-Type content= text/html; charset=utf-8 5 title 認(rèn)識(shí)html文件基本結(jié)構(gòu) /title 6 /head 7 body 8 h1 在本小節(jié)中，你將學(xué)會(huì)認(rèn)識(shí)html文件基本結(jié)構(gòu) /h1 9 /body 

一個(gè)HTML文件是有自己固定的結(jié)構(gòu)的。

 html  head ... /head  body ... /body  /html 

代碼講解：

1. html /html 稱為根標(biāo)簽，所有的網(wǎng)頁(yè)標(biāo)簽都在 html /html 中。

2. head 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有 title 、 script 、 style 、 link 、 meta 等標(biāo)簽。

3. 在 body 和 /body 標(biāo)簽之間的內(nèi)容是網(wǎng)頁(yè)的主要內(nèi)容，如 h1 、 p 、 a 、 img 等網(wǎng)頁(yè)內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來。

代碼的第2行和第10行缺少代碼，請(qǐng)補(bǔ)充。

六、認(rèn)識(shí)head標(biāo)簽

 1 !DOCTYPE HTML  2 html  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title 認(rèn)識(shí)head標(biāo)簽 /title  7 body  8 h1 歡迎來到慕課網(wǎng) /h1  9 /body 10 /html 

我們來了解一下 head 標(biāo)簽的作用。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。

下面這些標(biāo)簽可用在 head 部分：

 head  title ... /title  meta  link  style ... /style  script ... /script  /head 

title 標(biāo)簽：在 title 和 /title 標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁(yè)的標(biāo)題信息，它會(huì)出現(xiàn)在瀏覽器的標(biāo)題欄中。

網(wǎng)頁(yè)的title標(biāo)簽用于告訴用戶和搜索引擎這個(gè)網(wǎng)頁(yè)的主要內(nèi)容是什么，搜索引擎可以通過網(wǎng)頁(yè)標(biāo)題，迅速的判斷出網(wǎng)頁(yè)的主題

。每個(gè)網(wǎng)頁(yè)的內(nèi)容都是不同的，每個(gè)網(wǎng)頁(yè)都應(yīng)該有一個(gè)獨(dú)一無二的title。

例如：

 head  title hello world /title  /head 

title 標(biāo)簽的內(nèi)容“hello world”會(huì)在瀏覽器中的標(biāo)題欄上顯示出來，如下圖所示：

代碼中的第3行和第6行缺少代碼，請(qǐng)補(bǔ)充。注意title標(biāo)簽是否在 head /head 之間。

七、了解HTML的代碼注釋

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title HTML的代碼注釋 /title  6 /head  7 body  8 !--在線咨詢 begin--  9 p 10 p 一站式報(bào)名咨詢、助學(xué)答疑服務(wù)，無論是報(bào)名、選課、學(xué)習(xí)、做作業(yè)、考試、寫論文，畢業(yè)，這里都有專業(yè)老師為你答疑解惑！ a href= # 向報(bào)名顧問咨詢 /a /p 11 /p 12 !--在線咨詢 end-- 13 /body 14 /html 

什么是代碼注釋？代碼注釋的作用是幫助程序員標(biāo)注代碼的用途，過一段時(shí)間后再看你所編寫的代碼，就能很快想起這段代碼的用途。

代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發(fā)網(wǎng)頁(yè)代碼。

語法：

!--注釋文字 --

如：代碼的第 8、12 行都是，注釋代碼是不會(huì)在結(jié)果窗口中顯示出來的。

注釋或取消注釋快捷鍵 ： ctrl + /

【相關(guān)推薦】

1. 免費(fèi)html在線視頻教程

2. html開發(fā)手冊(cè)

3. VeVb.com原創(chuàng)html5視頻教程

以上就是html基礎(chǔ)教程之代碼初體驗(yàn)的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。