HTML語言和CSS開發
第一張 HTML基礎
1、HTML：超文本標記語言（它除了文字，還能寫圖片、視頻、音頻、交互），他不是編程語言，它是標記語言
2、
<!DOCTYPE html> HTML5版本申明
<html>
<head>
<meta charset="utf-8" /> 防止中文亂碼
<title>我的第一個網頁</title> 網頁標題
</head>
<body>
</body>
</html>
3、標簽：
<h1></h1> （ h1-h6） 標題標簽 <p></p> 段落標簽 <hr /> 水平線標簽 <br /> 換行標簽 <strong></strong> 加粗標簽 <em></em> 傾斜標簽
4、註釋
<!-- ........ -->
註釋和取消註釋的快捷鍵：Ctrl+?
5、特殊符號
空格：
大於號： >
小於號： <
引號： "
版權符號： ?
6、超鏈接
1、調到網址
<a href="https://www.baidu.com">百度</a>
2、調到本地的html頁面
<a href="01.html">首頁</a>
3、錨鏈接：調到本網頁的另外一個部位
<a href="#biaoji">新聞模塊</a> 根據下面的標記，href的值：在標記前加# <a name="biaoji"></a> 做的標記
4、
<a href="#" target="_blank"></a> _blank:在新的窗口裏面打開 _self 新的窗口會替換原來的窗口
5、超鏈接：取消下劃線
text-decoration:none
7、圖片鏈接：
<img src="" alt="圖片丟失的提示文字" title="鼠標懸浮" width="寬" height="高">
8、元素：
行內元素特點：
不獨占一行;不可鑲嵌其他元素；不可設置寬高。
塊元素：
獨占一行；可鑲嵌其他元素；可設置行高。
行內塊元素：
可設置行高。（display：iline-block）
第二章 列表,表格與媒體元素
1、列表
1.無序列表
<ul type="disc實心圓、square實心方塊、circle空心圓">
<li></li>
<li></li>
.....
</ul>
2.有序列表
<ol type="1/i/I/a/A">
<li></li>
<li></li>
.....
</ol>
3.自定義列表
<dl>
<dd><img src=""></dd>
<dt>圖片的文字介紹</dt>
.....
</dl>
list-style-image:url(圖片的路徑) ： 項目符號，自己添加圖標
list-style-position:inside; 左邊小圖片的位置，縮進
2、表格
<table border="1">
<tr>
<td>...</td>
</tr>
</table>
合並邊框：border-collapse：collapse;
跨行：rowspan=“3”；
跨列：colspan=“3”；
3、媒體元素
視屏：
方法一：
<video src="img/vedio.mp4" controls="controls" >
</video>
方法二： {loop循環播放 autoplay自動播放}
<video controls="controls" >
<source src="img/vedio.mp4" ></source>
</video>
音頻：
方法一：
<audio src="img/vedio.mp4" controls="controls" >
</audio>
方法二： {loop循環播放 autoplay自動播放}
<audio controls="controls" >
<source src="img/vedio.mp4" ></source>
</audio>
4、html結構元素：
header 頭部 footer腳部 section獨立區域 // aside側邊欄 article獨立內容 nav導航
5、iframe框架：
<iframe src="引用頁面網址" name="框架識別名"...><iframe>
第三章 表單
1、表單框架：
<form method="post或者get" action="#"/></form>
2、文本框：
<input type="text" name="#" value="#"/>
3、密碼框：
<input type="password" name="#" value="#"/>
4、隱藏域：
<input type="hidden" /> （暫時不起效果 真實存在但是不顯示出來）
5、三種按鈕：
<input type="submit" /> （遞交，提交按鈕）
<input type="reset" /> （重置按鈕）
<input type="button" value="button按鈕"/> （普通按鈕 暫時不起效果）
6、單選框：
<input type="radio" name="#" /> 男 （註意：name的必須一樣才能實現單選操作）
<input type="radio" name="#" /> 女
<input type="radio" name="#" checked /> 男 （加上checked屬性 設置默認值）
7、復選框：
<input type="checkbox" name="#" /> 運動
<input type="checkbox" name="#" /> 聊天
<input type=""checkbox" name="#" /> 聽音樂
<input type="checkbox" name="#" checked/> 運動 （ 加上 checked屬性 設置默認值）
8、圖片按鈕：
<input type="image" src="img/引入路徑"/>
9、文件域：
<input type="file" />
10、下拉列表框：
<select name="#">
<option>...</option> (selected是默認值在option內使用)
</select>
11、多行文本框：
<textarea rows="#" cols="#">默認值</textarea>
12、六個屬性：
type、value、size、maxlength、name、checked
13、郵箱框：
<input type="email" name="email" value="#"/>
14、數字框：
<input type="number" name="#" min="最小值" max="最大值" step="間距"/ > （value 是默認值 無限大）
15、滑輪框：
<input type="range" name="#" min="最小值" max="最大值" step="間距"/ > （value 是默認值 無限大）
16、搜索框：
<input type="search" name="#" />
<input type="submit" value="go"/>
17、網址框：
<input type="url name="#" value="#"/>
(url number email 都有自動檢測功能)
18、只讀：
<input type="text" name="#" value="#" readonly /> （不希望顧客修改數據）
19、禁用：
<input type="text" name=密碼，"#" value="#" disabled /> （不可操作此對話框）
20、表單元素標註 語義化：
<label for="變單元素的id">標註的文本</label>
列題：
<label for="nan">男</label>
<input type="radio" name="#" id="nan"/> 男
<label for="nv">女</label>
<input type="radio" name="#" id="nv"/> 女
21、placeholder：文本框默認值 文本框提示
required：必填項 填寫不能為空
pattern：正則表達式，jave中xue
22、接觸單詞：
form(表格)、method(方法)、action(功能)、input(輸入)、type(類型)、text(文本)、password(密碼)、radio(單選框)、checkbox(復選框)、
checked(檢查)、file(文件)、image(影像)、src(標準要求代碼)、select(挑選)、option(選項)、selected(選定 選中 入選)、textarea(文本框)、cols(列數目 垂直分割窗口 報表列數)、rows(返回引用中的行數 設置網格的行數 水平分割窗口)、
size(大小)、maxlength(最大長度 屬性 長度)、value(值)、submit(提交)、button(按鈕)、reset(重置)、email(郵箱)、number(數字)、min(最小值)、max(最大值)、id(坐標軸)、
step、range(範圍 值域 全距)、search(搜索)、url(網址)、readonly(只讀)、disabled(選定)、label(標簽)、placeholder(占位文本)、required必讀、pattern(模式)
第四章 初識CSS3
一、引入css樣式的3種方式
1、行內樣式：
<p style="color:red;width:200px;height:100px;">段落</p>
2、內部樣式
<head>
<style type="text/css">
p{#} （權限： 就近原則）
</style>
</head>
3、外部樣式:此方法，代碼量最少
在css文件夾裏面新建css文件
<head>
<link href="css/路徑.css" rel="stylesheet" type="text/css">
</head>
二、選擇器
css選擇器：3種
1、標簽選擇器 p{}
2、類選擇器 .top{} 權限：id>類>標簽
3、id選擇器 #top{}
層次選擇器：4種
1、後代選擇器 div p 中間加空格 {意思是div裏面全部帶p標簽的全部選擇}
2、子選擇器 div>p 中間大於號{意思是div相當於爺爺 下面第一個p標簽相當於他的兒子 被選中}
3、相鄰選擇器 div+p 中間加好 {和div平級也就是鄰居 而第一家鄰居被選擇}
4、通用鄰居選擇器 div~p 中間波浪號{和div的平級是鄰居 而此選擇器選擇的適合他的全部同級鄰居}
屬性選擇器：5個
1、 p[class]{#} 指全部class內容被選擇
2、p[class="XX"]{#} 指裏面選定的class}
3、p[class^="XX"]{#} 指所有p裏面首字母為xx的全部選擇
4、p[class$="XX"]{#} 指所有p裏面尾字母為xx的全部選擇
5、p[class*="XX"]{#} 指所有p裏面含有字母為xx的全部選擇
結構偽類選擇器：6個 （分兩類：第一類不能二次選擇 第二類可以）
1、ul ：first-child{#} 指ul列表裏的第一個
2、ul ：last-child{#} 指ul列表裏的最後一個
3、ul ：nth-child{#} 指定ul列表中的其中一個 例子：[nth-child(3)]指定的第三個
4、ul ：first-of-type{#} 指定ul列表中所有標簽類型的第一個
5、ul ：last-of-type{#} 指定ul列表中所有標簽類型的最後一個
6、ul ：nth-of-type{#} 指定ul列表中所有標簽類型的其中一個 例子：各標簽中[nth-child(3)]指定的第三個
1. 1~3中 ul與：之間需要加空格
2. 1~3中 ul與：之間加任何標簽類型都沒有效果 它指選擇原本的屬性
3. 4~6中 ul與： 之間可以加單獨的標簽選擇器 做單獨選擇
第五章 CSS3美化網頁元素
<span>標簽：
<span>標簽是用來組合HTML文檔的行內元素的，它沒有固定的格式表示，只有對它應用CSS樣式時，才會產生視覺上的變化。
字體風格：
在CSS中，使用font-style屬性設置字體的風格，font-style屬性有三個值：normal（標準的字體樣式）、italic（斜體字體樣式）、oblique（傾斜的字體樣式）
文本顏色
1、RGB
在HTML頁面中，顏色統一采用RGB格式，也就是通常人們所說的"紅藍綠"三原色模式。每種顏色都由這三種顏色的不同比例組成，按十六進制的方法中，如前兩位表示表示紅色分量，中間兩位表示綠色分量，後面兩位表示藍色分量。
RGB還有一種表示方法如下：
rgb（r,g,b）
以上R、G、B三個參數，正整數的取值為0~250；百分比的取值為0%~100%超出範圍值將截止其最近的取值極限。三個參數都不能去負數。
2、RGBA
在CSS3中，RGBA在RGB基礎上增加了控制alpha透明度的參數，其中這個透明通道值為0~1，如果是0，表示完美透明，如果是1表示完全不透明。透明度的取值不能是負數。
常用字體屬性、含義及用法——
屬性名 含義 舉列
font-family 設置字體類型 font-family："隸書";
font-size 設置字體大小 font-size：12px;
font-style 設置字體風格 font-style：italic
font-weight 設置字體的粗細 font-weight：bold；
font 在一個聲明中所設置所有字體屬性 font：italic bold 36px "宋體"
font-weight（設置字體的粗細）屬性的值——
值 說明
normal 默認值，定義標準的字體
bold 粗體字體
bolder 更粗的字體
lighter 更細的字體
100、200、300、400、500、600、700、800、900 定義由細到粗的字體，400等同於normal，700等同於bold
常用的文本屬性、含義及用法——
屬性 含義 舉例
color 設置文本顏色 color：#00C；
text-align 設置元素水平對齊方式 text-align：right；
text-indent 設置首行文本的縮進 text-indent：20px;
line-beight 設置文本的行高 text-beight:25px;
text-decoration 設置文本的裝飾 text-decoration：underline；
text-align（水平對齊方式）屬性常用值——
值 說明
left 把文本排列到左邊，默認值，由瀏覽器決定
right 把文本排列到右邊
center 把文本排列到中間
justify 實現兩端對齊文本效果
text-decoration（文本裝飾）的常用值——
值 說明 none 默認值，定義的標準文本 underline 設置文本的下劃線 overline 設置文本的上劃線 line-through 設置文本的刪除線
文本陰影——
語法
text-shadow：color x軸位移（x-offset） y軸位移（y-offset） 模糊半徑（blur-radius）;
（1）color：陰影顏色，定義繪制陰影時所使用的顏色，如果不設置這個值，會使用文本的顏色作為陰影的顏色，陰影顏色可以是十六進制顏色、RGB顏色、RGBA透明度等。
（2）X-offset：X軸位移，用來指定陰影水平位移量，其值可以是正值或負值，如果為正值，陰影在對象的右邊，反之陰影在對象的左邊
（3）Y-offset：Y軸位移，用來指定陰影水平位移量，其值可以是正值或負值，如果為正值，陰影在對象的底部，反之陰影在對象的頂部
（4）blur-radius：陰影模糊半徑，代表陰影向外模糊的模糊範圍。值越大陰影向外模糊範圍越大，陰影的邊緣就越模糊。這個值只能是正值，如果為0，表示不懼有模糊效果。
超鏈接偽類——
語法
a(標題名)：hover（偽類名）{color：red(聲明)}
CSS設置偽類的順序
a:link—a:visited—a:hover—a:active
偽類名稱 含義 示例
a:link 單擊訪問前的超鏈接樣式 a:link{color:red}
a:visited 單擊訪問後的超鏈接樣式 a:visited{color:red}
a:hover 鼠標懸浮其上的超鏈接樣式 a:hover{color:blue}
a:active 單擊未釋放的超鏈接 a:active{color:blue}
樣式列表
CSS列表屬性來設置列表樣式：
list-style-image屬性是使用圖像來替換列表項的標記
list-style-position屬性是設置在何處放置列表項的標記
list-style-type屬性設置列表項標記的類型
list-style屬性表示在一個聲明中設置所有列表屬性
list-style-type屬性（設置列表項標記的類型）的屬性值
值 說明 語法示例
none 無標記符號 list-style-type：none；
disc 實心圓，默認類型 list-style-type：disc；
circle 空心圓 list-style-type：circle；
square 實心正方形 list-style-type：square；
decimal 數字 list-style-type：decimal；
第六章 盒子模型
1、盒子模型
內邊距：padding
外邊距：margin
Width： 寬
Height： 高
Border： 邊框
Content：內容
2、邊框：
顏色：border-color {rgb，rgba，color}
風格：border-style {solid實線 ，dashed虛線， dotted點線 ，double雙線，none無樣式}
粗細：border-width {像素 px}
復合屬性：粗細 顏色 像素
3、盒子外邊距屬性：
margin-left 左
margin-right 右 【Margin可以有負值 ， padding不能是負值】
margin-top 上
margin-bottom 下
復合屬性：margin:#px #px #px #px;
4、內邊距屬性：
padding-left 左
padding- right 右
padding-top 上
padding-bottom 下
復合屬性：padding:#px #px #px #px;
5、盒子尺寸計算：
內部盒子大小=border+padding+內容寬/高
外部盒子大小=margin+border+padding+內容寬/高
6、盒子box-sizing：
box-sizing：
content-box；外部
border-box； 內部 固定大小
7、圓角邊框：
border-radius：0px 0px ；
Border-radius:50% 圓圈
8、盒子陰影：
box-shadow：inset（陰影類型） x軸 y軸 blur-radius（半徑）color（顏色）；
【一個值； 上下左右
兩個值； 第一個值上下 第二個值左右
三個值； 第一個值上 第二個值左右 第三個值下
四個值；第一個值上 第二個值右 第三個值下 第四個值左 順時針轉】
border-color屬性設置方法(邊框顏色)
屬性 說明 示例
border-top-color 設置上邊框顏色 border-top-color:#369;
border-right-color 設置右邊框顏色 border-right-color:#369;
border-bottom-color 設置下邊框顏色 border-bottom-color:#FAE45B;
border-left-color 設置左邊框顏色 border-left-color:#EFCD56;
border-color 設置四個邊框顏色 border-color:#EEFF34;
border-color 設置上邊框顏色,設置上邊框顏色 border-color:#369 #000;
border-width屬性設置方法(邊框粗細)
屬性 說明 示例
border-top-width 設置上邊框粗細為5px border-top-width:5px;
border-right-width 設置右邊框粗細為10 border-right-width:10px;
border-bottom-width 設置下邊框粗細為8 border-bottom-width:8px;
border-left-width 設置左邊框粗細為22 border-left-width:22px;
border-width 四個邊框粗細都為5 border-width:5px;
border-width 上下為20,左右為2 border-width:20px 2px;
border-width 上為5,左右為1px,下為6 border-width:5px 1px 6px;
border-width 上1,右3,下5,左2 border-width:1px 3px 5px 2px;
border-style屬性設置方法(邊框樣式)
屬性 說明 示例
border-top-style 設置上邊框為實線 border-top-style:solid;
border-right-style 設置右邊框為實線 border-right-style:solid;
border-bottom-style 設置下邊框為實線 border-bottom-style:solid;
border-left-style 設置左邊框為實線 border-left-style:solid;
border-style 四個邊框粗細都為為實線 border-style:solid;
border-style 上下為實線,左右為點線 border-style:solid dotted;
border-style 上實線,左右點線,下虛線 border-style:solid dotted dashed;
border-style 上實線,右點線,下虛線,左雙線 border-style:solid dotted dashed double;
外邊距
外邊距屬性設置方法
屬性 說明 示例
margin-top 設置上外邊距 margin-top:1px;
margin-right 設置右外邊距 margin-right:5px;
margin-bottom 設置下外邊距 margin-bottom:1px;
margin-left 設置左外邊距 margin-left:6px;
margin 上1,右3,下5,左2 margin:1px 3px 5px 2px;
margin 上下為20,左右為2 margin:20px 2px;
margin 上為5,左右為1px,下為6 margin:5px 1px 6px;
margin 上右下左為8 margin:8px;
內邊距屬性設置方法
屬性 說明 示例
padding-top 設置上外邊距 padding-top:1px;
padding-right 設置右外邊距 padding-right:5px;
padding-bottom 設置下外邊距 padding-bottom:1px;
padding-left 設置左外邊距 padding-left:6px;
padding 上1,右3,下5,左2 padding:1px 3px 5px 2px;
padding 上下為20,左右為2 padding:20px 2px;
padding 上為5,左右為1px,下為6 padding:5px 1px 6px;
padding 上右下左為8 padding:8px;
第七章 浮動
一、解決塌陷的四種方法：
1.在父級style中加：{overflow:hidden} 常用 簡單便捷
2.在父級style中設高：{height：800px} 不常用不好控制
3.在父級中加：class="clear" style中是設置三個屬性缺一不可（例題如下）
4.clear：after{ content:"空的"； clear:"both"； diaplay:"block"；} 比較麻煩效果好
5.在網頁下加：一個空的div加class="clear" 在style中設置.clear{ clear:"both"；} 影響代碼頁面美觀繁瑣
二overflow：四個屬性（處理內容溢出 也使用overflow）
1.visible: 多的地方溢出可見
2.hidden: 多的地方溢出被可見
3.scroll： 兩邊都有滾動條 （兩者區別：在寬或高足夠的情況下可明顯看出）
4.auto： 一邊都有滾動條
三、清除浮動：（用於沒有設置浮動 但是受其他浮動div影響 而脫離原來的標準文檔流）
clear屬性：
1.clear="left" 清除左邊浮動的影響
2.clear="right" 清除右邊浮動的影響
3.clear="both" 清除左，右兩邊浮動的影響
4.clear="none" 默認屬性 允許來自兩邊的浮動影響
四、浮動
float屬性：1.float="left" 向左邊浮動
2.float="right" 向右邊浮動
* 浮動完畢的內容沒有空隙
五、display
display屬性：
display-block 內變塊
display-iline 塊變內
display：iline-block 行內塊 （可設置寬高）
display：none 設置元素不被顯示 可以用於偽類（例子）
控制隱藏 p：hover img{ display：none；}
六、標註文檔流
標準文檔流 指 自己原本的屬性特點
脫離標準文檔流 指 改變自己原本的屬性特點
塊元素：獨占一行；可鑲嵌其他元素；可設置行高。
行內元素：不獨占一行;不可鑲嵌其他元素；不可設置寬高。
行內塊：可設置行高。（display：iline-block）
第八章 定位網頁元素
01、定位的語法
聲明：position
取值：static： 靜態，保持當前位置不變
relative：相對定位
absolute：絕對定位
fixed： 固定定位(網頁跟隨)
02. 相對定位
語法:
a{
position:relative;
top:-20px;
left:20px;
}
以元素原本的位置為基準，如果什麽都不設置，元素位置不變
通過設置top，right，bottom，left的值，來改變元素位置
註意：相對定位的元素，依然在標準文檔流中，會占用網頁空間
03. 絕對定位
a{
pasition:absolute;
top:0px;
right:0px;
}
以上一級元素定位過的位置為基準，
如果上級元素沒定位，就以瀏覽器邊框為基準，來改變元素位置
註意：1.絕對定位，是以上級元素為基準
2.絕對定位之後，元素脫離標準文檔流
3.絕對定位之後，有可能會覆蓋下面的內容
04.固定定位
a{
position:fixed;
right:0px;
bottom:0px;
}
05. 層疊關系
設置兩個互相覆蓋的盒子，設置她倆誰顯示在上面
語法：z-index
取值：-1~無限大
重點註意：z-index只對定位過的盒子生效
如果要設置沒定位的盒子在上面，
需要把定位過的盒子z-index值設為-1
06. 元素透明度
設置元素的透明效果，可以展示出下層元素的內容
聲明：opacity:x
filter:alpha(opacity=x)
取值：0-1。0就是全透明，1是不透明，中間的值就是半透明
第九章 利用CSS3制作網頁動畫
01、變形
transform:變形 變形的元素必須是塊級元素
2D位移 transform:translate(___px,___px) (左右平移的像素,上下平移的像素);
2D縮放 transform:scale(____) (縮放的倍數);
2D傾斜 transform:skew(___deg,___eg) (左右傾斜的角度,上下傾斜的角度); 角度的單位是deg
transform:rotate (改變的角度);
統一使用
transform:translate(90px, 90px) scale(2) rotate(45deg) ;
02. 過渡
transition-property:_______ (要過渡或動態模擬的CSS的屬性)
transition-duration: ________s;(指定完成過渡所需要的時間)
transition-timing-function:________;(指定過渡動畫函數)
transition-delay:_______ ;(過渡延遲時間:可以為正值,負值和0)
簡寫:
transition:要過渡的屬性 過渡的時間 過渡的方式 延遲時間
常見的幾種過度動畫方式如下:
ease(默認值)
linear(勻速運動)
ease-in(漸顯效果)
ease-out(漸影效果)
ease-in-out(漸顯漸影效果)
03. 動畫
創建動畫
@keyframes name(動畫名){
0%{ 改變的屬性和值}
50%{ 改變的屬性和值}
100%{ 改變的屬性和值}
}
調用動畫
animation:animation-name animation-duration animation-timing-functionanimation-delayanimation-iteration-count animation-play-state animation-fill-mode;
animation:動畫名稱 動畫的播放時間 動畫的播放方式 開始播放動畫的時間 動畫的播放次數 動畫的播放方向 動畫的播放狀態 動畫時間外屬性
實現的次數:infinite 無限次
HTML語言和CSS開發