《web前端学习总.docx》由会员分享，可在线阅读，更多相关《web前端学习总.docx（9页珍藏版）》请在三一办公上搜索。
1、web前端学习总Web总结 一.名词解释 1. 横切 在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切 2. 留白 两个容器或碎片之间的上、下、左、右的空白距离 3. 继承 元素可以从其父级元素中获得一些可为自己使用的属性或值。 4. 图片定位 把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图 5. 底图 页面中在标签中使用的背景图 6. 齐底(图)线 用于区分横切或碎片结束的线或图 7. 页面结构 页面的基础框架，由横切、布局元素组成 8. 焦点区(图) 最易注意的区域 9. 导航 在页面中具有导向性的链
2、接集合 10. 头图 页面主题图片 11. 间距 碎片或文字间的距离 12. 行高 文字段落中行与行之间的距离 13. 首行缩进 文字段落首行缩进 14. 浮动 使被定义的区域脱离正常的页面文档流 15. 碎片 由文字、图片组合成的内容区域 16. 通栏广告 与页面内容区同宽的广告区域 17. 功能按钮 具有交互属性的按钮 18. 私有样式 当前页面独立使用的样式，不具备公用性 19. 水平(垂直)居中 在页面中的某个元素处于父级的上下或左右的相同距离 20. 标准头(尾) 定义相同的页面头或尾元素集合 二.文本格式化 1. 段落：p 2. 斜体：addressemicitedfn 3. 粗体
3、：strongb 4. 图片块：figure 5. 引述文段，段落缩进：blockquote 6. 背景颜色：mark 7. 虚线下划线：abbr 8. 上标下标：sub/sup 9. 下划线：ins 10. 删除线：dels 11. 等宽字体：code 12. 预格式化：pre 13. 字号减小，表注释：small 14. 时间：time 15. 换行：br 16. html5定义区块：header nav article section aside footer div span 三.表单表格 1. . 2. 表单元素的组织：. 3. 创建各种框: 注：textpassword/url/t
4、el/email Id:为了让对应的标签识别，添加CSS Name：为了让服务器和脚本识别，通常与id设为一样 Size：文本框大小 Maxlength：能输入的最大字符数 Pattern：正则表达式 4. 添加标签： 5. 单(多)选按钮： 北京 上海 注：id各自唯一，name必须相同。checked：默认选择 6. 下拉框： 北京 上海 成都 注：size:选择框的高度 multiple：允许多选 selected：默认选择 用对选择框进行分组 7. 上传文件： 注：size：输入路径和文件名的字段的宽度 8. 禁用表单元素： 9. 创建提交按钮： 创建带图像的提交按钮：点击这里 创建图
5、像按钮： Submitreset重置 10. 文本区域：请在此输入字符 11. 表格 : . . . . . 四.文本格式化 1. font： 字体大小(必有) 行距 字体集; 2. 文本背景： background：#foc urlrepeat-x scroll 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-block
6、8. 单词大小写: text-transform:capitalize(单词首字母大写)/uppercase(大写)/lowercase(小写) 9. 文本上的线：text-decoraion:underline/overline/line-through; 11. 空格：white-space:pre(显示所有空格回车)/nowrap； 12. h316px; h512px; verdana,Geneva,sans-serif; 13. 列表属性： lilist-style:url(1.jpg) inside square; 五.CSS布局 1. width：不包括padding，borde
7、r，margin；max-width设置外围限制； 2. 浮动：float:left; 清除浮动：clear:both; 3. 设置边框： border:dotted 4px red;(dotted点状、dashed虚线、solid实线) 4. 使元素对齐：vertical-align:baseline/middle/text-bottom. 5. 显示：display:black/inline/inline-block; 6. 显示：visibility:visible/hiddle; 7. 相对定位：position:relative; top:5px; 相对于该元素的原始位置 8. 绝对
8、定位：position:absolute; top:5px; 相对于body或离他最近定位的祖先元素 9. 三维位置：z-index:50; 越大的在最上面 10.页面中空格的使用：全角：中文空格 半角； 项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名； 其它特殊符号： 1) () 六.基本设置-public.css 1 全局设置 上下边距(margin、padding)：0(px) 左右边距(margin)：auto(自动) 底色(background):#FFF(白色) 字体(font-family)、字号(font-szie)、字色(color)：”宋体”
9、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 table,td,input,textareafont-size:12px 2 页面
10、标签初始化设置 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)。 6. 状态：a:link未点 a:visited已点 a:focu
11、s键盘选中 a:hover指针停留 a:active正在点 3 页面宽度 默认页面宽(命名规范)：按栅格化进行 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; margin-top: 0px; height: 0px; c
12、lear: both; background: none; font-size: 0px; visibility: hidden; 或 .clear clear:both; font-size:1px; width:1px; height:0; visibility:hidden; margin-top:0px!important; *margin-top:-1px; line-height:0 使用方法: Left Right 方法二 .clearzoom:1; .clear:after clear:both; height:0; overflow:hidden; display:block
13、; visibility:hidden; content: .; 或 .claer height:auto; _height:200px; min-height:200px; verflow:auto; zoom:1; _overflow:visible; 使用方法: 送水送气 送花服务 宾馆住宿 家电维修 餐饮电话 电脑网络 5 自定义属性 1. 文字列表 ： (样式名) 用于文字列表，区分为两种字体(12px/14px)，默认行内间距上下3px。 2. 图片列表 ：(样式名) 用于组图型碎片，默认具有claar属性，容器内img、span标签为块级元素,并清除图片上下外间距 3. 图文混排
14、： (样式名) 碎片内使用、区分图片及文字，默认形态为左图右文，且图片与文字间距为10px。 4. 文字类：加粗(b)、arial 字体(.fontArial) 处理局部应用 5. 浮动： (fl/fr) 用于构建页面框架 6. 留白: (blank5/blank8) 设定页面中留白高度为5px、8px两种 6完整代码 /* 全局CSS定义 */ bodytext-align:center;margin: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; 需要举例说明
