web前端学习总结(精华版)

1、Web总结一.名词解释 1. 横切在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切2. 留白两个容器或碎片之间的上、下、左、右的空白距离3. 继承元素可以从其父级元素中获得一些可为自己使用的属性或值。4. 图片定位把图片元素放置到一个静态的、相对的、肯定的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图5. 底图页面中在标签中使用的背景图6. 齐底(图)线用于区分横切或碎片结束的线或图7. 页面结构页面的基础框架，由横切、布局元素组成8. 焦点区(图)最易注意的区域 9. 导航 在页面中具有导向性的链接集合 10. 头图 页面主题图片11. 间距

2、碎片或文字间的距离12. 行高文字段落中行与行之间的距离13. 首行缩进文字段落首行缩进14. 浮动使被定义的区域脱离正常的页面文档流15. 碎片由文字、图片组合成的内容区域16. 通栏广告与页面内容区同宽的广告区域17. 功能按钮具有交互属性的按钮18. 私有样式当前页面独立使用的样式，不具备公用性19. 水平(垂直)居中在页面中的某个元素处于父级的上下或左右的相同距离20. 标准头(尾)定义相同的页面头或尾元素集合二.文本格式化1. 段落：p2. 斜体：address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）3. 粗体：strong（重要）b（提醒）4.

3、图片块：figure5. 引述文段，段落缩进：blockquote6. 背景颜色：mark7. 虚线下划线：abbr8. 上标下标：sub/sup9. 下划线：ins10. 删除线：del（标记已删除内容）s（标记不精确内容）11. 等宽字体：code12. 预格式化：pre13. 字号减小，表注释：small14. 时间：time15. 换行：br16. html5定义区块：header nav article section aside footer div span三.表单表格1. <form method="post" action="show.ph

4、p" enctype="multipart/form-data">.</form>2. 表单元素的组织：<fieldset>.</fieldset><fieldset>.</fieldset>3. 创建各种框: <input type="text" id="name" name="name" class="zky" required="required" placeholder="请输

5、入" value="http:/" autofocus="autofocus" size="12" maxlength="20" pattern="." />注：textpassword/url/tel/emailId:为了让对应的标签识别，添加CSSName：为了让服务器和脚本识别，通常与id设为一样Size：文本框大小Maxlength：能输入的最大字符数Pattern：正则表达式4. 添加标签： <label for="idname"><

6、;/label>5. 单(多)选按钮：<input tupe="radio/checkbox" id="aaa" name="zky" value="beijing" /><label for="aaa">北京</label><input tupe="radio/checkbox" id="bbb" name="zky" value="shanghai" />&l

7、t;label for="bbb">上海</label>注：id各自唯一，name必须相同。checked：默认选择6. 下拉框：<select id="zky" name="zky" size="12" multiple="multiple"><option value="beijing">北京</option><option value="shanghai">上海</option&

8、gt;<option value="chengdu">成都</option></select>注：size:选择框的高度 multiple：允很多选 selected：默认选择 用<optgroup label="东北"></label>对选择框进行分组7. 上传文件：<input type="file" id="zky" name="zky" size="5" />注：size：输入路径和文件名的字段的

9、宽度8. 禁用表单元素：<input disabled>9. 创建提交按钮：<input type="submit" value="点此提交" /> 创建带图像的提交按钮：<button type="image"><img src="1.jpg">点击这里</button> 创建图像按钮：<input type="image" alt="提交" src="1.jpg" />Submit

10、reset重置10. 文本区域：<textarea name="zky" maxlength="30" rows="5" cols="5">请在此输入字符</textarea>11. 表格 :<table><caption></caption><thead><tr><th scope="rowgroup">.</th><th scope="col">.<

11、;/th></tr></thead><tbody><tr><th scope="row">.</th><td rowspan="3">.</td><td>.</td></tr></tbody></table>四.文本格式化1. font：（斜体 粗体 小型大写字母） 字体大小(必有) 行距 字体集（必有）;2. 文本背景： background：#foc url（1.jpg）repeat-x s

