1.第一個前端程序
2.前端工具的選擇與安裝
3.VSCode開發者工具快捷鍵
4.HTML5簡介與基礎骨架
- - 4.1 HTML5的DOCTYPE聲明
  - 4.2 HTML5基本骨架
  - - 4.2.1 html標簽
    - 4.2.2 head標簽
    - 4.2.3 body標簽
    - 4.2.4 title標簽
    - 4.2.5 meta標簽
5.標簽之標題
- 5.1 快捷鍵
- 5.1 標題標簽位置擺放
6.標簽之段落、換行、水平線
- 6.1 標簽之段落
- 6.2換行
- 6.3 水平線
7.標簽之圖片
8.圖片路徑詳解
- 8.1 絕對路徑
- 8.2 相對路徑
- - 8.2.1 子級`/`
  - 8.2.2 父級`../`
  - 8.2.3 同級`./`
- 8.3 網絡路徑
9.標簽之超文本鏈接
- 9.1 超鏈接描述
- 9.2 超鏈接屬性
- 9.3 超鏈接表現
10.標簽之文本
- 10.1 常用文本標簽
11. 列表標簽之有序列表
- 11.1 有序列表
- 11.2 type屬性
- 11.3 有序列表嵌套
12.列表標簽之無序列表
- 12.1 無序列表實現
- 12.2 type屬性
- 12.3 無序列表嵌套
- 12.4 常見應用場景
- 12.5 快捷鍵
13.標簽之表格
- 13.1 表格展示效果
- 13.2 快捷鍵
- 13.3 表格屬性
14.表格單元格合并
15.Form表單
- 15.1 表單元素（可理解為表單控件）
16.表單元素
- 16.1 文本框
- 16.2 密碼框
- 16.3 提交按鈕
17.塊元素與行內元素（內聯元素）
18.HTML5新增標簽
- 18.1 拓展知識
- 18.2 H5新標簽

1.第一個前端程序

用記事本創建文件名為Welcome.html

<html><head><title>我的第一個網頁</title></head><body>歡迎來到網頁制作</body>
</html>

2.前端工具的選擇與安裝

瀏覽器選擇：谷歌瀏覽器（有開發者調試工具）
鼠標右鍵，選擇檢查，進入開發者調試工具

開發者工具：VSCode
安裝中文，擴展，收索chinese，安裝

3.VSCode開發者工具快捷鍵

生成瀏覽器文件.html的快捷方式

! + 回車（注意是英文的嘆號）

VSCode常用快捷鍵列表

1.代碼格式化：shift + alt + f
2.向上或向下移動一行：alt+up或alt+down
3.快速復制一行代碼：shift+alt+up或shift+alt+down
4.快速保存：ctrl+s
5.快速查找：ctrl+f
6.快速替換：ctrl+h

4.HTML5簡介與基礎骨架

4.1 HTML5的DOCTYPE聲明

避免瀏覽器怪異模式，防止不同瀏覽器渲染出不同效果來。

1. <!DOCTYPE html>

4.2 HTML5基本骨架

4.2.1 html標簽

其他元素要包裹在它里面，限定了文檔的開始點和結束點

1. <!DOCTYPE html>
2. <html>
3. </html>

4.2.2 head標簽

head標簽用于定義文檔的頭部，描述了文檔的各種屬性和信息，包括文檔的標題、在Web中的文職以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。

1. <!DOCTYPE html>
2. <html>
3. 		<head>
4. 		</head>
5. <html>

4.2.3 body標簽

body元素定義文檔的主體。
body元素包含文檔中的所有內容（比如文本、超鏈接、圖像、表格和列表等等）
它會直接在頁面中顯示出來，也就是用戶可以直觀看到的內容

 1. <!DOCTYPE html>2. <html>3. 		<head>4. 		</head>5. 		<body>6. 			我會顯示在瀏覽器中7. 		</body>8. </html>

4.2.4 title標簽

可定義文檔的標題
它顯示在瀏覽器窗口的標題欄或狀態欄上
<title>標簽是<head>標簽中唯一必須要求包含的東西，就是說寫head一定要寫title
<title>的增加有利于SEO優化（收索引擎優化）

