HTML--慕課網學習筆記摘要(上篇)

阿新 • • 發佈：2019-01-24

基礎框架

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<h1>了不起的蓋茨比</h1>

<p>《了不起的蓋茨比》為那個奢靡年代的縮影。蓋茨比懷揣著對"美國夢"的期翼，投身到那個年代的燈紅酒綠之中，卻在名利場中看盡世態炎涼，以及浮華背後一切終將逝去的空虛悵惘。1925年《了不起的蓋茨比》問世。

</p>

</body>

</html>

瞭解HTML的程式碼註釋

什麼是程式碼註釋？程式碼註釋的作用是幫助程式設計師標註程式碼的用途，過一段時間後再看你所編寫的程式碼，就能很快想起這段程式碼的用途。程式碼註釋不僅方便程式設計師自己回憶起以前程式碼的用途，還可以幫助其他程式設計師很快的讀懂你的程式的功能，方便多人合作開發網頁程式碼。

語法：

認識標籤<head>

文件的頭部描述了文件的各種屬性和資訊，包括文件的標題等。絕大多數文件頭部包含的資料都不會真正作為內容顯示給讀者。

<head>

<meta>

<link>

</head>

<title>標籤
在<title> 和<title> 標籤之間的文字內容是網頁的標題資訊，它會出現在瀏覽器的標題欄中。網頁的title標籤用於告訴使用者和搜尋引擎這個網頁的主要內容是什麼，搜尋引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。
例如：

2. <head>

3. <title>hello world</title>

</head>

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

<body>標籤，網頁上顯示的內容放在這裡

在網頁上要展示出來的頁面內容一定要放在body標籤中。如下圖是一個新聞文章的網頁。

開始學習<p>標籤，新增段落

如果想在網頁上顯示文章，這時就需要<p>標籤了，把文章的段落放到<p>標籤中。

語法： <p>段落文字</p>

注意一段文字一個<p>標籤，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個<p>標籤中。如下圖所示。

瞭解<hx(1-6)>標籤，為你的網頁新增標題

文章的段落用<p>標籤，那麼文章的標題用什麼標籤呢？在本節我們將使用<hx>標籤來製作文章的標題。
標題標籤一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。

語法：<hx>標題文字</hx> x:1-6

注意：因為h1標籤在網頁中比較重要，所以一般h1標籤被用在網站名稱上。騰訊網站就是這樣做的。如：<h1>騰訊網</h1>

h1-h6標籤的預設樣式：
標籤程式碼：

在瀏覽器中顯示的樣式：

加入強調語氣，使用<strong>和<em>標籤

有了段落又有了標題，現在如果想在一段話中特別強調某幾個文字，這時候就可以用到<em>或<strong>標籤
但兩者在強調的語氣上有區別:

<em> 表示強調，在瀏覽器中<em> 預設用斜體表示
<strong>表示更強烈的強調，在瀏覽器中<strong>用粗體表示。
兩個標籤相比，目前國內前端程式設計師更喜歡使用<strong>表示強調。

在瀏覽器中預設樣式是有區別的：

瀏覽器中的樣子，如下圖。

語法：
<em>需要強調的文字</em>
<strong>需要強調的文字</strong>

栗子：
在網上商城中，某產品的打折後的價格是需要強調的。如下圖。

程式碼實現:

使用<span>標籤為文字設定單獨樣式

語法：<span>文字</span>

我們對<em>、<strong>、<span>這三個標籤進行一下總結：

<em>和<strong>標籤是為了強調一段話中的關鍵字時使用，它們的語義是強調。
<span>標籤是沒有語義的，它的作用就是為了設定單獨的樣式用的。

如果現在我們想把上一小節的第一段話“美國夢”三個字設定成blue（藍色），但注意不是為了強調“美國夢”，而只是想為它設定和其它文字不同的樣式（並不想讓螢幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到<span>標籤了。
如下面例子：

<p>1922年的春天，一個想要成名名叫<em>尼克•卡拉威</em>（託比•馬奎爾Tobey Maguire 飾）的作家，

離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，<strong>股票</strong>飛漲的時代。

為了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。</p>

