html中各種標簽和屬性（最基礎的基本都有）

1、標題標簽： h1~h6  ctrl+1~6

2、段落標簽： p      ctrl+shift+p

3、換行標簽： br     shift+回車

4、水平線：   hr

5、加粗標簽： strong  ctrl+b

6、傾斜標簽： em     ctrl+i

7、空格標簽：  

8、圖片標簽：<img src=’圖片路徑’ alt=’圖片加載錯誤提示文字’ title=’鼠標懸停文字’ width=’寬度’  height=’高度’ />

9、超鏈接：<a href=’鏈接路徑’  traget=’_blank’>文本/圖片</a>

10、錨鏈接：

(1)      定義錨：給標簽加id屬性，id=”top”

(2)      跳轉到錨：<a href=”#top”>top</a>

11、行級標簽

     1.Strong

     2.Em

     3.A

     4.Img

12、塊級標簽

1.標題標簽

2.段落標簽

Display：inline-block設置元素具有行級標簽和塊級標簽的屬性

.da dl dd p:nth-of-type(1)：當dd下面的段落p有好幾個的時候，你有只想給第一個段落p加樣式的時候用到這個！！！

 

Float：浮動

Z-index：層次 z-index：1比z-index：2 低一層

設置div半透明的代碼：opacity:0.7；

設置div溢出隱藏的代碼：overflow:hidden;

設置css的動畫效果：transition: all 0.5s linear

                                   1、linear：規定以相同速度開始至結束的過渡效果

                                   2、ease：規定慢速開始，然后變快，然后慢速結束的過渡效果

                                   3、ease-in：規定以慢速開始的過渡效果

                                   4、ease-out：規定以慢速結束的過渡效果                                   

                                   5、ease-in-out：規定以慢速開始和結束的過渡效果

設置css時圖片在div中同比例放大或者同比例縮小：transform: scale(1.1)

 

 

 

第二章

1、無序列表標簽： ul  li

2、有序列表標簽： ol  li

3、定義列表標簽： dl  dt  dd

4、表格：

(1)      Table

①     Tr 行

②     Td 單元格

③     thead標簽：表格的表頭

④     Tbody標簽：表格的主體

(2)      合並行：rowspan

(3)      合並列：colspan

(4)      表格內部的框合並（雙線框變單線框）border-collapse:collapse;

5、視頻播放

(1)      Video autoplay自動播放 control控制按鈕

①     Sorce src=’視頻的地址’

1、內聯框架

(1)      Iframe

 

 

6、網頁結構

(1)      頭部：header

(2)      主體：section

(3)      底部：footer

 

第三章

1、表單：<form  method=post action=’提交的地址’>表單元素</form>

2、表單元素：<input type=’表單元素類型’ name=’名稱’ value=’默認值’ />

(1)      文本框：type=text  （用戶名，編號....）

(2)      密碼框：type=password（密碼）

(3)      單選按鈕：type = radio（選男還是選女）

(4)      復選框：type=checkbox（愛好.....）

(5)      數字：type=number

(6)      電子郵箱：type=email

(7)      網址：type=url

(8)      文件：type=file（上傳頭像....）

(9)      下拉列表框<select name=’city’><option>濟南市</option><option>青島市</option></select>（像選擇城市，選擇時間）

(10)   文本域：<textarea cols=’列’ rows-’行’></textarea>（像個人簡介之類的）

(11)   圖像按鈕：type=image（注冊選擇的是點擊圖片就用到了這個）

(12)   提交按鈕：type=submit（立即注冊）

(13)   重置按鈕：type=reset（重新注冊）

(14)   想讓文本框中出現提示詞語的話用這個：placeholder:”請填寫正確的密碼”；

3、表單的高級應用

(1)      只讀（readonly="readonly"）

(2)      禁用（）

(3)      表達你的初級驗證：placeholder（搜索提示）

                      Required（非空）

                      Pattern（正則表達式，就是手機號必須是11位之類的）

 

 

 

第四章

1、選擇器

(1)      標簽選擇器：直接用標簽名字命名，不需要調用

(2)      類選擇器：.類名   調用：class=’類名’

(3)      ID選擇器：#名稱   調用：id=’名稱’  id選擇器一個頁面只能用一次

(4)      優先級：id>類>標簽

2、高級選擇器

