一週內容回顧
一週內容回顧
8/2週一內容概要
- head內常見標籤
- body內常見標籤
- 基本標籤
- 常見標籤
- 特殊符號
- 列表標籤
- 表格標籤
- form表單標籤
內容詳細
head內常見標籤
title style 內部能夠直接書寫css代碼調節html樣式 可是嚴格來講不一樣語言應存放在不一樣的文件夾內 link 經過href參數引入外部css文件 script 內部能夠直接書寫js代碼 也能夠經過src參數引入外部的js文件 meta 定義網頁源信息 1.參數description 定義網站的簡介 2.參數keyword 定義用戶可能搜索到的關鍵字 增長網頁被搜索到底的機率
body內常見標籤
#前提
html標籤分爲兩大類
1.行內標籤 (b s u i)
自身文本多大就佔多大
2.塊兒級標籤 (h p)
標籤獨佔一行
html標籤針對標籤個數也有分類
1.雙標籤
有頭有尾<h1></h1>
2.自閉和標籤
有頭<hr>
#<!--標題系列-->
<h1>一級標題</h1>
<h2>二級標題</h2>
#<!--加粗 斜體 下劃線 刪除線-->
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除線</s>
#<!--段落標籤-->
<p>xxx111</p>
#<!--水平線 換行-->
<hr>
<br>
特殊符號
#<!--特殊符號-->
a >(>) b
a <(<) b
何處望神州滿眼 (空格)風光北固樓天下興亡多少事
¥ 人民幣
© 版權
® 商標
& 特殊&符
常見標籤之a連接標籤
<a href='https://www.baidu.com'>百度</a>
#href參數
1.放網址點擊能夠直接跳轉
2.錨點功能
放其餘標籤的id值點擊就能夠跳轉到對應的標籤位置
#target參數
控制跳轉頁面是在當前頁仍是新建頁
_self
_blank
標籤兩大重要屬性
1.id值
相似於標籤的身份證號碼 在同一個html文件內 id值不能重複
<a id='d1'></a>
2.class值
相似於標籤的羣體號碼 多個標籤能夠屬於一個羣體 多個標籤也屬於多個羣體
<a class='c1'></a>
<a class='c1 c2'></a>
常見標籤之img圖片標籤
<img src='123.jpg'/> #src參數 1.能夠放網絡圖片的地址 2.也能夠放本地圖片的地址 #title參數 鼠標懸浮在圖片上以後能夠展現的文字信息 #alt參數 圖片因爲某些緣由加載不出來的時候能夠提示的文字信息 #width、height參數 調節圖片的長寬 默認調節一個就能夠 另一個等比例縮放 若是兩個都調節那麼可能會出現圖片失真的狀況
常見標籤之列表標籤
# 1.無序列表
<ul>
<li>小李</li>
<li>小明</li>
<li>小紅</li>
</ul>
"""總結：頁面上看似有規則的橫向或者豎向一次排列的標籤大機率都是無序列表"""
# 2.有序列表
<ol type='A'>
<li>小李</li>
<li>小明</li>
<li>小紅</li>
</ol>
# 3.標題列表
<dl>
<dt>標題1</dt>
<dd>內容1</dd>
<dt>標題2</dt>
<dd>內容1</dd>
<dd>內容2</dd>
</dl>
常見標籤之table表格標籤
<table>
<thead>
<tr> # 一個tr就表明一行
<th>序號</th> # th加粗的文本
<th>姓名</th>
<th>年齡</th>
</tr>
</thead> # 表頭(字段名稱)
<tbody>
<tr>
<td>1</td> # td普通文本
<td>jason</td>
<td>18</td>
</tr>
</tbody> # 表單(數據部分)
</table>
常見標籤之form表單
#前提：該標籤能夠接受用戶的數據併發送給後端服務器
獲取用戶數據的標籤最爲常見的就是input標籤
而且獲取用戶數據的標籤最好都要有一個name屬性用來表示該數據究竟是用戶的什麼數據
type參數
text
password
date
email
radio
checkbox
file
button # 沒有任何做用
reset # 重置
submit # 觸發提交數據的動做
#select標籤
下拉選擇
#textarea標籤
大文本
8/3週二內容概要
- body內常見標籤補充
- form表單重要參數補充
- CDN知識說明
- CSS層疊樣式表
- CSS選擇器
內容詳細
body內常見標籤補充
1.塊兒級標籤 div 2.行內標籤 span # 上述兩個標籤主要用於頁面的前期結構佈局 """ 標籤與標籤直接能夠相互嵌套 eg: <div> <div></div> <a></a> <p></p> </div> """ 塊兒級標籤能夠嵌套塊兒級標籤和行內標籤 特例:p標籤雖然是塊兒級標籤可是它不能嵌套塊兒級標籤 而行內標籤只能嵌套行內標籤
form表單重要參數補充
input標籤
1.value參數 #至關於默認值
本質:用戶數據其實都是由value參數存儲
2.placeholder參數 #至關於提示信息
針對radio和checkbox能夠默認選中
3.checked參數
checked='checked'
# 在html中若是標籤的屬性名和屬性值相等 那麼能夠簡寫爲checked
select標籤
option子標籤
selected='selected'
# 簡寫 selected 默認選中
form標籤
action參數 #用來控制數據提交的地址
novalidate參數 #取消瀏覽器的校驗動做
#button標籤若是寫在了form表單的內部 那麼也能夠出發提交動做
"""
可以觸發form表單提交數據的標籤有兩個
<input type='submit'/>
<button></button>
"""
CDN知識說明
主要功能: 使用戶就近獲取所需內容，下降網絡擁塞，提升用戶訪問響應速度和命中率 # 有些常見的軟件各大互聯網都開設了免費的CDN服務 eg:前端相關CDN服務 >>> https://www.bootcdn.cn/ """要想使用CDN的前提是你的計算機必須時刻有網絡"""
CSS層疊樣式表
"""css就是用來調節html標籤樣式的"""
# 語法結構
選擇器 {
屬性名1:屬性值1;
屬性名2:屬性值2;
}
# 語法註釋
/*註釋內容*/
# css引入方式
1.style標籤內部直接書寫
<style></style>
2.link標籤href屬性引入外部css文件
<link href='' rel='stylesheet'></link>
3.在標籤內部直接書寫
<p style='color:red;'></p>
css選擇器
# 基本選擇器
1.標籤選擇器(直接寫標籤名稱便可)
p {
color:red;
}
2.類選擇器(書寫標籤class屬性值並在前面加點)
.c1 {
color:blue;
}
3.id選擇器(書寫標籤id屬性值並在前面加#)
#d1 {
color:black;
}
4.通用選擇器(指代全部的標籤)
* {
color:green;
}
# 組合選擇器
1.後代選擇器
2.兒子選擇器
3.毗鄰選擇器
4.弟弟選擇器
8/4週三內容概要
- 組合選擇器
- 僞類選擇器
- 僞元素選擇器
- 選擇器優先級
- html樣式調節
內容詳細
組合選擇器
1.兒子選擇器(大於號)
div>p {}
2.後代選擇器(空格)
div p {}
3.毗鄰選擇器(加號):同級別緊挨着的下一個
div+p {}
4.弟弟選擇器(數字1左邊的鍵)
div~p {}
屬性選擇器
#前提
HTML標籤除了能夠有自帶的屬性以外還支持自定義屬性
eg:
<p id='d1' class='c1' name='小明' age=20 xxx=yyy></p>
# 關鍵性的符號就是中括號
[name] {color:red}
查找含有屬性名name的標籤
[name='jason'] {color:red}
查找含有屬性名name而且屬性值是jason的標籤
p[name='jason'] {color:red}
查找含有書名name而且屬性值是jason的p標籤
分組與嵌套
1.分組(逗號隔開 同級別)
#找p標籤、div標籤、span標籤
p,div,span {
color:yellowgreen;
}
2.嵌套(不一樣的選擇器能夠混合使用)
#找id=d一、class=c一、div標籤
#d1,.c1,div {
color:yellowgreen;
}
div.c1 {} # 找class=c1的div標籤
僞類選擇器
# 以連接標籤爲例
1.未點擊狀態
a:link {
color:blue;
}
2.懸浮狀態
a:hover {
color:red;
}
3.點擊狀態(不鬆開)
a:active {
color:green;
}
4.點擊以後的狀態
a:visited {
color:pink
}
# 以input爲例 獲取焦點狀態
input:focus {}
僞元素選擇器css
"經過css代碼給html標籤添加文本內容或者修改"
# 改變文本第一個字
p:first-letter {
font-size:48px;
color:red;
}
# 在文本開頭添加內容
p:before {
content:'#';
color:red;
}
# 在文本末尾添加內容
p:after {
content:'?';
color:blue;
}
選擇器優先級
1.相同選擇器不一樣位置
就近原則
2.不一樣選擇器不一樣位置
行內式 > id選擇器 > 類選擇器 > 標籤選擇器
"""優先級也能夠打破 須要藉助於關鍵字"""
eg:!important
字體屬性相關
1.長寬
width
height
#行內標籤沒法設置長寬 徹底取決於內部文本
2.字體大小
font-size
2.字體顏色
color:red
color:#xxxxxx
color:RGB(0,0,0)
#取色
1.藉助微信/QQ截圖自帶的三基色取色
2.利用瀏覽器自帶的取色器取色
文字屬性
1.文字對齊
text-align:center
2.文字裝飾
text-decoration:none
3.首行縮進
text-indet:32px
背景屬性
#背景色
#背景圖片
引入方式:
1.background-color:RGB(0,0,0);
2.background-image:url('111.png');
位置方式：
background-repeat:no-repeat;
background-position:center
#若是多個參數都是相同的前綴
那麼能夠簡寫爲background:#xxxxxx url('111.png') no-repeat center;
8/5週四內容概要
- 邊框屬性
- display屬性
- 盒子模型
- 浮動屬性
- 浮動帶來的影響
- 溢出屬性
- 定位屬性
- z-index屬性
- 脫離文檔流
內容詳細
邊框屬性
border-left-color:yellow; border-left-width:5px; border-left-style:solid; 能夠簡寫爲: #border-left:5px solid yellow border-top-color:red; border-top-width:10px; border-top-style:dashed; 能夠簡寫爲: #border-top:10px dashed red border-right-color:yellow; border-right-width:3px; border-right-style:dotted; 能夠簡寫爲: #border-top:3px dotted yellow border-bottom-color:pink; border-bottom-width:8px; border-bottom-style:solid; 能夠簡寫爲: #border-bottom:8px solid pink 終極縮寫形式 上下左右所有采起同樣的樣式 #border:5px solid black #畫圓 border-radius:50%
display屬性
display:none eg: 釣魚網站
盒子模型
1.外邊距(margin) 2.邊框(border) 3.內邊距(padding) 4.內容(content) #margin用來調節標籤與標籤之間的距離 #padding用來調節標籤與標籤內部(文本或者標籤)的距離 margin-left:20px; margin-top:20px; margin-right:40px; margin-bottom:60px; #前綴一致 那麼能夠縮寫爲如下幾種狀況: margin:10px # 一個參數表示上下左右 margin:20px 40px # 第一個控制上下 第二個控制左右 margin:20px 30px 40px # 第一個控制上 第二個控制左右 第三個控制下 margin:10px 20px 30px 40px # 上右下左(順時針) padding-left:40px; padding-top:30px; padding-right:40px; padding-bottom:60px #前綴如出一轍 也能夠縮寫 規律跟margin一致
浮動屬性
float # 頁面佈局確定須要用到浮動 """浮動的元素脫離文檔流 至關於漂浮在空中""" #前提 瀏覽器針對文本是優先展現的
浮動帶來的影響
浮動會致使父標籤元素"塌陷"
#解決方法：
1.本身再寫一個div撐着（不可取）
2.用clear屬性
clear:left、right、both # 不容許標籤左側有浮動的元素
3.終極結論
.clearfix:after {
content:'啦啦啦';
display:block;
clear:both
}
#結論：
在寫css代碼以前先寫好解決浮動帶來塌陷的css代碼
哪一個父標籤塌陷了就給哪一個父標籤加一個clearfix類屬性便可
溢出屬性
# 圓形頭像製做
overflow參數
eg:
div {
width:100px;
height:100px;
border:3px solid black;
border-radius:100%;
overflow:hidden
}
img {
width:100%;
}
定位屬性
1.非定位態(靜態) 全部的標籤默認都是非定位狀態 沒法使用定位改變位置 #static 2.相對定位 position:relative #相對於標籤原來的位置作定位 3.絕對定位 position:absolute #相對於已經定位過的父標籤作定位 eg:小米官網購物車 4.固定定位 position:fixed #相對於瀏覽器窗口作定位
是否脫離文檔流
#脫離文檔流: 通俗來講就是原來的位置是否能夠被其餘標籤佔用 脫離文檔流 1.浮動 2.絕對定位 3.固定定位 不脫離文檔流 相對定位
8/6週五內容概要
- 三層結構的模態框
- 編寫簡易博客園界面
- 前端框架之Bootstrap
內容詳細
三層結構的模態框
#考題：
1.最上面一層須要有一個form表單 獲取用戶名和密碼
2.第二層就是淺黑色
3.第三層放一張圖片
<!DOCTYPR html>
<html>
<head>
<title>模態框</title>
<style>
.cover {
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:rgba(127,127,127,0.75);
z-index:999
}
.modal {
position:fixed;
top:50%;
left:50%;
z-index:1000;
background-color:white;
height:200px;
width:400px;
margin-top:-100px;
margin-left:-200px;
}
</style>
</head>
<body>
<div class='content'>
<img src='111.png'/>
</div>
<div class='cover'></div>
<div class='modal'>
<form action=''>
<p>username:
<input name='username' type='text'/>
</p>
<p>password:
<input name='password' type='password'/>
</p>
<input type='submit' value='註冊'/>
<input type='button' value='取消' id='d1'/>
</form>
</div>
</body>
</html>
書寫簡易博客園界面
""" 搭建網頁不要急着寫 先利用div構造頁面的大體佈局 在使用div作頁面佈局的時候 因爲div個數較多爲了可以很好的區分 咱們一般會給不一樣的div起不一樣的class屬性(屬性值最好可以有必定的區分度) """ # 1.先寫html代碼 # 2.再寫css代碼
前端框架
1.頁面搭建相關
Bootstrap elementui layui
2.功能應用相關
react Vue
# Bootstrap框架
可以讓你cv快速搭建頁面
# 壓縮文件
bootstrap.css # 未壓縮的
bootstrap.min.css # 壓縮以後的
# 頁面佈局
<div class='container'> # 左右兩邊是否有留白
<div class='row'> # 一行均分12份
<div class='col-md-6 c1'></div> # 控制佔幾份
# 響應式佈局
可以根據瀏覽器窗口和機器型號的不一樣自動調節比例
"""使用bootstrap的狀況下給標籤調樣式 通常都是修改標籤的calss值便可"""
相關文章
- 1. 【每週小回顧】7- 一起回顧上週精彩內容
- 2. 【每週小回顧】11- 一起回顧上週精彩內容
- 3. 【每週小回顧】2- 一塊兒回顧上週精彩內容
- 4. 【每週小回顧】1- 一塊兒回顧上週精彩內容
- 5. js內容回顧
- 6. 第一週回顧
- 7. Python--day72--json內容回顧
- 8. 生成器內容回顧
- 9. 從新回顧 symfony 內容
- 10. 一週知識回顧
- 更多相關文章...
- • Eclipse 內容輔助 - Eclipse 教程
- • XSD 混合內容 - XML Schema 教程
- • Docker容器實戰(一) - 封神Server端技術
- • 算法總結-回溯法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 【每週小回顧】7- 一起回顧上週精彩內容
- 2. 【每週小回顧】11- 一起回顧上週精彩內容
- 3. 【每週小回顧】2- 一塊兒回顧上週精彩內容
- 4. 【每週小回顧】1- 一塊兒回顧上週精彩內容
- 5. js內容回顧
- 6. 第一週回顧
- 7. Python--day72--json內容回顧
- 8. 生成器內容回顧
- 9. 從新回顧 symfony 內容
- 10. 一週知識回顧