HTML+CSS基礎第一章 html介紹

時間 2019-11-17

原文原文鏈接

1-1 代碼初體驗，製做個人第一個網頁

歡迎來到HTML+CSS課堂，加入高端大氣上檔次的web前端開發團隊。咱們在正式學習以前，先來熱熱身，問候下世界，作我的生中的第一個html網頁吧。css

任務

請在右邊編輯器的第8行，在<h1>和</h1>標籤之間，輸入Hello World 字符串。html

 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>

1-2 Html和CSS的關係

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

1. HTML是網頁內容的載體。內容就是網頁製做者放在頁面上想要讓用戶瀏覽的信息，能夠包含文字、圖片、視頻等。程序員

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

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

下面給你們佈置一個任務，在完成任務的時候，每輸入一行代碼，代碼窗口就會當即顯示出效果。編輯器

任務

我也來試試:爲Hello World添加樣式學習

1.在右邊編輯器的第8行，輸入font-size:12px;（注意結果窗口的文字大小的變化）。字體

2.在右邊編輯器的第9行，輸入color:#930;（注意結果窗口的文字顏色的變化）。動畫

3.在右邊編輯器的第10行，輸入text-align:center;（注意結果窗口的文字居中的變化）。

 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>

1-3 認識html標籤

讓咱們經過一個網頁的學習，來對html標籤有一個初步理解。日常你們說的上網就是瀏覽各類各式各樣的網頁，這些網頁都是由html標籤組成的。下面就是一個簡單的網頁。效果圖以下：

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

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

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

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

網頁的完整代碼以下圖：

總結一下，能夠這麼說，網頁中每個內容在瀏覽器中的顯示，都要存放到各類標籤中。

單擊提交按鈕進行下一小節學習。

 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>

1-4 標籤的語法

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

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

如：

（1） <p></p>

（2） <div></div>

（3） <span></span>

3. 標籤與標籤之間是能夠嵌套的，但前後順序必須保持一致，如：<div>裏嵌套<p>，那麼</p>必須放在</div>的前面。以下圖所示。

4. HTML標籤不區分大小寫，<h1>和<H1>是同樣的，但建議小寫，由於大部分程序員都以小寫爲準。

任務

我來試試：看你是否真正學會了標籤的語法

右部編輯器中有一個網頁的代碼，但第9行缺乏代碼，請補充。

 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-5 認識html文件基本結構

這一節中咱們來學習html文件的結構：一個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>等網頁內容標籤，在這裏的標籤中的內容會在瀏覽器中顯示出來。

任務

我來試試：看你是否學會了html文件結構

右部編輯器中有一個網頁的代碼，但第2行和第10行缺乏代碼，請補充。

 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>
10

1-6 認識head標籤

作得好，下面咱們來了解一下<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」會在瀏覽器中的標題欄上顯示出來，以下圖所示：

<head>標籤中的其它標籤內容的講解，會在之後的章節中爲你們一一講解。

任務

我來試試：是否瞭解head標籤

右部編輯器中有一個網頁的代碼，但第3行和第6行缺乏代碼，請補充。

 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>

1-7 瞭解HTML的代碼註釋

什麼是代碼註釋？代碼註釋是幫助程序員標註代碼的做用，過一段時間後再看你所編寫的代碼，就能很快想起這段代碼的做用。代碼註釋不只方便程序員本身回憶起之前代碼的用途，還能夠幫助其餘程序員很快的讀懂你的程序的功能，方便多人合做開發網頁代碼。

語法：

如：右邊編輯器的代碼的第七、11行都是，可是你會發現註釋代碼是不會在結果窗口中顯示出來的。

 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         <div>
10             <p>一站式報名諮詢、助學答疑服務，不管是報名、選課、學習、作做業、考試、寫論文，畢業，這裏都有專業老師爲你答疑解惑！<a href="#">向報名顧問諮詢</a></p>
11         </div>
12         <!--在線諮詢 end-->
13     </body>
14 </html>