HTML語言
是標記語言，非編程語言，包含了HTML 標簽及文本內容
html標簽通常是成對出現的，其中第一個標簽是開始標簽（開放標簽），第二個為結束標簽（閉合標簽）
html網頁結構（body部分為網頁顯示）
----------------------------------
<html>
<head>
<title>頁面標題</title>
</head>
<body>
<h1>標題</h1>
<p>段落</p>
</body>
</html>
----------------------------------
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。不區分大小寫
若輸出中文時亂碼 則應在head部分加入<meta charset="UTF-8">
----------------------------------
<html>
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
<body>
<h1>標題</h1>
<p>段落</p>
</body>
</html>
----------------------------------
段落 <p> </p>
連接 <a> <a href="URL"target="_blank">鏈接文本</a> href屬性指定鏈接地址target 可以定義被鏈接的文檔在何處顯示
圖像 <img> <img src="圖片" width="258" height="39" />
沒有內容的 HTML元素被稱為空元素。空元素是在開始標簽中關閉的。
在開始標簽中添加斜杠，比如 <br />折行，是關閉空元素的正確方法.
當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續的空行也被顯示為一個空格。
屬性：
屬性可以在元素中添加附加信息
屬性一般描述于開始標簽
屬性總是以名稱/值對的形式出現，比如：name="value"。
屬性值應該始終被包括在引號內。
在某些個別的情況下如屬性值本身就含有雙引號，那么必須使用單引號，例如：name='John "ShotGun" Nelson'
大多數 HTML 元素的屬性:
class 為html元素定義一個或多個類名（classname）(類名從樣式文件引入)
id 定義元素的唯一id
style 規定元素的行內樣式（inline style）
title 描述了元素的額外信息 (作為工具條使用)
HTML標題
HTML 標題是通過<h1> - <h6> </h1>-</h6>標簽來定義的.
<h1>標題</h1>
<h2>標題</h2>
<h3>標題</h3>
HTML 標題 標簽只用于標題。不要僅僅是為了生成粗體或大號的文本而使用標題。
HTML水平線
<hr>標簽在 HTML 頁面中創建水平線。
HTML 注釋
<!-- 這是一個注釋 -->
折行
在不產生一個新段落的情況下進行換行，用<br />標簽
文本格式化
<b>定義粗體文本
<em>定義著重文字
<i>定義斜體字
<small>定義小號字
<strong>定義加重語氣
<sub>定義下標字
<sup>定義上標字
<ins>定義插入字
<del>定義刪除字
"計算機輸出" 標簽
這些標簽常用于顯示計算機/編程代碼。
<code>定義計算機代碼
<kbd>定義鍵盤碼
<samp>定義計算機代碼樣本
<var> 定義變量
<pre>定義預格式文本
HTML 引文, 引用, 及標簽定義
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<abbr title="etcetera">etc.</abbr>
<!-- abbr代表縮寫-->
<br />
<acronym title="World Wide Web">WWW</acronym>
<!-- acronym標記一個首字母縮寫-->
<p>在某些瀏覽器中，當您把鼠標移至縮略詞語上時，title 可用于展示表達的完整版本。僅對于 IE 5 中的 acronym 元素有效。</p>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The worlds leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<!--blockquote定義長的引用-->
<p>對于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>
HTML<head>
<head>元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息
頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>
<title> 元素
<title>標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
定義了瀏覽器工具欄的標題
當網頁添加到收藏夾時，顯示在收藏夾中的標題
顯示在搜索引擎結果頁面的標題
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<base> 元素
<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接
<link> 元素
<link>標簽定義了文檔與外部資源之間的關系。
<link> 標簽通常用于鏈接到樣式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<style> 元素
<style>標簽定義了HTML文檔的樣式文件引用地址也可以直接添加樣式來渲染 HTML 文檔
head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<meta> 元素
<meta> 標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。
<script> 元素
<script>標簽用于加載腳本文件
HTML 樣式- CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素標簽的樣式.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style type="text/css">
<link rel="stylesheet" type="text/css" href="styles.css">
</style>
</head>
<body style="background-color:yellow">
<h1 style="background-color:red;">這是一個標題</h1> <!--顯示為紅色背景并鏈接到一個外部樣式表-->
<p>這是一個段落。</p> <!--顯示為藍色并鏈接到一個外部樣式表-->
<a href="URL" style="text-decoration:none;">訪問鏈接</a> <!--制作無下劃線的鏈接-->
</body>
</html>
font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式, text-align（文字對齊）屬性指定文本的水平與垂直對齊方式
<p style="font-family:arial;color:red;font-size:20px;">一個段落。</p>
<h1 style="text-align:center;">居中對齊的標題</h1>
HTML圖像
定義圖像的語法是：
<img src="url" alt="some_text"> src是指源屬性，即圖像的URL地址。alt 屬性用來為圖像定義一串預備的可替換的文本（當無法加載圖片時，瀏覽器將顯示這個替代的文本而不是圖像）
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">高度和寬度默認單位為像素，指定了高度和寬度，頁面加載時就會保留指定尺寸。
<area shape="circle" coords="90,58,3" alt="Sun" href="sun.htm">定義圖像地圖中的可點擊區域 coords為其橫縱坐標
HTML表格
表格由 <table>標簽來定義,每個表格均有若干行（由 <tr> 標簽定義,每行被分割為若干單元格（由 <td> 標簽定義),據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。
如果不定義邊框屬性，表格將不顯示邊框
<table border="4">
<caption>表表表</caption>
<colgroup>
<col span="1" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>表頭1</th>
<th>表頭2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<thead>定義表格頁眉 <tbody>定義表格主體 <tfoot>定義表格頁腳<caption>定義表格標題<colgroup>定義表格列的組 <col>定義列的屬性
HTML列表
HTML 支持有序、無序和定義列表
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
無序列表
此列項目使用粗體圓點（典型的小黑圓圈）進行標記，無序列表使用 <ul> 標簽,每個列表項始于<li>標簽
<ul>
<li>12315</li>
<li>321545</li>
</ul>
有序列表
有序列表始于 <ol>標簽
自定義列表
自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>RPC</dt>
<dd>- 學校</dd>
<dt>網安一班</dt>
<dd>- class</dd>
</dl>
區塊
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。塊級元素在瀏覽器顯示時，通常會以新行來開始和結束例: <h1>, <p>, <ul>, <table>。 內聯元素在顯示時通常不會以新行開始例: <b>, <td>, <a>, <img>。
<div> 元素
無特定含義，是塊級元素，它可用于組合其他 HTML 元素的容器以及是文檔布局。由于它屬于塊級元素，瀏覽器會在其前后顯示折行。與 CSS 一同使用，可用于對大的內容塊設置樣式屬性。
<span> 元素
無特定含義，是內聯元素，可用作文本的容器，與 CSS 一同使用時，<span> 元素用于為部分文本設置樣式屬性。
布局
大多數網站可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:blue;">
<h1 style="margin-bottom:0;">主標題</h1></div>
<div id="menu" style="background-color:gray;height:200px;width:100px;float:left;">
<b>菜單</b><br>
123<br>
1234<br>
12345</div>
<div id="content" style="background-color:pink;height:200px;width:400px;float:right;">
31665131546</div>
<div id="footer" style="background-color:green;clear:both;text-align:center;">
qaqaqaq</div>
</div>
</body>
</html>
HTML 表單和輸入
表單用于收集不同類型的用戶輸入
表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等。
表單使用表單標簽 <form> 來設置，多數情況用到表單標簽是輸入標簽<input>，輸入類型是由類型屬性（type）定義
文本域
文本域通過<input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。表單本身并不可見。在大多數瀏覽器中，文本域的缺省寬度是20個字符。
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
密碼字段
密碼字段通過標簽<input type="password"> 來定義.密碼字段字符不會明文顯示，而是以*或·替代。
<form>
Password: <input type="password" name="pwd">
</form>
單選按鈕,復選框
<input type="radio">標簽定義了表單單選框選項,<input type="checkbox">定義了復選框,用戶需要從若干給定的選擇中選取一個或若干選項
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
----------------
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
提交按鈕
<input type="submit" value="提交">定義了提交按鈕.
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
HTML框架
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
iframe語法
<iframe src="URL"></iframe>該URL指向不同的網頁。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>定義iframe標簽的高度與寬度
<iframe src="demo_iframe.htm" frameborder="0"></iframe> frameborder 屬性用于定義iframe表示是否顯示邊框，將其屬性值設置為0，移除iframe的邊框
使用iframe顯示目標鏈接頁面
<iframe src="文件URL" name="11111"></iframe> 顯示框架
<p><a href="鏈接URL" target="11111">鏈接文本</a></p>
HTML顏色
HTML顏色是由一個十六進制符號來定義的，這個符號由紅色，綠色和藍色的值組成（RGB）。
每種顏色的最小值是0（十六進制：#00）。最大值是255（十六進制：#FF）。
三種顏色混合而成的具體效果：
通過十六進制設置背景顏色：
<p style="background-color:#FFFF00">
通過RBG值設置背景顏色：
<p style="background-color:rgb(255,255,0)">
通過顏色名設置背景顏色:
<p style="background-color:yellow">
顏色名：141個顏色名稱是在HTML和CSS顏色規范定義的（17標準顏色，再加124）。17標準顏色：黑色，藍色，水，紫紅色，灰色，綠色，石灰，栗色，海軍，橄欖，橙，紫，紅，白，銀，藍綠色，黃色。
HTML 腳本
<script>標簽用于定義客戶端腳本，比如 JavaScript。
<script> 元素既可包含腳本語句，也可通過src 屬性指向外部腳本文件。
JavaScript`最常用于圖片操作、表單驗證以及內容動態更新。
<noscript> 標簽提供無法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。
<noscript>元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 <noscript> 元素中的內容
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>
HTML 字符實體
小于號(<)：< 或< 或 <
大于號(>)： >
引號（“）："
乘號(×):×
除號(÷): ÷
