HTML的基本概念

什麼是HTML

HTML是超文本標記語言（Hyper Text Markup Language），用來描述網頁。

不是C,C++之類的編程語言，而是一種標記語言
標記語言是一套標記標籤
HTML利用標記標籤來描述網頁

什麼是HTML標籤（HTML TAG)

用<>括號括起來的關鍵字
一般是成對出現的，標籤對中第一個標籤稱爲開始標籤，第二個標籤稱爲結束標籤

網頁

網頁==HTML文檔，包含HTML標籤和純文本

網頁的開發步驟

編寫HTML文檔
使用WEB瀏覽器打開HTML文檔
WEB瀏覽器讀取 HTML 文檔，並以網頁的形式顯示出它們。
瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容

第一個HTML文檔

<html>

<body>

<h1>Header 標題</h1>

<p>段落</p>

</body>

</html>

<html> 與 </html> 之間的文本描述網頁
<body> 與 </body> 之間的文本是可見的頁面內容
<h1> 與 </h1> 之間的文本被顯示爲標題
<p> 與 </p> 之間的文本被顯示爲段落

用記事本編寫第一個HTML文件

編寫HTML文件

打開記事本，輸入如圖：

文件的保存

另存爲.html或者.htm

web解釋

直接找到保存的文件，雙擊即可。

可能遇到的問題

選擇的瀏覽器打不開html文件

解決方法：使用支持html文件的瀏覽器

如果純文本是中文，網頁出現亂碼，則採用以下網址的方法

http://www.divcss5.com/html/h546.shtml

HTML常用標籤

標題

<html>
<body>
<h1>THIS IS H1</h1>
<h2>THIS IS H2</h2>
<h3>THIS IS H3</h3>
<p>this is article</p>
</body>
</html>

通過關鍵字對<h1>到<h6>設置第？級標題

段落

<html>
<body>
<h1>THIS IS H1</h1>
<p>this is article01</p>
<p>this is article02</p>
<p>this is article03</p>
</body>
</html>

通過關鍵字對<p>

圖像

<html>
<body>

<img src="D:\1.PNG" width="600" height="120" />

</body>
</html>

公式：

紅色爲可改的部分

鏈接

<html>
<body>
<a href="http://baidu.com">
BAIDU LINK</a>
</body>
</html>

雙擊打開網址：

公式：

<a href="輸入網址">
輸入顯示的文本</a>

趣味導引

最好的編程學習方法應該就是閱讀源碼了，當你看到一個網頁時，是不是想知道它是如何實現的？

可以單擊鼠標右鍵選擇“查看源文件”或“查看頁面源代碼”就可以查看網頁源代碼了。

HTML元素

HTML元素是指從開始標籤到結束標籤的內容，可以進行嵌套。

大多數HTML標籤擁有屬性；例如img標籤。

空元素在開始標籤中進行關閉

HTML屬性

屬性是HTML元素的附加信息，在開始標籤中定義

<html>
<body bgcolor="yellow">
<h1 align="center"> This is heading  </h1>
<p align="center"> This is article </p>
<a href="https://www.zhihu.com/"> This is Link </a>
<img scr="E://1.jpg" width="600" height="600" />
</body>
</html>

bgcolor :background color

align:排列（位置）

href:超鏈接

注意：此示例只爲了說明屬性，關於HTML樣式，後文有更好的方法設置。

第二天標籤

HTML註釋

示例：

<! -- 這是註釋，不會在網頁中出現 -->

HTML分界線

標籤：<hr/>

注意：單個標籤的/在關鍵字後面，標籤對的結束標籤的/在關鍵字的前面。

作用：在頁面中創造分界線，用於分隔內容

試一試：

<html>
<body bgcolor="yellow">
<h1> h1 </h1>
<p> 1 </p>
</hr>
<! -- 用來分隔1和2 -->
<p> 2 </p>
</body>
</html>

注意：不是隻有hr有分隔作用，其他標籤在之後學習中積累。

HTML空行

<html>
<body>

<p>這是段落。可以寫好多好多，但是它們都是一段。這是段落。可以寫好多好多，但是它們都是一段。這是段落。可以寫好多好多，但是它們都是一段。這是段落。可以寫好多好多，但是它們都是一段。這是段落。可以寫好多好多，但是它們都是一段。</p>
<p>每一對標籤p都是一段。</p>
<p>瀏覽器會自動的在每一段的上下添加空行</p>
<hr/>
<p>但是不建議用不含內容的p來添加空行</p>
<br/>
<p>用br添加空行</p>
</body>
</html>

可以使用<p></p>來添加空行，但不支持這樣做。

正確做法：使用<br/>添加空行。

br的其他用法

