HTML_CSS基礎介紹
html 的介紹
學習目標
能夠知道html的作用
1. 網(wǎng)頁效果圖 -- 傳智教育首頁
2. html的定義
HTML 的全稱為：HyperText Mark-up Language, 指的是超文本標記語言。 ?
標記：就是標簽, <標簽名稱> 標簽名稱>, 比如: <html></html>、<h1></h1>等，標簽大多數(shù)都是成對出現(xiàn)的。 所謂超文本，有兩層含義:
因為網(wǎng)頁中還可以圖片、視頻、音頻等內(nèi)容(超越文本限制)
它還可以在網(wǎng)頁中跳轉到另一個網(wǎng)頁，與世界各地主機的網(wǎng)頁鏈接(超鏈接文本)
3. html的作用
html是用來開發(fā)網(wǎng)頁的，它是開發(fā)網(wǎng)頁的語言。
4. 小結
html是開發(fā)網(wǎng)頁的語言
html中的標簽大多數(shù)都是成對出現(xiàn)的, 格式: <標簽名>標簽名>
html 的基本結構
學習目標
能夠?qū)懗鰄tml的基本結構
1. 結構代碼
第一行<!DOCTYPE html>是文檔聲明, 用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔。
<html>...</html>標簽是開發(fā)人員在告訴瀏覽器，整個網(wǎng)頁是從這里開始的，到結束,也就是html文檔的開始和結束標簽。
<head>...</head>標簽用于定義文檔的頭部,是負責對網(wǎng)頁進行設置標題、編碼格式以及引入css和js文件的。
<body>...</body>標簽是編寫網(wǎng)頁上顯示的內(nèi)容。對于一個網(wǎng)頁來說，大部分代碼都是在這個標簽對內(nèi)部編寫的。
2. 瀏覽網(wǎng)頁文件
網(wǎng)頁文件的后綴是.html或者.htm, 一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內(nèi)容將文件渲染成網(wǎng)頁。比如把上面的代碼保存成html文檔后在瀏覽器打開，就是如下所示的樣子。
3. 小結
vscode 的基本使用
學習目標
能夠安裝和卸載 vscode 的插件
能夠設置 vscode 的顏色主題和字體大小
1. vscode 的基本介紹
全拼是 Visual Studio Code (簡稱 VS Code) 是由微軟研發(fā)的一款免費、開源的跨平臺代碼編輯器，目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具。
2. vscode 的安裝
下載網(wǎng)址: https://code.visualstudio.com/Download
選擇對應的安裝包進行下載:
根據(jù)下載的安裝包雙擊進行安裝即可，當然為了更好的使用 vscode 還可以安裝對應的插件。
3. vscode 的插件安裝
漢化插件安裝 ?
2.open in browser插件安裝
注意: 如果在vscode打開的html文檔中右擊沒有出現(xiàn) open in browser 類型的選項，需要把當前打開的文件關掉，重新打開這個文件就好了。
4. vscode 的插件卸載
點擊對應安裝的插件，然后再點擊卸載按鈕即可。
5. vscode 的使用
打開文件夾創(chuàng)建文件 ?
快速創(chuàng)建html文檔的基本結構
右擊在瀏覽器打開html文檔
6. 設置字體大小
7. 設置顏色主題
8. 設置默認瀏覽器[可選]
可以根據(jù)自己的需要設置默認使用的瀏覽器 ?
9. 小結
vscode 是由微軟研發(fā)的一款免費、開源的跨平臺代碼編輯器
通過資源管理器打開文件夾創(chuàng)建HTML文件，編寫 HTML 代碼
可以根據(jù)需要安裝對應的插件
可以設置字體大小和顏色主題
初始常用的 html 標簽
學習目標
能夠知道單標簽和雙標簽的區(qū)別
1. 常用的 html 標簽
顯示結果：
提示:
標簽不區(qū)分大小寫，但是推薦使用小寫。
根據(jù)標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內(nèi)容，比如: div標簽 2.2 單標簽是一個標簽組成，沒有標簽內(nèi)容， 比如: img標簽
2. 小結
學習 html 語言就是學習標簽的用法，常用的標簽有20多個。
編寫 html 標簽建議使用小寫
根據(jù)書寫形式，html 標簽分為雙標簽和單標簽
單標簽沒有標簽內(nèi)容，雙標簽可以嵌套其它標簽和承載文本內(nèi)容
資源路徑
學習目標
能夠知道相對路徑和絕對路徑的區(qū)別
當我們使用img標簽顯示圖片的時候，需要指定圖片的資源路徑，比如:
這里的src屬性就是設置圖片的資源路徑的，資源路徑可以分為相對路徑和絕對路徑。
1. 相對路徑
從當前操作 html 的文檔所在目錄算起的路徑叫做相對路徑 示例代碼:
2. 絕對路徑
從根目錄算起的路徑叫做絕對路徑，Windows 的根目錄是指定的盤符，mac OS 和Linux 是/ 示例代碼:
提示: 一般都會使用相對路徑，絕對路徑的操作在其它電腦上打開會有可能出現(xiàn)資源文件找不到的問題
3. 小結
相對路徑和絕對路徑是 html 標簽使用資源文件的兩種方式，一般使用相對路徑。
相對路徑是從當前操作的 html 文檔所在目錄算起的路徑
絕對路徑是從根目錄算起的路徑
列表標簽
學習目標
能夠知道列表標簽的種類
1. 列表標簽的種類
無序列表標簽(ul標簽)
有序列表標簽(ol標簽)
2. 無序列表
3. 有序列表
4. 小結
列表標簽有無序列表標簽(ul標簽)和有序列表標簽(ol標簽)
列表項目對順序有要求的時候使用ol標簽
列表項目對順序無要求的時候使用ul標簽
表格標簽
學習目標
能夠知道表格的邊線合并
1. 表格的結構
表格是由行和列組成，好比一個excel文件
2. 表格標簽
<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭
表格標簽
<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭
示例代碼:
運行結果：
表格邊線合并:
border-collapse 設置表格的邊線合并，如：border-collapse:collapse;
表單標簽
學習目標
能夠知道表單中常用的表單元素標簽
1. 表單的介紹
表單用于搜集不同類型的用戶輸入(用戶輸入的數(shù)據(jù))，然后可以把用戶數(shù)據(jù)提交到web服務器 。
其中文本框、按鈕、下拉菜單等就是我們常見的表單元素。
2. 表單相關標簽的使用
<form>標簽 表示表單標簽，定義整體的表單區(qū)域
<label>標簽 表示表單元素的文字標注標簽，定義文字標注
<input>標簽 表示表單元素的用戶輸入標簽，定義不同類型的用戶輸入數(shù)據(jù)方式
type屬性
type="text" 定義單行文本輸入框
type="password" 定義密碼輸入框
type="radio" 定義單選框
type="checkbox" 定義復選框
type="file" 定義上傳文件
type="submit" 定義提交按鈕
type="reset" 定義重置按鈕
type="button" 定義一個普通按鈕
1.<textarea>標簽 表示表單元素的多行文本輸入框標簽 定義多行文本輸入框
2.<select>標簽 表示表單元素的下拉列表標簽 定義下拉列表
<option>標簽 與<select>標簽配合，定義下拉列表中的選項
示例代碼:
顯示結果：
3. 小結
表單標簽是<form>標簽
常用的表單元素標簽有: <label>、<input>、 <textarea>、<select> 等標簽
表單提交
學習目標
能夠知道表單的提交方式
能夠知道表單中action屬性的作用
1. 表單屬性設置
<form>標簽 表示表單標簽，定義整體的表單區(qū)域
action屬性 設置表單數(shù)據(jù)提交地址
method屬性 設置表單提交的方式，一般有“GET”方式和“POST”方式, 不區(qū)分大小寫
2. 表單元素屬性設置
name屬性 設置表單元素的名稱，該名稱是提交數(shù)據(jù)時的參數(shù)名
value屬性 設置表單元素的值，該值是提交數(shù)據(jù)時參數(shù)名所對應的值
3. 示例代碼
小結
表單標簽的作用就是可以把用戶輸入數(shù)據(jù)一起提交到web服務器。
表單屬性設置
action: 是設置表單數(shù)據(jù)提交地址
method: 是表單提交方式，提交方式有GET和POST
表單元素屬性設置
name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時參數(shù)名所對應的值
css 的介紹
學習目標
能夠知道css的作用
1. css 的定義
css(Cascading Style Sheet)層疊樣式表，它是用來美化頁面的一種語言。
沒有使用css的效果圖
使用css的效果圖
2. css 的作用
美化界面, 比如: 設置標簽文字大小、顏色、字體加粗等樣式。
控制頁面布局, 比如: 設置浮動、定位等樣式。
3. css 的基本語法
選擇器{
樣式規(guī)則
}
樣式規(guī)則：
屬性名1：屬性值1;
屬性名2：屬性值2;
屬性名3：屬性值3;
...
選擇器:是用來選擇標簽的，選出來以后給標簽加樣式。
代碼示例:
說明
css 是由兩個主要的部分構成：選擇器和一條或多條樣式規(guī)則，注意:樣式規(guī)則需要放到大括號里面。
4. 小結
css 是層疊樣式表，它是用來美化網(wǎng)頁和控制頁面布局的。
定義 css 的語法格式是: 選擇器{樣式規(guī)則}
css 的引入方式
學習目標
能夠知道 css 的引入三種方式
css的三種引入方式
行內(nèi)式
內(nèi)嵌式（內(nèi)部樣式）
外鏈式
1. 行內(nèi)式
直接在標簽的 style 屬性中添加 css 樣式
示例代碼:
優(yōu)點：方便、直觀。 缺點：缺乏可重用性。
2. 內(nèi)嵌式（內(nèi)部樣式）
在<head>標簽內(nèi)加入<style>標簽，在<style>標簽中編寫css代碼。
示例代碼:
優(yōu)點：在同一個頁面內(nèi)部便于復用和維護。 缺點：在多個頁面之間的可重用性不夠高。
3. 外鏈式
將css代碼寫在一個單獨的.css文件中，在<head>標簽中使用<link>標簽直接引入該文件到頁面中。
示例代碼:
優(yōu)點：使得css樣式與html頁面分離，便于整個頁面系統(tǒng)的規(guī)劃和維護，可重用性高。 缺點：css代碼由于分離到單獨的css文件，容易出現(xiàn)css代碼過于集中，若維護不當則極容易造成混亂。
4. css引入方式選擇
行內(nèi)式幾乎不用
內(nèi)嵌式在學習css樣式的階段使用
外鏈式在公司開發(fā)的階段使用，可以對 css 樣式和 html 頁面分別進行開發(fā)。
5. 小結
css 的引入有三種方式, 分別是行內(nèi)式、內(nèi)嵌式、外鏈式。
外鏈式是在公司開發(fā)的時候會使用，最能體現(xiàn) div+css 的標簽內(nèi)容與顯示樣式分離的思想， 也最易改版維護，代碼看起來也是最美觀的一種。
css 選擇器
學習目標
能夠說出 css 選擇器的種類
1. css 選擇器的定義
選擇器，說白了就是用一種方式把你想要的那個元素選中！只有把它選中了，你才可以為這個元素添加CSS樣式。
在CSS中，有很多可以把你想要元素選中的方式，這些不同的方式其實就是不同的選擇器。選擇器的不同，在于選擇方式不同，但是它們的最終目的是相同的，那就是把你想要的元素選中，然后才可以定義該元素CSS樣式。當然，你也有可能會用某一種選擇器來代替另外一種選擇器，這僅僅是選擇方式不同罷了，但目的還是一樣的。
2. css 選擇器的種類
標簽選擇器
類選擇器
層級選擇器(后代選擇器)
id選擇器
組選擇器
偽類選擇器
CSS選擇器的功能就是把所想要的元素選中，然后使得我們可以操作該元素的CSS樣式。其中，CSS選擇器的格式如下：
3. 標簽選擇器
根據(jù)標簽來選擇標簽，以標簽開頭，此種選擇器影響范圍大，一般用來做一些通用設置。
編輯切換為居中
示例代碼
運行結果顯示以p為開頭的標簽顏色為紅色：
4. 類選擇器
也就是class選擇器。根據(jù)類名來選擇標簽，以 . 開頭, 一個類選擇器可應用于多個標簽上，一個標簽上也可以使用多個類選擇器，多個類選擇器需要使用空格分割，應用靈活，可復用，是css中應用最多的一種選擇器。
示例代碼
來看運行結果：
5. 層級選擇器(后代選擇器)
根據(jù)層級關系選擇后代標簽，以選擇器1 選擇器2開頭，主要應用在標簽嵌套的結構中，減少命名。
示例代碼
注意點: 這個層級關系不一定是父子關系，也有可能是祖孫關系，只要有后代關系都適用于這個層級選擇器
運行結果：
6. id選擇器
根據(jù)id選擇標簽，以#開頭, 元素的id名稱不能重復，所以id選擇器只能對應于頁面上一個元素，不能復用，id名一般給程序使用，所以不推薦使用id作為選擇器。
示例代碼
注意點: 雖然給其它標簽設置id=“box”也可以設置樣式，但是不推薦這樣做，因為id是唯一的，以后js通過id只能獲取一個唯一的標簽對象。
運行結果：
7. 組選擇器
根據(jù)組合的選擇器選擇不同的標簽，以 , 分割開, 如果有公共的樣式設置，可以使用組選擇器。
對于群組選擇器，兩個選擇器之間必須要用英文逗號（，）隔開，不然群組選擇器就無法生效。
示例代碼
運行結果：
8. 偽類選擇器
用于向選擇器添加特殊的效果, 以 : 分割開, 當用戶和網(wǎng)站交互的時候改變顯示效果可以使用偽類選擇器
示例代碼
默認狀態(tài)下是這樣的，
當鼠標懸停放上去就是這樣的：
以下是一些常用的偽類選擇器：
:hover：當鼠標懸停在元素上時應用樣式。
:active：當元素被激活（例如，當用戶按下并保持按下鼠標按鈕時）時應用樣式。
:focus：當元素獲得焦點（例如，當用戶點擊元素或使用 Tab 鍵導航到元素時）時應用樣式。
:checked：當單選框或復選框被選中時應用樣式。
9. 小結
css 選擇器就是用來選擇標簽設置樣式的
常用的 css 選擇器有六種，分別是:
標簽選擇器
類選擇器
層級選擇器(后代選擇器)
id選擇器
組選擇器
偽類選擇器
css 屬性
學習目標
能夠知道常用的樣式屬性
我們知道 css 作用是美化 HTML 網(wǎng)頁和控制頁面布局的,接下來我們來學習一下經(jīng)常使用一些樣式屬性。
1. 布局常用樣式屬性
width 設置元素(標簽)的寬度，如：width:100px;
height 設置元素(標簽)的高度，如：height:200px;
background 設置元素背景色或者背景圖片，如：background:gold; 設置元素的背景色, background: url(images/logo.png); 設置元素的背景圖片。
border 設置元素四周的邊框，如：border:1px solid black; 設置元素四周邊框是1像素寬的黑色實線
以上也可以拆分成四個邊的寫法，分別設置四個邊的：
border-top 設置頂邊邊框，如：border-top:10px solid red;
border-left 設置左邊邊框，如：border-left:10px solid blue;
border-right 設置右邊邊框，如：border-right:10px solid green;
border-bottom 設置底邊邊框，如：border-bottom:10px solid pink;
padding 設置元素包含的內(nèi)容和元素邊框的距離，也叫內(nèi)邊距，如padding:20px;padding是同時設置4個邊的，也可以像border一樣拆分成分別設置四個邊:padding-top、padding-left、padding-right、padding-bottom。
margin 設置元素和外界的距離，也叫外邊距，如margin:20px;margin是同時設置4個邊的，也可以像border一樣拆分成分別設置四個邊:margin-top、margin-left、margin-right、margin-bottom。
float 設置元素浮動，浮動可以讓塊元素排列在一行，浮動分為左浮動：float:left; 右浮動：float:right;
2. 文本常用樣式屬性
color 設置文字的顏色，如： color:red;
font-size 設置文字的大小，如：font-size:12px;
font-family 設置文字的字體，如：font-family:'微軟雅黑';為了避免中文字不兼容，一般寫成：font-family:'Microsoft Yahei';
font-weight 設置文字是否加粗，如：font-weight:bold; 設置加粗 font-weight:normal 設置不加粗
line-height 設置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的間距是24px，也就是每一行占有的高度是24px
text-decoration 設置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
text-align 設置文字水平對齊方式，如text-align:center 設置文字水平居中
text-indent 設置文字首行縮進，如：text-indent:24px; 設置文字首行縮進24px
3. 布局常用樣式屬性示例代碼
運行結果：
4. 文本常用樣式屬性示例
運行結果：
5. 小結
設置不同的樣式屬性會呈現(xiàn)不同網(wǎng)頁的顯示效果
樣式屬性的表現(xiàn)形式是: 屬性名:屬性值;
css 元素溢出
學習目標
能夠說出元素溢出的解決辦法
1. 什么是 css 元素溢出
CSS 元素溢出指的是當一個元素的內(nèi)容超出了其指定的高度或?qū)挾葧r，這些內(nèi)容會溢出到元素的邊界之外。這種情況下，您可以通過設置 CSS 屬性來控制溢出內(nèi)容的顯示方式。
overflow的設置項：
overflow：控制元素的溢出內(nèi)容如何顯示?？梢栽O置為 visible（默認值，允許內(nèi)容溢出元素邊界）、hidden（隱藏溢出內(nèi)容）、scroll（在元素內(nèi)部顯示滾動條）或 auto（在必要時顯示滾動條）。
使用這些屬性可以更好地控制元素的溢出內(nèi)容，從而提高網(wǎng)站的可讀性和可用性。
2. 示例代碼
運行結果：
3. 小結
overflow樣式屬性是設置子標簽溢出的顯示方式
常用使用overflow:hidden;來解決元素溢出
css 顯示特性
學習目標
能夠說出標簽隱藏設置
1. display 屬性的使用
CSS display 屬性用于設置 HTML 元素的顯示方式，以下是一些常見的使用方式：
將元素顯示為塊級元素：
塊級元素會在頁面中生成一個獨立的塊，可以設置寬度、高度、內(nèi)邊距和外邊距等屬性。
將元素顯示為內(nèi)聯(lián)元素：
內(nèi)聯(lián)元素會在一行內(nèi)顯示，不可以設置寬度、高度等屬性，但可以設置內(nèi)邊距和外邊距等屬性。
將元素顯示為內(nèi)聯(lián)塊級元素：
內(nèi)聯(lián)塊級元素可以在一行內(nèi)顯示，同時可以設置寬度、高度、內(nèi)邊距和外邊距等屬性。
隱藏元素：
將元素的顯示方式設置為 none 可以隱藏元素，同時不占用頁面空間。
將元素顯示為彈性盒子：
將元素的顯示方式設置為 flex 可以將其變成彈性盒子，可以方便地實現(xiàn)響應式布局。
將元素顯示為網(wǎng)格容器：
將元素的顯示方式設置為 grid 可以將其變成網(wǎng)格容器，可以方便地實現(xiàn)復雜的網(wǎng)格布局。
通過使用 display 屬性，你可以更好地控制 HTML 元素的布局和樣式，從而實現(xiàn)更好的用戶體驗。
2. 示例代碼
運行結果：
說明:
行內(nèi)元素不能設置寬高， 塊元素或者行內(nèi)塊元素可以設置寬高。
3. 小結
通常隱藏元素使用 display:none
盒子模型
學習目標
能夠知道盒子模型中的各個屬性
1. 盒子模型的介紹
所謂的盒子模型就是把HTML頁面的元素看作一個矩形盒子，矩形盒子是由內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)四部分組成。
盒子模型示意圖如下：
2. 盒子模型相關樣式屬性
盒子的內(nèi)容寬度(width)，注意：不是盒子的寬度
盒子的內(nèi)容高度(height)，注意：不是盒子的高度
盒子的邊框(border)
盒子內(nèi)的內(nèi)容和邊框之間的間距(padding)
盒子與盒子之間的間距(margin)
設置寬高：
設置盒子的寬高，此寬高是指盒子內(nèi)容的寬高，不是盒子整體寬高
設置邊框:
設置一邊的邊框，比如頂部邊框，可以按如下設置：
說明:
其中10px表示線框的粗細；solid表示線性；red表示邊框的顏色
設置其它三個邊的方法和上面一樣，把上面的'top'換成'left'就是設置左邊，換成'right'就是設置右邊，換成'bottom'就是設置底邊。
四個邊如果設置一樣，可以將四個邊的設置合并成一句：
設置內(nèi)間距padding
設置盒子四邊的內(nèi)間距，可設置如下：
上面的設置可以簡寫如下：
padding后面還可以跟3個值，2個值和1個值，它們分別設置的項目如下：
設置外間距margin
外邊距的設置方法和padding的設置方法相同，將上面設置項中的'padding'換成'margin'就是外邊距設置方法。
盒子的真實尺寸
盒子的width和height值固定時，如果盒子增加border和padding，盒子整體的尺寸會變大，所以盒子的真實尺寸為：
盒子寬度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
小結
盒子模型的5個主要樣式屬性
width：內(nèi)容的寬度(不是盒子的寬度)
height：內(nèi)容的高度(不是盒子的高度)
padding：內(nèi)邊距。
border：邊框。
margin：外邊距
盒子的真實尺寸只會受到寬度、高度、邊框、內(nèi)邊距四個屬性的影響，不會受到外邊距屬性的影響。
