HTML: HyperText Markup Language (超文字標記語言 (HTML))
Hypertext(超文本) means "text with links in it."
A markup language（標記語言） is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more.
HTML可以看作每個網頁的骨架，組成了網頁的結構。
CSS: Cascading Style Sheets(階層式樣式表)
CSS讓網頁更加漂亮，比如它可以給網頁設定皮膚。
HTML基本結構
<!DOCTYPE html> // 總是在第一行，告訴瀏覽器在讀什麼語言
<html> // HTML文檔的開始部分
</html> // HTML文檔的結束部分
基本術語
兩個角括弧<xxx>括起來的叫做tags（標籤）.
Tags總是成對出現： 一個opening tag（開口標籤） and a closing tag（閉合標籤）.
Example of opening tag: <html>
Example of closing tag: </html>
可以把標籤看作是括弧匹配的形式，每當你有一個開口標籤，一定要有一個對應的閉合標籤。標籤也可以嵌套，應該按正確的形式進行嵌套：一個閉合標籤應和它左邊最近的一個開口標籤匹配。例如，
合法的：<first tag><second tag> Some text! </second tag></first tag>
不合法的：<first tag><second tag>Some text!</first tag></second tag>
<strong> </strong>粗體字
head（頭部）
整個html檔案的內容都在<html> </html>之內
There are always two parts to the file: the head and body
a. It has an opening and a closing tag.
head有開口標籤和閉合標籤
b. The head includes important information about the webpage, such as its title.
更多精彩內容：http://www.bianceng.cn/web/Html/
head包含網頁的重要訊息，比如標題
c. The title is the words we see in the tab (for example, the title of this page is "Introduction to HTML").
標題就是我們在tab欄看到的字
Body（主體）內的段落
我們把一對標籤和標籤裡的內容叫做element（元素）
element = <opening tag> + content + <closing tag>
在<body>標籤裡的內容是在網頁中的真正的可視部分
<html>
<head></head>
<body></body>
</html>
1. 在title標籤內，是你頁面的名字，可以是任何東西。
2. 在title標籤下，是body標籤
3. 在body標籤內，我們可以建立段落，<p> content </p>
Paragraphs and headings（段落和標題）
我們已經學習了：
1. 建立一個有標籤的html檔案
2. 在<head>中建立標題（title）
3. 在<body>中建立段落（p）
接下來，我們還可以給我們的段落建立標題，<p>是最大的標題
HTML給了我們很多種標題尺寸，<p>是最大的，<h6>是最小的標題
<p> - The CEO
<h2> - VP of Fancy Towne
<h3> - Director of Some Stuff
<h4> - Middle management
<h5> - Lowly assistant
<h6> - Gets coffee for everyone else
Mid-lesson breather中途小結
1. HTML是用來給網頁做結構的
2. 我們用瀏覽器來開啟html檔案，並且瀏覽器展示檔案內容給我們
3. html有一個<head>和一個<body>標籤
4. 在head中，我們有<title>文檔標題，用這個來表示頁面的名字
5. 怎樣製作段落(p)和段落的標題(h1,h2...h6)
Adding images（添加圖片）
可以在網站中添加圖片使得網頁更加漂亮！只要一個標籤：<img>.
這個標籤和其它有些不一樣，它並不是把內容放在開口標籤和閉合標籤之間，而是用src告訴標籤圖片在哪裡！
同時，這個標籤不同之處還在於它使用的閉合方式是self-closes，即<imgsrc="url" />
每個圖片在網路中都有它的url，我們只要直接引用url就可以了，例如：
<img src="jpg/f3a16fb6.jpg" />
Click that image（點擊圖片）
可以設定點擊圖片，然後跳轉到另一個頁面
<a>標籤是用來設定超連結（hyperlinks）的，就像<img>的src屬性一樣，<a>也有它的屬性href用來說明跳轉到何處
<a href="http://www.codecademy.com">Learn to code!</a>
如果要設定點擊圖片，然後跳轉，那麼可以把圖片放在<a href = "url"> img </a>中。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
