html入門（w3cschool學習筆記）
<html>與</html>之間的文字描述網頁<body>與</body>之間的文字是可見的頁面內容
頁面跳轉：<META http="refresh" content="秒數;URL=轉向頁面"/><h1>-<h6>等標籤定義標題。HTML heading 標籤應該只用於標題。不要僅僅是為了產生粗體或大號的文字而使用標題。搜尋引擎使用標題為您的網頁的結構和內容編制索引。<hr />標籤在 HTML 頁面中建立水平線，可用於分隔內容。- 註釋：
<!-- This is a comment --> <p>與</p>之間的文字被顯示為段落，<p>是塊級元素，瀏覽器會自動地在段落的前後新增空行。但是不要用空的段落標記<p></p>去插入一個空行。用<br />標籤代替它！（但是不要用<br />標籤去建立列表。）<a href="http://www.baidu.com/">This is a link</a>——連結，如果形式是a href=”/index.html”這樣的就是指向本網站上的連結。<a href="#">連結文字</a>： 空連結：指指向連結後，滑鼠變成手形，但單擊後仍停留在當前頁面。預設的被連結文件會在原有的視窗中開啟，如果將 target 屬性設定為 “_blank” 則文件就會在新視窗開啟：<a href="//www.baidu.com/" target="_blank">百度一下，你就知道</a>。（Note: 請始終將正斜槓新增到子資料夾。假如這樣書寫連結：href=”//www.w3cschool.cn/html”，就會向伺服器產生兩次 HTTP 請求。這是因為伺服器會新增正斜槓到這個地址，然後建立一個新的請求，就像這樣：href=”//www.w3cschool.cn/html/”。）建立一個無下劃線的連結：<a href="http://www.w3cschool.cn/" style="text-decoration:none;">訪問 w3cschool.cn!</a>- 影象——
<img src="XXX.jpg" width="104" height="142" />。<img>是空標籤，(只包含屬性，沒有閉合標籤)。源屬性src 指 “source”，值是影象的 URL 地址。alt屬性影象定義一串預備的可替換的文字。在瀏覽器無法載入影象時，將顯示替代文字。src 和 alt是img標籤的必需屬性。寬度和高度的預設單位為畫素。<p><img src="XXX" alt="XX" style="float:left">圖片浮動在這個段落的左邊</p> - 屬性——總是在 HTML 元素的開始標籤中規定，以名稱/值對的形式出現。屬性和屬性值對大小寫不敏感，但推薦使用小寫。屬性值需要加引號。例：
<h1 align="center"> <!-- align：設定對齊方式 -->
<body bgcolor="yellow"> <!-- 設定背景顏色 -->
<table border="1"> <!-- 設定表格邊框資訊 -->
<!-- 雖然這裡列舉的align和bgcolor都已經被淘汰了嘻嘻 -->常用屬性：class、id、style、title
9. 樣式——style屬性淘汰了一部分舊的屬性。應該使用樣式代替的標籤和屬性：
| 標籤 | 描述 |
|---|---|
<center> |
定義居中的內容 |
<font> 和 <basefont> |
定義 HTML 字型 |
<s> 和 <strike> |
定義刪除線文字 |
<u> |
定義下劃線文字 |
| 被淘汰的屬性 | 描述 | 應該使用的屬性 |
|---|---|---|
| align | 定義文字的對齊方式 | text-align |
| bgcolor | 定義背景顏色 | background-color |
| color | 定義文字顏色 | font-family、color、font-size |
示例：
<body style="background-color:yellow">
<h1 style="text-align:center">This is a heading</h1>
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body><body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> <!-- 字型、顏色、大小 -->
</body>用樣式改變段落的顏色和左外邊距：
<p style="color:blue;margin-left:20px;">This is a paragraph.</p> 10.文字格式化：<b></b>或<strong></strong>加粗；<em></em>或<i></i>斜體；<big></big>…<small></small>放大縮小；<sup></sup>上標；<sub></sub>下標；
11. <pre></pre>——保留空格和換行。若不使用預格式文字，當顯示頁面時，瀏覽器會移除原始碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。
12. <address></address>寫地址
13. 縮略詞——在某些瀏覽器中，當把滑鼠移至縮略詞語上時，title 可用於展示表達的完整版本。<abbr title="etcetera">etc.</abbr>或<acronym title="World Wide Web">WWW</acronym>
14. 改變文字方向——<p><bdo dir="rtl">該段落文字從右到左顯示。</bdo></p>
15. <q></q>——塊引用（可跨行，外面帶雙引號）
16. <del>blue</del>刪除線效果 <ins>red</ins>下劃線效果
17. 連結到當前頁面指定位置（書籤）——通過id
<p>
<a href="#C4">檢視章節 4</a>
</p>
<h2>章節 1</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 2</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 3</h2>
<p>這邊顯示該章節的內容……</p>
<h2><a id="C4">章節 4</a></h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 5</h2>
<p>這邊顯示該章節的內容……</p>18.頭部——<head>元素包含了所有的頭部標籤元素。在 <head>元素中你可以插入指令碼（scripts）, 樣式檔案（CSS），及各種 meta 資訊。
可新增在頭部的標籤及描述：
| 標籤 | 描述 |
|---|---|
<title> |
文件的標題，在html、xml中是必須的 |
<base> |
<base href="//www.w3cschool.cn/images/" target="_blank">。定義HTML文件中所有的連結標籤的預設連結，在 HTML 中，<base> 標籤沒有結束標籤；在 XHTML 中，<base> 標籤必須被正確地關閉。 |
<link> |
定義了文件與外部資源之間的關係,通常用於連結到樣式表：<link rel="stylesheet" type="text/css" href="mystyle.css"> |
<style> |
定義了HTML文件的樣式檔案 |
<script> |
用於載入指令碼檔案，如JavaScript |
<meta> |
通常用於指定網頁的描述，關鍵詞，檔案的最後修改時間，作者，和其他元資料。元資料也不顯示在頁面上，但會被瀏覽器解析。 |
link進來的叫外部樣式表，head中的style叫內部樣式表，而直接<h1 style="">則屬於內聯樣式表。
style和meta用法示例：
<style type="text/css">
body {background-color:yellow}
h1 {color:red;}
p {color:blue}
<!--這樣在body中寫h1標籤等等的時候顏色就會被改變-->
</style> 為搜尋引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網頁定義描述內容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定義網頁作者:
<meta name="author" content="Hege Refsnes">
每30秒中重新整理當前頁面:
<meta http-equiv="refresh" content="30">19.表格——<table>…</table>定義表格;<th>…</th>定義表格的標題欄（文字加粗）;<tr>…</tr>定義表格的行;<td>…</td>：定義表格的列。cellpadding用於設定單元格邊距<table border="1" cellpadding="10">；cellspacing屬性用於設定單元格間距。
<h4>兩行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<!--跨n行n列的例子，跨行則用colspan-->
<h4>單元格跨兩列:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>20.列表——列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等。
無序列表：
<ul><!--可使用style屬性更改列表前的標誌：style="list-style-type:disc"。 ：後還可以是circle、square-->
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>有序列表(可設定起始序號)：
<ol start="50"><!--也可以使用type屬性更改序號型別：type="A",type="a","I","i"-->
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>21.將script插入html文件——script一般置於body標籤的末尾部分(不支援 JavaScript 的瀏覽器會使用 noscript 元素中定義的內容（文字）來替代)：
<body>
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的瀏覽器不支援 JavaScript!</noscript>
</body>