1. html 介紹 簡(jiǎn)介
html叫超文本標(biāo)記語(yǔ)言,是開(kāi)發(fā)網(wǎng)頁(yè)的語(yǔ)言
html中的標(biāo)簽大多數(shù)都是成對(duì)出現(xiàn)的, 格式: html的定義
HTML 的全稱為： Mark-up , 指的是超文本標(biāo)記語(yǔ)言。 標(biāo)記：就是標(biāo)簽, , 比如: 、 等，標(biāo)簽大多數(shù)都是成對(duì)出現(xiàn)的。
所謂超文本，有兩層含義:
因?yàn)榫W(wǎng)頁(yè)中還可以圖片、視頻、音頻等內(nèi)容(超越文本限制)
它還可以在網(wǎng)頁(yè)中跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，與世界各地主機(jī)的網(wǎng)頁(yè)鏈接(超鏈接文本)
3. html的作用
html是用來(lái)開(kāi)發(fā)網(wǎng)頁(yè)的，它是開(kāi)發(fā)網(wǎng)頁(yè)的語(yǔ)言。
小結(jié)
html是開(kāi)發(fā)網(wǎng)頁(yè)的語(yǔ)言
html中的標(biāo)簽大多數(shù)都是成對(duì)出現(xiàn)的, 格式: 2. html 基本結(jié)構(gòu) 結(jié)構(gòu)代碼
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)頁(yè)標(biāo)題title>
head>
<body>
網(wǎng)頁(yè)顯示內(nèi)容
body>
html>
1. 第一行是文檔聲明, 用來(lái)指定頁(yè)面所使用的html的版本, 這里聲明的是一個(gè)html5的文檔。
2. ...標(biāo)簽是開(kāi)發(fā)人員在告訴瀏覽器，整個(gè)網(wǎng)頁(yè)是從這里開(kāi)始的，到結(jié)束,也就是html文檔的開(kāi)始和結(jié)束標(biāo)簽。
3. ...標(biāo)簽用于定義文檔的頭部,是負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的。
4. ...標(biāo)簽是編寫(xiě)網(wǎng)頁(yè)上顯示的內(nèi)容。
瀏覽網(wǎng)頁(yè)文件
網(wǎng)頁(yè)文件的后綴是.html或者.htm, 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)。
小結(jié)
3. 介紹 |（也可使用、）
的基本介紹
全拼是 Code (簡(jiǎn)稱 VS Code) 是由微軟研發(fā)的一款免費(fèi)、開(kāi)源的跨平臺(tái)代碼編輯器，目前是前端(網(wǎng)頁(yè))開(kāi)發(fā)使用最多的一款軟件開(kāi)發(fā)工具。
的安裝
下載網(wǎng)址:
選擇對(duì)應(yīng)的安裝包進(jìn)行下載: 平臺(tái)選擇
根據(jù)下載的安裝包雙擊進(jìn)行安裝即可，當(dāng)然為了更好的使用 還可以安裝對(duì)應(yīng)的插件。
的插件安裝
插件名 說(shuō)明
() Pack for VS Code 中文(簡(jiǎn)體)漢化包
open in 右擊在瀏覽器打開(kāi)html
漢化插件安裝 平臺(tái)選擇 平臺(tái)選擇
open in 插件安裝 平臺(tái)選擇 注意: 如果在打開(kāi)的html文檔中右擊沒(méi)有出現(xiàn) open in 類型的選項(xiàng)，需要把當(dāng)前打開(kāi)的文件關(guān)掉，重新打開(kāi)這個(gè)文件就好了。
的插件卸載
點(diǎn)擊對(duì)應(yīng)安裝的插件，然后再點(diǎn)擊卸載按鈕即可。
的使用
打開(kāi)文件夾創(chuàng)建文件
快速創(chuàng)建html文檔的基本結(jié)構(gòu)
右擊在瀏覽器打開(kāi)html文檔
設(shè)置字體大小
設(shè)置顏色主題
設(shè)置默認(rèn)瀏覽器[可選]
可以根據(jù)自己的需要設(shè)置默認(rèn)使用的瀏覽器
小結(jié)
是由微軟研發(fā)的一款免費(fèi)、開(kāi)源的跨平臺(tái)代碼編輯器
通過(guò)資源管理器打開(kāi)文件夾創(chuàng)建HTML文件，編寫(xiě) HTML 代碼
可以根據(jù)需要安裝對(duì)應(yīng)的插件
可以設(shè)置字體大小和顏色主題
4. 常用標(biāo)簽及嵌套
1. 標(biāo)題標(biāo)簽:
5. 分割線:
6. 圖片:
7. 鏈接:
8. span:
常用的 html 標(biāo)簽
<h1>h1標(biāo)題h1>
<div>這是一個(gè)div標(biāo)簽div>
<p>這個(gè)一個(gè)段落標(biāo)簽p>
<br>
<img src="images/pic.jpg" alt="圖片">
<hr>
<img src="images/pic.jpg" alt="圖片">
<a href="http://www.baidu.com">百度網(wǎng)a>
<div>
<img src="images/pic.jpg" alt="圖片">
<a href="http://www.baidu.com">百度網(wǎng)a>
div>
提示:
1. 標(biāo)簽不區(qū)分大小寫(xiě)，但是推薦使用小寫(xiě)。
2. 根據(jù)標(biāo)簽的書(shū)寫(xiě)形式，標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽)
2.1 雙標(biāo)簽是指由開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽組成的一對(duì)標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，比如: div標(biāo)簽
2.2 單標(biāo)簽是一個(gè)標(biāo)簽組成，沒(méi)有標(biāo)簽內(nèi)容， 比如: img標(biāo)簽
5. 絕對(duì)路徑和相對(duì)路徑的使用 相對(duì)路徑
從當(dāng)前操作 html 的文檔所在目錄算起的路徑叫做相對(duì)路徑
示例代碼:
<img src="./images/logo.png">
<img src="images/logo.png">
絕對(duì)路徑
從根目錄算起的路徑叫做絕對(duì)路徑， 的根目錄是指定的盤(pán)符，mac OS 和Linux 是/
示例代碼:
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">
提示:
一般都會(huì)使用相對(duì)路徑用css樣式控制超鏈接顏色顯示，絕對(duì)路徑的操作在其它電腦上打開(kāi)會(huì)有可能出現(xiàn)資源文件找不到的問(wèn)題
小結(jié) 6. 列表標(biāo)簽 列表標(biāo)簽的種類 無(wú)序列表
<ul>
<li>列表標(biāo)題一li>
<li>列表標(biāo)題二li>
<li>列表標(biāo)題三li>
ul>
有序列表
<ol>
<li><a href="#">列表標(biāo)題一a>li>
<li><a href="#">列表標(biāo)題二a>li>
<li><a href="#">列表標(biāo)題三a>li>
ol>
小結(jié) 7. 表格標(biāo)簽
表格的結(jié)構(gòu)
表格是由行和列組成，好比一個(gè)excel文件
表格標(biāo)簽
示例代碼:
<table>
<tr>
<th>姓名th>
<th>年齡th>
tr>
<tr>
<td>張三td>
<td>18td>
tr>
table>
表格邊線合并:
- 設(shè)置表格的邊線合并，如：-:;
8. 表單標(biāo)簽和表單元素標(biāo)簽的使用
表單的介紹
表單用于搜集不同類型的用戶輸入(用戶輸入的數(shù)據(jù))，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器 。
表單相關(guān)標(biāo)簽的使用
標(biāo)簽 表示表單標(biāo)簽，定義整體的表單區(qū)域 9. 表單提交 表單屬性設(shè)置 標(biāo)簽 表示表單標(biāo)簽，定義整體的表單區(qū)域 表單元素屬性設(shè)置
name屬性 設(shè)置表單元素的名稱，該名稱是提交數(shù)據(jù)時(shí)的參數(shù)名
value屬性 設(shè)置表單元素的值，該值是提交數(shù)據(jù)時(shí)參數(shù)名所對(duì)應(yīng)的值示例代碼
<form action="https://www.baidu.com" method="GET">
<p>
<label>姓名：label><input type="text" name="username" value="11" />
p>
<p>
<label>密碼：label><input type="password" name="password" />
p>
<p>
<label>性別：label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
p>
<p>
<label>愛(ài)好：label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
p>
<p>
<label>照片：label>
<input type="file" name="person_pic">
p>
<p>
<label>個(gè)人描述：label>
<textarea name="about">textarea>
p>
<p>
<label>籍貫：label>
<select name="site">
<option value="0">北京option>
<option value="1">上海option>
<option value="2">廣州option>
<option value="3">深圳option>
select>
p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
p>
form>
小結(jié)
表單元素屬性設(shè)置 10. css介紹 css 的定義
css( Style Sheet)層疊樣式表，它是用來(lái)美化頁(yè)面的一種語(yǔ)言。
沒(méi)有使用css的效果圖
使用css的效果圖
css 的作用 美化界面, 比如: 設(shè)置標(biāo)簽文字大小、顏色、字體加粗等樣式。控制頁(yè)面布局, 比如: 設(shè)置浮動(dòng)、定位等樣式。 css 的基本語(yǔ)法
選擇器{
樣式規(guī)則
}
樣式規(guī)則：
屬性名1：屬性值1;
屬性名2：屬性值2;
屬性名3：屬性值3;
…
選擇器:是用來(lái)選擇標(biāo)簽的，選出來(lái)以后給標(biāo)簽加樣式。
代碼示例:
div{
width:100px;
height:100px;
background:gold;
}
說(shuō)明
css 是由兩個(gè)主要的部分構(gòu)成：選擇器和一條或多條樣式規(guī)則，注意:樣式規(guī)則需要放到大括號(hào)里面。
小結(jié) 11. css 引入方式
css的三種引入方式
1. 行內(nèi)式
2. 內(nèi)嵌式（內(nèi)部樣式）
3. 外鏈?zhǔn)?行內(nèi)式
直接在標(biāo)簽的 style 屬性中添加 css 樣式
示例代碼:
<div style="width:100px; height:100px; background:red ">hellodiv>
優(yōu)點(diǎn)：方便、直觀。 缺點(diǎn)：缺乏可重用性。
內(nèi)嵌式（內(nèi)部樣式）
在標(biāo)簽內(nèi)加入
示例代碼:
<head>
<style type="text/css">
h3{
color:red;
}
style>
head>
優(yōu)點(diǎn)：在同一個(gè)頁(yè)面內(nèi)部便于復(fù)用和維護(hù)。 缺點(diǎn)：在多個(gè)頁(yè)面之間的可重用性不夠高。
外鏈?zhǔn)?/p>
將css代碼寫(xiě)在一個(gè)單獨(dú)的.css文件中，在標(biāo)簽中使用標(biāo)簽直接引入該文件到頁(yè)面中。
示例代碼:
<link rel="stylesheet" type="text/css" href="css/main.css">
優(yōu)點(diǎn)：使得css樣式與html頁(yè)面分離，便于整個(gè)頁(yè)面系統(tǒng)的規(guī)劃和維護(hù)，可重用性高。 缺點(diǎn)：css代碼由于分離到單獨(dú)的css文件，容易出現(xiàn)css代碼過(guò)于集中，若維護(hù)不當(dāng)則極容易造成混亂。
css引入方式選擇 行內(nèi)式幾乎不用內(nèi)嵌式在學(xué)習(xí)css樣式的階段使用外鏈?zhǔn)皆诠鹃_(kāi)發(fā)的階段使用，可以對(duì) css 樣式和 html 頁(yè)面分別進(jìn)行開(kāi)發(fā)。 小結(jié) 12. CSS 選擇器
1.標(biāo)簽選擇器
2. 類選擇器 .xxx
3. id選擇器 #xxx
4. 層級(jí)選擇器 xxx xxx xxx (縱向深入選擇)
5. 組選擇器 xxx,xxx,xxx (橫向平行)
6. 偽類選擇器
css 選擇器的定義
css 選擇器是用來(lái)選擇標(biāo)簽的，選出來(lái)以后給標(biāo)簽加樣式。
css 選擇器的種類
標(biāo)簽選擇器類選擇器層級(jí)選擇器(后代選擇器)id選擇器組選擇器偽類選擇器
標(biāo)簽選擇器
根據(jù)標(biāo)簽來(lái)選擇標(biāo)簽，以標(biāo)簽開(kāi)頭，此種選擇器影響范圍大，一般用來(lái)做一些通用設(shè)置。
示例代碼
<style type="text/css">
p{
color: red;
}
style>
<div>hellodiv>
<p>hellop>
類選擇器
根據(jù)類名來(lái)選擇標(biāo)簽，以 . 開(kāi)頭, 一個(gè)類選擇器可應(yīng)用于多個(gè)標(biāo)簽上，一個(gè)標(biāo)簽上也可以使用多個(gè)類選擇器，多個(gè)類選擇器需要使用空格分割，應(yīng)用靈活用css樣式控制超鏈接顏色顯示，可復(fù)用，是css中應(yīng)用最多的一種選擇器。
示例代碼
<style type="text/css">
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
style>
<div class="blue">這是一個(gè)divdiv>
<h3 class="blue big box">這是一個(gè)標(biāo)題h3>
<p class="blue box">這是一個(gè)段落p>
層級(jí)選擇器(后代選擇器)
根據(jù)層級(jí)關(guān)系選擇后代標(biāo)簽，以選擇器1 選擇器2開(kāi)頭，主要應(yīng)用在標(biāo)簽嵌套的結(jié)構(gòu)中，減少命名。
示例代碼
<style type="text/css">
div p{
color: red;
}
.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
style>
<div>
<p>hellop>
div>
<div class="con">
<span>哈哈span>
<a href="#" class="pink">百度a>
<a href="#" class="gold">谷歌a>
div>
<span>你好span>
<a href="#" class="pink">新浪a>
注意點(diǎn): 這個(gè)層級(jí)關(guān)系不一定是父子關(guān)系，也有可能是祖孫關(guān)系，只要有后代關(guān)系都適用于這個(gè)層級(jí)選擇器
id選擇器
根據(jù)id選擇標(biāo)簽，以#開(kāi)頭, 元素的id名稱不能重復(fù)，所以id選擇器只能對(duì)應(yīng)于頁(yè)面上一個(gè)元素，不能復(fù)用，id名一般給程序使用，所以不推薦使用id作為選擇器。
示例代碼
<style type="text/css">
#box{color:red}
style>
<p id="box">這是一個(gè)段落標(biāo)簽p>
<p>這是第二個(gè)段落標(biāo)簽p>
<p>這是第三個(gè)段落標(biāo)簽p>
注意點(diǎn): 雖然給其它標(biāo)簽設(shè)置id=“box”也可以設(shè)置樣式，但是不推薦這樣做，因?yàn)閕d是唯一的，以后js通過(guò)id只能獲取一個(gè)唯一的標(biāo)簽對(duì)象。
組選擇器
根據(jù)組合的選擇器選擇不同的標(biāo)簽，以 , 分割開(kāi), 如果有公共的樣式設(shè)置，可以使用組選擇器。
示例代碼
<style type="text/css">
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
style>
<div class="box1">這是第一個(gè)divdiv>
<div class="box2">這是第二個(gè)divdiv>
<div class="box3">這是第三個(gè)divdiv>
偽類選擇器
用于向選擇器添加特殊的效果, 以 : 分割開(kāi), 當(dāng)用戶和網(wǎng)站交互的時(shí)候改變顯示效果可以使用偽類選擇器
示例代碼
<style type="text/css">
.box1{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}
style>
<div class="box1">這是第一個(gè)divdiv>
小結(jié) 13. 常用布局樣式屬性 布局常用樣式屬性 文本常用樣式屬性 布局常用樣式屬性示例代碼
<style>
.box1{
width: 200px;
height: 200px;
background:yellow;
border: 1px solid black;
}
.box2{
/* 這里是注釋內(nèi)容 */
/* 設(shè)置寬度 */
width: 100px;
/* 設(shè)置高度 */
height: 100px;
/* 設(shè)置背景色 */
background: red;
/* 設(shè)置四邊邊框 */
/* border: 10px solid black; */
border-top: 10px solid black;
border-left: 10px solid black;
border-right: 10px solid black;
border-bottom: 10px solid black;
/* 設(shè)置內(nèi)邊距， 內(nèi)容到邊框的距離，如果設(shè)置四邊是上右下左 */
/* padding: 10px; */
padding-left: 10px;
padding-top: 10px;
/* 設(shè)置外邊距，設(shè)置元素邊框到外界元素邊框的距離 */
margin: 10px;
/* margin-top: 10px;
margin-left: 10px; */
float: left;
}
.box3{
width: 48px;
height: 48px;
background:pink;
border: 1px solid black;
float: left;
}
style>
<div class="box1">
<div class="box2">
padding 設(shè)置元素包含的內(nèi)容和元素邊框的距離
div>
<div class="box3">
div>
div>
14. 常用文本樣式屬性 文本常用樣式屬性示例
<style>
p{
/* 設(shè)置字體大小 瀏覽器默認(rèn)是 16px */
font-size:20px;
/* 設(shè)置字體 */
font-family: "Microsoft YaHei";
/* 設(shè)置字體加粗 */
font-weight: bold;
/* 設(shè)置字體顏色 */
color: red;
/* 增加掉下劃線 */
text-decoration: underline;
/* 設(shè)置行高 */
line-height: 100px;
/* 設(shè)置背景色 */
background: green;
/* 設(shè)置文字居中 */
/* text-align: center; */
text-indent: 40px;
}
a{
/* 去掉下劃線 */
text-decoration: none;
}
style>
<a href="#">連接標(biāo)簽a>
<p>
你好，世界!
p>
小結(jié)