1
P1:涼涼好像挺厲害的奧？ 聽完了！
2
P2:HTML是用來描述網頁的一種語言
官方：超文本標記語言 Hyper Text Markup Language
使用標簽來描述網頁 < >括起來的就是標簽，成雙成對 開始標簽+結束標簽
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>第一個程序</title> 5 </head> 6 <body> 7 <h1>Hello world</h1> 8 <p>2020 CS</p> 9 </body> 10 </html>
第一行：聲明——由HTML5（最新）編寫。聲明的作用是幫助編譯器去解析你的代碼。
html元素：描述所有網頁的內容
head元素：所有頭部元素的容器 title指定網頁的標題
body:包含網頁中所有可見的內容
h1:標題的尺寸 往下由h1,h2,h3,h4,h5,h6 h1最大
p元素：定義了一個段落，存放文本
P3:
服務器搭建？?
課程案例在線演示：http://demo.fishc.com
HTML5速查寶典：http://man.fishc.com/html5
CSS3速查寶典：http://man.fishc.com/css3
擴展閱讀：bbs.fishc.com 課堂課后資料 階段考核——項目！！！
img標簽——插入一個圖片 必須設置alt src屬性（路徑必須正確） 少見的沒有內容的標簽，即空標簽。
a標簽——定義超鏈接，讓用戶從一個網頁跳轉到另外一個網頁
<a href="http://www.cskaoyan.com/forum.php">王道論壇，CS才是王道 </a>
herf指示了超鏈接的地址
第二重要的屬性 target指定在何處打開超鏈接 _blank 在新窗口打開
<a href="http://www.cskaoyan.com/forum.php" target="_blank">王道論壇，CS才是王道 </a>
多個標簽之間 空格隔開即可 如上的a標簽和target標簽。
3
meta 很厲害呀，功能豐富！！! 參見https://man.ilovefishc.com/ 中的HTML5速查寶典
一、利用meta元素指定網頁編碼
編碼問題曾經可能困擾了無數的攻城獅，但今天，你只要記住將源文件保存為 UTF-8 編碼格式，然后在 HTML 文檔中指定即可：
<meta charset="UTF-8">
二、實現網頁尺寸 “自適應”
所謂的自適應，就是無論你是使用 PC 端，還是使用手機、平板電腦來瀏覽這個網頁，看到的內容都是令人感到舒適的。
下面是沒有使用 “自適應” 的頁面：
<meta name="viewport" content"width=device-width,initial-scale=1.0"> 實現屏幕自適應
三、
3. 搜索引擎優化 百度
（1）為搜索引擎提供關鍵詞：
<meta name="keywords" content="小甲魚,Web開發,HTML5,CSS3,Web編程教學">
（2）描述網頁內容：
<meta name="description" content="《零基礎入門學習Web開發》案例演示">
（3）定義網頁的作者：
<meta name="author" content="小甲魚">
四、 meta 小技巧
在早些時候，有些同學偶然間從來歷不明的渠道獲得小甲魚的視頻，看了兩集覺得，誒，風格很是喜慶，看教程跟說相聲似的，於是乎想要前來支持一波，但卻找不到方式。
於是小甲魚后腦勺一拍，靈機一動，就寫了一個網頁文件放在課程的壓縮包里面。這樣想要支持的朋友就可以隨時點擊過來咱的淘寶店啦。
那么這個網頁就需要實現一個自動跳轉功能，我們同樣可以使用 meta 標簽來實現：
<meta http-equiv="refresh" content="5;http://bbs.fishc.com"> 實現一定時間后網頁刷新跳轉鏈接 跳轉到http://bbs.fishc.com
4一只特立獨行的豬🐖 如何對頁面進行美化調整
<style>標簽用於為HTML文檔定制樣式信息
style元素可以出現在文檔的各個部分，一個文檔可以包含多個style元素
在頭部即head中設置標簽對應內容樣式
1 <style type="text/css"> 2 h1 {color: red} 3 p {color: blue} 4 </style>
1 <style type="text/css"> 2 h1 {color: red} 3 p {color: blue} 4 a { 注意：a 和{ 之間必須有空格，否則無效。原因未知233 5 color yellow; 6 background:black; 7 } 8 </style>
設置段落背景圖片：（引號內為文件相對位置）（..l 相對路徑上一級）
1 <style> 2 body{ 3 background-image:url("CS學習/旦.JPG") 4 } 5 </style>
實現滿足三個條件——即屏幕，兩個像素值時 改變背景圖片
1 <style media="screen and (min-width:512px) and (max-width:1024px)"> 2 body { 3 background-image: url("CS學習/旦.JPG"); 4 </style>
5相濡以沫不如相見於江湖