HTML5
基本板式
<!DOCTYPE html>
<!--lang 語言參數(shù)-->
<html lang="en">
<head>
<!--編碼-->
<meta charset="UTF-8">
<!--網(wǎng)頁標題-->
<title>Title</title>
</head>
<body>
</body>
</html>
div
- 塊級標簽,內(nèi)容顯示默認獨占一行
示例
<!--div標簽-->
<div>靜夜思</div>
<div>靜夜思</div>
作用
- div在開發(fā)過程中一般充當網(wǎng)站的結(jié)構(gòu),用來包裹網(wǎng)站的內(nèi)容,使包裹的內(nèi)容和其他內(nèi)容之間保持一定的獨立性
span
- 行標簽,內(nèi)容默認在同一行顯示;行級標簽
示例
<!--span -->
<span>靜夜思</span>
<span>靜夜思</span>
<span>靜夜思</span>
各級標簽屬性
- 行級,塊級標簽,行內(nèi)塊屬性標簽
- 行級標簽: 多個標簽的內(nèi)容是在同一行顯示
- 塊級標簽: 每個標簽的內(nèi)容都獨自占用一行
- 行內(nèi)塊屬性標簽: 同行顯示還能修改寬高(參照CSS行內(nèi)塊屬性)
- 塊級標簽可以嵌入塊級和行級標簽,行級標簽只能嵌入行級標簽
- 行級標簽不能通過width和height來修改寬高,只能由內(nèi)容決定
作用
- span 一般用來直接標記文本內(nèi)容,負責區(qū)分特殊的文本信息
img
- 圖片標簽;行內(nèi)塊屬性標簽
- 屬性(src alt title):
src: 圖片路徑,必需參數(shù)屬性
alt: 圖片無法加載時的提示內(nèi)容
title: 當鼠標放在圖片上時顯示提示文字,一般用于LOGO
<img src="./img/p2.gif" alt="圖片加載失敗" title='LOGO'>
a標簽
- 超鏈接標簽;行級標簽
- 屬性(href target):
href: 鏈接跳轉(zhuǎn)頁面的url
target: 設為"_blank"時會在新頁面打開鏈接
<a target='_blank'>腦小白</a>
h標簽
- 標題標簽,六級標簽h1,h2,h3,h4,h5,h6;塊級標簽
- 一般使用前三級
<h1>1級標簽</h1>
<h2>2級標簽</h2>
<h3>3級標簽</h3>
<h4>4級標簽</h4>
<h5>5級標簽</h5>
<h6>6級標簽</h6>
ul,ol
- 列表,ul為無序列表,ol為有序列表;塊級標簽
- 一般使用無序列表,兩者都配合li列表項使用;li也是塊級標簽
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
<ol>
<li>列表項4</li>
<li>列表項5</li>
<li>列表項6</li>
</ol>
p標簽
- 段落標簽;塊級標簽
- 用來包裹一段內(nèi)容(文字,圖片,視頻等),代表一段數(shù)據(jù),默認會跟其他段落保持一定的距離
<p>
段落一
</p>
<p>
段落二
</p>
video
- 視頻標簽;行級標簽
- 屬性(src controls loop autoplay muted):
src: 視頻路徑
controls: 控制視頻是否顯示播放控件
loop: 控制視頻是否循環(huán)播放
autoplay: 控制視頻加載完后是否自動播放
muted: 控制視頻是否靜音播放
- Note:
有些瀏覽器對autoplay做了屏蔽,此時可以加上muted,以實現(xiàn)自動播放
<video src="./source/mov.mp4" controls loop autoplay muted></video>
<!--指定視頻的格式-->
<video controls>
<source src="./source/m1.mp4" type="video/mp4">
<source src="./source/m1.ogg" type="video/ogg">
<source src="./source/m1.Webm" type="video/Webm">
</video>
audio
- 音頻標簽
- 屬性(src controls loop autoplay muted):
屬性的設定與視頻video一樣,參照video標簽
<audio src="./source/a1.mp3" controls loop autoplay muted></audio>
<!--指定音頻的格式-->
<audio controls loop>
<source src="./source/a1.mp3" type="audio.mp3">
<source src="./source/a1.ogg" type="audio.ogg">
</audio>
embed
- 動畫插件,HTML5新增,IE9以下不支持;行級標簽
- 屬性(src type):
src: 資源地址
type: 資源類型,默認自動匹配
<embed src="./source/m1.mp4" type="">
作用
用來將指定的動畫,視頻,音頻作為一個對應的插件嵌入到頁面指定的位置
錨點
- 超鏈接標簽錨點:
本質(zhì)上是通過在網(wǎng)頁中指定的位置設置標簽的id屬性值,
之后在超鏈接標簽上通過設置herf="#id值",完成點擊跳轉(zhuǎn).
錨點的作用:
可以幫助用戶從網(wǎng)頁中眾多的內(nèi)容中快速的查找用戶感興趣的內(nèi)容,
一般適用于網(wǎng)頁內(nèi)容比較多的網(wǎng)站
<body>
<a href="#title">錨點</a>
<h1>靜夜思</h1>
<p>床前明月光, 地上鞋兩雙.</p>
<p>舉頭望明月, 低頭撕褲襠.</p>
<p><img src="./img/p1.gif" alt=""></p>
<h1 id="title">春曉</h1>
<p>春眠不覺曉, 處處蚊子咬.</p>
<p>夜來風雨聲, 菊花腫多少.</p>
<p><img src="./img/ys.jpg" alt=""></p>
</body>
表格
<table>
<tr>
<th>標題1</th>
<th>標題2</th>
<th>標題3</th>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
</tr>
</table>
- table: 表格標簽
- tr: 行
- th: 跟td用法相同,一般用于列標題
- td: 單元格
表單
<form action="">
姓名: <input type="text" value="" name="name">
性別: <input type="radio" value="男" name="sex">
<input type="radio" value="女" name="sex">
<input type="submit" value="提交">
</form>
- form: 表單標簽
- input(type, value, name): 輸入框
- type: 文本框的類型
- value: 默認值
- name: 提交時的參數(shù)名
CSS
- 層疊樣式表
- 放到head標簽內(nèi)
<html>
<head>
<stype>
div{}
span{}
</stype>
</head>
<body>
</body>
</html>
作用
- 用來設置指定標簽標記內(nèi)容的樣式,需要預先指定對應的選擇器
- 標簽名選擇器: 使用標簽的名字作為選擇器
div{ color: red;}
文本樣式
- color: 字體顏色設置
- font-weight: 字體的粗細設置
- font-size: 字體的大小,選項有px(以像素為單位),em(以字符為單位)
- font-famliy: 字體集
- text-indent(縮進): 文本縮進，單位可以是字符或是像素
- text-align(排列): 文本排列
參數(shù)：
letf : 靠左
right : 靠右
center : 居中
- text-decoration: 文本裝飾
參數(shù)：
underline(下劃線)
line-through(刪除線)
overline(頂部線)
none(去除所有線)
- text-shadow: 文字陰影
參數(shù)(x y dim color)：
x : 水平偏移量，正值向右；
y : 豎直方向偏移量，正值向下
dim ： 模糊程度，單位可以是像素，字符...
color : 陰影的顏色
行內(nèi)塊屬性
- 既具有行級標簽的屬性(同行顯示)，又具有塊級標簽的特性(設置寬高)
display: transform-typeinline-block: 轉(zhuǎn)換成行內(nèi)塊屬性
inline: 轉(zhuǎn)換成行屬性
block: 轉(zhuǎn)換成塊屬性
行內(nèi)塊適用于兩個都是圖片或都是文字的情況
盒模型
基本結(jié)構(gòu)
- 盒模型含有四級結(jié)構(gòu)：
- margin: 外邊距，可以設置四個方向；
使用
margin: 0 auto;可以達到水平居中的效果，詳細見auto項；
border: 邊框，三個值為線寬、實線或虛線（solid/dashed）、顏色
padding: 內(nèi)邊距，可以設置四個方向；
content: 內(nèi)容層，可以指定寬高
Note1: 當設置兩個相鄰的外邊距時,兩個相鄰元素的外邊距會出現(xiàn)重疊現(xiàn)象,
此時以外邊距大的一方為準。Note2: 當設置某一個塊級元素的上下margin時,如果該margin作用于當前標簽和其父級標簽,此時父級標簽必需有邊框
Note3: 不使用怪異盒模型時，width和height只是設置內(nèi)容層的規(guī)格
怪異盒模型
- 怪異盒模型是將border、padding、content三部分進行綁定，
此時通過width和height來設置規(guī)格時就不只是內(nèi)容層，而是同時包含這三部分
box-sizing: border-box
- Note: 有時為確保瀏覽器兼容需加上以下代碼
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
應用于內(nèi)容固定的盒模型，否則當內(nèi)容增加時可能會從盒子中溢出
溢出示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEIZI</title>
<style type="text/css">
div{
background-color: #fcfdf8;
width: 300px;
height: 300px;
border: 2px solid blue;
padding: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<p>
這是一個測試這是一個測試這是一個測試這是一個測試這
是一個測試這是一個測試這是一個測試這是一個測試這是
一個測試這是一個測試這是一個測試這是一個測試這是一個
測試這是一個測試這是一個測試這是一個測試這是一個測試
這是一個測試這是一個測試這是一個測試這是一個測試這是一
個測試這是一個測試這是一個測試這是一個測試這是一個測
試這是一個測試這是一個測試這是一個測試這是一個測試這
是一個測試這是一個測試這是一個測試這是一個測試這是
一個測試這是一個測試這是一個測試這是一個測試這是一
個測試這是一個測試這是一個測試這是一個測試這是一
個測試這是一個測試這是一個測試這是一個測試
</p>
<p>
這是一個測試
</p>
</div>
</body>
</html>
盒子陰影
- box-shadow:
box-shadow: inset x y dim color
inset: 加inset時陰影向內(nèi)擴散，不加時向外
x : 水平偏移量，正值向右；
y : 豎直方向偏移量，正值向下
dim ： 模糊程度，單位可以是像素，字符...
color : 陰影的顏色
盒子形狀
- border-radius: 設置標簽邊角的裁剪半徑,分為五種情況:
1個值: 四個邊角都按照這一個值裁剪
2個值: 對角裁剪,第一個值為左上和右下,第二個為右上和左下
4個值: 四角對應
8個值: 分為兩組,對應位置的兩個數(shù)為一個頂點對應的兩邊的裁剪距離示例：
border-radius: 20px 50px 70px 100px / 20px 50px 70px 100px;
image.png
選擇器
- 通配選擇器, 優(yōu)先權(quán)值為0
代表所有標簽的樣式;
初始化所有標簽的樣式;
優(yōu)先級最低,一般用來完成標簽樣式的重置
*{
margin: 0 0;
padding: 0 0;
text-decoration: none;
}
標簽名選擇器，優(yōu)先權(quán)值為1
class選擇器，優(yōu)先權(quán)值為10
.mark{
width: 800px;
margin: 0 auto;
text-align: center;
background-color: lawngreen;
border-radius: 20px;
box-shadow: 0px 0px 30px black;
}
- id選擇器，優(yōu)先權(quán)值為100
#title{
font-family: "yahei";
}
- 子代選擇器，優(yōu)先權(quán)值為class + 標簽名 = 11
由id,class或標簽名通過>連接形成的
具有父子關(guān)系的選擇器稱為子代選擇器,
一般適用于僅對某一標簽的子代標簽設置樣式
.mark>p{
color: white;
margin: 3px;
font-size: 18px;
text-shadow: 0 0 10px black;
}
- 后代選擇器，優(yōu)先權(quán)值為class + 標簽名 = 11
由id,class,標簽名通過空格組合而成的具有后代關(guān)系的一種選擇器,
該選擇器可以指定所有跟其構(gòu)成后代關(guān)系的
.mark h1{
color: blue;
/*font-family: "kaiti";*/
margin: 20px;
}
- 群組選擇器，優(yōu)先權(quán)值按照","分割,分別計算
由id,class或標簽名,后代選擇器或子代選擇器用過","連接,
形成的一種具有并列關(guān)系的選擇器.
群組選擇器一般用來實現(xiàn)多個標簽相同樣式的合并,減少代碼的冗余
.mark h1, .mark>p{
font-family: "kaiti";
}
- Note: 優(yōu)先級相同時，后者會覆蓋前者
強制提升優(yōu)先級為最高
使用 !important 修飾,此時優(yōu)先級會被設為1000即最高優(yōu)先級.
該操作只有當上面的操作無法完成修改時才使用,不建議使用.
font-family: "yahei" ! important;
偽類選擇器
- 負責選擇指定標簽所處的不同狀態(tài),主要作用于a標簽
:link 代表超鏈接標簽之前沒有被點擊的狀態(tài)
:hover 代表鼠標懸停在標簽上的狀態(tài),該狀態(tài)所有標簽都有
:active 代表鼠標按下松開前的狀態(tài)
:visited 代表訪問過的狀態(tài)
a:link{
color: red;
}
a:hover{
color: greenyellow;
}
a:active{
color: pink;
}
a:visited{
color: blue;
}
auto
- 獲取標簽所在父級標簽的寬度,然后減去當前標簽的寬度,最后除以二返回(內(nèi)置函數(shù)計算)
- 一般用于實現(xiàn)塊級元素相對于父級元素水平方向上居中
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEIZI</title>
<style type="text/css">
.father{
background-color: blue;
width: 600px;
margin: 0 auto;
}
.child{
background-color: red;
width: 200px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
</div>
</div>
</body>
</html>
文本自動隱藏
- 設置文本行數(shù)，超出范圍將自動隱藏
overflow: hidden; /*隱藏標簽內(nèi)容*/
text-overflow: ellipsis; /*以省略號顯示*/
display: -webkit-box;
-webkit-line-clamp: 1; /*要顯示的行數(shù)*/
-webkit-box-orient: vertical;
- Note: 全字母時需要按照需要對單詞換行(連續(xù)字母,沒有空格時被當成單個單詞，不換行，不隱藏)
浮動
- 對于網(wǎng)頁的布局，float顯得尤為重要
浮動布局：
主要解決多個塊級元素在同一行顯示的問題。
因此該布局主要應用與PC端的布局。
使用步驟：
首先對需要在同行顯示的塊設置浮動（left, right）,
然后設置其父級清除浮動效果，否則父級會發(fā)生高度塌陷。
清浮動方法;
1. 使用overflow: hidden；
2. 在浮動塊中追加空元素,同級加div,使用clear；
3. 通過偽類after配合zoom完成清浮動
- Note: 浮動
簡單示例，son1和son2實現(xiàn)拼接
- 使用第一種清浮動的方法，也是常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEIZI</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
background-color: blue;
/*隱藏標簽，在這里可以達到清除子集浮動的效果*/
overflow: hidden;
}
.son1, .son2{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.son2{
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">
靜夜思
</div>
<div class="son2">
思今夜
</div>
</div>
</body>
</html>
overflow：
清除子集浮動造成的父級塌陷
overflow: hidden;
overflow: 內(nèi)容超出范圍時的處理方式
hidden: 隱藏
scroll: 滾動
empty清浮動
- 在需要清浮動的標簽的同一級上新建一個空的div empty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEIZI</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
background-color: blue;
vertical-align: top;
margin-top: 10px;
}
.son1, .son2{
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 10px;
}
.son2{
background-color: green;
}
.empty {
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">
靜夜思
</div>
<div class="son2">
思今夜
</div>
<div class="empty"></div>
</div>
</body>
</html>
偽類選擇器
- 通過使用偽類選擇器after和zoom方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEIZI</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.father{
width: 600px;
background-color: blue;
vertical-align: top;
margin-top: 10px;
}
/*清浮動之a(chǎn)fter，zoom方法*/
.father:after{
content: "測試";
display: block;
height: 0;
clear: both;
/*將標簽變成透明，隱藏*/
visibility: hidden;
}
.father{
/*兼容IE9以下*/
zoom: 1;
}
.son1, .son2{
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 10px;
}
.son2{
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">
靜夜思
</div>
<div class="son2">
思今夜
</div>
</div>
</body>
</html>
動畫
過渡動畫
關(guān)鍵幀動畫
快捷操作
pycharm
div + table鍵自動創(chuàng)建
<div\></div\>div{靜夜思}*2 + table 自動創(chuàng)建
<div>靜夜思</div>
<div>靜夜思</div>
- h${$級標題}*6 + table 自動創(chuàng)建
<h1>1級標簽</h1>
<h2>2級標簽</h2>
<h3>3級標簽</h3>
<h4>4級標簽</h4>
<h5>5級標簽</h5>
<h6>6級標簽</h6>
div.mark + table 自動創(chuàng)建
<div class="mark"></div>div#mark + table 自動創(chuàng)建
<div id="mark"></div>a[href="#"]{HOME}.link*2
(tr>td{單元格$}3)3
<tr>
<td>單元格1</td>
<td>單元格2</td>
<td>單元格3</td>
</tr>
<tr>
<td>單元格1</td>
<td>單元格2</td>
<td>單元格3</td>
</tr>
<tr>
<td>單元格1</td>
<td>單元格2</td>
<td>單元格3</td>
</tr>
