文章目錄
1 HTML
網頁=標題+鏈接+圖片+視頻+文字+聲音+表單
1.1 概念
（1)超文本標記語言
（2)用來設計網頁的程序，也是一種計算機語言。
（3）網頁文件的格式：以htm或者以html結尾
（4）網頁是用瀏覽器打開，最後在瀏覽器窗口中顯示設計效果。
1.2 標記語法
(1）標記語法：<起始標記 屬性名="屬性值" .....>標記的內容</結束標記>
(2)規則
1)不區分大小寫
2)一般成對出現,極少數單獨出現
3)可相互嵌套,但不能交叉嵌套(先開始的後結束)
4)屬性如果起衝突,就近原則.
(3)固定框架
<html>
<head>
<title>這張網頁的標題</title>
</head>
<body>
這網頁的內容
</body>
</html>
(4)語法規定了所有的html標記,有哪些標記,標記有哪些屬性
標記
1.文本標記
1)標題標記
<h1..6 align="left|center|right" ><h1..6>
2)段落標記
<p align="left|center|right"></p>
3)換行
<br>
4)水平線
<hr color="顏色" size="粗細" width="寬度" align="center|left|right" noshade>
5)居中
<center></center>
6)加粗 <b></b> <strong></strong>
7)斜體 <i></i> <em></em>
8)下劃線 <u></u>
9)上部標識 下部標識 <sub></sub> <sup></sup>
10)刪除線 <s></s>
2.圖片標記
路徑
絕對路徑：（根據文件自己當前的位置，去尋找目標文件） 常用方法
./ 表示當前路徑
../ 表示返回上一級目錄或文件夾
相對路徑：（硬盤盤符開始，網站項目中不可使用）（D://file/img/11.jpg）
<img src="該圖片的路徑" alt="顯示文字" width="寬度" height="高度" hspace="水平空白" vspace="垂直空白"></img>
根路徑：（/root/www/img/111.jpg）
3.超鏈接
<a href="" target="_self|_blank(新打開一個窗口)"> </a>
錨鏈接
1.定義錨點<a name="錨點名"> </a>
2.跳入<a href="網頁路徑#錨點名"></a>
4.列表
有序
<ol type="1|A|a|I|i" start="開始位置">
<li></li>
<li type="1|A|a|I|i"></li>
</ol>
無序
<ul type="disc(實現圓) |circle(空心圓)| square(正方形)">
<li></li>
<li></li>
</ul>
定義列表
<dl>
<dt>小標題
<dd>具體內容
<dt>小標題
<dd>具體內容
</dl>
5.表格的方式
1.完整版
<table>
<caption></caption>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<tfoot>
<tr><th></th></tr>
<tr><td></td></tr>
</tfoot>
</table>
2.常見版本
<table>
<tr><th></th></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
3.普通
<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
table 屬性：
frame：控制表格最外層的四條框線
border:邊框粗細
bordercolor:邊框顏色
bgcolor:背景顏色
background:背景圖片
cellspacing:單元格與單元格之間的距離
cellpadding:單元與數據之間的距離
width:寬度
height:高度
rules:表格行和列的線 none all cols rows
caption 屬性
align:center(top)|left|right|bottom
tr 屬性
align:水平位置 left|center|right
valign:垂直位置 middle |top|bottom
bordercolor:邊框顏色
bgcolor:背景顏色
background:背景圖片
width:寬度
height:高度
th,td 屬性
align:水平位置 left|center|right
valign:垂直位置 middle |top|bottom
bgcolor:背景顏色
background:背景圖片
width:寬度
height:高度
1.3 表單
表單：表單是指用於實現客戶端（網頁瀏覽者）與服務器端（網頁擁有者）之間信息交互的一種頁面元素，在WWW上它被廣泛用於各種信息的搜索和反饋。常見的表單有用戶登錄、搜索引擎、註冊、用戶留言等。
1.語法
<form action="提交的url地址" method="get|post" name="all">
表單元素
</form>
2.提交數據的方式：
get 不安全，因爲會將提交的數據顯示在地址欄裏面，並且因爲地址欄的長度有限，所以提交的數據大小也有限；
post 安全的，因爲將提交的數據封裝起來，所以它所提交的數據大小是無限的。
3.表單元素：
文本框：<input type='text' name='別名' value='默認值' size='' maxlength='允許輸入的字符的最大長度'/>
密碼框：<input type='password' name='' value='' size='' maxlength=''/>
單選框：<input type='radio' name='' value='' checked=''/>提示名
name保持一致，才能實現單選
多選框：<input type='checkbox' name='' value='' checked=''/>提示值
文件域：<input type='file' name='' />
提交按鈕：<input type='submit' value='' />
按鈕：<input type='button' value=''/>
重置按鈕：<input type='reset' value=''/>
隱藏文本域：<input type='hidden' value='' name='' />
圖片：<input type='image' name=''/>
文本域：<textarea cols='' rows=''></textarea>
下拉列表：
<select name='' size= >
<option value=''>提示值</option>
<option value=''>提示值</option>
<option value=''>提示值</option>
</select>
1.4 聲像
<video src="HD_VBR35.mp4" controls="controls" width="500px" height="500px">
您的瀏覽器不支持 video 標籤。
</video>
1.5 框架集：
<!--劃分-->
<frameset rows="10%,*,10%" >
<!--導入頁面-->
<frame src="top.html" name="A1" scrolling="no"/> 去掉滾動條
<frame src="center.html" name="A2" scrolling="no"/>
<frame src="foot.html" name="A3" scrolling="no"/>
</frameset>
導入頁面
<iframe src="top.html" width="100%"></iframe>
保留原樣:<pre> 	-----tab鍵 </pre>
常用特殊字符
空格
版權 ©
註冊 ®
> >
< <
& &
" &qout;
滾動標記
<marquee width="" height="" loop="滾動次數" align="" behavior="滾動方式: scroll slide alternate(兩端之間來回滾動)"
scrollamount="滾動速度" scrolldelay="一字一頓" direction="up|down|left|right" hspace="" vspace="">
></marquee>
2 CSS3
2.1 CSS級聯樣式
HTML是定義網頁的內容,CSS定義網頁內容的樣式
標籤
行內（無法固定高度）:a,input,img,form,...span
塊級（換行標籤）:button,hr,p,h1...h6,ul,ol,li,dd,dt,dl,table,tr,td,th... div
2.1.1 分類
1.行內樣式
在每一個標記裏面寫入 style="樣式屬性" <!--極不推薦使用-->
2.內部樣式
在head下面添加
<style type="text/css">
選擇器....
</style>
3.外部樣式
2.1.2 選擇器
標籤選擇器:
標記名{樣式屬性:屬性值;樣式屬性:屬性值;.....}
id選擇器:(id優先於class)
#名字1 {樣式屬性:屬性值;樣式屬性:屬性值;....}
class選擇器:(可以有多個值 每個值之間用空格隔開)
.名字2 {樣式屬性:屬性值;樣式屬性:屬性值;....}
*通配符選擇器
所有標記都是該樣式 (全局樣式)
*{margin:0px auto;}
其他看API
2.1.3 樣式屬性
字體font複合屬性
font-style:字體風格 normal | italic
font-variant:小轉大normal | small-caps(小寫自動轉爲大寫)
font-weight:字體粗細 normal| bold |bolder | lighter
font-size:字體大小 120px;
line-height:1px：字之間的行高，行間距
font-family:字體
color:字體顏色 color:rgba(255,0,0,1)：正紅——————rgba---a透明度(0-1)
text-decoration:字體修飾:none|underline|line-through|overline
letter-spacing: 12px：字間距
文本屬性
text-indent:文本縮進 +後退 -朝前 px
背景
background複合屬性:
background-color:背景顏色
background-image:背景圖片
background-size:背景圖片大小
background-repeat:repeat | repeat-x |repeat-y | no-repeat
background-attachment:scroll|fixed(固定)
background-position:背景偏移量
background-image:多個背景圖片
background-position:left top ，多個偏移量（2）
截取圖片實例：
<title>截取圖標</title>
<style type="text/css">
.bgImg{
background-image: url(proctice03/icons.png);
/*1.先確定背景大小 背景圖片的大小決定了這個裏的大小*/
width: 22px;
height: 23px;
/*移動量 偏移量*/
background-position: -597px -91px;
}
.bgImg2{
background-position: -621px -91px;
}
.bgImg3{
background-position: -20px -214px;
}
.bgImg4{
background-position: -621px -166px;
}
</style>
</head>
<body>
<ul>
<li class="bgImg"></li>
<li class="bgImg bgImg2"></li>
<li class="bgImg bgImg3"></li>
<li class="bgImg bgImg4"></li>
</ul>
</body>
結果：
2.1.4 佈局 、定位
佈局
float:none|left|right
clear:none|left|right|both
隱藏
1.不佔用當前的位置
display:none| block;
2.佔用當前位置
visibility:hidde| inherit ;
邊距
外邊距(margin):當前標記的邊距和外部內容之間的距離
內邊距(padding):當前標記的邊距局四周的內容的距離
如果提供全部四個參數值，將按上－右－下－左的順序作用於四邊。
如果只提供一個，將用於全部的四邊。
如果提供兩個，第一個用於上－下，第二個用於左－右。
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
margin-top:
margin-left:
margin-bottom:
argin-right:
定位
position:
absolute:絕對定位,脫離文檔流的佈局,基於文檔流開始遺留空白,由後面的元素來補充,定位開始的位置一般父級元素,否則基於body.
relative:相對定位,不脫離文檔流的佈局,只改便自己本身的位置,在自己原來的區域開始定位,定位起始位置原本在文檔流中的位置.
static:默認值,無特殊定位.
fixed:固定位置,類似absolute,但是不隨着滾動條滾動而改變位置.
框架:
<iframe src="top.html" frameborder="0" scrolling="no" width="100%" height="200px">
</iframe>
邊框:
border:複合屬性
border-color : color
border-style: 邊框風格
border-radius: 50%; 變成圓形
列表:
list-style:none ————去掉無序列表前的圓點
list-style-image:
list-style-position:
list-style-type:
僞類:
a:link{超鏈接未被訪問之前的樣式}
a:hover{當鼠標懸浮在超鏈接之上的樣式}
a:active{當鼠標點擊與釋放超鏈接的樣式}
a:visited{超鏈接被訪問之後的樣式}
opacity：透明度
2.1.5 盒模型
2.1.6 僞類選擇器
前綴
Firefox -moz-
Sofari -webkit-
Opera -o-
IE -ms-
選擇器：
CSS3 選擇器——屬性選擇器 ：
E[attr]：只使用屬性名，但沒有確定任何屬性值；
E[attr="value"]：指定屬性名，並指定了該屬性的屬性值；
E[attr~="value"]：指定屬性名，並且具有屬性值，此屬性值是一個詞列表，
並且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“?”不能不寫；
E[attr^="value"]：指定了屬性名，並且有屬性值，屬性值是以value開頭的；
E[attr$="value"]：指定了屬性名，並且有屬性值，而且屬性值是以value結束的；
E[attr*="value"]：指定了屬性名，並且有屬性值，而且屬值中包含了value；
E[attr|="value"]：指定了屬性名，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn）;
CSS3 選擇器——僞類選擇器 ：
:hover用於當用戶把鼠標移動到元素上面時的效果；
:active用於用戶點擊元素那一下的效果（正發生在點的那一下，鬆開鼠標左鍵此動作也就完成了）
:focus用於元素成爲焦點，這個經常用在表單元素上
:enabled
:disabled
:checked
:first-child選擇某個元素的第一個子元素；
:last-child選擇某個元素的最後一個子元素；
:nth-child()選擇某個元素的一個或多個特定的子元素；
:nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；
:nth-of-type()選擇指定的元素；
:nth-last-of-type()選擇指定的元素，從元素的最後一個開始計算；
:first-of-type選擇一個上級元素下的第一個同類子元素；
:last-of-type選擇一個上級元素的最後一個同類子元素；
:only-child選擇的元素是它的父元素的唯一一個了元素；
:only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
:empty選擇的元素裏面沒有任何內容
2.1.7 陰影、漸變、旋轉
屬性：
1.border-radius是向元素添加圓角邊框。
border-radius:10px; /* 所有角都使用半徑爲10px的圓角 */
border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */
不要以爲border-radius的值只能用px單位，你還可以用百分比或者em，但兼容性目前還不太好。
2.box-shadow是向盒子添加陰影，支持添加一個或者多個。
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
注意：inset 可以寫在參數的第一個或最後一個，其它位置是無效的。（內陰影）
3.陰影模糊半徑與陰影擴展半徑的區別：
陰影模糊半徑：此參數可選，其值只能是爲正值，如果其值爲0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴展半徑：此參數可選，其值可以是正負值，如果值爲正，則整個陰影都延展擴大，反之值爲負值時，則縮小；
/*1負左下角2負右上角 12負左上角 */
border-image：顧名思義就是爲邊框應用背景圖片，它和我們常用的background屬性比較相似
RGB是一種色彩標準，是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來得到各式各樣的顏色。RGBA是在RGB的基礎上增加了控制alpha透明度的參數。
以上R、G、B三個參數，正整數值的取值範圍爲：0 - 255。百分數值的取值範圍爲：0.0% - 100.0%。超出範圍的數值將被截至其最接近的取值極限。並非所有瀏覽器都支持使用百分數值。A爲透明度參數，取值在0~1之間，不可爲負值。
background-color:rgba(100,120,60,0.5);
4.linear-gradient 顏色漸變
overflow:hidden;/*多出來的字選擇影藏*/
white-space:nowrap;/*設置文本只能顯示一行*/
text-overflow:ellipsis;/*使用是省略號*/
5.@font-face能夠加載服務器端的字體文件，讓瀏覽器端可以顯示用戶電腦裏沒有安裝的字體。
@font-face {
font-family : 字體名稱;
src : 字體文件在服務器上的相對或絕對路徑;
}
6.text-shadow可以用來設置文本的陰影效果。
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示陰影的水平偏移距離，其值爲正值時陰影向右偏移，反之向左偏移；
Y-Offset：是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移，反之向上偏移；
Blur：是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設置爲0；
Color：是指陰影的顏色，其可以使用rgba色。
text-shadow: 0 1px 1px #fff
7.background-origin：設置元素背景圖片的原始起始位置。
background-origin ：border-box背景從邊框開始 padding-box從邊框內開始 | content-box; 內容開始
background-clip：用來將背景圖片做適當的裁剪以適應實際需要。
background-clip ： border-box | padding-box | content-box | no-clip 不裁切
transform:
1、旋轉rotate()函數
設置元素順時針旋轉的角度，用法是：
transform: rotate(x);
參數x必須是以deg結尾的角度數或0，可爲負數表示反向
2、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；
設置元素傾斜的角度，用法包括：
transform: skew(a, b); 元素x方向逆時針傾斜角度a，y方向順時針傾斜角度b
transform: skewX(a); 元素x方向逆時針傾斜角度a，y方向不變
transform: skewY(b); 元素y方向順時針傾斜角度b，想方向不變
以上的參數均必須是以deg結尾的角度數或0，可爲負數表示反向。
3、縮放 scale()函數 讓元素根據中心原點對對象進行縮放。(0.5縮小，1.5擴大)
設置元素放大或縮小的倍數，用法包括：
transform: scale(a); 元素x和y方向均縮放a倍
transform: scale(a, b); 元素x方向縮放a倍，y方向縮放b倍
transform: scaleX(a); 元素x方向縮放a倍，y方向不變
transform: scaleY(b); 元素y方向縮放b倍，x方向不變
4、translate()函數可以將元素向指定的方向移動，類似於position中的relative。或以簡單的理解爲，使用translate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。
設置元素的位移，用法爲：
transform: translate(a, b); 元素x方向位移a，y方向位移b
transform: translateX(a); 元素x方向位移a，y方向不變
transform: translateY(b); 元素y方向位移b，x方向不變
2.1.8 動畫
變形與動畫
transition-property:指定過渡或動態模擬的CSS屬性
transition-duration:指定完成過渡所需的時間
transition-timing-function:指定過渡函數
transition-delay:指定開始出現的延遲時間
定義動畫：
/*定義動畫*/
@keyframes 動畫名稱{
/*動畫效果*/
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(-180deg);
}
100%{
transform: rotate(-360deg);
}
}
animation-name:引用動畫名;
animation-duration:10s; /*動畫播放時間*/
animation-timing-function:ease-out; /*播放的方式 */
animation-delay: .2s; /*動畫開始播放的時間*/
animation-iteration-count:5; /*播放次數 infinite 無數次 注意：Chrome或Safari瀏覽器，需要加入-webkit-前綴！*/
animation-direction:alternate; /*normal畫的每次循環都是向前播放 alternate 來回滾動*/
animation-play-state: paused; /*動畫停止*/
補充
id和class區別
- name ：指定標籤的名稱
- id ：指定標籤的唯一標識。
- class ：指定標籤的類名。
- 在CSS文件裏書寫時，ID加前綴"#"；CLASS用"."
- ID是一個標籤，用於區分不同的結構和內容，就象名字，如果一個屋子有2個人同名，就會出現混淆；class是一個樣式，可以套在任何結構和內容上，就象一件衣服；
- id一個頁面只可以使用一次；class可以多次引用。
- 優先級：id>name>class
- 優先級：精確定位的準確度，CSS選擇器選擇的先後順序。
- getElementById()返回固定id的對象，HTML文檔中id對象一般是唯一的；getElementsByName()和getElementsByClassName()返回的是一個數組，HTML文檔中name屬性和class屬性不是唯一的
- 用法舉例
<input type="radio" name='sex'/>男
<input type="radio" name='sex'/>女
<input type=password id="userpwd" />
<input type=button class="btnsubmit" />
原文鏈接：https://blog.csdn.net/lee18254290736/article/details/81032687