<!DOCTYPE html>
<html><head><title>我的網頁</title>
</head>
<body>歡迎光臨
</body></html>

4.2.5 meta標簽

meta是一個單標簽。meta標簽用來描述一個HTML網頁文檔的屬性，關鍵詞等，例如：charset="utf-8"是說當前使用的是utf-8編碼格式，在開發中我們經常會看到utf-8，或是gbk，這些都是編碼格式，通常使用utf-8

<!DOCTYPE html>
<html><head><title>我的網頁</title><meta charset="UTF-8">
</head><body>歡迎光臨
</body></html>

5.標簽之標題

總共有六級

<h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5><h6>六級標題</h6>

5.1 快捷鍵

生成h1-h6的快捷鍵h$*6

快速打開瀏覽器安裝插件
拓展，搜索open in browser，點擊安裝
正確使用標簽可以提高seo

5.1 標題標簽位置擺放

在標簽中添加屬性：align=left|center|right

6.標簽之段落、換行、水平線

6.1 標簽之段落

段落是通過<p>標簽定義的
建議文本寫在標簽內，標簽內可以修改其字體大小等，標簽外無法控制

6.2換行

<br>或<br />單標簽

6.3 水平線

<hr/>標簽在html頁面中創建水平線
屬性：color,width,size,align

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>我是一個段<br>落標簽</p><hr color="red" width="300px" size="20px"  align="left"> <!--寬度和高度的單位是像素-->
</body>
</html>

7.標簽之圖片

網站中最多的元素就是圖片
<img>標簽定義html頁面中的圖像，它是單標簽
屬性：

1 src:路徑（圖片地址與名字）
2 alt:規定圖像的替代文本（當圖片無法正常顯示的時候，顯示的文字）
3.width：圖像的寬度
4. height：圖像的高度
5. title：鼠標懸停在圖片上給予提示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><img src="1.webp" alt="美麗的小姐姐" width="300px" title="小姐姐"><!--一般不同時規定寬度和高度-->
</body>
</html>

8.圖片路徑詳解

8.1 絕對路徑

從盤符開始

8.2 相對路徑

8.2.1 子級`/`

8.2.2 父級`../`

8.2.3 同級`./`

8.3 網絡路徑

具體的網絡地址

9.標簽之超文本鏈接

9.1 超鏈接描述

html使用標簽<a>來設置超文本鏈接
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

9.2 超鏈接屬性

在標簽<a>中使用了href屬性來描述鏈接的地址
<a href="url">鏈接文本</a>

默認情況下，鏈接未點是藍色帶下劃線，點擊后是紫色帶下劃線，點擊時紅色帶下劃線。后期可用css樣式修改這些效果

9.3 超鏈接表現

鼠標移動到超鏈接上會變成小手

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://www.baidu.com">百度一下</a><a href="https://www.baidu.com"><img src="1.webp" width="300px"></a>
</body>
</html>

10.標簽之文本

10.1 常用文本標簽

標簽	描述
`<em>`	定義著重文字
`<b>`	定義粗體文本
`<i>`	定義斜體字
`<strong>`	定義家中語氣
`<del>`	定義刪除字
`<span>`	元素沒有特定的含義（為了日后添加css樣式方便）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>白菜</p><p>我喜歡吃<em>em白菜</em></p><i>i白菜</i><b>b白菜</b><strong>strong白菜</strong><span>span白菜</span><del>del白菜</del></body>
</html>

11. 列表標簽之有序列表

11.1 有序列表

有序列表是一列項目，列表項目使用數字進行標記。有序列表始于<ol>標簽。每個列表項始于<li>標簽

11.2 type屬性

<ol>的屬性type擁有的選項

1 表示列表項目用數字標號（1，2，3…）
a 表示列表項目用小寫字母標號（a,b,c…）
A 表示列表項目用大寫字母標號（A，B，C…）
i 表示列表項目用小寫羅馬數字標號（i，ii，iii…）
I 表示列表項目用大寫羅馬數字標號（I, II, III…）