我們如果想設定“美國夢”三個字設定成blue（藍色），只需要在<style>標籤中加入：

span{

color:blue;

}

css部分，以後會聊，你能大概明白span就是能幹單獨設定樣式的活，就ok了

<q>標籤，短文字引用

想在你的html中加一段引用嗎？比如在你的網頁的文章裡想引用某個作家的一句詩，這樣會使你的文章更加出彩，那麼<q>標籤是你所需要的。

語法：<q>引用文字</q>

栗子：

<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心託杜鵑。

</q>開始的。雖然當時不知道是什麼意思，只是覺得詩句挺特別。

後來才明白這個典故出自是莊子的《逍遙遊》，《逍遙遊》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的捨棄。

</p>

講解:

在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心託杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》。因為不是作者自己的文字，所以需要使用實現引用。
注意要引用的文字不用加雙引號，瀏覽器會對q標籤自動新增雙引號。

下圖是程式碼顯示結果：

注意這裡用標籤的真正關鍵點不是它的預設樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。

<blockquote>標籤，長文字引用

<blockquote>的作用也是引用別人的文字。但它是對長文字的引用，如在文章中引入大段某知名作家的文字，這時需要這個標籤。
等等，上一節<q>標籤不是也是對文字的引用嗎？不要忘記<q>標籤是對簡短文字的引用，比如說引用一句話就用到<q>標籤。
如想在我的文章中引用李白《關山月》中的詩句，因為引用文字比較長，所以使用<blockquote>。

語法：<blockquote>引用文字</blockquote>
如下面例子：

<blockquote>明月出天山，蒼茫雲海間。長風幾萬裡，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閒。</blockquote>

瀏覽器對<blockquote>標籤的解析是縮排樣式。如下圖所示：

使用<br>標籤分行顯示文字

例子，我們想讓一首詩顯示得更美觀些，如顯示下面效果：

怎麼可以讓每一句詩詞後面加入一個折行呢？那就可以用到<br />標籤了，在需要加回車換行的地方加入<br />，<br />標籤作用相當於word文件中的回車。
程式碼改為：

<p>暗淡輕黃體性柔，<br/>情疏跡遠只香留。<br />何須淺碧深紅色，<br />自是花中第一流。

詩文在瀏覽器中顯示為：

為你的網頁中新增一些空格

在html程式碼中輸入空格、回車都是沒有作用的。要想輸入空格，必須寫入nbsp;。不要忘了那個分號

在html程式碼中輸入空格是不起作用的，如下程式碼。

在瀏覽中顯示，還是沒有空格效果。

輸入空格的正確方法：

在瀏覽器中的顯示出來的空格效果。如下圖所示。

認識<hr>標籤，新增水平橫線

在資訊展示時，有時會需要加一些用於分隔的橫線，這樣會使文章看起來整齊些。如下圖所示：

語法：

html4.01版本 <hr>
xhtml1.0版本 <hr />
注意：
<hr />標籤和<br />標籤一樣也是一個空標籤，所以只有一個開始標籤，沒有結束標籤。
<hr />標籤的在瀏覽器中的預設樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關係，這些外在樣式在我們以後學習了css樣式表之後，都可以對其修改。
大家注意，現在一般使用 xhtml1.0 的版本（其它標籤也是），這種版本比較規範。

<address>標籤，為網頁加入地址資訊

一般網頁中會有一些網站的聯絡地址資訊需要在網頁中展示出來，這些聯絡地址資訊如公司的地址就可以<address>標籤。也可以定義一個地址（比如電子郵件地址）、簽名或者文件的作者身份。
栗子：

本文的作者：<ahref="mailto:[email protected]">zhaolion</a>

</address>

想加入一行程式碼嗎？使用<code>標籤

在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的程式設計程式碼，當代碼為一行程式碼時，你就可以使用<code>標籤了，如下面例子：

注意：在文章中一般如果要插入多行程式碼時不能使用<code>標籤了。如果是多行程式碼，可以使用<pre>標籤。

使用<pre>標籤為你的網頁加入大段程式碼

在上節中介紹加入一行程式碼的標籤為<code>，但是在大多數情況下是需要加入大段程式碼的，如下圖：