12、croll 0 0；3. 字间距：word-spacing:12px;4. 字偶距：letter-spacing:12px;5. 缩进增加：text-indent:12px;6. 小型大写字母: font-variant:small-caps;7. 文本对齐：text-align:left；适用于block，inline-block8. 单词大小写: text-transform:capitalize(单词首字母大写)/uppercase(大写)/lowercase(小写)9. 文本上的线：text-decoraion:underline/overline/line-through;11. 空

13、格：white-space:pre(显示全部空格回车)/nowrap（非断行空格）；12. h316px; h512px; verdana,Geneva,sans-serif;13. 列表属性： lilist-style:url(1.jpg) inside square;五.CSS布局1. width：不包括padding，border，margin；max-width设置外围限制；2. 浮动：float:left; 清除浮动：clear:both;3. 设置边框： border:dotted 4px red;(dotted点状、dashed虚线、solid实线)4. 使元素对齐：vertic

14、al-align:baseline/middle/text-bottom.5. 显示：display:black/inline/inline-block;6. 显示：visibility:visible/hiddle;7. 相对定位：position:relative; top:5px; 相对于该元素的原始位置8. 肯定定位：position:absolute; top:5px; 相对于body或离他最近定位的祖先元素9. 三维位置：z-index:50; 越大的在最上面10. 厂商前缀：-webkit-(safari) moz-(firefox) ms-(IE) o-(opera)11. 创

15、建圆角：-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px; (左上角,角的半径是50px)border-radius:50px;(全部角简写)12. 创建椭圆角： border-radius:40px/20px; （x半径/y半径）13. 创建圆形： border-radius:50px; 50px为元素半径大小14. 文本加阴影：text-shadow: 2px 5px 5px #999; x/y/模糊半径15. 元素加阴影：(-moz-/-webki

16、t-)box-shadow:(inset内阴影)2px 5px 5px #999; 5px 10px 2px #555(多重阴影);16. 多重背景：background:#000 url(1.png) 50% 102% no-repeat,#222 url(2.png) 12px -150px repeat-x;17. 透明度： opacity:.5; 01 透明不透明18. 渐变背景：background:linear-gradient(left,#000,#999); (left ：渐变线沿逆时针方向转至水平线的角度)六.html5视频音频1. html5支持3种视频：.ogg/.ogv

17、 .mp4/.m4v .webm2. 添加视频：<video src="1.webm"></video>视频属性：src autoplay controls muted loop poster width height preload3. 为视频添加多个来源：<video controls="controls"><source src="1.mp4" type="video/mp4"><source src="1.webm" type=&qu

18、ot;video/webm"> <object type="application/x-shockwave-flash" data="1.swf?videourl=1.mp4&control=true"> <param name="movie" value="1.swf?videourl=1.mp4&control=true"></object> /嵌入Flash动画 <a href="1.mp4">下载该视频<

19、;/a></video>4. html5支持5中音频：.ogg .mp3 .wav .aac .mp45.添加音频：<audio src="1.ogg"></audio>音频属性：src autoplay controls muted loop preload 。多个来源同video。七.一些约定 我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。 1. 样式名称首字母统一为小写字母，不能为数字，下划线及特别字符；2. 样式名尽量语义化或简写； 3. 样式名需要组合拼写时，接受全部小写拼写并使用下划线连接

20、，即：all_keyword； 4. 使用px(像素)为基本计量单位； 5. 页面中空格的使用：全角：中文空格 半角；&nbsp; 6. 项目完成包中，文件夹及文件名称全部接受小写字母，不使用中文文件名； 7. 削减DIV的嵌套层数； 8. 给重要图片加上alt属性；给重要的元素和截断的元素加上title； 9. 使用正确的注释方法（详见“注释”章节）； 10. 特别情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font等； 11. 双标记签都要有开头和结束标签，单标记标签的后面肯定要加“ /”,例如：<br />等，并且有正确的层次；12. 其