11.3 有序列表嵌套

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ol type="a"><li>蘋果</li><li>橘子</li><li>香蕉</li><li>火龍果</li></ol><ol type="A"><li>蘋果</li><li>橘子</li><li>香蕉</li><li>火龍果</li></ol><ol type="1"><li>蘋果</li><li>橘子</li><li>香蕉</li><li>火龍果</li></ol><ol type="i"><li>蘋果</li><li>橘子</li><li>香蕉</li><li>火龍果</li></ol><ol type="I"><li>蘋果</li><li>橘子</li><li>香蕉</li><li>火龍果</li></ol><ol><li>水果</li><li>蔬菜<ol><li>白菜</li><li>油菜</li><li>辣椒</li><li>黃瓜</li></ol></li><li>肉類</li></ol>
</body>
</html>

12.列表標簽之無序列表

12.1 無序列表實現

無序列表是一個項目的列表，此列項目使用粗體原點（典型的小黑圓圈）進行標記
無序列表始于<ul>標簽。每個列表項始于<li>標簽。

12.2 type屬性

<ul>的屬性type擁有的選項

disc 默認實心圓
circle 空心圓
square 小方塊
none 不顯示

12.3 無序列表嵌套

12.4 常見應用場景

無序的列表效果
導航效果

12.5 快捷鍵

快速生成ul+li的布局：ul>li*3(數字根據自己的需要的li數量修改)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ul type="disc"><li>香蕉</li><li>蘋果</li></ul><ul type="circle"><li>香蕉</li><li>蘋果</li></ul><ul type="square"><li>香蕉</li><li>蘋果</li></ul><ul type="none"><li>香蕉</li><li>蘋果</li></ul><ul><li>蔬菜</li><li>水果<ul><li>蘋果</li><li>香蕉</li><li>橘子</li></ul></li><li>肉類</li></ul><ul><li></li><li></li><li></li><li></li><li></li></ul>
</body>
</html>

13.標簽之表格

13.1 表格展示效果

表格：<table>
行：<tr>
單元格（列）：<td>

13.2 快捷鍵

快速生成表格結構:table>tr*4>td*5{單元格}

13.3 表格屬性

border：設置表格的邊框
width：設置表格的寬度
height：設置表格的高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table border="1" width="400px" height="200px"><tr><td>單元格</td><td>單元格</td><td>單元格</td></tr><tr><td>單元格</td><td>單元格</td><td>單元格</td></tr><tr><td>單元格</td><td>單元格</td><td>單元格</td></tr></table><table><tr><td>單元格</td><td>單元格</td><td>單元格</td></tr><tr><td>單元格</td><td>單元格</td><td>單元格</td></tr><tr><td>單元格</td><td>單元格</td><td>單元格</td></tr><tr><td>單元格</td><td>單元格</td><td>單元格</td></tr></table>
</body>
</html>

14.表格單元格合并

單元格合并屬性
在這里插入圖片描述

水平合并：colspan
垂直合并: rowspan

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>合并單元格6和7：colspan</p><p>合并單元格15和20：rowspan</p><p>水平合并：保留左邊，刪除右邊</p><p>垂直合并：保留上邊，刪除下邊</p><table border="1" width="600px" height="400px"><tr><td>單元格1</td><td>單元格2</td><td>單元格3</td><td>單元格4</td><td>單元格5</td></tr><tr><td colspan="2">單元格6單元格7</td><td>單元格8</td><td>單元格9</td><td>單元格10</td></tr><tr><td>單元格11</td><td>單元格12</td><td rowspan="3">單元格13、18、23</td><td>單元格14</td><td rowspan="2">單元格15、20</td></tr><tr><td colspan="2" rowspan="2">單元格16、17、21、22</td><td>單元格19</td></tr><tr><td>單元格24</td><td>單元格25</td></tr></table>
</body>
</html>

15.Form表單

作用：讓網站具有交互性
表單在Web網頁中用來給用戶填寫信息，從而能采用戶信息，使網頁具有交互的功能。
所有的用戶輸入內容的地方都用表單來寫，如登錄注冊、搜索框

