概覽與綜述
基本形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔title</title>
</head>
<body>
<h1>我的第一個標(biāo)題</h1>
<p>我的第一個段落喊括。</p>
</body>
</html>
解釋:
- DOCTYPE 聲明了文檔類型
- 位于標(biāo)簽
<head> </head>描述了文檔附加信息 - 位于標(biāo)簽
<body> </body>為可視化網(wǎng)頁內(nèi)容 - 位于標(biāo)簽
<h1> </h1>作為一個標(biāo)題使用 - 位于標(biāo)簽
<p> </p>作為一個段落顯示
中文編碼
常用的方法為設(shè)置編碼方式為utf-8以顯示中文蔬崩，但注意在編輯Html文件的時候，需要把編碼格式保存為UTF-8(默認(rèn)會保存ANSI)，才可以正常顯示球恤。
<meta charset="utf-8">
第二個方法可以指定編碼格式為gb2312以支持漢字，但通用性較差茧球。
常用的4個標(biāo)簽
- 標(biāo)題
<h1>This is a heading</h1>
<h2>This is a heading</h2>
- 段落
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- 鏈接
<a >This is a link</a>
- 圖像
<img_ src="w3school.jpg" width="104" height="142" />
元素
HTML 元素通常有兩種方式：
- 寫入一個<>內(nèi):此類元素?zé)o法包含內(nèi)容和其他元素便监。
<標(biāo)簽 [屬性...] />
<img_ src="w3school.jpg" width="104" height="142" />
- 以開始標(biāo)簽和結(jié)束標(biāo)簽限定，可以包含內(nèi)容和其他元素桂躏。
<標(biāo)簽 [屬性...]>[內(nèi)容...]</標(biāo)簽>
<p>This is a paragraph.</p>
其中钻趋，屬性或內(nèi)容可以為空。例如換行：
<br />
屬性
屬性通常為某屬性=“值”的形式剂习，可以使用單引號或雙引號蛮位。但要注意在某些個別的情況下，比如屬性值本身就含有雙引號鳞绕，那么您必須使用單引號失仁，例如name='Bill "HelloWorld" Gates'
元素和屬性可以有重名的時候，例如
title作為元素是頁面名稱们何，作為屬性是注釋信息萄焦；style作為元素指定該頁面所有元素的樣式，作為屬性指定個別元素的樣式冤竹。
簡單的層次與布局
標(biāo)題
標(biāo)題（Heading）是通過<h1> - <h6>等標(biāo)簽進(jìn)行定義的拂封。
<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題贴见。
<h1>This is a heading</h1>
注釋：瀏覽器會自動地在標(biāo)題的前后添加空行烘苹。
注釋：默認(rèn)情況下，HTML 會自動地在塊級元素前后添加一個額外的空行片部，比如段落镣衡、標(biāo)題元素前后。
水平線
<hr /> 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線档悠。
hr 元素可用于分隔內(nèi)容廊鸥。
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
注釋
可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性辖所，使代碼更易被人理解惰说。瀏覽器會忽略注釋，也不會顯示它們缘回。
<!-- This is a comment -->
段落
段落是通過 <p> 標(biāo)簽定義的吆视。
<p>This is a paragraph</p>
<p>This is another paragraph</p>
注釋：瀏覽器會自動地在段落的前后添加空行典挑。（<p> 是塊級元素）
當(dāng)顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行啦吧。所有連續(xù)的空格或空行都會被算作一個空格您觉。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個空格授滓。
文本格式化
常用文本格式化
<b>加粗字體</b>
<strong>強(qiáng)調(diào)字體（視覺效果同加粗）</strong>
<i>斜體</i>
<em>強(qiáng)調(diào)字體（視覺效果同斜體）</em>
<big>比周圍大一號字體(已淘汰)</big>
<small>比周圍小一號字體</small>
<sub>下標(biāo)</sub>
<sup>上標(biāo)</sup>
<del>刪除線</del>
<ins>下劃線</ins>
預(yù)保留格式文本
與保留格式文本可以忠實(shí)地表現(xiàn)縮進(jìn)琳水，空格，換行等格式上的內(nèi)容般堆。
<pre>
for i = 1 to 10
print i
next i
</pre>
“計(jì)算機(jī)輸出”標(biāo)簽
該部分用于指定字體樣式來表現(xiàn)不同的計(jì)算機(jī)代碼或輸出在孝。
<code>Computer code 代碼</code>
<kbd>Keyboard input 鍵盤輸入</kbd>
<tt>Teletype text 打字機(jī)字體</tt>
<samp>Sample text 代碼樣本</samp>
<var>Computer variable 變量</var>
注意，<code>不會保留多余的空格和空行,必要時配合預(yù)保留格式文本使用淮摔。
其它內(nèi)置格式
- 定義地址私沮。指定文字的字體表示地址(通常為斜體)：
<address>
Written by TOM.
</address>
- 定義書寫方向。以下可以改變文字的書寫方向?yàn)閺挠蚁蜃?需瀏覽器支持)：
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
- 定義引用噩咪。引用分為長引用和短引用顾彰。使用 blockquote 元素的話，瀏覽器會插入換行和外邊距胃碾，而 q 元素不會有任何特殊的呈現(xiàn)涨享，僅添加雙引號。
<blockquote>
這是長的引用仆百。
</blockquote>
<q>
這是短的引用厕隧。
</q>
- 定義縮寫（需瀏覽器支持）
<!-- 縮寫 -->
<abbr title="etcetera">etc.</abbr>
<!-- 首字母縮寫 -->
<acronym title="World Wide Web">WWW</acronym>
<!--- dfn -->
<dfn title="World Health Organization">WHO</dfn>
這樣，當(dāng)指針移至元素上面時俄周，會顯示出title的內(nèi)容吁讨。
- 定義著作標(biāo)題
<cite>The Scream</cite>
樣式
CSS簡述
我們使用style來完成對CSS的設(shè)定。常見的用法如下：
- 內(nèi)聯(lián)樣式：設(shè)置特定的元素樣式
這種方法通過設(shè)置某些元素的style屬性來完成峦朗。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
- 內(nèi)部樣式表：設(shè)置整個頁面文件的樣式
可以在 head 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表建丧，可以指定不同類別的元素使用的樣式。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3.外部樣式表:引用一個固定的樣式表
通過引用可以統(tǒng)一多個頁面的樣式,鏈接的主體是一個css文件波势。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
常用的內(nèi)聯(lián)樣式
HTML 樣式實(shí)例 - 背景顏色
background-color 屬性為元素定義了背景顏色：
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
style 屬性淘汰了“舊的” bgcolor 屬性翎朱。
HTML 樣式實(shí)例 - 字體、顏色和尺寸
font-family尺铣、color 以及 font-size 屬性分別定義元素中文本的字體系列拴曲、顏色和字體尺寸（多個描述之間用分號隔開）：
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p></body>
</html>
style 屬性淘汰了舊的 <font> 標(biāo)簽。
HTML 樣式實(shí)例 - 文本對齊
text-align 屬性規(guī)定了元素中文本的水平對齊方式：
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>
style 屬性淘汰了舊的 "align" 屬性凛忿。
頭部
頭部指的是<head>包圍的部分澈灼，往往不會直接顯示在網(wǎng)頁內(nèi)容里，但包含了網(wǎng)頁的重要信息。
title
<title>標(biāo)簽定義了不同文檔的標(biāo)題,在 HTML/XHTML 文檔中是必須的叁熔。功能包括：
- 定義了瀏覽器工具欄的標(biāo)題
- 當(dāng)網(wǎng)頁添加到收藏夾時委乌，顯示在收藏夾中的標(biāo)題
- 顯示在搜索引擎結(jié)果頁面的標(biāo)題
<title>文檔標(biāo)題</title>
base
<base> 標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo)，該標(biāo)簽作為HTML文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接:
<base target="_blank">
link
<link> 標(biāo)簽定義了文檔與外部資源之間的關(guān)系者疤。通常用于鏈接到樣式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
style
在<style> 元素中你需要指定樣式來渲染HTML文檔:
<style> type="text/css"
body {background-color:yellow}
p {color:blue}
</style>
meta
meta標(biāo)簽描述了一些基本的元數(shù)據(jù)福澡。通常用于指定網(wǎng)頁的描述，關(guān)鍵詞驹马，文件的最后修改時間，作者除秀，和其他元數(shù)據(jù)糯累。
- 為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> - 為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="Free Web tutorials on HTML and CSS"> - 定義網(wǎng)頁作者:
<meta name="author" content="Hege Refsnes"> - 每30秒中刷新當(dāng)前頁面:
<meta http-equiv="refresh" content="30">
一個網(wǎng)頁可以出現(xiàn)多個meta標(biāo)簽。
script
script標(biāo)簽用于加載腳本文件册踩，如： JavaScript泳姐。具體詳見稍后章節(jié)。
