###01-什麼是HTML？
-HTML 是用來描述網頁的一種語言。-HTML 指的是超文本標記語言: HyperText Markup Language-HTML 不是一種編程語言，而是一種標記語言-標記語言是一套標記標籤 (markup tag)-HTML 使用標記標籤來描述網頁-HTML 文檔包含了HTML 標籤及文本內容-HTML文檔也叫做 web 頁面
###02-VSCode基本使用
- Web前端常用開發工具- Visual Studio Code 微軟出品 Microsoft- Sublime Text- WebStorm 和PyCharm出自同一個公司
-VSCode操作面板- 創建文件的兩種方式- 創建文件，手動保存文件，不推薦- 打開本地文件夾後，再去創建文件，會自動保存而且在創建時就可以修改文件名稱及後綴（推薦使用）
###03-HTML文檔基本結構
```
<!DOCTYPE html> 文檔聲明類型，聲明幫助瀏覽器正確地顯示網頁
<html> html文檔的根標籤
<head> 網頁頭部信息，用來做網頁的基本配置<meta charset="utf-8"> 網頁字符編碼<title>html的基本結構</title> 網頁在瀏覽器窗口中顯示的標題</head>
<body>此標籤中寫網頁中顯示的內容</body>
</html>
```
###04-HTML文檔創建的快捷方式
```
!+tab鍵
html5+tab鍵
```
###05-常用標籤01
-h1~h6 header 標籤
- img標籤
- src:圖片路徑
- alt: 圖片加載失敗時顯示，數據分析及搜索引擎收錄圖片
- title:光標放在圖片上提示
-a 標籤 界面跳轉
```href = "地址/網址 http://"target: 目標 "_self" "_blank"<a>更多</a> 標籤中的文字會顯示出來，鏈接不會顯示，但此文字會有跳轉功能```
###06-絕對和相對路徑
- 絕對路徑
-Windows系統下的文件絕對路徑:
- C:\Program Files\feiq\RecvFace\xxx.png
- Mac系統下的文件絕對路徑:
- /Users/chao/Desktop/xxx.png
-相對路徑 推薦使用
-./ 當前目錄路徑 可以省略
-../ 當前文件的上一級路徑
-../../最多用兩個不要多寫
###07-常用標籤02
- p 段落標籤
- br 換行標籤
- 字符實體
```
空格
< < 小於號
> > 大於號
& &字符實體
```
- div塊標籤
- span標籤
###08-常用標籤小結
```
<h1~h6> 標題
a標籤 鏈接
img 圖片標籤 src alt title
p 標籤
br 換行
div 塊標籤
span 圈住一塊文字
< <
> >
空格
& &
```
###09-今日頭條界面內容展示
- 用div細分模塊方便界面佈局 樣式設置及調整
###10-什麼是CSS？
-CSS 指層疊樣式表 (Cascading Style Sheets)
-樣式定義如何顯示 HTML 元素
-把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題
-外部樣式表可以極大提高工作效率
###11-行內式（不推薦）
```
<div sytle="background-color:red">
```
###12-嵌入式
```
<head>
<style>
p{
background-color:red;
}
</style>
</head>
```
###13-外鏈式
```
<head>
<link rel="stylesheets" herf:"./css/main.css">
</head>
```
###14-CSS書寫方式小結
-臨時設置某一個標籤的樣式，或測試等可以選擇行內式
-網站首頁用嵌入式，優點加載快，網頁顯示快
-工作中常用外鏈式，其他界面，實現HTML和CSS的分離和複用
###15-CSS常用選擇器01(重點)
-標籤選擇器
-類選擇器
-層級選擇器
###16-CSS常用屬性
-文本屬性
- font-size 字體大小
- color 文字顏色
- font-family 字體 'Microsoft YaHei'
- line-height 行高 可以讓文字在指定高度垂直居中效果
- width 寬度
- height 高度
- border 邊框
- solid 實線
- background-color 背景色
- margin 順序上右下左 外邊距
- padding 上右下左 內邊距
###17-今日頭條界面樣式處理
###18-常用插件
-HTML Snippets 代碼提示插件
-Path Autocomplete 路徑提示插件
- 插件提示路徑時後綴也自動帶上
-"path-autocomplete.extensionOnImport": true,
-open in browser 用快捷鍵的方式打瀏覽器打到.html文件
-ctrl+B 在電腦默認瀏覽器打開
-Set default browser 設置默認打開瀏覽器
"open-in-browser.default": "chrome",
-ctrl + shift + B 在指定瀏覽器打開
###18-案例
<!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>08-今日頭條</title>
<style>
/* 1.最外邊的大框設置樣式 */
.box{
width: 285px;
height: 310px;
border-top: 1px solid #c8dcf2;
border-bottom: 1px solid #c8dcf2;
/* 元素水平方向居中 */
margin: 0px auto;
/* red green blue */
}
/* 頭部 */
.head{
height: 40px;
}
/* 今日頭條文字 */
.head h3{
margin: 0px;
font-size: 16px;
font-family: "Microsoft Yahei";
color: #172c45;
/* 浮動 用了浮動後所有的元素都能排在一行 */
float: left;
line-height: 40px;
/* 設置下劃線 */
/* text-decoration: underline; */
}
/* 更多 */
.head a{
font-size: 12px;
font-family: "Microsoft Yahei";
color: #172c45;
/* 右浮動 */
float: right;
/* 行高 設置文字垂直居中 */
line-height: 40px;
/* 清除下劃線 */
text-decoration: none;
}
/* 人工智能段落 */
.box p{
font-size: 12px;
font-family: "Microsoft Yahei";
color: #737373;
line-height: 20px;
}
</style>
</head>
<body>
<!-- 大div表示整個內容 -->
<div class="box">
<!-- 1 頭部div -->
<div class="head">
<!-- 1.2 今日頭條標籤 -->
<h3>今日頭條</h3>
<!-- 1.3 更多 a標籤 -->
<a href="#">更多>></a>
</div>
<!-- 2.圖片 -->
<img src="images/banner.jpg" alt="人工智能">
<!-- 3.段落 -->
<p> 人工智能（Artificial Intelligence），英文縮寫爲AI。它是研究、開發用於模擬、延伸和擴展人的智能的理論、方法、技術及應用系統的一門新的技術科學。 人工智能是計算機科學的一個分支，它企圖瞭解智能的實質，並生產出一種新的能以人類智能相似的方式做出反應的智能機器，該領域的研究包括機器人、語言識別、圖像識別、自然語言處理和專家系統等.</p>
</div>
</body>
</html>