表單是由容器和控件組成的，一個表單一般應該包含用戶填寫信息的輸入框，按鈕等，這些輸入框，按鈕叫控件，表單就是容器，它能夠容納各種各樣的控件

<form action="url" method="get|post" name="myform"></form>

屬性說明
action服務器地址
name表單名稱
method中Get和Post的區別

數據提交方式，get把提交的數據url可以看到，post看不到
get一般用于提交少量數據，post用來提交大量數據

15.1 表單元素（可理解為表單控件）

一個完整的表單包含三個基本組成部分：表單標簽（）、表單域（輸入框）、表單按鈕（button按鈕）
1.表單標簽
2.表單域
3.表單按鈕

<form><input type="text"><input type="submit">
</form>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="url" method="get|post" name="myform"></form><form><!--表單標簽--><input><!--表單域--><input type="submit"><!--表單按鈕--><button>按鈕</button><!--表單按鈕--></form><form><input type="text"><input type="submit"></form>
</body>
</html>

16.表單元素

16.1 文本框

文本域通過<input type="text">標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域

<form>First name:<input type="text" name="firstname"><br>Last name:<input type="test" name="lastname">
</form>

16.2 密碼框

密碼字段通過標簽<input type="password">來定義

<form>Password:<input type="password" name="pwd">
</form>

16.3 提交按鈕

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

<form name="input" action="url" method="get">Username:<input type="text" name="user"><input type="submit" value="Submit">
</form>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form><input type="text"><input type="submit"></form><form>用戶名：<input type="text"><br>密碼：<input type="password"><br><input type="submit" value="登入"></form>
</body>
</html>

17.塊元素與行內元素（內聯元素）

html5之前元素分為塊級元素和內聯元素；
html5之后按內容模型來區分，分為元數據型、區塊型、標題型、文檔流型、語句型、內嵌型、交互型。元素不屬于任何一個類別，被稱為穿透的，元素可能屬于不止一個類別，稱為混合的。

內聯元素和塊級元素的區別

塊級元素	內聯元素
塊元素會在頁面中獨占一行（自上向下垂直排列）	行內元素不會獨占頁面中的一行，只占自身的大小
可以設置width，height屬性	行內元素設置width，height屬性無效
一般塊級元素可以包含行內元素和其他塊級元素	一般內聯元素包含內聯元素不包含塊級元素

常見塊級元素

div、form、h1~h6、hr、p、table、ul等

常見內聯元素（行內元素）

a、b、em、i、span、strong等

行內塊級元素（特點：不換行、能夠識別寬高）

button、img、input等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>標簽</h1><p>段落</p><ul><li>列表1</li><li>列表2</li></ul><a href="#">超鏈接</a><span>內容</span><em width="400px">注重語氣</em><!--行元素設置寬度并不能生效--><img  width="300px" src="2.webp" alt=""><img src="2.webp" alt=""><!--行內塊級元素不換行，卻能識別寬高--></body>
</html>

18.HTML5新增標簽

目的：新增布局標簽利于SEO

18.1 拓展知識

div容器元素，也是頁面中見到的最多的元素。本身沒有任何樣式效果。

18.2 H5新標簽

<head></head>頭部
<nav></nav>導航
<section></section>定義文檔中的節，比如章節、頁眉、頁腳
<aside></aside>側邊欄
<footer></footer>腳部
<article></article>代表一個獨立的、完整的相關內容塊，例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h3>標簽</h3><a href="#">超鏈接</a><strong>文本</strong><p>段落</p><ul><li>列表</li></ul><table><tr><td>單元格</td></tr></table><div><ul><li>導航1</li><li>導航2</li><li>導航3</li></ul></div><div><img src="" alt=""></div><div><img src="" alt=""><p> </p></div><!--傳統布局--><div id="header"></div><div id="nav"></div><div id="article"><div id="section"></div></div> <div id="silder"></div><div id="footer"></div><!--新布局新標簽--><header></header><nav></nav><article><section></section></article><aside></aside><footer></footer></body>
</html>