2023最新版web前端開發(fā)700集全套教程，零基礎入門到進階 html5+cs
一、html
（一）VS Code 快捷鍵：
1) !+回車---生成瀏覽器文件.html的快捷方式
2) 代碼格式化：shift+Alt+F，使代碼整齊
3）快速向上或向下移動一行：Alt +up/ Alt +down
4) 快速復制一行：shift+alt+up/ shift+alt+ down
5）快速替換：ctrl + F
（二）HTML5介紹
1）概念：超文本標記語言
2）HTML5的doctype聲明，在html最頂部書寫，避免怪異模式。<!DOCTYPE html>
3) html5 基本骨架
- html標簽，定義了文檔，當瀏覽器看到這個元素就知道是HTML文檔了。所以其他的元素要包含在它里面。標簽限定了文檔的開始點和結(jié)束點。
- head標簽，用于定義文檔頭部，描述文檔的各種屬性和信息，包括文檔的標題、在web中的位置以及和其他文檔的關系。絕大多數(shù)不會顯示讀者，而是給瀏覽器或者開發(fā)者去瀏覽的。
- body標簽，定義文檔的主體，與head標簽同級。包含的內(nèi)容主要有（文本、超鏈接、圖像和表格等）
- title標簽，寫在head標簽中，有head就一定要寫title，有利于SEO優(yōu)化。
SEO：是搜索引擎優(yōu)化的英文縮寫。通過對網(wǎng)站的內(nèi)容調(diào)整，滿足搜索引擎的排名需求。
- meta 標簽，它是單標簽，用來描述一個HTML網(wǎng)頁文檔的屬性，關鍵詞等。例如編碼格式 utf-8;包含在head標簽中。
（三）標簽
1、標題的介紹與應用
標題是通過<h1>--- <h6>標簽定義的，依次由大到小，生成h1 --> h6的快捷鍵：h$*6 然后回車
2、正確使用標題
確保將HTML標題標簽只用于標題，不要僅僅是為了生成粗體或大號的文本而使用標題。
3、標題標簽的位置擺放，在標簽中添加屬性：align = "left | right | center" 默認是居左
在標簽的”>“ 里面寫的所有內(nèi)容都叫屬性。
注：html中不推薦將文本直接放在外部，使用相應的標簽來存放，這樣有利于調(diào)整樣式和結(jié)構(gòu)。
4、段落標簽
段落是通過<p>標簽定義的。
5、換行 <br> 或者 <br/>,不產(chǎn)生新的段落的情況下?lián)Q行。
6、水平線標簽 <hr/>
可以設置四個屬性。
<hr color = "" width = "" size = "" align = ""/>
color : 設置水平線的顏色
width：設置水平線的寬度
size：設置水平線的高度
align：設置水平線的位置，準確的是是對齊方式，可以為left | right，默認是居中。
7、圖像標簽
<img> 它是一個單標簽。通過src屬性用來存放圖片路徑；來展示圖片。注意圖片路徑與對應的html文件要在同一個文件夾下。
主要有四個屬性：
src: 路徑（圖片地址與名字）
alt: 規(guī)定圖像的替代文本
height：圖像的高度
width：圖像的寬度
title：鼠標懸浮停在上面的提示
圖片路徑詳解：主要有三種路徑方式
- 絕對路徑
- 相對路徑
- 網(wǎng)絡路徑
絕對路徑：是電腦的盤符存儲與訪問的具體地址（在電腦的哪個盤的哪個文件夾下，再加上完整圖片名稱 --- D:\前端代碼學習\lizi1.jpg）相對路徑：兩者相對關系，兩者在同一路徑下可以直接訪問
- 子級關系：/
- 父級關系：../
- 同級關系：./（可以省略）
網(wǎng)絡路徑：就是具體的網(wǎng)絡地址：https://...
8、超文本鏈接 標簽
使用標簽<a></a> 來設置超文本鏈接，超鏈接可以是一個字，一個詞或者一組詞，也可以是一幅圖像。點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當前文檔中的某個部分。
<a href="url">鏈接文本</a>
url: 是指具體路徑，要完整，包含http.//www...
屬性：href，用來描述鏈接的地址
9、文本標簽
常用文本標簽：
- <em> 定義著重文字
- <b> 定義粗體文字
- <i> 定義斜體文字
- <strong> 定義加重語氣
- <del> 定義刪除字
- <span> 元素沒有特定的含義
這幾個都可以嵌套在p標簽中.
10、列表標簽
- 有序列表--是一列項目，用數(shù)字進行標記。始于<ol>標簽，終于<li>標簽，ol包裹了li. <ol>的 type 屬性可以以五種形式展現(xiàn)（1\a\A\I\i）.在列表中可以嵌套使用，嵌套數(shù)量不受限制，使用<ol><li>框架根據(jù)需求嵌套。
- 無序列表--也是列表項但沒有先后順序。它也可以成為項目列表，此列項目使用粗體圓點標記 . 始于<ul>標簽，終于<li>標簽,ul包裹了li.
<ul>的 type 屬性可以以四種形式展現(xiàn)（disc\ circle\ square\ none\ ）注不能多加空格，否則無法識別。它與有序列表一樣也是可以嵌套的。嵌套類型一樣。
常用場景：1）無序列表效果 2）導航效果
快捷鍵：ul>li*數(shù)量 （數(shù)量根據(jù)自己需要的li數(shù)量修改）
11、表格標簽
- 表格組成與特點 (行、列、單元格組成（單元格特點：同行等高、同列等寬）)
表格：<table> ; 行：<tr> ; 單元格/ 列: <td> tr\td數(shù)量沒有限制
快捷鍵：table>tr>*數(shù)量>td*數(shù)量{文本信息}
- 表格的屬性
border:設置邊框；width：設置寬度；heigh：設置高度
12、表格單元格合并
- 單元格合并屬性（水平合并：colspan=“數(shù)量” 垂直合并：rowspan=“數(shù)量”）
- 特點：水平合并保留左邊刪除右邊；垂直合并保留上邊刪除下邊。
13、form表單（現(xiàn)在網(wǎng)頁必不可少的部分，讓網(wǎng)頁實現(xiàn)交互功能）有用戶輸入的地方就有表單。
1）表單由容器和控件組成。包含三個組成部分：
- 表單標簽（form或稱為容器）
- 表單域（輸入框）
- 表單按鈕（button）（2和3又稱為控件）
2）表單屬性：（暫為了解內(nèi)容）
- action = "url" --->服務器地址 傳給服務器的地址
- name = "命名" ---> 表單名稱，用于識別
- method = "get | post" ---> 不同的將表單數(shù)據(jù)提交到服務器的方式，get把提交的數(shù)據(jù)url可以看到，post看不到。而且get一般用于提交少量數(shù)據(jù)，post用于提交大量數(shù)據(jù)。
3）表單元素，最常見的三種：
- text 文本框（<input type="text">）
- 密碼框（<input type="password">）
- 按鈕：（<input type="submit">,按鈕的顯示結(jié)果可以通過value屬性來修改）。
14、塊元素和行內(nèi)元素（內(nèi)聯(lián)元素）
1）二者區(qū)別：
- 塊級元素會換行，從上到下排列；而行內(nèi)元素部會換行從左到右排列。
- 塊級元素能識別width,height屬性；而行內(nèi)元素不能識別，設置屬性也無效
- 一般塊級元素可以包含行內(nèi)元素和其他塊級元素；一般行內(nèi)元素包含行內(nèi)元素但不包含塊級元素
簡單辨別方法是否自動換行（塊級行內(nèi)元素除外），是否能識別寬高等屬性。
2）元素舉例
- 常見塊級元素：div\ form\ h1~h6\ hr\ p\ table\ ul 等。
- 常見內(nèi)聯(lián)元素（行內(nèi)元素）：a\ b\ em\ i\ span\ strong等。
- 行內(nèi)塊級元素（特點不換行，但能夠識別寬高）：button、img、input等。
15、HTML5 新增標簽
div標簽又稱為容器標簽，為了增加某一個區(qū)域塊的清晰度。
H5新標簽：(需要新瀏覽器，存在兼容問題)
- <header></header> 頭部標簽
- <nav></nav> 導航欄標簽
- <aside></aside> 側(cè)邊欄標簽
- <articel></article> 代表一個獨立完整的相關內(nèi)容快，例如一片完整的論壇帖子，一篇文章或者一個評論等。
- <section></section> 定義文檔中的節(jié)，比如章節(jié)、頁眉、頁腳
- <footer></footer> 底部標簽/ 腳部標簽
優(yōu)點：理解更容易，因為語義化了。有利于SEO，利于網(wǎng)站排名。
