2020-12-15
前端小白一個星期入門HTML+CSS（1-3day）
第一天
<!DOCTYPE html>//這是宣告告訴瀏覽器用html5標準解析網頁
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>//head表示網頁的頭部，這裡的資訊都是對網頁的整體說明
<body>
張曉晴是豬嘛？ 對她是。
</body>//body表示網頁的身體，網頁的主要內容都寫在這裡
</html>
本人使用HBuilder x軟體
hbuilderx內建的伺服器可以幫我們自動的重新整理頁面（需要下載安裝）
Ctrl + s儲存（儲存後上角出現星號）
<h1> </h1>
<h2> </h2>
<h3> </h3>
6級標題越來越小
//標題越來越小在body內
<i>2020</i>//中間變成斜體字（或em）
<p>文字獨佔一行（段落標籤）</p>有斷行//原始碼中換行無效
<b>字型變粗</b>（同strong）
<br>//單標籤可強制換行（回車效果）
<hr >//單標籤一條橫線無結束
在原始碼中敲的空格再多都看做一個
//不換行空格
>//右尖括號
<//左尖括號
©//備案中圖示
分號不能漏
<title>標籤最上面帶叉號的</title>
<img src="圖片的地址" >
<ul>表示帶點的標籤//(若il變為ol前面不是點是數字為有序列表）
<ul>用法詳解
<ul type="disc">實心圓
<ul type="circle">空心圓
<ul type="square">實心方塊
<ol>用法詳解
<ul type="1">數字排序
<ul type="a">字母排序
<ul type="A">字母排序
<ul type="i">小寫羅馬字母排序
<ul type="I">大寫羅馬字母排序
<li>一個個小標籤</li>//(il為無序列表）
<li>一個個小標籤</li>
</ul>
<div></div>容器元素
<span></span>行內元素
<a href="點文字的連結">超連結的文字</a>
<a href="點圖片的連結" alt="圖片替換文字" title="圖片標題滑鼠放上去會有的小提示">
<img src="圖片" width(寬)="100px" height="100px">
關於圖片
<img title="提示" alt="失敗" src="imgs/a.png">
<img src="圖片" title="滑鼠劃上去時的提示" alt="圖片載入失敗後的文字">
圖片失效時候辣條會顯示出來
<img src="" width="100%">//圖片和頁面同大小
不常用標籤
<del>文字增加下滑線</del>
<sup>2</sup>文字變成上標
<u>文字加下劃線</u>
<center>把文字居中</center>
<table border="線寬" cellpadding="單元格與內容之間的聯絡"
cellspacing="每個單元格間距" bordercolor="線的顏色">
ctrl + d 複製上一行內容
當右鍵無法讓圖片另存為時
開啟瀏覽器的控制皮膚
1.選單-更多工具-開發者工具
2.Ctrl+Shift+i
3.Fn + F12
圖片截圖軟體PhotoShop
絕對地址和相對地址
絕對地址在任何情況下都能找到的地址
相對地址知道當前所在才能定位目標
完整地址叫絕對路徑
不完整地址為相對路徑
圖片連結新增…/…/上一級目錄…/…/xxxxx.jpg
ctrl + 上下鍵可以移動一行程式碼
表格編寫（body內\）
border="線寬"
cellpadding="單元格與內容之間的聯絡"
cellspacing="每個單元格間距"
bordercolor="線的顏色
//align表示對其方式
left/right/center
//valig垂直對齊
top/bottom/middle
border表示邊框寬度
colspan="所要合併單元格的列數"
rowspan="所要合併單元格的行數"
<td width="200px">//調整表格中單元的寬度
<td colspan="4">文字</td>//colspan=""
//一個單元格佔據4列的位置
<td rowspan="2">//上下合併同上
<td width="200px" height="200px" align="center">
<table>//<table border="1px" cellspacing="0">可設定寬度見上方
<col width="100px">//<col>是column列的縮寫寬度
一次搞一列
<col width="100px">//第二列
<col width="100px">//第三列
//col為單標籤表示一列
<tr align="center">
<td colspan="4">文字</td>//colspan=""
//一個單元格佔據4列的位置
</tr>
<tr>//表示一行
<td>文字</td>
<td>文字</td>
<td>文字</td>
<td>文字</td>
</tr>
<tr height="40px">//在tr內設定一行中表格的高度
<td>文字</td>
<td>文字</td>
<td>文字</td>
<td>文字</td>
</tr>
<tr align="center">//給tr增加文字格式
<td>文字</td>
<td>文字</td>
<td>文字</td>
<td>文字</td>
</tr>
</table>
第二天
快速輸入
tr*4>td*3按下tap鍵表示4行三列
記住tr是行td是列
表格知識補充
1.<td>...</th>
改為<th>....</th>
th=加粗並水平的td
2.colgroup標籤
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="200px">
同等於
<colgroup span="4" width="100px">
<colgroup span="1" width="200px">
3.<!-- -->為註釋頁面上看不見
4.標籤巢狀
超連結不能巢狀超連結
p標籤不能巢狀p標籤
標籤標籤h1...h6也不能互相巢狀
5.table放入form表單裡才有重新整理效果
表單
用表單提交資料
原碼
<form action="">
<table width="600px" border="1px" cellspacing="0" >
1.邊框一畫素 2.單元格的間距為零 3.寬600px
<tbody>
<tr height="40px">
每一行高40
<td rowspan="4" align="center" style="color:red">總體資訊</td>
1.第一列合併2.居中 3.變紅
<td colspan="2"></td>
第一行兩個合併
</tr>
<tr height="40px">
<td align="right">使用者名稱：</td>
位置居右
<td>
<input type="text" name="loginname">
1.輸入框用於輸入名字 2.name屬性使用使資料提交成功
</td>
</tr>
<tr height="40px">
<td align="right">密碼：</td>
位置居右
<td>
<input type="password" name="pwd">
1.輸入框用於輸入密碼 2.name屬性使用使資料提交成功
</td>
</tr>
<tr height="40px">
<td colspan="2" align="center">
1.最後一行兩個合併2.兩個按鈕居中
<input type="submit" value="提交" style="background-color: darkseagreen;">
1.提交按鈕加文字 2.顏色變綠
<input type="reset" value="重置" style="width: 80px;height: 30px; ">
1.提交按鈕加重置 2.按鈕變大
</td>
</tr>
</tbody>
</table>
</form>
知識點小總結
1.form必須有action屬性填表單資料提交的地址
2.所有需要提交的資料，input必須有name屬性
3.input按鈕的文字，使用value屬性表示
4.input必須放在form標籤內才能提交
<input type="x">
x=text文字輸入框
x=password密碼輸入框
x=button普通按鈕
x=submit提交按鈕
x=reset重置按鈕
x=file檔案選擇框
x=radio單選框
x=checkbox核取方塊
type型別
get請求和post請求的區別
1.get請求通常表示獲取資料
2.post請求通常表示提交資料
3.get請求傳送的資料使用者不可見
（檢驗post方式是否提交成功F12Network）
4.get請求不能提交大量資料，但post可以，因此不要混用
表單和伺服器通訊方式
1.從伺服器獲取資料
2.向伺服器提交資料
<form method="x">
x=get
x=post
</form>
提交資料post
獲取資料get
CSS
html和css關係
用來修飾網頁樣式的語法
叫做層疊樣式表css
(Cascading Style Sheet)
拾色器提取顏色
樣式表學習
div span
span
一個容器的標籤，不具備任何特殊功能，僅當容器使用。
用於包裹一段文字，便於給文字增加樣式。
<p style="text-align: center;background-color: blue;">
哈哈哈
</p>
1.文字居中顯示 2.文字一行的背景顏色
<p style="text-align: center;background-color: blue;">
<span style="background-color: gray; color: white; font-size:24px;">哈哈哈</span>
</p>
1.文字居中顯示 2.文字一行的背景顏色
3.容器背景灰色 4.字型白色 5.（font表字型）size字型的大小
<b>..</b>
加粗
div
特點：一個空的div，預設寬度為100%，高度為0，新增內容才會有高度
一個通用容器標籤,不具備任何特殊功能,僅當容器來使用.
可以包裹任何內容,也可以容器直接互相包裹.
div包裹全部
text-align:center讓容器內部元素水平居中
margin表示邊距,auto表示自動
對整個容器設定樣式（如下）
<div style="color: 顏色;">
<p></p>
<p></p>
</div>
使整個容器居中
<div style="margin: auto; width: 500px;">
</div>
小總結
1.text-align: center; 讓內部元素水平居中 p
2.margin: aut 讓元素本身水平居中 div
3.background-color: gray 設定背景顏色 span
4.font-size:24px 設定背景大小 span
5.color: white 文字的顏色 span
製作一個簡單的頁面
基本佈局加細節
瞭解常用英語
1.banner 條幅
2.navigation 導航
3.bottom 底部
字型的預設大小為16px 行高為21px
容器大小改變也得變行高
body標籤在預設的情況下會使在兩側有一定空隙（解決如下）
<body style="margin: 0;">
使圖片寬度100%佔滿屏
<img src="姐圖片地址" style="width: 100%;">
簡化之內部樣式行內樣式
標籤內部的叫行內樣式，style內部的叫內部樣式
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">首頁</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">關於</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">姐姐</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">首門口</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">得的</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">大量</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">額的</a>
上下相同
<style>
a{text-decoration: none; color: black; margin: 0 15px }
</style>
<a href="#">...</a>
<a href="#">...</a>
<a href="#">...</a>
下面引入兩段表達相同的程式碼一段為簡寫一段為原碼
先看下效果圖
<!DOCTYPE html>
<html style="background-color: azure;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body style="margin: 0;">
<div id="哈哈">
<img src="姐姐/哈哈.png" style="width: 100%;">
</div>
<div id="navigation" style="height: 80px; line-height: 80px; text-align: center; background-color: white;">
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">首頁</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">關於</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">姐姐</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">首門口</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">得的</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">大量</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">額的</a>
</div>
<div id="bottom" style="height: 40px;line-height: 40px; text-align: center;font-size: 14px; color: blueviolet;">
版權所有哈哈哈哈
</div>
</body>
</html>
簡寫對比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html {background-color: azure;}
body {margin: 0;}
#navigation{navigation" style="height: 80px; line-height: 80px; text-align: center; background-color: white;}
#bottom{height: 40px;line-height: 40px; text-align: center;font-size: 14px; color: blueviolet;}
.nav{text-decoration: none; color: black; margin: 0 15px ;}
#哈哈 img {width: 100%;}
</style>
</head>
<body>
<div id="哈哈">
<img src="姐姐/哈哈.png">
</div>
<div id="navigation">
<a href="#" class="nav">首頁</a>
<a href="#" class="nav">關於</a>
<a href="#" class="nav">姐姐</a>
<a href="#" class="nav">首門口</a>
<a href="#" class="nav">得的</a>
<a href="#" class="nav">大量</a>
<a href="#" class="nav">額的</a>
</div>
<div id="bottom">
版權所有哈哈哈哈
</div>
</body>
</html>
對比可以更好的理解程式碼的簡寫技巧
CSS選擇器
上面程式碼style中涉及
1.ID選擇器（#+id名） id表明身份在頁面元素中不允許重複，因此選擇器只能選擇單個元素
2.類別選擇器 （.+clss名）選擇具有該類別的多個元素
3.標籤選擇器（div） 根據標籤名稱選擇對應的 所有標籤
4.通用選擇器（列*{color：green}）針對頁面上所有標籤都生效
邊框的設定
border: solid 1px aqua;
設定邊框
border-right: solid 1px aqua;
設定右邊框
層疊樣式表
在實際網頁開發中，作用於同一個元素上多個樣式產生衝突的情況不可避免的發生
當多個樣式發生重疊時，優先順序別高的樣式會生效，因此得名層疊樣式表
第三天
CSS優先順序判斷
當樣式發生衝突時，誰的權重值高，誰就生效
style中的程式碼上下級類別名必用空格隔開，同級類別名禁用空格
權重
通用0 標籤1 類10 ID100 行內1000
選擇器選擇的範圍越小越精確優先順序越高
CSS文字屬性
1.color顏色
2.font-family字型型別
3.font-size文字大小
4.font-weight：bold文字加粗
5.font-style：italic文字傾斜
6.text-align: center水平對齊方式
7.text-indent：60px首行縮排
8.line-height：100px；行高
9.height：文字高backgroudn-color：
背景顏色 line-height：100px；行高
當文字高等於行高時預設文字居中
10.text-decoration： underline文字修飾
常見圖片格式的區別
gif
1.支援動畫 2.只有全透明和不透明兩種模式 3.只有256種顏色
jpg
1.採用有失真壓縮演算法 2.體積較小 3.不支援透明 4.不支援動畫
png
1.採用無失真壓縮演算法 2.體積相對較小 3支援背景透明 4.不支援動畫
svg
儲存形狀按放大後按形狀上色 儲存顏色影像相對簡單的圖片
背景圖的使用
元素寬高的百分比，是相對於父元素而言
若父元素的高度為0，則子元素高度即使設定100%，大小也是0
html元素大小是相對於瀏覽器大小eryan
background-image: url(imgs/dong.gif)
背景圖加平鋪
background-repeat: no-repeat;
不平鋪
background-position: right bottom;
背景圖的位置（right水平 bottom垂直）
（style標籤內）
元素的浮動
浮動元素會脫離網頁文件，與其他元素髮生重疊
但是，不會與文字內容發生重疊
列：文字環繞效果，三個容器橫向排列
左右浮動
float: left;
float: right;
文字環繞實現和橫向排版佈局的實現
</head>
<style type="text/css">
.green{
width: 100px; height: 100px;
background-color: green;
float: left;
}
.red{
width: 200px; height: 150px;
background-color: red;
}
.a{
width: 200px;
background-color: green;
}
.b{
width: 700px;
background-color: red;
}
.c{
width: 300px;
background-color: blue;
}
.a,.b,.c{
float: left; height: 200px;
}
</style>
<body>
<p>文字環繞效果</p>
<div class="green"></div>
<div class="red">
文字環文字環繞繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞
</div>
<p>橫向排版佈局</p>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
父元素邊框自動調整方法
1.設定高度
2.overflow:auto;自動調整超出高度的。
3.clear清楚浮動。clear:left不受到左浮動影響/right/both不受到左右浮動影響。誰不希望受到影響誰增加clear樣式
浮動元素知識補充
1.浮動元素在排列的過程中只參考前一個元素的位置即可
2.右浮動的順序問題（右浮動重排）
3.浮動元素的重疊問題
1）浮動元素不會覆蓋文字內容。
2）浮動元素不會覆蓋圖片內容
（因為圖片本身也是文字，可以將圖片看做是一個特殊的文字）
3）浮動元素不會覆蓋表單元素
（輸入框，單選按鈕，核取方塊，按鈕，下拉選擇框等）
邊框設定
各個方向邊距
*{margin: 0;}將所有元素邊距都設定為零
margin設定邊框的元素
margin-top: 10px;
top頂部。。。right右。。。bottom底部。。。left左
overflow: auto;容器大小以其他元素撐開為準
margin: auto;讓父元素自動設定邊框，左右邊框相等，即可達劇中效果，水平方向有效
如圖
程式碼
<style type="text/css">
* {
margin: 0;/*將所有元素邊距都設定為零*/
}
.item{
width: 210px;
height: 136px;
float: left;
margin:20px;
}
#box{
width: 750px;
overflow: auto;/*按其他元素撐開的為準*/
margin: auto;/*讓父元素自動設定邊框，左右邊框相等，即可達劇中效果，水平方向有效*/
}
</style>
</head>
<body>
<div id="box">
<div class="item" style="background: url(js/QQ截圖20201219170346.png);"></div>
<div class="item" style="background: url(js/QQ截圖20201219170402.png);"></div>
<div class="item" style="background: url(js/QQ截圖20201219170433.png);"></div>
</div>
</body>
</html>
浮動元素的排列方式
浮動元素在排列時，只參考前一個元素的位置
填充
1.指向一個元素內部，增加空間，也可以稱為內邊距。
2.和外邊距不同的是，填充會改變元素的大小。隨著填充的增加元素會被撐大。
盒子模型
內容 填充 邊框 邊距
一個小專案初學者敲一遍好處大大的
<style type="text/css">
*{
margin: 0; padding: 0;/*將所有元素的預設邊距和填充設為0*/
}
#header{
height: 50px;
background: #E83828;
}
#header .head{
width: 1005px;height: 50px;
background: #D1D3D6;
margin: auto;/*居中顯示*/
}
#banner{
height: 500px;
background: slateblue;
}
#category{
width: 1005px; height: 200px;
margin: auto; background: #FF359A ;
}
#category .item{
width: 125px; height: 165px;/*設定大小*/
padding-left: 25px;/*左填充*/
padding-right: 25px;/*右填充*/
padding-bottom: 25px;/*下填充*/
padding-top: 10px;/*上填充*/
border-right: 1px dashed black;/*右邊框 1畫素 虛線 黑色*/
float: left;/*左浮動*/
}
#category .item.first {
padding-left: 0;/*取消左填充*/
}
#category .item.last{
padding-right: 0;/*取消右填充*/
border: 0;/*取消邊框*/
}
#case{
height: 490px;
background: #eeeeee;
}
#case .title-text{
width: 1005px;
margin: auto;/*水平居中*/
padding-top: 20px;/*上填充*/
padding-bottom: 10px;/*下填充*/
font-size: 45px;/*字型大小*/
}
#case .item-wrapper{
width: 1000px;
margin: auto;/*水平居中*/
overflow: auto;/*自動設定高度，防止因子元素浮動而高度坍塌*/
}
#case .item-wrapper .item {
width: 320px;
height: 330px;
background: #9ACD32;
float: left;/*左浮動*/
}
#case .item-wrapper .item.mg{
margin-left: 20px;
margin-right: 20px;/*左右邊距*/
}
#case p {
width: 1005px;
margin-left: auto;/*水平居中*/
margin-right: auto;/*水平居中*/
margin-top: 15px;/*上邊距*/
height: 40px; line-height: 40px;/*行高使高度居中*/
text-align: center;/*文字水平居中*/
font-size: 30px;/*字型大小*/
color: dimgray;/*字型顏色*/
}
</style>
</head>
<body>
<div id="header">
<div class="head"></div>
</div>
<div id="banner"></div>
<div id="category">
<div class="item first"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item last"></div>
</div>
<div id="case">
<div class="title-text">
Case
</div>
<div class="item-wrapper">
<div class="item"></div>
<div class="item mg"></div>
<div class="item"></div>
</div>
<p>檢視更多+</p>
</div>
</body>
</html>
CSS屬性
1.background背景
background-color背景顏色
background-image背景圖片
background-repeat背景圖的平鋪方式
合併可以把三個屬性寫成一個如下（不一定三個同時）
background：gray（背景色） url（背景圖片） no-repeat(平鋪方式)
2.border邊框
border-width邊框寬度
border-style邊框樣式
border-color邊框顏色
border：1px（邊框寬度） solid（邊框樣式） black（邊框顏色）
3.font字型
font-style：italic；斜體
font-weight：bold；加粗
font-family：arial，sans-serif；字型種類
font-size：20px；字號大小
line-height：35px；行高（使我們的字型垂直居中）
font：italic（斜體字） bold（加粗） 字號大小20px/30px行高 （預設字型）arial，sans-serif（備用字型），“微軟雅黑”
列：font：20px “微軟雅黑”；
4.margin外邊距
margin-top頂部
margin-right右部
margin-bottom下部
margin-left左部
合併
margin：10px 15px 10px 15px；上右下左
margin：10px 15px 10px；上 左右 下
margin：10px 15px；上下 左右
margin：15px；上下左右
5.padding填充和4外邊距一樣
padding-top頂部
padding-right右部
padding-bottom下部
padding-left左部
6.顏色
color：red；直接寫顏色
color：rgb（184紅.131綠.11藍）
轉換成16進位制可簡寫
color：#B8 86 0B
第4天
查疑補缺