HTML代码集

最常用，推荐使用） in（英寸） cm（厘米） mm（毫米） pt（点）。 2.font-family属性 设置字体 网页中常用的字体有宋体，微软雅黑，黑体等....。 3.font-weight属性 用于设置字体的粗细 nomal（默认值，定义标准的字符） bold（定义粗体字符） bolder（定义更粗的字符） lighter（定义更细的字符） 100-900（100的整数倍）=定义由细到粗的字符，其中400等于nomal，700等于bold，越大越粗。

4.font-style属性 用于定义文字风格，如设置斜体，倾斜或正常字体，其可用属性： normal italic，oblique斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。 属性顺序见图111 5.ont-face是css3中允许使用自定义字体的一个模块。

4.line-height属性 设置行间距

5.text-align属性 left:左对齐 right:右对齐 center：居中对齐。

6.text-decoration属性 underline：下划线 overline：上划线 line-through:删除线。

7.text-indent属性 用于设置首行文本的缩进。

8.white-space属性 可设置空白符的处理方式。 normal：常规，文本的空格，空行无效，满行后自动换行。 pre：预格式化，按文档的书写格式化，保留空格，空行原样显示。 nowrap：空格无效，强制文本不能换行，除非遇到标签<br/>。

9.text-shadow属性 h-shadw:用于设置水平阴影的距离 v-shadow:用于设置垂直阴影的距离 blur:用于设置模糊半径 color：用于设置阴影颜色。

10.text-overflow属性 用于溢出的问文本。 clip：溢出的文本不显示省略标签"......" elliosis:用于省略标签"........"代替修剪文本，省略标签插入的位置是最后一个字符。

11.word-wrao属性 用于实现长单词和URL地址的自动换行。 normal：只允许段子点换行。 break-word：在长单词或URL地址内换行。 justify布局 可设置 居中+空白符

css div 设置常用符合：

12. border属性 设置边框 border-radius：设置边框弧度。

border-right-style设置边框样式 solid (单实线) dashed(虚线) dotted(点线) double(双实线) padding-top 上内边间距 

 margin-top 上外间距 

padding-right  右

margin-right padding-bottom 下 margin-bottom

padding-left 左 margin-left

margin:0 outo 外边距为零并居中

overflow:溢出标签的属性 visible默认值。内容不会被修剪，会呈现在元素框之外。

hidden内容会被修剪 并且其余内容是不可兼得

auto如果内容被修剪，则浏览器会显示滚动条已查看其余的内容

scroll内容会被修剪 但浏览器会显示滚动条以显示其余查看到内容

inherit规定从父元素集成overlfow属性的值

background-image:url("图片地址"); 设置背景div为图片。

background-repeat:no-repeat 使图片不再有平铺效果。

background-size:cover; 将背景图片填满div框架

background:背景颜色 图片 图片格式 图片位置;

cursor:pointer; 用于设定图片 ，使得鼠标到这个图片区域，鼠标形状变成小手形状。

opacity 用于设置鼠标透明度。尝是0~1。

background-repeat:repeat; 使得图片数量增加到填满div区域。

background-repeat:repeat-x 控制图片在x轴上延申 。

background-repeat:repeat-y 控制图片在y有延申。

background-repeat：no-repeat 控制图片不再延申显示。

background-position： 控制背景图片显示位置。

background-image:repeating-radial-gradient(渐变形状 圆心位置，颜色值1，颜色值2...，颜色值n)

position定位  absolute 绝对定位  relative相对定位   fixed绝对定位（以窗口为参照）

flaot:左右 向左或向右浮动

top上边距：检索或设置对象参照相对物顶边界向下偏移位置

right右边距:检索或设置对象参照物右边界向左偏移位置

bottom下边距：检索或设置对象参照相对物顶边界向上偏移位置

left左边距：检索或设置对象参照相对物顶边界向右偏移位置

absolute绝对定位  特点：以页面为参照 脱离页面常规流 通过z-index设置图层顺序 transform变换

1.  translate指定标签平移
2. transaltex指定标签x轴平移
3. transaltey指定标签y轴平移
4. rotate指定标签旋转角度
5. rotatex指定标签在x轴的旋转角度
6. scalex指定标签在x轴的缩放
7. scaley指定标签在y轴的缩放
8. perspective（）指定标签的透视距离

relative相对定位   特点：没有脱离常规流

1. display样式   将非块级元素转化为块级元素
2. display:block; 转化为块级元素并默认占用一行。
3. display:inleine-block;转化为块级元素但并不占用一行。

2、隐藏标签 display:none;

