HTML 超文本標記語言，使用標記標簽來描述網頁。
1.第一個html代碼
<!DOCTYPE html> --聲明為HTML5文檔
<html> --HTML頁面的根元素
<head> --包含文檔的元meta數據
<meta charset="utf-8"> --防止中文亂碼
<title>菜鳥教程</title> --描述文檔標題
</head>
<body> --可見的頁面內容
<h1>第一個標題</h1>
<p>第一個段落</p>
<hr/> --我是水平線分隔符
<p>第二個段落</p>
<a target="_blank">這是鏈接</a>
<img src="/html/Fengjing.jpg" width="258" height="39"/>
<img src="file://D:/job/PC評價頁面JPG/PC評價頁面JPG/1.jpg" > --讀取電腦本地圖片
</body>
</html>
標題是通過<h1>-<h6>標簽來定義的。
段落是通過<p>標簽來定義的，塊級元素，會自動在段落的前后添加空行。
鏈接是通過<a>標簽來定義的。
圖像是通過<img>標簽來定義的。
<!--這是一個注釋--> 注釋
2.屬性
屬性一般描述于開始標簽，總是以名稱/值對的形式出現。name="value"
class
id
style
title
target="_blank"定義打開新窗口
3.文本格式化
<b>定義粗體
<i>定義斜體
<strong>定義加重語氣，加粗
<em>定義著重文字，斜體
<small>定義小號字
<sub>定義下標字
<sup>定義上標字
<ins>定義插入字
<del>定義刪除字
<pre>定義預格式文本，保留空格和空行，用于描述計算機代碼
<dfn>定義項目</dfn>
<code>定義計算機代碼</code>
<var>定義變量</var>
<samp>定義計算機樣本</samp>
<kbd>定義鍵盤碼</kbd>
<abbr titie="world health organization>定義縮寫
<address>定義地址
<dbo dir="rtl">定義文字方向
<blockquote>長的引用
<q>短的引用，會有雙引號
<cite>定義引用，引證，斜體
4.鏈接
<a target="_blank">這是鏈接</a>
target屬性定義鏈接的文檔顯示在何處，_blank=打開新窗口
id屬性定義一個html文檔的書簽標記
<a id="tips">有用的提示</a>
<a href="#tips">訪問有用的提示</a>
不在同一個頁面中<a href="www.runoob.com/"target="_blank">訪問有用的提示</a>
鏈接到一個郵件
<a href="mailto:haoye@wealink.com?Subject=Hello" target="_top">發送郵件</a>
5.html頭部
title 標題
base 定義html文檔中所有鏈接標簽的默認鏈接。
meta定義html文檔中的描述，關鍵詞，作者和字符集等
link定義文檔與外部資源之間的關系
<head>
<base target="_blank">
<title>文檔標題</title>
<meta charset="utf-8">
<link rel="stylesheet" style="text/css" href="style.css">
</head>
調用:<a href>鏈接</a>
6.樣式 -css
CSS: cascading style sheets
1)內聯樣式 元素中使用style屬性
<p style="background-color:blue">這是一個段落</p>
2）內部樣式表 <head>區域使用<style>元素來包含css
<head>
<style type="text/css">
p {color:yellow}
body {back-ground-color:red}
</style>
</head>
3)外部引用 使用外部css文件
<head>
<link rel="stylesheet" style="text/css" href="mystyle.css">
</head>
背景顏色 background-color
字體：font-family
字體大小：font-size
對齊方式：text-align
7.圖像
<img src="url" alt="text" width="300" height="200" align="top">
url定義圖像的位置
alt定義圖像無法載入時的替換文本信息
align對齊方式 top頂部對齊middle bottom
style="float:left" 圖像浮動在段落的左邊
border="10" 定義圖像邊框
map 創建圖像映射
<img src="url" usermap="#plantmap">
<map name="plantmap">
<area shape="rect" coords="x1,y1,x2,y2" alt="sun" href="sun.htm"> 矩形
<area shape="circle" coords="x1,y1,r" alt="Mercury" href="mercury.htm"> 圓形
<area shape="poly" coords="x1,y1,x2,y2,..." href=url> 多邊形
</map>
8.表格
<table border="1" cellpadding="10"></table>定義表格<tr></tr>定義行<td></td>定義列<th colspan="2"></th>定義表頭<caption></caption>定義標題
<thead></thead>頁眉<tfoot></tfoot>頁腳<tbody></tbody>表格主體
colspan=“2”單元格跨兩列
rowspan=“2”單元格跨兩行
cellpadding 單元格邊距
cellspacing 單元格間距
colgroup定義表格列的組 col 定義列屬性
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:green">
</colgroup>
9.列表
列表可以嵌套
<ul></ul>無序列表<ol></ol>有序列表 <li></li>每個列表
<dl></dl>自定義列表 <dt></dt>自定義列表項 <dd></dd>列表項定義
type屬性定義有序列表類型 有序：A、a、I、i
style屬性定義無序列表類型 list-style-type:disc（圓點）\circle\square（正方形）
<dl>
<dt>Coffee</dt>
<dd>--black hot drink</dd>
<dt>Milk</dt>
<dd>--white cold drink</dd>
</dl>
10.區塊
塊級元素 <h1><p><ul><table> <div>文檔布局
內聯元素<a><img><b><td> <span>部分文本樣式
11.表單
表單是一個包含表單元素的區域。表單元素允許用戶在表單中輸入內容，比如：文本域、下拉列表、單選框、復選框等等。
<form>
input元素
</form>
<input type="text" >文本
<input type="password">密碼
<input type="radio"> 單選
<input type="checkbox">復選
<select>
<optgroup>
<option></option>
</optgroup>
</select> 下拉列表
<textarea></textarea>
<input type="submit">提交
<button type="button"></button>按鈕
<fieldset></fieldset>邊框
<form action="html_form_action.php" method="get" >
<fieldset>
<legend>Personal information</legend>
username:<input type="text" name="username" placeholder="請輸入用戶名"><br/>
password:<input type="password" name="password"placeholder="請輸入密碼"><br/>
<input type="radio" name="sex" value="female">female<br/>
<input type="radio" name="sex" value="male" checked="checked">male<br/>
<input type="checkbox" name="vehicle" value="Bike">Bike<br/>
<input type="checkbox" name="Bus" value="Bus" checked="checked">Bus<br/>
<input type="checkbox" name="Car" value="Car">Car<br/>
<select name="cars">
<optgroup label="Swedish">
<option value="volvo">volvo</option>
<option value="saab" >saab</option>
</optgroup>
<optgroup lable="German">
<option value="fiat" selected>fiat</option>
</optgroup>
</select><br/>
<textarea rows="10" cols="20">我是文本框
</textarea><br/>
<input type="button" value="helloworld"><br/>
<input list="browsers">
<datalist id="browsers">
<option value="IE">
<option value="chorme">
<option value="Opera">
<option value="Safari">
</datalist>
</fieldset>
<input type="submit" value="Submit">
</form>
12.框架
直接顯示一個頁面
<iframe src="Fengjing.jpg" frameborder="0" width="200" height="200"></iframe>
顯示一個目標鏈接頁面
<iframe src="demo_iframe.htm" name="iframe_a" frameborder="0" width="200" height="200"></iframe>
<p><a href="Fengjing.jpg“” target="iframe_a">任意文本</p>
13顏色
顏色由紅、綠、藍混合而成，用十六進制符號來定義。每種顏色最小值#00，最大值#FF.
<p style="background-color:#FFFF00">背景色是黃色的寫法1</p>
<p style="background-color: Yellow">背景色是黃色的寫法2</p>
<p style="background-color: rgb(255,255,0)">背景色是黃色的寫法3</p>
14.插入腳本
<script>document.write("hello")</script>
<noscript>這是文本</noscript>
當瀏覽器不顯示腳本或禁用腳本時，顯示<noscript>中的內容。
<p id="demo">js能改變元素內容和顏色</p>
<script>
function myfunction() {
// document.getElementById("demo").innerHTML="lalala"
document.getElementById("demo").style.color="red"
}
</script>
<button type="button" value="點我" onclick="myfunction()">點我</button>
15.字符實體
小于號 < < <
大于號 >
空格  
16.URL統一資源定位器
格式：scheme://host.domain:port/path/filename
scheme-定義因特網服務的類型，常見http。
host-定義域主機，http默認www
domain-定義因特網域名，比如runoob.com
port-定義主機上的端口號,http默認80
path-定義服務器上的路徑
filename-定義文檔資源的名稱
http 超文本傳輸協議 用于普通http://開頭的網頁
https 安全超文本傳輸協議，加密所有信息交換
ftp文本傳輸協議，文件下載或上傳至網站
file 本地文件
浙公網安備 33010602011771號