怎麼辦？不會是每一程式碼都加入一個<code>標籤吧，沒有這麼複雜，這時候就可以使用<pre>標籤。

語法：<pre>語言程式碼段</pre>

<pre>標籤的主要作用:預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。
如下程式碼：

<pre>

varmessage="歡迎";

for(vari=1;i<=10;i++)

{

alert(message);

}

</pre>

在瀏覽器中的顯示結果為：

在上面的例子中可以看到程式碼中的空格，換行符都保留下來。如果用以前的方法，回車需要輸入<br>籤，空格需要輸入

注意：<pre> 標籤不只是為顯示計算機的原始碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標籤的一個常見應用就是用來展示計算機的原始碼。

使用<ul>，新增新聞資訊列表

在瀏覽網頁時，你會發現網頁上有很多資訊的列表，如新聞列表、圖片列表，如下圖所示。

這些列表就可以使用ul-li標籤來完成。ul-li是 沒有前後順序的資訊列表。

語法：

<ul>

......

</ul>

舉例：

<ul>

<li>美麗突然出現</li>

<li>觸動心靈的旋律</li>

</ul>

ul-li在網頁中顯示的預設樣式一般為：每項li前都自帶一個圓點，如下圖所示：

使用<ol>，新增順序列表

如果想在網頁中展示有前後順序的資訊列表，怎麼辦呢？如，噹噹網上的書籍熱賣排行榜，如下圖所示。這類資訊展示就可以使用<ol>標籤來製作有序列表來展示。

語法：

<ol>

......

</ol>

舉例：

下面是一個熱點課程下載排行榜：

<ol>

<li>前端開發面試心法 </li>

<li>零基礎學習html</li>

<li>JavaScript全攻略</li>

</ol>

<ol>在網頁中顯示的預設樣式一般為：每項<li>前都自帶一個序號，序號預設從1開始，如下圖所示：

初識div

認識div在排版中的作用

在網頁製作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的作用就相當於一個容器。

語法：<div>…</div>

確定邏輯部分：
什麼是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標籤作為容器。

給div命名，使邏輯更加清晰

在上一小節中，我們把一些標籤放進<div>裡，劃分出一個獨立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設定一個名稱，用id屬性來為<div>提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。
如下兩圖進行比較，如果設計師把兩個圖給你，哪個圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。

語法：<div id="版塊名稱">…</div>

table標籤，認識網頁上的表格

table標籤＝我們平時看到到表格

有時候我們需要在網頁上展示一些資料，如某公司想在網頁上展示公司的庫存清單。如下表：

想在網頁上展示上述表格效果可以使用以下程式碼：

建立表格的四個元素： table、tbody、tr、th、td

<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標籤後，這個表格就要等表格內容全部下載完才會顯示。
<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
<th>…</th>：表格的頭部的一個單元格，表格表頭。
表格中列的個數，取決於一行中資料單元格的個數。

上述程式碼在瀏覽器中顯示的預設的樣式為：

總結：

table表格在沒有新增css樣式之前，在瀏覽器中顯示是沒有表格線的
表頭，也就是th標籤中的文字預設為粗體並且居中顯示

用css樣式，為表格加入邊框

Table 表格在沒有新增 css 樣式之前，是沒有邊框的。這樣不便於我們後期合併單元格知識點的講解，所以在這一節中我們為表格新增一些樣式，為它新增邊框。
程式碼中加入：

