點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

html基礎教程之代碼初體驗

來源：懂視網責編：小采時間：2020-11-27 15:33:28

html基礎教程之代碼初體驗

html基礎教程之代碼初體驗:一、代碼初體驗，制作我的第一個網頁 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 &

推薦度：

點擊下載本文 文檔為doc格式

導讀html基礎教程之代碼初體驗:一、代碼初體驗，制作我的第一個網頁 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 &

一、代碼初體驗，制作我的第一個網頁

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>制作我的第一個網頁</title>
 6 </head>
 7 <body>
 8 <h1></h1>
 9 </body>
10 </html>

代碼中第8行<h1>和</h1>標簽之間，輸入Hello World 字符串。

注意Hello World文字一定要寫到<h1></h1>兩個標簽之間。如：<h1>Hello World</h1>

二、Html和CSS的關系

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>Html和CSS的關系</title>
 6 <style type="text/css">
 7 h1{
 8 
 9 
10 
11 }
12 </style>
13 </head>
14 <body>
15 <h1>Hello World!</h1>
16 </body>
17 </html>

學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什么的：

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

2. CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。

3. JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現的。

用個面向對象的思想理解,好比一個人：
HTML (就是人的四肢眼睛骨頭這種實質性的)
CSS (就是衣服，膚色，妝扮)
javaScript (就是人的行為動作,比如吃飯，走路，說話)

試試:為Hello World添加樣式

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

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

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

注意：

1.分號;與：號都得在半角及英文狀態下輸入。

2.每行css代碼結尾都要加入;（h1{后不用加，因為它不是一條語句）

3. #930顏色值前面的#號注意不要忘記了。

三、認識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 
 8 
 9 <body>
10 <h1>勇氣</h1>
11 <p>三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
12 <p>到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
13 <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
14 </body>
15 
16 
17 </html>

讓我們通過一個網頁的學習，來對html標簽有一個初步理解。平常大家說的上網就是瀏覽各種各式各樣的網頁，這些網頁都是由html標簽組成的。下面就是一個簡單的網頁。效果圖如下：

從零開始學習html（一）0

我們來分析一下，這個網頁由哪些html標簽組成：

“勇氣”是網頁內容文章的標題，<h1></h1>就是標題標簽，它在網頁上的代碼寫成<h1>勇氣</h1>。

“三年級時...我也沒勇氣參加。” 是網頁中文章的段落，<p></p>是段落標簽。它在網頁上的代碼寫成 <p>三年級時...我也沒勇氣參加。</p>

網頁上那張小女生的圖片，由img標簽來完成的，它在網頁上的代碼寫成<img src="1.jpg">

網頁的完整代碼如下圖：

從零開始學習html（一）1

可以這么說，網頁中每一個內容在瀏覽器中的顯示，都要存放到各種標簽中。

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

這個是寫在HTML文件的頭部中。

meta是html中的元標簽，其中包含了對應html的相關信息，客戶端瀏覽器或服務器端的程序會根據這些信息進行處理。

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

因為沒有標注字符集的話，有可能在網頁中默認選擇GB的，這樣你在編譯時一般都是使用的是UTF-8的國際字符集進行編碼，但是到了網頁中就會出現亂碼。

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

charset=utf-8（編碼）：特別重要！！！這個網頁的編碼是utf-8，中文編碼，需要注意的是這個是網頁內容的編碼，而不是文件本身的，其他類型的編碼中文可能會出現亂碼。其他編碼：eg:gb2312,iso-8859-1,utf-8

四、標簽的語法

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>標簽的語法</title>
 6 </head>
 7 <body>
 8 <h1>在本教程中，你將學習如何使用 HTML 來創建站點</h1>
 9 <p>當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 
10 </body>
11 </html>

標簽的語法

1. 標簽由英文尖括號<和>括起來，如<html>就是一個標簽。

2. html中的標簽一般都是成對出現的，分開始標簽和結束標簽。結束標簽比開始標簽多了一個/。

如：

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

從零開始學習html（一）2

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

從零開始學習html（一）3

4. HTML標簽不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程序員都以小寫為準。

代碼的第9行缺少代碼，請補充。

1、結束標簽別忘了加/。

<開始標簽>...</結束標簽>

2、別忘了，在html中的標簽代碼可都是成對出現的并且要正確嵌套。

如：

五、認識html文件基本結構

1 !DOCTYPE HTML>
2 
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>認識html文件基本結構</title>
6 </head>
7 <body>
8 <h1>在本小節中，你將學會認識html文件基本結構</h1>
9 </body>

一個HTML文件是有自己固定的結構的。

<html>
 <head>...</head>
 <body>...</body>
</html>

代碼講解：

1. <html></html>稱為根標簽，所有的網頁標簽都在<html></html>中。

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

3. 在<body>和</body>標簽之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。

代碼的第2行和第10行缺少代碼，請補充。

六、認識head標簽

 1 <!DOCTYPE HTML>
 2 <html>
 3 
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>認識head標簽</title>
 6 
 7 <body>
 8 <h1>歡迎來到慕課網</h1>
 9 </body>
10 </html>

我們來了解一下<head>標簽的作用。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。

下面這些標簽可用在 head 部分：

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

<title>標簽：在<title>和</title>標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。

網頁的title標簽用于告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題

。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。

例如：

<head>
 <title>hello world</title>
</head>

<title>標簽的內容“hello world”會在瀏覽器中的標題欄上顯示出來，如下圖所示：

從零開始學習html（一）4

代碼中的第3行和第6行缺少代碼，請補充。注意title標簽是否在<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>一站式報名咨詢、助學答疑服務，無論是報名、選課、學習、做作業、考試、寫論文，畢業，這里都有專業老師為你答疑解惑！<a href="#">向報名顧問咨詢</a></p>
11 </p>
12 <!--在線咨詢 end-->
13 </body>
14 </html>

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

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

語法：

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

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

【相關推薦】

1. 免費html在線視頻教程

2. html開發手冊

3. php.cn原創html5視頻教程

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com