最新web前端学习总结精华版.docx
- 文档编号:4634312
- 上传时间:2022-12-07
- 格式:DOCX
- 页数:15
- 大小:29.88KB
最新web前端学习总结精华版.docx
《最新web前端学习总结精华版.docx》由会员分享,可在线阅读,更多相关《最新web前端学习总结精华版.docx(15页珍藏版)》请在冰豆网上搜索。
最新web前端学习总结精华版
Web总结
一.名词解释
1.横切
在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切
2.留白
两个容器或碎片之间的上、下、左、右的空白距离
3.继承
元素可以从其父级元素中获得一些可为自己使用的属性或值。
4.图片定位
把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中,利用CSS中对图片进行遮罩属性,多用于页面中的修饰图
5.底图
页面中在标签中使用的背景图
6.齐底(图)线
用于区分横切或碎片结束的线或图
7.页面结构
页面的基础框架,由横切、布局元素组成
8.焦点区(图)
最易注意的区域
9.导航
在页面中具有导向性的链接集合
10.头图
页面主题图片
11.间距
碎片或文字间的距离
12.行高
文字段落中行与行之间的距离
13.首行缩进
文字段落首行缩进
14.浮动
使被定义的区域脱离正常的页面文档流
15.碎片
由文字、图片组合成的内容区域
16.通栏广告
与页面内容区同宽的广告区域
17.功能按钮
具有交互属性的按钮
18.私有样式
当前页面独立使用的样式,不具备公用性
19.水平(垂直)居中
在页面中的某个元素处于父级的上下或左右的相同距离
20.标准头(尾)
定义相同的页面头或尾元素集合
二.文本格式化
1.段落:
p
2.斜体:
address(联系信息)em(强调)i(突出不同)cite(引用)dfn(首次定义术语)
3.粗体:
strong(重要)b(提醒)
4.图片块:
figure
5.引述文段,段落缩进:
blockquote
6.背景颜色:
mark
7.虚线下划线:
abbr
8.上标下标:
sub/sup
9.下划线:
ins
10.删除线:
del(标记已删除内容)s(标记不准确内容)
11.等宽字体:
code
12.预格式化:
pre
13.字号减小,表注释:
small
14.时间:
time
15.换行:
br
16.html5定义区块:
headernavarticlesectionasidefooterdivspan
三.表单表格
1.
2.表单元素的组织:
3.创建各种框:
//"autofocus="autofocus"size="12"maxlength="20"pattern=".."/> 注: text→password/url/tel/email Id: 为了让对应的标签识别,添加CSS Name: 为了让服务器和脚本识别,通常与id设为一样 Size: 文本框大小 Maxlength: 能输入的最大字符数 Pattern: 正则表达式 4.添加标签: 5.单(多)选按钮: 注: id各自唯一,name必须相同。 checked: 默认选择 6.下拉框: 注: size: 选择框的高度multiple: 允许多选selected: 默认选择用 7.上传文件: 注: size: 输入路径和文件名的字段的宽度 8.禁用表单元素: 9.创建提交按钮: 创建带图像的提交按钮: 创建图像按钮: Submit→reset重置 10.文本区域: 11.表格:..
四.文本格式化
1.{font:
(斜体粗体小型大写字母)字体大小(必有)行距字体集(必有);}
2.文本背景:
{background:
#focurl(1.jpg)repeat-xscroll00;}
3.字间距:
word-spacing:
12px;
4.字偶距:
letter-spacing:
12px;
5.缩进增加:
text-indent:
12px;
6.小型大写字母:
font-variant:
small-caps;
7.文本对齐:
text-align:
left;适用于block,inline-block
8.单词大小写:
text-transform:
capitalize(单词首字母大写)/uppercase(大写)/lowercase(小写)
9.文本上的线:
text-decoraion:
underline/overline/line-through;
11.空格:
white-space:
pre(显示所有空格回车)/nowrap(非断行空格);
12.h3—16px;h5—12px;verdana,Geneva,sans-serif;
13.列表属性:
li{list-style:
url(1.jpg)insidesquare;}
五.CSS布局
1.width:
不包括padding,border,margin;max-width设置外围限制;
2.浮动:
float:
left;清除浮动:
clear:
both;
3.设置边框:
border:
dotted4pxred;(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.绝对定位:
{position:
absolute;top:
5px;}相对于body或离他最近定位的祖先元素
9.三维位置:
{z-index:
50;}越大的在最上面
10.厂商前缀:
-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)
11.创建圆角:
{-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:
2px5px5px#999;}x/y/模糊半径
15.元素加阴影:
{(-moz-/-webkit-)box-shadow:
(inset内阴影)2px5px5px#999;5px10px2px#555(多重阴影);}
16.多重背景:
{background:
#000url(1.png)50%102%no-repeat,#222url(2.png)12px-150pxrepeat-x;}
17.透明度:
{opacity:
.5;}0→1透明→不透明
18.渐变背景:
{background:
linear-gradient(left,#000,#999);}(left:
渐变线沿逆时针方向转至水平线的角度)
六.html5视频音频
1.html5支持3种视频:
.ogg/.ogv.mp4/.m4v.webm
2.添加视频:
视频属性:
srcautoplaycontrolsmutedloopposterwidthheightpreload
3.为视频添加多个来源:
videourl=1.mp4&control=true"> videourl=1.mp4&control=true"> //嵌入Flash动画 4.html5支持5中音频: .ogg.mp3.wav.aac.mp4 5.添加音频: 音频属性: srcautoplaycontrolsmutedlooppreload。 多个来源同video。 七.一些约定 我们结合常用的一些命名习惯,再结合CSS的实际应用,整理出一些较好的命名习惯。 1.样式名称首字母统一为小写字母,不能为数字,下划线及特殊字符; 2.样式名尽量语义化或简写; 3.样式名需要组合拼写时,采用全部小写拼写并使用下划线连接,即: all_keyword; 4.使用px(像素)为基本计量单位; 5.页面中空格的使用: 全角: 中文空格半角; 6.项目完成包中,文件夹及文件名称全部采用小写字母,不使用中文文件名; 7.减少DIV的嵌套层数; 8.给重要图片加上alt属性;给重要的元素和截断的元素加上title; 9.使用正确的注释方法(详见“注释”章节); 10.特殊情况下要求表现和内容分离,代码中不要涉及任何表现的元素,例如: style、font等; 11.双标记签都要有开始和结束标签,单标记标签的后面一定要加“/”,例如: 12.其它特殊符号: 1)<(<) 2)>(>) 八.命名空间 8.1外挂样式名称 全局: public.css 全局样式为全站公用,为页面样式基础,页面中必须包含。 结构: layout.css 页面结构类型复杂,并且公用类型较多时使用。 多用在首页级页面和产品类页面中。 私有: style.css 独立页面所使用的样式文件,页面中必须包含。 模块module.css 产品类页面应用,将可复用类模块进行剥离后,可与其它样式配合使用。 默认default.css 文章article.css 图片photo.css 下载soft.css 主题themes.css 实现换肤功能时应用。 补丁mend.css 基于以上样式进行的私有化修补。 8.2常用名称 (1)页面结构 容器: container 页头: header 内容: content/container/content(A) 页面主体: main 页尾: footer 导航: nav 侧栏: sidebar 栏目: column 页面外围控制整体布局宽度: wrapper 左右中: leftrightcenter 浮左浮右: flfr 清除浮动clear (2)导航 导航: nav 主导航: mainbav 子导航: subnav 顶导航: topnav 边导航: sidebar 左导航: leftsidebar 右导航: rightsidebar 菜单: 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 搜索: search 日期: 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(白色) 字体(font-family)、字号(font-szie)、字色(color): ”宋体”12px#666 代码: /*全局CSS定义*/ body{margin: 0auto;padding: 0;background: #FFF;color: #666;font: 12px‘宋体';} div,form,ul,ol,li,span,p,dl,dt,dd,img{margin: 0;padding: 0;border: 0;} h1,h2,h3,h4,h5,h6{margin: 0;padding: 0;font-size: 12px;font-weight: normal;} ul,ol,li{list-style: none} table,td,input,textarea{font-size: 12px} 9.2页面标签初始化设置 1.常用基本标div,form,ul,ol,li,span,p,dl,dt,dd,img 设置基本标签的间距、边框默认值为0。 2.h1~h6标题 默认标题内字号12px,内外间距为0px,文字不加粗。 3.ul,ol,li列表 默认不显示项目符号。 4.h2栏目标题 说明: h2标签被定义为栏目标题特殊使用,在标签中非标题文字默认居右显示,主标题文字使用span标签包含,居左显示。 5.默认链接颜色 常态下不显示文字下划线,颜色为灰(#333),鼠标悬浮时: 显示文字下划线,颜色变为暗红(#ccc)。 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: 1pxsolidtransparent! important; margin-top: -1px! important; border-top: 0px; margin-top: 0px; height: 0px; clear: 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 } 使用方法:
等,并且有正确的层次;
方法二
.clear{zoom:
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;
}
使用方法:
9.5自定义属性
1.文字列表:
(样式名)
用于文字列表,区分为两种字体(12px/14px),默认行内间距上下3px。
2.图片列表:
(样式名)
用于组图型碎片,默认具有claar属性,容器内img、span标签为块级元素,并清除图片上下外间距
3.图文混排:
(样式名)
碎片内使用
区分图片及文字,默认形态为左图右文,且图片与文字间距为10px。
4.文字类:
加粗(b)、arial字体(.fontArial)
处理局部应用
5.浮动:
(fl/fr)
用于构建页面框架
6.留白:
(blank5/blank8)
营销环境信息收集索引设定页面中留白高度为5px、8px两种
(三)DIY手工艺品的“自助化”9.6完整代码
三、主要竞争者分析/*全局CSS定义*/
是□否□
经常光顾□偶尔会去□不会去□body{text-align:
center;margin:
0auto;padding:
0;background:
#FFF;color:
#666;font:
12px'宋体';}
div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:
0;padding:
0;border:
0;}
……
需要举例说明
十.框架设置
标题:
大学生究竟难在哪?
—创业要迈五道坎2004年3月23日10.1约定
调研提纲:
1.横切结构样式为area,所有横要带有id,名称:
contentA,contentB
2.结构元素使用div标签,标签嵌套注意层级关系,如:
月生活费人数(频率)百分比10.2说明
(3)个性体现6.2.1栏间留白
三栏时定义中间栏,多栏定义时从第二栏开始定义。
(四)DIY手工艺品的“个性化”6.2.2横切留白
横切间留白,在下一个横切中定义,如:
margin‐top:
10px
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 最新 web 前端 学习 总结 精华版