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指定的样式名，会在文本框获得焦点时被删除，没有输入内容而失去焦点时重新加上。