如果在一段<p>中，你希望在不產生新的段落的情況下換行，可以使用<br/>

<html>

<body>

<p>
武漢加油<br />！湖北加油！<br />中國加油！<br /><br />新型冠型病毒bs
</p>

</body>
</html>

注意：

對於 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。

提出問題：怎麼樣纔可以控制網頁展示的元素格式？

重點內容1：Style屬性直擊HTML樣式

推薦用style屬性來控制HTML樣式

<html>
<body>
<h1 style="text-align:right"> This is heading </h1>
<h2 style="background-color:yellow"> This is Heading </h2>
<p style="font-family:arial; color:red; font-size:20px;"> This is <br/>article </p>
</body>
</html>

重點內容2：文本格式化

學習方法推薦：掌握縮寫對應的英文意思，有助於理解標籤的意思

注意：以下標籤必須一個一個的應用過去。

文本格式化標籤

標籤	描述
<b>	定義粗體文本。
<big>	定義大號字。
<em>	定義着重文字。
<i>	定義斜體字。
<small>	定義小號字。
<strong>	定義加重語氣。
<sub>	定義下標字。
<sup>	定義上標字。
<ins>	定義插入字。
<del>	定義刪除字。

<html>
<body>
<pre>
這裏是預留     文本，保留空格和空行，
適用於展示代碼。
</pre>
<b> 這裏是黑體 </b>
<br/>
<big> 這裏是大號字 </big>
<br/>
<em> 這裏是着重字 </em>
<br/>
<! -- br的作用是換行，即這些是同一個段落 -->
</body>
</html>

“計算機輸出”標籤

標籤	描述
<code>	定義計算機代碼。
<kbd>	定義鍵盤碼。
<samp>	定義計算機代碼樣本。
<tt>	定義打字機代碼。
<var>	定義變量。
<pre>	定義預格式文本。

<html>
<body>
<code>
輸入代碼
</code>
</body>
</html>

引用、引用的術語定義

標籤	描述
<abbr>	定義縮寫。
<acronym>	定義首字母縮寫。
<address>	定義地址。
<bdo>	定義文字方向。
<blockquote>	定義長的引用。
<q>	定義短的引用語。
<cite>	定義引用、引證。
<dfn>	定義一個定義項目。

<html>
<body bgcolor="blue">
The <abbr title="backgroundcolor"> bdcolor </abbr> is blue
The <acronym title="World War Three"> WWT </acronym>
<address>
Written by <a href="mailto:[email protected]">Donald Duck</a>.<br> 
Visit us at:<br>
ten
</address>
</body>
</html>

abbr

屬性:title=要縮寫的單詞

元素爲其縮寫

acronym

屬性：title=要首字母縮寫的單詞

元素爲其縮寫

HTML使用樣式的三種方法

當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表：

應用普遍性依次如下：

外部樣式表

當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。

<html>

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>
<h1> This is heading </h1>
<p> This is a paragraph </p>
</body>
</html>

內部樣式表

當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標籤定義內部樣式表。

<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1> This is heading </h1>
<p> This is a paragraph </p>
</body>
</html>

內聯樣式

當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。

HTML表格

表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割爲若干單元格（由 <td> 標籤定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1> 表格 </h1>
<table border="1">
    <caption>
       這是標題
    </caption>
    <tr>
        <td>500</td>
        <td>600</td>
    </tr>
    <tr>
        <td> &nbsp; </td>
        <td> 800 </td>
    </tr>
</table>
</body>
</html>

caption:標題

tr是行

td是單元格的內容

th是表頭,擁有屬性 rowspan 和 colspan ：跨幾行或跨幾列

跨行--rowspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>這是跨行實驗</h1>
<table border="1">

    <tr>
        <th> 姓名 </th>
        <td> 張三 </td>
    </tr>

    <tr>
        <th rowspan="3">
            家人
        </th>
        <td>
            妻子
        </td>
    </tr>
    <tr>
        <td> 兒子 </td>
    </tr>
    <tr>
        <td> 父母 </td>
    </tr>
</table>
</body>
</html>

跨列--colspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>這是跨列實驗</h1>
<table border="1">
    <caption>
        信息表
    </caption>
    <tr>
        <th> 姓名 </th>
        <th colspan="3"> 家人 </th>
    </tr>
    <tr>
        <td> 張三</td>
        <td> 妻子</td>
        <td> 兒子</td>
        <td> 父母</td>
    </tr>
</table>
</body>
</html>

HTML列表

無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點進行標記。

無序列表始於 <ul> 標籤。每個列表項始於 <li>。

列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

有序列表

同樣，有序列表也是一列項目，列表項目使用數字進行標記。

有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。