第一天 HTML簡介及常用标簽（文本标簽）
- 一、 HTML簡介
-
- 1. 什麼是HTML
- 2. HTML的編寫工具
- 3. HTML的文檔結構
- 4. W3C标準
- 二、HTML中的常用标簽
-
- （一）. head标簽
-
- 1. head中的常用标簽
-
- ①meat标簽
- ② title标簽
- ③link标簽
- ④script标簽（網頁的行為）
- ⑤style标簽（網頁的表現）
- （二）. body标簽
-
- 1. body中的常用标簽（文本标簽）
-
- ① 段落标簽
- ② 标題标簽
- ③ 格式化标簽
- ④ 其它标簽
- 三、源代碼
- 四、運作效果
一、 HTML簡介
1. 什麼是HTML
HTML:超文本标記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于建立網頁的标準标記語言。 由浏覽器負責解析執行
超文本： 指不僅僅可以表示文本，還超出了文本的範圍，還可以顯示圖檔，音頻和視訊，超連結等等。
2. HTML的編寫工具
記事本（不推薦，開發效率低）
Notepad++
HBuilder（推薦，開發效率高）
3. HTML的文檔結構
根标簽
<html></html>
告訴浏覽器從這裡開始解析
頭部标簽
<head></head>
浏覽器和搜尋引擎需要的相關資訊
主體标簽
<body></body>
顯示内容
根标簽下有且僅有頭部與主體兩個标簽
以下是符合**“W3C”标準**的HTML文檔結構
4. W3C标準
網際網路聯盟（外語縮寫：W3C）标準不是某一個标準，而是一系列标準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）
結構的标準語言是HTML，XML
表現的标準語言是CSS
行為的标準語言是ECMAScript
二、HTML中的常用标簽
（一）. head标簽
head标簽内的内容主要提供給浏覽器和搜尋引擎使用，不顯示在浏覽器中，使用者無法看見！
1. head中的常用标簽
①meat标簽
<meat charset="utf-8" />編碼格式标簽，告訴浏覽器網頁的編碼格式(不告訴浏覽器編碼格式，有可能導緻亂碼)
<meat name="keywords" content=“北京尚學堂，···”/> “keywords”關鍵字标簽，搜尋引擎檢索網頁時用到。各關鍵字以逗号分割。
<meta name="description" content="淘寶網- 亞洲較大的網上交易平台···"/>“description”網頁描述标簽。一般用來描述網頁或者網站内容！
② title标簽
顯示網頁标題
<title>我的第一個網頁</title>網頁标題标簽 用于顯示目前網頁名稱，顯示在浏覽器标簽欄
③link标簽
連結外部資源（包括網上資源和本地資源）
一般連結CSS檔案和Script檔案，以及項目中的其它資源
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="image/x-icon">
将百度網頁标題的圖示拿來作為自己網頁标題圖示（連結外部資源）
<link rel="shortcut icon" href="img/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="image/x-icon">
使用img檔案夾下的favicon.ico檔案作為自己網頁标題圖示（連結内部資源）
④script标簽（網頁的行為）
網頁與人機互動或彈出效果等的實作
<script>
function test(){
alert("你好,世界")
}
</script>
彈窗效果
⑤style标簽（網頁的表現）
調控網頁的顯示樣式，讓網頁更美觀
<style>
body{background: blue;}
</style>
将網頁背景設定為藍色
（二）. body标簽
body标簽中的内容是浏覽器顯示給使用者看的。
1. body中的常用标簽（文本标簽）
① 段落标簽
常用于标記整段文字
<p>這是一個段落 </p> 特點是獨占一行，一行放不下，自動換行 ,預設字型大小
② 标題标簽
常用于文章标題
<h1></h1>·····<h6></h6>特點：獨占一行，字型加粗，字型由h1最大到h6最小
③ 格式化标簽
加粗、傾斜、上标、下标、預格式文本等等
<b>文字</b>加粗 （現推薦使用<strong>文字</strong>效果一樣）
<i>文字</i>傾斜 （現推薦使用<em>文字</em>效果一樣）
<sub>文字</sub>上标
<sup>文字</sup>下标
<del>文字</del>删除線
<ins>文字</ins>下劃線（常與del标簽一起使用，表示更正）
<pre>代碼</pre>預格式文本（常用于顯示計算機代碼）
④ 其它标簽
<br />換行
  空格
三、源代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的第一個網頁</title>
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="image/x-icon"/>
<link rel="shortcut icon" href="img/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="image/x-icon"/>
<meta name = "keywords" content = "谷歌一下"/>
</head>
<script>
function test(){
alert("你好,世界")
}
</script>
<style>
body{background: beige;}
</style>
<body onload="test()">
<h1><b>天道酬勤</b>(一級标簽)</h1>
<h2>雙氧水分解反應（二級标簽）</h2>
<p>
2H<sub>2</sub>O<sub>2</sub>=2H<sub>2</sub>O+O<sub>2</sub>
</p>
<h3>平方差公式(三級标簽)</h3>
<p>
<del>(a-b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup></del><br />
<ins>(a-b)<sup>2</sup>=a<sup>2</sup>-2ab+b<sup>2</sup></ins>
</p>
<h4>無題<sub> 李商隐 </sub>(四級标簽)</h4>
<p>
<b>相見時難别亦難，<i>東風無力百花殘。</i></b> <br />
<strong>春蠶到死絲方盡，<em>蠟炬成灰淚始幹。</em></strong> <br />
<b>曉鏡但愁雲鬓改，<em>夜吟應覺月光寒。</em></b> <br />
<strong>蓬山此去無多路，<i>青鳥殷勤為探看。</i></strong> <br />
</p>
<h5>Java Code(五級标題)</h5>
<p>
<pre>
public class HelloWorld{
public static void main(String[] args){
System.out.println("Hello World!");
}
}
</pre>
</p>
</body>
</html>
四、運作效果