第一章1、HTML超文本标记语言2、网页<html></html>3、网页头部<head></head>4、网页标题<title></title>5、网页主体<body></body>6、DOCTYPE声明3种级别：（1）Strict 严格类型（2）Transitional过渡类型（3）Frameset框架类型7、网页摘要<meta>标签8、字符编码：gb2312简体中文 ISO-885901纯英文 big5繁体 UTF-8国际通用编码9、W3C 万维网联盟10、标题标签<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>11、段落<p></p>12、换行<br/>13、水平线<hr/>14、字体加粗<strong></strong>15、斜体字<em></em>16、注释<！--注释内容-->17、特殊符号空格：  大于号：> gt小于号 ：lt< 引号：""版权符号：© ©18、图像标签<img src=“图片地址”alt=“图像的替代文字”title=“鼠标悬停提示文字”width=“图片宽度”height=“图片高度”/>19、链接标签<a href=“链接地址”target=“目标窗口位置”>链接文本或图像</a>Target常用取值：_self（自身窗口）和_blank（新建窗口）20、锚链接<a href=“#market”>当前位置甲</a><a id=“market”>目标位置乙</a>21、功能性链接<a href=“mailto:电子邮箱地址”>联系我们</a>第二章22、无序列表 Type属性取值：disc实体圆心 square 实体方心 circle空心圆<ul type=“”><li>列表项</li></ul>23、有序列表 Type属性取值：1数字 A/a大/小写字母 I/i大/小写罗马数字<ol type=“”><li>列表项</li></ol>24、定义列表<dl><dt>标题</dt><dd>内容</dd></dl>25、表格<table border=“ ”><tr><th>标题</th></tr><tr><td>内容</td></tr></table>26、 表格跨列属性colspan 表格跨行属性rowspan cellspacing取消每个格子之间的距离27、视频元素：controls手动控制播放 autoplay自动播放 loop循环播放1、<video src=“视频路径” controls=“controls”></video>2、<video controls><source src=“视频路径”></video>28、音频元素：1、<audio src=“视频路径” controls=“controls”></audio>2、<audio controls><source src=“音频路径”></audio>29、HTML5结构元素<header></header>标题头部区域的内容（用于页面或页面中的一块区域）<footer></footer>标记脚部区域的内容（用于整个页面或页面的一块区域）<section></section>Web页7u面中的一块独立区域<article></article>独立的文章内容<aside></aside>相关内容或应用（常用于侧边栏）<nav></nav>导航类辅助内容30、iframe内联框架<iframe src=“引用页面地址”name=”框架标识名”… ></iframe>第三章31、表单<form method=“提交方式get/post” action=“提交页面”>32、表单元素：文本框：<input type=“text” name= “元素名称”value=“初始值”size=“初始宽度”> placeholder="请输入标题（1-50个字符）">密码框：<input type=“password” name= “元素名称”value= “初始值” maxlength= “最大字符数”>删除边框：style="border:0"单选按钮：<input type= “radio” name= “元素名称”value= “值” >复选框：<input type= “checkbox” name= “元素名称” value= “值” checked= “checked”>列表框：name:单，复选框，元素名称必须一样,才能实现多选一 checked默认勾选<select> <option value= “值” selected= “selected”>显示文本</option><option value= “值”>显示文本</option></select>提交按钮：<input type= “submit” name= “元素名称” value= “显示文字”>重置按钮：<input type= “reset” name= “元素名称” value= “显示文字”>普通按钮：<input type= “button” name= “元素名称” value= “显示文字”>图片按钮：<input type= “image” name= “元素名称” src= “图片地址” >多行文本域：<textarea name= “元素名称” cols= “显示列宽” rows= “显示行数”>内容</textarea>文件域：<form action=“” method= “” enctype=”multipart/form-data”><input type= “file” name=“元素名称” ></form>邮箱：<input type= “email” name=“元素名称” >网址：<input type= “url” name=“元素名称” >数字：<input type= “number” name=“元素名称”min=“ ”max=“ ”step=“ ” >滑块：<input type= “range” name=“元素名称”min=“ ”max=“ ”step=“ ” >搜索框：<input type= “search” name=“元素名称” >隐藏域：<input type=“hidden” name=“元素名称” value=“值”>33、表单只读属性：readonly=“readonly”34、表单禁用属性：disabled=“disabled”35、域：<fieldset></fieldset>域标题：<legend></legend>36、表单元素标注：<label for= “元素id名称”>文本</label> <label for="fa"><input type="radio" name="shengfen" checked id="fa">买家</label>for和id元素名必须一样 点击文字就能选中,增加了用户体验37、表单初级验证方法：placeholder（文本框提示,点击文本框输入文字时里面的字会自动消失） required(文本框填写内容不为空)Pattern（文本框输入的内容是否与自定义的正则表达式相匹配）第四章38、定义样式信息<style type=”text/css”></style>39、链接外部样式表<link href=“样式文件路径” rel=“stylesheet” type=“text/css”>40、导入外部样式表<style type=”text/css”>@import url(“样式文件路径”)</style>41、样式优先级行内样式>内部样式表>外部样式表ID选择器>类选择器>标签选择器42、高级选择器（1）层次选择器（2）结构伪类选择器（3）属性选择器复合选择器后代选择器语法:元素1 元素2 {样式声明}列如: ul li {样式声明}/*选择ul里面的li标签元素*/ 子元素选择器(子选择器):只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素.语法: 元素1> 元素2 {样式声明}并集选择器并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明并集选择器是各选择器通过英文逗号(,)连接而成.语法: 元素1,元素2 {样式声明}第五章43、<span>标签44、字体样式font-family:字体类型 font-size:字体大小 单位：pxfont-style:字体风格 normal标准的字体样式font-weight:字体粗细 400默认值，定义标准的字体font:设置所有字体属性 字体风格-字体粗细-字体大小-字体类型45、文本属性color:文本颜色text-align:水平对齐方式 left左边 right右边 center居中 justify两端对齐text-indent:首行缩进 2em=两个文字line-height:文本行高 单位pxtext-decoration:文本装饰 none取消下划线 underline下划线 overline上划线 line-through删除线blink 文本闪烁vertical-align:垂直对齐方式文本阴影：text-shadow:color x轴位移 y轴位移 模糊半径；text-shadow: black 2px 2px 2px;46、超链接伪类选择器a:link 单击访问前a:visited 单击访问后a:hover 鼠标悬浮上a:active 鼠标单击未释放focus伪类选择器:选择获得光标的表单语法: input:focus{background-color: pink;}47、网页布局<div></div>标签48、背景属性background-color:背景颜色 transparent;透明background-image:背景图像 语法:background-image : url(图片地址); :background : url(图片地址);background-repeat: repeat水平，垂直两方向平铺background-repeat: no-repeat不平铺background-repeat: repeat-x水平方向平铺background-repeat: repeat-y垂直方向平铺background-position背景定位 属性可以改变图片在背景中的位置语法：background-position: x y;参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精准单位 （1）方位名词：1.如果指定的两个值都是方位名词,则两个值前后顺序无关，比如left top 和 top left效果一致2.如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐top上right:右bottom:下left:左center中（2）精准单位：px px;1.如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标2.如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中（3）参数是混合单位：1.如果指定两个值是精准单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标background-size背景尺寸4.背景图像固定 语法：backdround-attachment属性设置背景图片是否固定或者随着页面的其余部分滚动background-attachment : scroll | fixed参数 作用scroll 背景图像是随对象内容滚动fixed 背景图像固定3.6背景复合写法为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中从而节约代码当使用简写属性时，没有特点的书写顺序，一般习惯约定顺序为：background:背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置；background: black url() no-repeat fixed center top;3.7背景色半透明 语法：background: rgba(0,0,0,0.3);颜色 色调 饱和度 亮度 透明度最后一个参数是alpha透明度，取值范围0~1之间49、列表样式列表项符号list-style-type:none无 disc实心圆 circle空心圆 square实心正方形 decimal数字list-style: none; 可以去除无序列表前面的黑色实新小圆圈列表项图片list-style-image:url(图片路径);放置列表项list-style-position:inside放置文本以内 outside文本左侧，文本以外50、CSS3渐变background:linear-gradient(渐变方向，颜色1，颜色2, …) to tottom: 渐变方向从顶部到底部to left:渐变方向从右边到左边to right: 渐变方向从左边到右边to top left: 渐变方向从右下方到左上方to top right: 渐变方向从左下方到右上方to bottom left: 渐变方向从右上方到左下方to bottom right: 渐变方向从左上方到右下方第六章51、border边框border-top-color:上边框颜色border-right-color:右边框颜色border-bottom-color:下边框颜色border-left-color:左边框颜色border-color:边框颜色border-top-width:上边框粗细border-right-width:右边框粗细border-bottom-width:下边框粗细border-left-width:左边框粗细border-width:边框粗细border-top-style:上边框样式border-right-style:右边框样式border-bottom-style:下边框样式border-left-style:左边框样式border-style:边框样式solid：实线dotted点线dashed虚线简写：border:边框粗细 边框颜色 样式红色 边框 虚线显示border: 9px #F00 solid;collapse单词合并的意思语法：border-collapse:collapse;52、margin外边距margin-top 上外边距margin-right 右外边距margin-bottom 下外边距margin-left左外边距外边距可以让块级盒子水平居中，但必须满足两个条件：1.盒子必须指定宽度2.盒子左右的外边框都设置为automargin:auto;或margin: 0 auto;注意：以上方法是让块级元素水平居中，行内元素或块元素水平居中给其父元素添加 text-align:center即可嵌套块元素垂直外边距的崩塌 解决方案：1.可以为父元素定义上边框2.可以为父元素定义上内边框3.可以为父元素添加 overlow:hidden;53、padding内边距padding-top 上内边距padding-right 右内边距padding-bottom 下内边距padding-left左内边距padding 内边距值的个数padding: 5px; 1个值，代表上下左右都是5像素类边距padding: 5px 10px; 2个值，代表上下类边距都是5像素，左右边距是10像素padding: 5px 10px 20px; 3个值，代表上内边距5像素 左右边距10像素4个值，上是5像素 右10像素 左30像素54、盒子模型总尺寸=边框宽度+内边距+外边距+内容宽度55、box-sizing盒子模型布局content-box:默认值border-box:盒子的宽度或高度等于元素内容的宽度与高度inherit:此值使元素继承父元素的盒子模型模式56、圆角边框：border-radius如果是矩形设置为高度的一半就可以了border-radius：7px;57、圆形：border-radius：50% （可制作半圆形、扇形）58、盒子阴影：box-shadow: x轴位移 y轴位移 模糊半径 颜色；inset第七章59、display属性display:block 块级元素默认值 除了转换为块级元素之外，同时还有显示元素的意思display:inline 内联元素默认值display:none 元素不显示display隐藏元素后，不再占有原来的位置2.5元素显示模式转换把行内元素a 转换为块元素语法: display: block;转换为行内元素：display:inline; 转换为行内快：display:inline-block; 可以设置宽高不换行 那边60、float浮动任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块相似的特征如果行内元素有浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度float:left元素向左浮动float:right元素向右浮动float:none元素不浮动，默认值61、clear清除浮动为什么需要清除浮动由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为0时，就会影响下面的标准流盒子清除浮动本质1.清除浮动的本质是清除浮动元素造成的影响2.如果父盒子本身有高度，则不需要清除浮动clear:left 在左侧不允许浮动元素clear:right 在右侧不允许浮动元素clear:both 在左、右两侧不允许浮动元素 额外标签法也称为隔墙法，是w3c推荐的做法（1）额外标签法会在浮动元素末尾添加一个空的标签，列如<div style="clear:both"></div>或者其他标签(如<br/>等)1.优点:通俗易懂2.缺点：添加许多无意义的标签，结构比较差注意：要求这个新的空标签必须是块级元素clear:none 默认值，允许浮动元素出现在两侧62、overflow溢出处理（2）清除浮动 ：可以给父级添加overflow:hidden属性。overflow:visible 默认值，多的内容出现在盒子之外overflow:hidden 多的内容不可见overflow:scroll 内容会被修剪，浏览器会出现滚动条overflow:auto 如果内容被修剪，出现滚动条（3）清除浮动——:after伪元素:after方式是给额外标签法的升级版。也是给父级添加.clearfix:after{content:"";display:block;height:0;clear: both;visibility: hidden;},clearfix{/* IE6、7专有*/*zom: 1;}优点：没有增加标签，结构更简单缺点：照顾低版本浏览器代表网站：百度、淘宝网、网易等导航栏注意点实际开发中，我们不会直用链接a而是用li包含链接(li+a)的做法1.li+a语义更清晰，一看就是有条理的列表内容2.如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险)从而影响网站排名注意：1.让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示2.这个nav导航栏可以不给宽度，将来可以继续添加其余文字3.因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度第八章63、position定位position:static 默认值，没有定位position:relative 相对定位，以标准流的排版方式为基础，然后使盒子在他原位置进行偏移，相对定位的盒子仍在标准流中position:absolute 绝对定位，以父元素为基准进行定位，绝对定位会脱离标准流position:fixed 固定定位，是以浏览器窗口为基准进行定位，当浏览器拖动时他位置依然保持不变粘性定位sticky语法选择器{position:sticky; tip: 10px}粘性定位的特点：1.以浏览器的可视窗口为参照点移动元素（固定定位的特点）2.粘性定位占有原先的位置（相对定位特点）3.必须添加tuo、left、right、bottom其中一个才有效固定定位小技巧：固定在版心右侧位置小算法：1.让固定定位的盒子left:50% 走到浏览器可视区（也可以看作版心）的一半位置2.让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置64、z-index 层叠z-index属性用于调整元素定位时重叠上下的位置z-index:1;1.数字后面不能加单位2.只有定位的盒子才有z-index属性定位特殊特征绝对定位和固定定位也和浮动类似1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小65、透明设置opacity:x (x值为0-1，值越小越透明) 如：opacity:0.4;filter:alpha(opacity=x) (x值为0-100，值越小越透明) 如：filter:alpha(opacity=40);第九章66、变形函数transform:[transform-function]*;常用的transform-function：translate():平移函数scale():缩放函数 rotate():旋转函数 skew():倾斜函数CSS3 3D变形函数：translate3d():平移函数scale3d():缩放函数 rotate3d():旋转函数2D变形2D位移：translate（x轴，y轴） 2D缩放：scale（x轴，y轴）2D倾斜：skew（x轴，y轴） 2D旋转：rotate（x轴，y轴）67、过渡属性transition:[transition-property transition-duration transition-timing-functiontransition-delay]*transition主要包括以下四个属性值：transition-property：指定过渡或动态模拟的CSS属性transition-duration：指定完成过渡所需要的时间transition-timing-function：指定过渡函数transition-delay：指定过渡开始出现的延迟时间transform:translate(50px,50px);位移scale(1.2,1.2);缩放，数值为倍数skew(0,50deg);斜切，第一个数值为水平，第二个为垂直，数值单位为deg，表示为“度”rotate(45deg);顺时针旋转语法：transform:变形函数(参数值);以上动画不会影响其他元素的布局transition:all 0.5s ease 0.5stransition 属性是一个简写属性，用于设置四个过渡属性：transition-property 过渡属性all：指定所有元素支持transition-propery属性样式，一般为了方便都会使用all。transition-duration 过渡时间transition-timing-function 过渡动画函数ease: 元素样式从初始状态过度到终止状态时速度由快到慢，逐渐变慢（默认值）linear：元素样式从初始状态过度到终止状态时速度恒速（匀速运动）ease-n:元素样式从初始状态过度到终止状态时速度越来越快（渐显效果）ease-out:元素样式从初始状态过度到终止状态时速度越来越慢（渐隐效果）ease-in-out:元素样式从初始状态过度到终止状态时速度先加速在减速（渐显渐隐效果）transition-delay 延迟触发过渡时间属性用来指定一个动画开始执行的时间，也就是说，当改变元素属性值后多长时间去执行过渡效果，这个时间值可以使正值、负值或0正值：元素过渡效果不会立即触发，当过了设定的时间值后才会被触发。负值：元素过度效果会从该效果该时间点开始显示，之前的动作被截断。0：默认值，元素过度效果立即执行。多个变形函数需要写在一起transform:rotate(45deg) translate(50px,50px);动画函数声明@keyframes mymove{百分比写法0%{background:red;}66%{background:blue;}100%{background:green;}}@keyframes mymove{英文写法from{background:red;}to{background:blue;}}英文写法中间可以插入百分比写法-webkit- background:red;-o- background:red-moz- background:redbackground:red;-webkit-transition: all .6s;给父类加这个可以实现动画效果transition: all .6s;transform:translate(0px,-3px);鼠标悬浮子类显示动画效果transition:all 0.7s ease 0s;-webkit-transition: all .4s;transition: all .4s;鼠标悬浮子类显示颜色动画效果兼容写法@-webkit-keyframes mymove /* Safari and Chrome /* @-o-keyframes mymove /* Opera /*@-moz-keyframes mymove /* Firefox /*动画调用animation:mymove 1s linear 0s 2 alternate;animation:动画名称 动画过度时间 动画播放速度曲线(默认是匀速) 动画延迟时间 播放次数 是否反向播放(alternate为反向播放 normal默认值不反向);必须填写动画名称和动画时间，其余的可以使用默认值*/
