該<!DOCTYPE html>聲明定義這個文件是HTML
該<html>元素是HTML頁面的根元素
該<head>元素包含有關該文檔的元信息
該<title>元素指定文檔的標題
該<body>元素包含可見頁面內容
該<h1>元素定義了一個大的標題
該<p>元素定義了一個段落
換行
HTML標題
HTML標題由<h1>至<h6>標簽定義。
<h1>定義了最重要的標題。<h6>定義了最不重要的標題：
HTML段落
HTML段落使用<p>標記定義：
HTML鏈接
HTML鏈接使用<a>標簽定義：
<a >This is a link</a>
HTML圖片
HTML圖像使用<img>標簽定義。
源文件（src），替代文本（alt），寬度和高度作為屬性提供：
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
[嘗試自己?
](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_img)
HTML元素
HTML元素通常由起始標記和結束標記組成，其中插入的內容包括：
< tagname >內容到這里... < / tagname >
嵌套HTML元素
HTML元素可以嵌套（元素可以包含元素）。
所有HTML文檔都由嵌套的HTML元素組成。
此示例包含四個HTML元素
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
空HTML元素
沒有內容的HTML元素稱為空元素。
是沒有結束標記的空元素（
標記定義換行符）。
空元素可以在開始標簽中“關閉”，如下所示：<br />。
HTML5不需要關閉空的元素。但是，如果要更嚴格的驗證，或者如果您需要使XML解析器可讀取文檔，則必須正確關閉所有HTML元素。
HTML屬性
所有HTML元素都可以有屬性
屬性提供有關元素的其他信息
屬性始終在開始標簽中指定
屬性通常來自名稱/值對，如：name =“value”
href屬性
HTML鏈接使用<a>標簽定義。鏈接地址在href屬性中指定：
<a >This is a link</a>
src屬性
HTML圖像使用<img>標簽定義。
圖像源的文件名在src屬性中指定：
寬度和高度屬性
HTML中的圖像具有一組大小屬性，指定圖像的寬度和高度：
alt屬性
當不能顯示圖像時，alt屬性指定要使用的替代文本。
屬性的值可以由屏幕閱讀器讀取。這樣，有人“聽”網頁，例如盲人，可以“聽到”元素。
HTML標題
標題由<h1>至<h6>標簽定義。
<h1>定義了最重要的標題。<h6>定義了最不重要的標題。
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
標題很重要
搜索引擎使用標題來索引您的網頁的結構和內容。
用戶按標題瀏覽您的頁面。使用標題顯示文檔結構很重要。
主要標題應使用<h1>標題，后跟<h2>標題，然后不太重要的<h3>等等。
更大的標題
每個HTML標題都有一個默認大小。但是，您可以使用style屬性指定任何標題的大小：
<h1 style="font-size:60px;">Heading 1</h1>
HTML水平規則
標簽定義HTML頁面中的專題中斷，并且通常以水平規則的形式顯示。
元素用于分隔HTML頁面中的內容（或定義更改）：
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
HTML段落
HTML <p>元素定義一個段落：
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML顯示
您無法確定HTML的顯示方式。
大屏幕或小屏幕，并且調整大小的窗口將創建不同的結果。
使用HTML，您不能通過在HTML代碼中添加額外的空格或額外的行來更改輸出。
當頁面顯示時，瀏覽器將刪除任何額外的空格和額外的行：
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
不要忘記結束標簽
大多數瀏覽器會正確顯示HTML，即使您忘記了結束標簽
<p>This is a paragraph.
<p>This is another paragraph.
HTML <pre>元素
HTML <pre>元素定義了預格式化的文本。
<pre>元素中的文本以固定寬度字體（通常為Courier）顯示，并保留空格和換行符：
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML樣式屬性
設置HTML元素的樣式，可以使用style屬性。
HTML樣式屬性具有以下語法：
<tagname style="property:value;">
該屬性是一個CSS屬性。該值是一個CSS值。
HTML背景顏色
的背景顏色屬性定義HTML元素的背景顏色。
此示例將頁面的背景顏色設置為藍色：
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML文本對齊
的文本對齊屬性定義HTML元素水平文本對齊：
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
使用樣式屬性來設置HTML元素
使用背景色作為背景色
使用顏色的文字顏色
為文字字體使用font-family
對于文字大小使用font-size
使用text-align進行文本對齊
HTML格式元素
在上一章中，您了解了HTML 樣式屬性。
HTML還定義了用于定義具有特殊含義的文本的特殊元素。
HTML使用像<b>和<i>這樣的元素來格式化輸出，比如粗體或斜體文字。
格式化元素旨在顯示特殊類型的文本：
<b> - 粗體文字
<strong> - 重要文字
<i> - 斜體文字
<em> - 強調文字
標記文字
<small> - 小文字
<del> - 已刪除的文字
<ins> - 插入的文字
<sub> - 下標文字
<sup> - 上標文字
HTML文本格式元素
[<b>] Defines bold text
[<em>] Defines emphasized text
[<i>] Defines italic text
[<small>] Defines smaller text
[<strong>] Defines important text
[<sub>] Defines subscripted text
[<sup> Defines superscripted text
[<ins>] Defines inserted text
[<del>] Defines deleted text
[<mark>] Defines marked/highlighted text
HTML <q>用于簡短報價
HTML <q>元素定義了一個簡短的引號。
瀏覽器通常在<q>元素周??圍插入引號。
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML <abbr>縮寫
HTML <abbr>元素定義縮寫或首字母縮略詞。
標記縮寫可以為瀏覽器，翻譯系統和搜索引擎提供有用的信息。
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
HTML <cite>作品標題
HTML <cite>元素定義了作品的標題。
瀏覽器通常以斜體顯示<cite>元素。
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
HTML <bdo>用于雙向覆蓋
HTML <bdo>元素定義了雙向覆蓋。
<bdo>元素用于覆蓋當前文本方向
<bdo dir="rtl">This text will be written from right to left</bdo>
<!-- Write your comments here -->
內聯CSS
內聯CSS用于將唯一樣式應用于單個HTML元素。
內聯CSS使用HTML元素的style屬性。
此示例將<h1>元素的文本顏色設置為藍色：
<h1 style="color:blue;">This is a Blue Heading</h1>
內部CSS
內部CSS用于為單個HTML頁面定義樣式。
內部CSS在HTML頁面的<head>部分中定義，在<style>元素中：
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
外部CSS
外部樣式表用于定義許多HTML頁面的樣式。
使用外部樣式表，您可以通過更改一個文件來更改整個網站的外觀！
要使用外部樣式表，請在HTML頁面的<head>部分添加一個鏈接：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
外部樣式表可以寫入任何文本編輯器。該文件不能包含任何HTML代碼，并且必須使用.css擴展名保存。
以下是“styles.css”的樣子：
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS字體
CSS 顏色屬性定義要使用的文本顏色。
CSS font-family屬性定義要使用的字體。
CSS font-size屬性定義要使用的文本大小。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS邊框
CSS 邊框屬性定義HTML元素周圍的邊框：
p {
border: 1px solid powderblue;
}
CSS填充
CSS 填充屬性定義文本和邊框之間的填充（空格）：
p {
border: 1px solid powderblue;
padding: 30px;
}
CSS保證金
CSS 邊距屬性定義了邊框外的邊距（空格）：
p {
border: 1px solid powderblue;
margin: 50px;
}
id屬性
要為一個特殊元素定義特定樣式，請向元素添加一個id屬性：
<p id="p01">I am different</p>
然后為具有特定ID的元素定義樣式：
#p01 {
color: blue;
}
類屬性
要為特殊類型的元素定義樣式，請向元素添加類屬性：
<p class="error">I am different</p>
然后為具有特定類的元素定義樣式：
p.error {
color: red;
}
外部參考
可以使用完整的URL或相對于當前網頁的路徑引用外部樣式表。
此示例使用完整的URL鏈接到樣式表：
<link rel="stylesheet" >
此示例鏈接到位于當前網站的html文件夾中的樣式表：
<link rel="stylesheet" href="/html/styles.css">
此示例鏈接到與當前頁面位于同一文件夾中的樣式表：
<link rel="stylesheet" href="styles.css">
使用HTML 樣式屬性進行內聯樣式
使用HTML <style>元素定義內部CSS
使用HTML <link>元素來引用外部CSS文件
使用HTML <head>元素來存儲<style>和<link>元素
對文本顏色使用CSS 顏色屬性
將CSS font-family屬性用于文本字體
將CSS font-size屬性用于文本大小
對邊框使用CSS 邊框屬性
對邊框內的空格使用CSS padding屬性
對邊框外的空格使用CSS margin屬性
