軟硬件環境
1.硬件：
雙核、2G內存
2.軟件：
windows、Mac OS X、Linux
一、HTML與HTML5差異
1.什麼是HTML?
（1）HTML是用來藐視網頁的一種語言。
（2）HTML指超文本標記語言。
（3）HTML不是編程語言，是一種標記語言。
2.HTML5的新特性？
（1）用於繪畫的canvas標籤。
（2）用於媒介回放的video和audio元素
（3）對本地離線存儲的更好支持
（4）新的特殊內容元素
如：article、footer、header、nav、section
（5）新的表單控件
如：calendar、date、time、email、url、search
（6）瀏覽器的支持
Safari、Chrome、Firefox以及Opera包括IE9基本支持了HTML5
3.開發工具：
VS Code、WebStrom、notepad++、Eclipse、text sublime、Dreamweaver、IntelliJ IDEA等。
二、 HTML5基礎講解
1.HTML基礎標籤
Head、body
2、HTML標題
<h1>...<h6>等標籤進行定義等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>this is my web</p>
hello <br/>
hello world
</body>
</html>
3.HTML段落
<p>標籤定義段落</p>
4.HTML鏈接
<a>標籤定義鏈接</a>
<a href="2.index.html">打開本地</a>
<a href="http://www.baidu1.com" style="color:purple;">點我轉到百度</a>
5.HTML圖像
<img>標籤定義圖像
三、HTML元素
1.元素指的是從開始標籤到結束標籤的所有代碼
開始標籤 元素內容 結束標籤
<p> this is my web page </p>
<br/>
2.HTML元素語法：
（1）元素的內容是開始標籤與結束標籤之間的內容
（2）空元素在開始標籤中進行關閉
（3）大多數HTML元素可擁有屬性
3.嵌套得HTML元素
四、HTML屬性
1.標籤可以擁有屬性爲元素提供更多的信息
2.屬性以鍵值對的形式出現
如：href="www.baidu.com"
3.常用標籤屬性：
<h1>:align 對齊方式
<body>:bgcolor 背景顏色
<a>:target 規定元素的類名
4.通用屬性：
class:元素的類名
id:元素的唯一ID
style:元素的樣式
title:元素的額外信息
五、HTML格式化
標籤 描述
<b> 粗體文本
<big> 大號字
<i> 斜體字
<small> 小號字
<sub> 下標字
<sup> 上標字
<ins> 插入字
<del> 刪除字
<b>歡迎來到杭州</b>
<br/>
<big>觀影</big>
<br/>
<em>着重字體</em>
<br/>
<i>插入字體</i>
<br/>
<small>小號字</small>
<br/>
<strong>加重語氣</strong>
<br/>
大家好<sub>下標字</sub>
<br/>
大家好<sup>上標字</sup>
<br/>
<ins>插入字體</ins>
<br/>
<del>刪除字</del>
<br/>
六、HTML樣式、鏈接和表格
1.HTML樣式
（1）外部樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=s, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外部樣式</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>標題1</h1>
（2）內部樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>內部樣式</title>
<style type="text/css">
p{
color:palegreen;
}
</style>
</head>
<body>
<h1>標題1</h1>
<p>歡迎來到百度：www.baidu.com</p>
</body>
</html>
</body>
</html>
（3）內聯樣式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>內聯樣式表</title>
</head>
<body>
<h1>標題1</h1>
<p>歡迎來到上海</p>
<a href="http://www.baidu.com" style="color:purple;">點我轉到百度</a>
</body>
</html>
2.HTML鏈接
（1）文本鏈接
（2）圖片鏈接
<a href="http://www.baidu.com">點擊我</a>
<a href="http://www.baidu.com">
<img src="TIM圖片20190620181451.png" width="100px" height="100px" alt="html5logo">
</a>
<br/>
<a name="tips">hello</a>
<br/>
<a href="#tips">跳轉到hello</a>
3.屬性：
（1）href屬性：指向另一個文檔的鏈接
（2） name屬性：創建文檔內的鏈接
4.img標籤屬性：
（1）alt:替換文本屬性
（2）width 寬
（3）height 高
<img src="TIM圖片20190620181451.png" width="100px" height="100px" alt="html5logo">
5.HTML表格
表格 描述
<table> 表格
<caption> 表格標題
<th> 表格的表頭
<tr> 表格的行
<td> 表格的單元
<thead> 表格的頁眉
<tbody> 表格的主體
<tfoot> 表格的頁腳
<col> 表格的列表屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<p>表格</p>
<table border="3">
<caption>重要表格</caption>
<tr>
<th>單元</th>
<th>單元</th>
<th>單元</th>
</tr>
<tr>
<td>單元格1</td>
<td>單元格2</td>
<td>單元格3</td>
</tr>
<tr border="1" celspcing="10">
<td>單元格1</td>
<td>單元格2</td>
<td>單元格3</td>
</tr>
</table>
</body>
</html>