html基本結(jié)構：
<!DOCTYPE html>
<head>
</head>
<body>
</body>
</html>
在html中袁勺，標題是通過h1~h6等標簽進行定義。請僅僅把標題標簽用于標題文本澎粟。不要僅僅為了產(chǎn)生粗體文本而使用它們。請使用其它標簽或 CSS 代替欢瞪。
段落是通過p標簽定義活烙。
鏈接是通過a標簽定義。
圖像是通過img標簽定義遣鼓。
<hr /> 標簽在 HTML 頁面中創(chuàng)建水平線
換行標簽
用法：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>這是一個段落</p>
<!--href="網(wǎng)頁地址" 創(chuàng)建指向另一個文檔的鏈接-->
<a >
這是一個鏈接</a>
<br/>
<!--src="圖片地址"-->
<img src="/i/eg_w3school.gif" width="300" height="120" /> <!--這是一張圖片-->
</body>
</html>
style屬性改變html的樣式：
background-color 屬性為元素定義了背景顏色啸盏。
font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列骑祟、顏色和字體尺寸回懦。
text-align 屬性規(guī)定了元素中文本的水平對齊方式气笙。
<!DOCTYPE html>
<head>
</head>
<body style="background-color:blue">
<h1 style="text-align:center">標題</h1>
<p style="font-family:arial;color:red;font-size:20px;">段落</p>
</body>
</html>
html格式化：
文本格式化標簽：
<b>定義粗體文本 </b>
<big> 定義大號字</big>
<em> 定義著重文字</em>
<i> 定義斜體字</i>
<small> 定義小號字</small>
<strong> 定義加重語氣</strong>
<sub>定義下標字</sub>
<sup>定義上標字</sup>
<ins> 定義插入字</ins>
<del>定義刪除字</del>
刪除字和插入字效果：
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
“計算機輸出”標簽：
<code>定義計算機代碼<code>
<kbd>定義鍵盤碼</kdb>
<samp>定義計算機代碼樣本</samp>
<tt> 定義打字機代碼</tt>
<var>定義變量</var>
<pre>定義預格式文本</pre>
<p>
這些標簽常用于顯示計算機/編程代碼怯晕。
</p>
引用潜圃、引用和術語定義：
<abbr>定義縮寫</abbr>
<acronym>定義首字母縮寫</acronym>
<address>定義地址</address>
<bdo>定義文字方向</bdo>
<blockquote> 定義長的引用</blockquote>
<q>定義短的引用語</q>
<cite> 定義引用、引證<cite>
<dfn> 定義一個定義項目</dfn>
<code> 元素不保留多余的空格和折行舟茶，如需解決該問題谭期，您必須在 <pre> 元素中包圍代碼：
<!DOCTYPE html>
<head>
</head>
<body>
<code>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</code>
<code>
<pre>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</pre>
</code>
</body>
</html>
html樣式：
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇稚晚。使用外部樣式表崇堵，你就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
當單個文件需要特別樣式時客燕，就可以使用內(nèi)部樣式表鸳劳。你可以在 head 部分通過 <style> 標簽定義內(nèi)部樣式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
當特殊的樣式需要應用到個別元素時也搓，就可以使用內(nèi)聯(lián)樣式赏廓。 使用內(nèi)聯(lián)樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性傍妒。以下實例顯示出如何改變段落的顏色和左外邊距幔摸。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
<a href="/example/html/lastpage.html" style="text-decoration:none">
這是沒有下劃線的一個鏈接！
</a>
<style> 定義樣式定義颤练。</style>
<link> 定義資源引用既忆。
<div> 定義文檔中的節(jié)或區(qū)域（塊級）。</div>
<span> 定義文檔中的行內(nèi)的小塊或區(qū)域嗦玖。</span>
html超鏈接：
語法：
<a >Visit W3School</a>
html--Target屬性：
使用 Target 屬性患雇，你可以定義被鏈接的文檔在何處顯示。
下面的這行會在新窗口打開文檔：
<a target="_blank">Visit W3School!</a>
html--name屬性：
name 屬性規(guī)定錨的名稱宇挫。
你可以使用 name 屬性創(chuàng)建 HTML 頁面中的書簽苛吱。書簽對讀者是不可見的。
當使用命名錨時器瘪，我們可以定位到想去的位置翠储，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
<a href="#tips">點擊這里橡疼，跳轉(zhuǎn)到那么name="tips"那條語句顯示的內(nèi)容</a>
<a name="tips">基本的注意事項 - 有用的提示</a>
html圖片：
格式：<img src="boat.gif" alt="Big Boat">援所，alt中的內(nèi)容只有在圖片加載失敗才會顯示。
背景圖像：
<body background="/i/eg_background.jpg">
</body>
圖像鏈接：
<p>
圖像鏈接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
圖像映射：
<body>
<p>點擊圖像上的星球,映射到對應圖像上衰齐。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注釋：</b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性（根據(jù)瀏覽器）任斋，所以我們同時向 map 元素添加了 "id" 和 "name" 屬性。</p>
</body>
<img> 定義圖像。</img>
<map> 定義圖像地圖废酷。</map>
<area 定義圖像地圖中的可點擊區(qū)域瘟檩。/>
shape和coords：是兩個主要的參數(shù)，用于設定熱點的形狀和大小澈蟆。形狀有rect墨辛，circle，poligon三種趴俘。大小表示為：coords="x1, y1,x2,y2"睹簇。
html表格：
表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義）寥闪，每行被分割為若干單元格（由 <td> 標簽定義）太惠。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容疲憋。數(shù)據(jù)單元格可以包含文本凿渊、圖片、列表缚柳、段落埃脏、表單、水平線秋忙、表格等等彩掐。
<table> 定義表格</table>
<caption> 定義表格標題。
<th> 定義表格的表頭灰追。
<tr> 定義表格的行堵幽。
<td> 定義表格單元。
<thead> 定義表格的頁眉弹澎。
<tbody> 定義表格的主體谐檀。
<tfoot> 定義表格的頁腳。
<col> 定義用于表格列的屬性裁奇。
<colgroup> 定義表格列的組。
表格的表頭可橫可豎
<body>
<h4>表頭：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>電話</th>
<th>電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直的表頭：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>電話</th>
<td>555 77 854</td>
</tr>
<tr>
<th>電話</th>
<td>555 77 855</td>
</tr>
</table>
</body>
跨行跨列：
<body>
<h4>橫跨兩列的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>橫跨兩行的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">電話</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
表格內(nèi)也可以用標簽：
<body>
<table border="1">
<tr>
<td>
<p>這是一個段落麦撵。</p>
<p>這是另一個段落刽肠。</p>
</td>
<td>這個單元包含一個表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>這個單元包含一個列表：
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>菠蘿</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
單元格邊距：
<body>
<h4>沒有 cellpadding：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有 cellpadding：</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
表格背景顏色與圖片；單元格的設置同表格一樣但是是在td中設置：
<h4>背景顏色：</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>背景圖像：</h4>
<table border="1"
background="/i/eg_bg_07.gif">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
表格中排列(align屬性)：
<table width="400" border="1">
<tr>
<th align="left">消費項目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妝品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">總計</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
frame屬性控制圍繞表格的邊框：
<body>
<p><b>注釋：</b>frame 屬性無法在 Internet Explorer 中正確地顯示免胃。</p>
<p>Table with frame="box":</p>
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="above":</p>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="below":</p>
<table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="hsides":</p>
<table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="vsides":</p>
<table frame="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
html列表：
無序列表：
<body>
<h4>Disc 項目符號列表：</h4>
<ul type="disc">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
<h4>Circle 項目符號列表：</h4>
<ul type="circle">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
<h4>Square 項目符號列表：</h4>
<ul type="square">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
</body>
有序列表：
<body>
<h4>數(shù)字列表：</h4>
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>字母列表：</h4>
<ol type="A">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>小寫字母列表：</h4>
<ol type="a">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>羅馬字母列表：</h4>
<ol type="I">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>小寫羅馬字母列表：</h4>
<ol type="i">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
</body>
嵌套列表：
<body>
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
自定義列表：
<body>
<h2>一個定義列表：</h2>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
<dl> 定義定義列表音五。</dl>
<dt> 定義定義項目。</dt>
<dd>定義定義的描述羔沙。</dd>
html塊：
大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素躺涝。塊級元素在瀏覽器顯示時，通常會以新行來開始（和結(jié)束）扼雏，例子：<h1>, <p>, <ul>, <table>坚嗜。內(nèi)聯(lián)元素在顯示時通常不會以新行開始夯膀，例子：<b>, <td>, <a>, <img>。
<span> 定義 span苍蔬，用來組合文檔中的行內(nèi)元素诱建。當與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性碟绑。
<div>
<p>我的母親有 <span style="color:blue;font-weight:bold">藍色</span> 的眼睛俺猿，我得父親有 <span style="color:darkolivegreen;font-weight:bold">碧綠色</span> 的眼睛。</p>
</div>
