前端学习总结

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.页面中空格的使用：全角：中文空格 半角；&nbsp; 项目完成包中，文件夹及文件名称全部采用小写字母，不使用中

15、文文件名； 其它特殊符号： 1) <(&lt;) 2) >(&gt;) 六.基本设置-public.css 1 全局设置 上下边距(margin、padding)：0(px) 左右边距(margin)：auto(自动) 底色(background):#FFF(白色) 字体(font-family)、字号(font-szie)、字色(color)：”宋体” 12px #666 代码： /* 全局CSS定义 */ bodymargin:0 auto;padding:0;background:#FFF;color:#666;font:12px 宋体' div,fo

16、rm,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:nonetable,td,input,textareafont-size:12px2 页面标签初始化设置 1. 常用基本标div,form,ul,ol,li,span,p,dl,dt,dd,img设置基本标签的间距、边框默认值为0。2. h1h6标题默认标题内字号12px，内外间距为0px，文字不加粗。

17、3. ul,ol,li 列表默认不显示项目符号。4. h2 栏目标题说明：h2标签被定义为栏目标题特殊使用，在标签中非标题文字默认居右显示，主标题文字使用span标签包含，居左显示。5. 默认链接颜色常态下不显示文字下划线，颜色为灰(#333)，鼠标悬浮时：显示文字下划线，颜色变为暗红(#ccc)。6. 状态：a:link未点 a:visited已点 a:focus键盘选中 a:hover指针停留 a:active正在点3 页面宽度 默认页面宽(命名规范)：按栅格化进行4 .clear 结束容器内各元素的浮动属性，使相邻容器或元素节点正常显示。以下是清除浮动的几种方法方法一.clear cle

18、ar: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;clear: both;background: none;font-size: 0px;visibility: hidden;或.clearclear:both;font-size:1px;width:1px;height:0;visibility:hidde

19、n;margin-top:0px!important;*margin-top:-1px;line-height:0使用方法: <div class="clear"></div>RightLeft <div class="clear"></div>方法二.clearzoom:1;.clear:after clear:both; height:0; overflow:hidden; display:block; visibility:hidden; content:" ." 或.claer&

20、#160;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="#">送花服务</a></li> <li><a href="#">宾馆住宿</a></li> <li><a href="#&quo