（三）、将标签作为弹性伸缩盒显示display:flex;

1.   排列方式 flex-direction:row（行） | column（列）;
2. 水平对齐方式 justify-content:flex-start（左对齐） | flex-end（右对齐） | center（居中对齐） | space-around（平均分布 有空白空间） | space-between（平均分布，无空白空间）;
3. 垂直对齐方式 align-items（一行内容）:flex-start（左对齐） | flex-end（右对齐） | center（居中对齐）;
4. align-content（多行内容）:flex-start | flex-end | center | space-aroundspace-around | space-between（平均分布，两侧无空白空间）;
5. ： flex:worp;当内容多时使他多行显示。 是否多行显示flex-wrap:wrap; 占比flex-grow:数字；

超链接分类

1.   文字链接<a href="跳转地址" target="打开方式" title="提示信息">文字或图片</a> 打开方式有两种 self为默认值在网页打开，
2. blank新建一个网页打开链接。 a{} 给超链接添加样式
3. color：制定超链接文字颜色； 超链接会默认给文字添加下划线；
4. text-decoration:none 去掉超链接原有的文字下划线。

hover:鼠标悬停效列表果 用法选择器＋：hover。

列表

1.   <ul type="列表符号"><li></li></ul>
2. <li>显示内容</li>
3. <ul>标签的含义是在此位置添加了一个列表。
4. <li>标签是列表内的内容
5. <ul>和<li>必须配合起来使用。两者缺一不可。
6. 列表符号：disc（小圆点的效果）。
7. circlo（空心圆的显示效果）。
8. square（实心方块的显示效果）。
9. css控制列表显示外观效果：list-style-type（设置ul列表显示符号）list-style-image将图片设置为ul列表符号。
10. none（去掉显示效果）,disc（实心圆）,cirle（空心圆）,square（实心方块）,decimal（阿拉伯数字）,lower-alpha（小写英文字母）,upper-alpha（大写英文字母）。
11. 单独设制列表中的一个标签：li:nth-of-type(1)就是单独设制第一个的效果 单独除了一个标签其余全部设置成某一个效果用 not(1)除了第一个全部设置。

添加视频，音频 音频格式如视频一样 audio 样式：<video src="路径" controls="是否设置控制图片按钮" width="宽度" height="高度"></bideo>

poster 设置预览图片

autoplay 是否自动播放 +mutud 后才能自动播放 自动播放只有在 静音情况下才能实现。

muted 是否静音

loop 是否循环播放

mutud 控制图片是否静音 表单 form name="" method="" action="">表单元素</form> 表单标签 name 设置表单名字

metod 设置表单的提交方式

get post 常用属性

action 设置表单的提交地址

enctype 设置表单数据的编码方式 表单元素

input <input type=.................................................../> type 指定类型; 值：

text（单行文本框）

password（添加密码框）

radio（添加单选按钮） checkbox（多选按钮）

file（提供一个文件选择对话框）

button（添加按钮）

submit（添加提交按钮）

reset（重置表单）等

name 设置标签名称 size 设置标签内容宽度

value 设置标签内容 maxlength 设置标签内容的字符的最大长度

placeholder 设置标签的提示信息

checked 设置标签首次加载时是否被选中

readonly 设置标签内容为只读

disabled 设置标签是否禁用

checked 设置按钮为默认选中状态

qutocomplete 将输入内容记录下来，当在此输入时会将输入的历史记录显示在一个下拉列表里。(此标签可以用于所有输入类型 input 标签。) n

ovalidate 用于指定在表单取消时对表单进行有效的检查(输入框加选择列表)

</select>标签 （添加一个下拉框）

name: 设置标签名称 size 设置标签可选择数目 disabied 设置标签性是否禁用 selected 默认选择 样式 <select name=""> <option value="1">德国</option> <option value="3">日本</option> <option value="2">美国</option> <optgroup label="组名"> <potion></option> </optgroup>

表单元素

textarea(添加一个多行文本框)

name名称

cols标签内容列数

rows设置标签行数 maxlength设置标签内容的字符最大长度

placeholder设置标签的提示信息

readonly设置标签内容为只读

disabled设置标签是否禁用

table最外层表格指令

tr行 td，th列 cellspacing单元格之间的空白距离

cellpading单元格内容与单元格边缘的空间 bgclolr背景颜色

cuption表格标题(html标签)

border-collapse:colapse 边框合并 列表实现隔行换色

:tr:nth-of-type(even)指定偶数行用于css控制语句

tr:nth-of-type(odd)指定奇数行