table tr td,th{border:1px solid #000;}

</style>

上述程式碼是用 css 樣式程式碼，為th，td單元格新增粗細為一個畫素的黑色邊框。

結果視窗顯示出結果樣式：

caption標籤，為表格新增標題和摘要

表格還是需要新增一些標籤進行優化，可以新增標題和摘要。程式碼如下

摘要摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜尋引擎更好的讀懂表格內容，還可以使螢幕閱讀器更好的幫助特殊使用者讀取表格內容。
語法：<table summary="表格簡介文字">

標題用以描述表格內容，標題的顯示位置：表格上方。
語法：

<table>

<tr>

…

</tr>

…

</table>

初識<a>標籤

使用<a>標籤，連結到另一個頁面

使用<a>標籤可實現超連結，它在網頁製作中可以說是無處不在，只要有連結的地方，就會有這個標籤。

語法：
<a href="目標網址" title="滑鼠滑過顯示的文字">連結顯示的文字</a>

例如：
<a href="http://www.zhaolion.com" title="點選進入我的部落格">click here!</a>

上面例子作用是單擊click here!文字，網頁連結到http://www.zhaolion.com這個網頁。

title屬性的作用，滑鼠滑過連結文字時會顯示這個屬性的文字內容。這個屬性在實際網頁開發中作用很大，主要方便搜尋引擎瞭解連結地址的內容（語義化更友好)
提醒
還有一個有趣的現象不知道小夥伴們發現了沒有，只要為文字加入a標籤後，文字的顏色就會自動變為藍色（被點選過的文字顏色為紫色），顏色很難看吧，不過沒有關係後面我們學習了css樣子就可以設定過來（a{color:#000}),後面會詳細講解。

在新建瀏覽器視窗中開啟連結

<a>標籤在預設情況下，連結的網頁是在當前瀏覽器視窗中開啟，有時我們需要在新的瀏覽器視窗中開啟。只需要新增一個屬性 target="_blank"
如下程式碼：
<a href="目標網址"target="_blank">click here!</a>

使用mailto在網頁中連結Email地址

<a>標籤還有一個作用是可以連結Email地址，使用mailto能讓訪問者便捷向網站管理者傳送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進行講解，請看詳細圖示：

提醒:如果mailto後面同時有多個引數的話，第一個引數必須以“?”開頭，後面的引數每一個都以“&”分隔。
下面是一個完整的例項: 在瀏覽器中顯示的一個傳送按鈕

點選連結會開啟電子郵件應用，並自動填寫收件人等設定好的資訊，如下圖：

認識<img>標籤，為網頁插入圖片

在網頁的製作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標籤來插入圖片。
語法： [站外圖片上傳中……(48)]

舉例： <img src = "myimage.gif" alt = "My Image"title = "My Image" />

講解：

src：標識影象的位置；
alt：指定影象的描述性文字，當影象不可見時（下載不成功時），可看到該屬性指定的文字；
title：提供在影象可見時對影象的描述(滑鼠滑過圖片時顯示的文字)；
影象可以是GIF，PNG，JPEG格式的影象檔案。

認識表單

使用表單標籤，與使用者互動

網站怎樣與使用者進行互動？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的資料傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的資料。

語法： <form method="傳送方式"action="伺服器檔案">

講解：

<form> ：<form>標籤是成對出現的，以<form>開始，以</form>結束。
action ：瀏覽者輸入的資料被傳送到的地方,比如一個PHP頁面(save.php)。
method ：資料傳送的方式（get/post）。

4. <form method="post" action="save.php">

5. <label for="username">使用者名稱:</label>

6. <input type="text"name="username" />

7. <label for="pass">密碼:</label>

8. <input type="password"name="pass" />

</form>

注意

所有表單控制元件（文字框、文字域、按鈕、單選框、複選框等）都必須放在<form></form>標籤之間（否則使用者輸入的資訊可提交不到伺服器上哦！）。
method:post/get的區別這一部分內容屬於後端程式設計師考慮的問題。感興趣的小夥伴可以問谷哥

文字輸入框、密碼輸入框

當用戶要在表單中鍵入字母、數字等內容時，就會用到文字輸入框。文字框也可以轉化為密碼輸入框。

語法：

<form>

<inputtype="text/password" name="名稱" value="文字" />

</form>

type：
- 當type="text"時，輸入框為文字輸入框;
- 當type="password"時, 輸入框為密碼輸入框。
name：為文字框命名，以備後臺程式ASP 、PHP使用。
value：為文字輸入框設定預設值。(一般起到提示作用)

舉例：

<form>

姓名：

<inputtype="text" name="myName">

<br/>

密碼：

<inputtype="password" name="pass">

</form>

在瀏覽器中顯示的結果：

文字域，支援多行文字輸入

當用戶需要在表單中輸入大段文字時，需要用到文字輸入域。

語法： <textarea rows="行數"cols="列數">文字</textarea>

<textarea>標籤是成對出現的，以<textarea>開始，以</textarea>結束。
cols ：多行輸入域的列數。
rows ：多行輸入域的行數。
在<textarea></textarea>標籤之間可以輸入預設值。

舉例：

<textarea cols="50" rows="10" >在這裡輸入內容...</textarea>

</form>

在瀏覽器中顯示結果：

使用單選框、複選框，讓使用者選擇

在使用表單設計調查表時，為了減少使用者的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和複選框，兩者的區別是單選框中的選項使用者只能選擇一項，而複選框中使用者可以任意選擇多項，甚至全選。請看下面的例子:
語法： <input type="radio/checkbox"value="值" name="名稱" checked="checked"/>

type:
- 當 type="radio" 時，控制元件為單選框
- 當 type="checkbox" 時，控制元件為複選框
value：提交資料到伺服器的值（後臺程式PHP使用）
name：為控制元件命名，以備後臺程式 ASP、PHP 使用
checked：當設定 checked="checked" 時，該選項被預設選中

如下面程式碼：

在瀏覽器中顯示的結果：

注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。

使用下拉列表框，節省空間

下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下程式碼：

講解：

value：

selected="selected"：設定selected="selected"屬性，則該選項就被預設選中。

使用下拉列表框進行多選

下拉列表也可以進行多選操作，在<select>標籤中設定multiple="multiple"屬性，就可以實現多選功能，在 widows 作業系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。如下程式碼：

在瀏覽器中顯示的結果：

使用提交按鈕，提交資料

在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單資訊到伺服器時，需要用到提交按鈕。
語法： <input type="submit" value="提交">

type：只有當type值設定為submit時，按鈕才有提交作用
value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：

使用重置按鈕，重置表單資訊

當用戶需要重置表單資訊到初始時的狀態時，比如使用者輸入“使用者名稱”後，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設定為"reset"就可以。
語法： <input type="reset" value="重置">

type：只有當type值設定為reset時，按鈕才有重置作用
value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：
輸入賬號

單擊重置按鈕

form表單中的label標籤

小夥伴們，你們在前面學習表單各種控制元件的時候，有沒有發現一個標籤--label，這一小節就來揭曉它的作用。
label標籤不會向用戶呈現任何特殊效果，它的作用是為滑鼠使用者改進了可用性。如果你在 label 標籤內點選文字，就會觸發此控制元件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上（就自動選中和該label標籤相關連的表單控制元件上）。
語法： <label for="控制元件id名稱">
注意標籤的 for 屬性中的值應當與相關控制元件的id 屬性值一定要相同。 這樣你會在點慢跑標籤，即使沒有點checkbox 也能選中
例子：

<form>

<a>你對什麼運動感興趣：</a> <br />

<labelfor="1">慢跑</label><inputtype="checkbox" name="manpao" id="1"><br/>

<labelfor="2">登山</label><inputtype="checkbox" name="dengshan" id="2"><br/>

</form>

-----------參考《慕課網HTML/CSS基礎課程學習》

HTML--慕課網學習筆記摘要(上篇)

HTML--慕課網學習筆記摘要(上篇)

HTML基本語法（慕課網學習筆記）

JavaScript入門--慕課網學習筆記

CSS基本語法（慕課網學習筆記）

js之window物件（慕課網學習筆記）

js之DOM入門（慕課網學習筆記）

初識javaScript(慕課網學習筆記)

CSS定位（慕課網學習筆記）

Float浮動（慕課網學習筆記）

[慕課網學習筆記]Linux常用命令

Linux慕課網學習筆記

慕課網學習筆記----《網頁佈局基礎》—絕對定位佈局

Android非同步載入(慕課網學習筆記)

【總結整理】javascript基礎入門學習（慕課網學習）

css深入理解之float浮動慕課視訊學習筆記

慕課網學習 - Struts2入門

慕課網學習 - 目錄

慕課網學習-JSON

慕課網學習 - 監聽器

從慕課網學習 ElasticSearch的專案--搜房實戰

HTML--慕課網學習筆記摘要(上篇)

相關推薦