
什么是 HTML?
- HTML 是用來描述網(wǎng)頁的一種語言。
- HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言,而是一種標(biāo)記語言 (markup language)
- 標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
- HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML的操作思想
網(wǎng)頁中有很多數(shù)據(jù),不同數(shù)據(jù)可能需要不同的顯示效果,這個(gè)時(shí)候需要使用標(biāo)簽把要操作的數(shù)據(jù)包起來(封裝起來),通過修改這些標(biāo)簽的屬性值實(shí)現(xiàn)數(shù)據(jù)樣式的變化;一個(gè)標(biāo)簽相當(dāng)于一個(gè)容器,想要修改容器內(nèi)的數(shù)據(jù)樣式,只需要修改容器的屬性值,就可以實(shí)現(xiàn)容器內(nèi)的數(shù)據(jù)樣式的變化
一個(gè)簡單的 HTML 長什么樣
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML頭部
1.<head>元素
- <head> 元素包含了所有的頭部標(biāo)簽元素
- 在 <head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息
- 可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
2.<title>元素
- <title> 標(biāo)簽定義了不同文檔的標(biāo)題
- 在 HTML/XHTML 文檔中是必須的。
1>定義了瀏覽器工具欄的標(biāo)題
2>當(dāng)網(wǎng)頁添加到收藏夾時(shí),顯示在收藏夾中的標(biāo)題
3>顯示在搜索引擎結(jié)果頁面的標(biāo)題
3.<link>元素
- 標(biāo)簽定義了文檔與外部資源之間的關(guān)系
<link> 標(biāo)簽通常用于鏈接到樣式表,例如,
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
4.<style> 元素
- <style> 標(biāo)簽定義了HTML文檔的樣式文件引用地址,例如,
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
5.<meta>標(biāo)簽
- 為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> - 為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="免費(fèi) Web & 編程 教程"> - 定義網(wǎng)頁作者:
<meta name="author" content="Runoob"> - 每30秒中刷新當(dāng)前頁面
<meta http-equiv="refresh" content="30">
HTML 標(biāo)簽
- HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。
- HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞,比如 <html>
- HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的,比如
和</br> - 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽,第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
- 開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽
幾個(gè)常用的HTML標(biāo)簽
1.HTML 標(biāo)題(Heading)是通過 <h1>-<h6>等標(biāo)簽進(jìn)行定義的。
實(shí)例
<h1>Hello</h1>
<h2>HTML</h2>
2.HTML 段落是通過<p> 標(biāo)簽進(jìn)行定義的。
實(shí)例
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
3.HTML 鏈接是通過 <a>標(biāo)簽進(jìn)行定義的。
實(shí)例
<a >This is a link</a>
4.HTML 圖像是通過<img>標(biāo)簽進(jìn)行定義的。
實(shí)例

5.HTML <table> 標(biāo)簽
實(shí)例
一個(gè)簡單的 HTML 表格,包含兩行兩列:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table
簡單的 HTML 表格由 table 元素以及一個(gè)或多個(gè) tr、th 或 td 元素組成。
tr 元素定義表格行,th 元素定義表頭,td 元素定義表格單元。
更復(fù)雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
6.HTML 列表
1)無序列表
無序列表是一個(gè)項(xiàng)目的列表,此列項(xiàng)目使用粗體圓點(diǎn)(典型的小黑圓圈)進(jìn)行標(biāo)記。
無序列表始于<ul>標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2)有序列表
同樣,有序列表也是一列項(xiàng)目,列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。
有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。
實(shí)例
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML區(qū)塊
1.內(nèi)聯(lián)元素(inline element)
內(nèi)聯(lián)元素在顯示時(shí)通常不會(huì)以新行開始
例如<b>, <td>,<a>,<img>
2.塊狀元素(block level element)
塊級(jí)元素在瀏覽器顯示時(shí),通常會(huì)以新行來開始(和結(jié)束)。
例如<h1>,<p>,<ul>, <table>
3.<div>元素
<div> 元素是塊級(jí)元素,它是可用于組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外,由于它屬于塊級(jí)元素,瀏覽器會(huì)在其前后顯示折行。
如果與 CSS 一同使用,<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的另一個(gè)常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
4.<span>元素
<span> 元素是內(nèi)聯(lián)元素,可用作文本的容器。
<span> 元素也沒有特定的含義。
當(dāng)與 CSS 一同使用時(shí),<span> 元素可用于為部分文本設(shè)置樣式屬性。
注:想更多了解HTML相關(guān)標(biāo)簽,請(qǐng)點(diǎn)擊http://www.w3school.com.cn/tags/tag_table.asp
想更多了解HTML教程,可點(diǎn)擊http://www.imooc.com/learn/9 觀看視頻教學(xué)