21、它特别符号： 1) <(&lt;) 2) >(&gt;)八.命名空间 8.1外挂样式名称 全局：public.css 全局样式为全站公用，为页面样式基础，页面中必须包含。 结构：layout.css 页面结构类型简单，并且公用类型较多时使用。多用在首页级页面和产品类页面中。 私有：style.css 独立页面所使用的样式文件，页面中必须包含。 模块 module.css 产品类页面应用，将可复用类模块进行剥离后，可与其它样式协作使用。 默认 default.css文章 article.css图片 photo.css下载 soft.css主题 themes.css 实

22、现换肤功能时应用。 补丁 mend.css 基于以上样式进行的私有化修补。8.2 常用名称 (1)页面结构 容器: container页头：header内容：content/container/content(A)页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围掌握整体布局宽度：wrapper左右中：left right center浮左浮右：fl fr清除浮动 clear(2)导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar

23、菜单：menu子菜单：submenu标题：title摘要：summary路径：path(3)模块化命名模块头部：hd模块内容部分：bd模块底部：ft(4)各内容页对应标题：title副标题：subtitle属性：properties简介：infor内容：content分页：page插入广告：insert_ad表情：expression功能选项：options上下篇：up_down评论：comments相关内容：related下载地址：download播放地址：play_add(5)功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜寻：searc

24、h日期：date功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的：current小技巧：tips图标：icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright九.基本设置-public.css 9.1 全局设置 上下边距(margin、padding)：0(px) 左右边距(margin)：auto(自动) 底色(background):#FFF(白色) 字体(f

25、ont-family)、字号(font-szie)、字色(color)：”宋体” 12px #666 代码： /* 全局CSS定义 */ bodymargin:0 auto;padding:0;background:#FFF;color:#666;font:12px 宋体' div,form,ul,ol,li,span,p,dl,dt,dd,imgmargin:0;padding:0;border:0;h1,h2,h3,h4,h5,h6margin:0;padding:0;font-size:12px;font-weight:normal;ul,ol,lilist-style:none

26、table,td,input,textareafont-size:12px9.2 页面标签初始化设置 1. 常用基本标div,form,ul,ol,li,span,p,dl,dt,dd,img设置基本标签的间距、边框默认值为0。2. h1h6标题默认标题内字号12px，内外间距为0px，文字不加粗。3. ul,ol,li 列表默认不显示项目符号。4. h2 栏目标题说明：h2标签被定义为栏目标题特别使用，在标签中非标题文字默认居右显示，主标题文字使用span标签包含，居左显示。5. 默认链接颜色常态下不显示文字下划线，颜色为灰(#333)，鼠标悬浮时：显示文字下划线，颜色变为暗红(#ccc)。

27、6. 状态：a:link未点 a:visited已点 a:focus键盘选中 a:hover指针停留 a:active正在点9.3 页面宽度 默认页面宽(命名规范)：按栅格化进行9.4 .clear 结束容器内各元素的浮动属性，使相邻容器或元素节点正常显示。以下是清除浮动的几种方法方法一.clear clear:both; height:0; font-size:0; line-height:0或.clear border-top: 1px solid transparent !important;margin-top: -1px !important;border-top: 0px;marg

28、in-top: 0px;height: 0px;clear: both;background: none;font-size: 0px;visibility: hidden;或.clearclear:both;font-size:1px;width:1px;height:0;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0使用方法: <div class="clear"></div>RightLeft <div class="clear&

29、quot;></div>方法二.clearzoom:1;.clear:after clear:both; height:0; overflow:hidden; display:block; visibility:hidden; content:" ." 或.claer height:auto; _height:200px; min-height:200px; verflow:auto; zoom:1; _overflow:visible;使用方法:<div class=""><ul class="clear"><li><a href="#">送水送气</a></li> <li><a href="#">送花服