(1)      層次選擇器

①     后代選擇器：E F

②     子選擇器：E>F

③     相鄰兄弟選擇器：E+F

④     通用兄弟選擇器：E~F

(2)      結構偽類選擇器

①     E:fist-child  取得第一個標簽

②     E:last-child  取得最后一個標簽

③     E:nth-of-type(n) 取得第n個標簽

(3)      屬性選擇器

①     E[attr]:具有attr屬性的E標簽

②     E[attr=val]:具有attr屬性且值等於val的E標簽

③     E[attr^=val]: 以val開頭的.....

④     E[attr$=val]:以val結尾的....

⑤     E[attr*=val]：包含val的....

第五章

1. Color:字體顏色
2. Font-size：字體大小
3. Font-weight：字體粗細：bold粗，lighter細
4. Font-family：字體樣式
5. Letter-spacing：字間距
6. Line-height：行間距
7. Width：寬度
8. Height：高度
9. Left左
10. Right右
11. Bottom下
12. Top上
13. Center中間
14. Justify兩端對齊
15. Backgroun-color：背景顏色
16. Text-align：水平對齊
17. Text-indent：首行縮進
18. Border-radius:10px設置邊框角的弧度
19. Text-decoration：none去掉超鏈接下划線
20. Text-decoration：underline加上超鏈接下划線
21. Text-shadow：color  x-offset  y-offset  blur-radius（color陰影顏色x-offset沿橫向移動y-offset沿縱向移動blur-radius陰影模糊 ）
22. Font-style：italic傾斜
23. Vertical-align:middle當圖片和字一起，讓字在圖片的中間對齊時引用這個

 

1. Margin：0px去掉外邊距
2. Padding：0px去掉內邊距
3. Margin：auto網頁中的整個元素在網頁中左右居中
4. List-style：none去掉列表默認樣式，去掉小黑點
5. A:hover鼠標懸停樣式
6. 背景圖像：background-repeat屬性 1.repeat：沿水平和垂直方向平鋪2. no-repeat不平鋪，只顯示一次3. repeat-x橫向平鋪4. 3. repeat-x橫向平鋪4.3. repeat-y縱向平鋪（background：url（圖片） no-repeat 橫向 縱向 ）

 

 

第六章

一、盒子模型：border：邊框

                         border-color: #F00;    邊框的顏色

                         border-width: 10px;    邊框的線條大小

                         border-style     邊框的線型

                         邊框的線型：solid實線double雙實線dotted點線dashed虛線

                         background: linear-gradient(to bottom, #cdcdff, #FFF)*背景顏色的漸變

                         to  bottom從上往下

                         Border-top：#C0F 1px  dotted意思是上邊框顏色是#c0f 線條的寬度是1px用的是點線！

 

二、圓：border-radius: 50%;實現圓的效果，

三、box-shadow:2px 2px 10px #333; 陰影

box-shadow:陰影水平偏移值（可取正負值）； 陰影垂直偏移值（可取正負值）；陰影模糊值陰影顏色；

四、position:relative; /*相對定位*/ 相對於自己的位置發生了偏移，但是原來的位置還 是占據！

五、Position：absolute； /*絕對定位*/ 相對於自己的位置發生了偏移，但是原來的位置還 是不占據！

 

 

 

css獲取li標簽中的第幾個標簽選擇器：

1.li: first-child表示選擇列表中的第一個標簽

2.li:last-child表示選擇列表中的最后一個標簽

3.nth-child(3) 表示選擇列表中的第3個標簽

4. nth-child(2n) 這個表示選擇列表中的偶數標簽，即選擇 第2、第4、第6…… 標簽

5. nth-child(2n-1) 這個表示選擇列表中的奇數標簽，即選擇 第1、第3、第5、第7……標簽。

6. nth-child(n+3) 這個表示選擇列表中的標簽從第3個開始到最后。

7. nth-child(-n+3) 這個表示選擇列表中的標簽從0到3，即小於3的標簽。

8. nth-last-child(3) 這個表示選擇列表中的倒數第3個標簽。

 

文本多行溢出時只顯示三行其余用點點點顯示（多行文本）：   

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:3;

 

 

文本多行溢出時只顯示100px長度的文字，其余用點點點顯示（單行文本）：

width:100px;   

overflow: hidden;   

text-overflow:ellipsis;   

white-space: nowrap;

 

 

 

 

跳轉新頁面時（新增一個加載頁面）：

target="_blank"

無圖片時顯示暫無圖片這個圖片：

onerror="javascript:this.src='/keditor/images/nopic.png';"

 

1、default
默認光標（通常是一個箭頭）
2、auto
默認。瀏覽器設置的光標。

3、crosshair
光標呈現為十字線。

4、pointer
光標呈現為指示鏈接的指針（一只手）

 

偽元素：

::before（左邊）

::after（右邊）

content: attr(data-content);自定義一個屬性名稱，data-后面是自定義的屬性名稱

c#后台設置前台標簽只讀屬性：

1、txtTitle.Enabled = false;設置TextBox為灰色只讀，設置的標簽有TextBox標簽，DropDownList標簽

2、txtContent.Attributes["readonly"] = "readonly";設置textarea為只讀，設置的標簽有textarea標簽

c#后台設置前台標簽顯示與隱藏屬性：

1、btnSave0.Visible = false;

a標簽下載文件：

  <a  class="auto-Excel" href="http://localhost:27262/Content/Templet/PersonalInformation.xlsx" download="個人信息模板.xlsx">導出Excel模板</a>

不加download屬性時：打開圖片

加download屬性時：下載圖片

html表單校驗：

以綁定的附加屬性有：datatype、nullmsg、sucmsg、errormsg、ignore、recheck、tip、altercss、ajaxurl 和 plugin等.

說明：

內置基本的datatype類型有： | 6-16 | n | n6-16 | s | s6-18 | p | m | e | url

*：檢測是否有輸入，可以輸入任何字符，不留空即可通過驗證；

*：檢測是否有輸入，可以輸入任何字符，不留空即可通過驗證；

*6-16：檢測是否為6到16位任意字符；

n：數字類型；

n6-16：6到16位數字；

s：字符串類型；

s6-18：6到18位字符串；

p：驗證是否為郵政編碼；

m：手機號碼格式；

e：email格式；

url：驗證字符串是否為網址。

 

nullmsg

當表單元素值為空時的提示信息，不綁定，默認提示"請填入信息！"。

如：nullmsg="請填寫用戶名！"

5.3版開始，對於沒有綁定nullmsg的對象，會自動查找class為Validform_label下的文字作為提示文字:

如這樣的html結構：

<span class="Validform_label">*用戶名：</span><inputtype="text" val="" datatype="s" />

當這個文本框里沒有輸入時的出錯信息就會是："請輸入用戶名！"

這里Validform_label跟input之間的位置關系，不一定是要同級關系，同級里沒有找到的話，它還會在同級的子級、父級的同級、父級的同級的子級里查找。

sucmsg 5.3+

當表單元素通過驗證時的提示信息，不綁定，默認提示"通過信息驗證！"。

如：sucmsg="用戶名還未被使用，可以注冊！"

5.3版開始，也可以在實時驗證返回的json數據里返回成功的提示文字，請查看附加屬性ajaxurl的介紹。

errormsg

輸入內容不能通過驗證時的提示信息，默認提示"請輸入正確信息！"。

如：errormsg="用戶名必須是2到4位中文字符！"

5.3版開始，Validform可以根據你綁定的datatype智能的輸出相應出錯信息，具體介紹請查看tipmsg

ignore

綁定了ignore="ignore"的表單元素，在有輸入時，會驗證所填數據是否符合datatype所指定數據類型，

沒有填寫內容時則會忽略對它的驗證；

recheck

表單里面經常需要檢查兩次密碼輸入是否一致，recheck就是用來指定需要比較的另外一個表單元素。
如：recheck="password1"，那么它就會拿當前元素的值跟該表單下，name為"password1"的元素比較。

tip

表單里經常有些文本框需要默認就顯示一個灰色的提示文字，當獲得焦點時提示文字消失，失去焦點時提示文字顯示。tip屬性就是用來實現這個效果。它通常和altercss搭配使用。

如<input type="text"value="默認提示文字" class="gray intxt"tip="默認提示文字" altercss="gray" />

altercss

它需要和tip屬性配合使用，altercss指定的樣式名，會在文本框獲得焦點時被刪除，沒有輸入內容而失去焦點時重新加上。