前端常规代码书写法.docx
- 文档编号:10488171
- 上传时间:2023-02-13
- 格式:DOCX
- 页数:16
- 大小:22.72KB
前端常规代码书写法.docx
《前端常规代码书写法.docx》由会员分享,可在线阅读,更多相关《前端常规代码书写法.docx(16页珍藏版)》请在冰豆网上搜索。
前端常规代码书写法
HTML注释:
--这是一段注释。
注释不会在浏览器中显示。
-->
mapareashape=rectcirclecoords
带有可点击区域的图像映射:
CSS代码中进行注释的三种方法
不能以数字开头命名CSS类
请不要以阿拉伯1、2、3、4开头来命名css伪类,不然将造成浏览器无法解释解析以数字开头命名的css类,最后造成类似csshack样不兼容,或直接以数字开头css名称的类无效(浏览器无法解释)。
但是可以用字母命名加数字方式命名,切记不能用数字加字母或纯数字方式来命名css选择器。
1、选择器(childselector)
如果你想在IE中隐藏一个CSS定义,可以使用子选择器。
CSS注释代码:
html>bodyp{
/*declarations*/
}
2、“通配符”(*)
这种写法只有IE浏览器可以理解(对其他浏览器都隐藏)
CSS注释代码:
*htmlp{
/*declarations*/
}
3、“反斜线”(\)
如果你希望IE/Win有效而IE/Mac隐藏,可以使用“反斜线”技巧。
CSS注释代码:
/*\*/
*htmlp{
declarations
}
/**/
JavaScript多行注释
多行注释以/*开始,以*/结尾。
单行注释以//开头。
Html
<标签属性=”值”>标签>
<标签/>
Css
从整体到局部套写代码
Css规则由两个主要部分构成:
选择器,以及一条或多条声明。
每个声明由一个属性和一个值组成
选择器{声明}
选择器{属性:
值;属性:
值;}
选择器,选择器,。
。
。
{属性:
值,值,。
。
。
}
空格是多种属性的值
Table{border:
1pxsolidred;}
逗号是或的意思(同种属性的各种值)
body{font-family:
Verdana,sans-serif;}
多种字体不支持选后一种
派生选择器
通过依据元素在其位置的上下文关系来定义样式
listrong{}
#开头为id选择器(唯一性)
.开头为class选择器(群类)
属性选择器所有元素属性都改变
格式为中括号[title]{color:
red;}
提示:
如果值为若干单词,则要给值加引号:
p{font-family:
"sansserif";}
Css创建
外部样式
内部样式表
内联样式
sienna;margin-left: 20px"> Thisisaparagraph
第一行说明了他的文字编码
第二行说明了他采用的语言
第三行说明了他的作者
第四行说明了他的版权
第五行是对网站的简单描述
第六行是说明了本网站的关键字
后便两行主要是被XX这些搜索网站检索的时候用的非常重要
块级元素和行内元素的区别
块级元素
常见元素:
div、p、form、ul、ol、li
特性:
独占一行,默认情况下,其宽度自动填满其父元素宽度
width、height属性:
可以设置,设置了宽度还是独占一行
margin和padding属性:
可以设置
对应的相关display属性:
block
切换:
display:
inline变成行内元素
行内元素
常见元素:
span、strong、em
特性:
不会独占一行,相邻行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化
width、height属性:
无效
margin和padding属性:
水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果,但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
对应的相关display属性:
inline
切换:
display:
display:
block变成块级元素
marginpadding上右下左和上下右左和上右左下
text-decoration(装饰):
none(没有一点)[nʌn]去下划线
CSSposition属性
通过使用position属性,我们可以选择4种不同类型的定位,这会影响元素框生成的方式。
position属性值的含义:
static
元素框正常生成。
块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative(相对的对比原始位置)
元素框偏移某个距离。
元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute(绝对的浏览器)
元素框从文档流完全删除,并相对于其包含块定位。
包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。
元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed(固定的浏览器)
元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。
z-index堆叠顺序(上下覆盖)
visibility属性规定元素是否可见。
提示:
即使不可见的元素也会占据页面上的空间。
请使用"display"属性来创建不占据页面空间的不可见元素
值描述
visible默认值。
元素是可见的。
hidden元素是不可见的。
collapse当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。
被行或列占据的空间会留给其他内容使用。
如果此值被用在其他的元素上,会呈现为"hidden"。
inherit规定应该从父元素继承visibility属性的值。
IE9,Firefox,Chrome,Opera和Safari使用属性opacity来设定透明度。
opacity属性能够设置的值从0.0到1.0。
值越小,越透明。
IE8以及更早的版本使用滤镜filter:
alpha(opacity=x)。
x能够取的值从0到100。
值越小,越透明。
img
{
opacity(不透明性):
0.4;
filter(过滤):
alpha(opacity=40);/*针对IE8以及更早的版本*/
}
-moz-opacity:
0.4;/*火狐浏览器*/
cssfloat浮动产生浮动无法显示背景样式颜色
假设对一个对象设置了background背景颜色样式,该对象内部盒子有使用float浮动属性样式,这个时候该对象浮动产生,导致该对象不能撑开,所以css背景颜色就不能无法显示,解决方法有三种,一个是设置clear清除浮动、设置css高度、设置cssoverflow样式。
Javascript
对象
访问对象的属性
属性是与对象相关的值(值的多少)
objectName.propertyName
访问对象的方法
方法是能够在对象上执行的动作
objectName.methodName()
Javascript创建
内部
老式浏览器会用
外部
老式浏览器用type=”text/script”
注释单行//
多行/**/
document文档对象
var变量(该变量没有值)
变量=“名词”/x+4
数据类型
字符串数字布尔数组对象nullundefined
数字类型
可以带小数点,也可以不带
varx1=3400或varx1=34e2
varx2=0.0003或varx2=3e-4
数组
varcar=newArray();
cars[0]=”audi”;
cars[1]=”bmw”;
cars[2]=”volvo”
或者(condensedarray)
varcars=newArray(“aydi”,”bmw”,”volvo”);
或者(literalarray)
varcars=[“aydi”,”bmw”,”volvo”];
对象
对象由花括号分隔。
在括号内部,对象的属性以名称和值对的形式(name:
value)来定义。
属性由逗号分隔。
varperson={firstname:
”bill”,lastname:
”gates”,id:
5566}
空格和折行无关紧要。
声明可横跨多行。
对象属性有两种寻址方式:
name=person.lastname
name=person[“lastname”]
布尔nullundefined
声明变量类型
当您声明新变量时,可以使用关键词“new”来声明其类型
varx=mewnumber
vary=mewboolean
javascript中括号的应用
小括号
1.函数声明时参数表
functionfunc(arg1,arg2){//...}
2.和一些语句联合使用以达到某些限定作用
和forin一起使用
for(varainobj){}
和if一起使用
if(boo){}
和while一起使用
while(boo){}
和dowhile一起使用do{}
while(boo)
注意:
在与if,while,dowhile一起使用时小括号会将其中的表达式结果隐式转换成布尔值。
见无处不在的隐式类型转换。
3.和new一起使用用来传值(实参)
假设已经定义了类Person,它有两个字段姓名(name),年龄(age)
varp1=newPerson(‘jack’,26)
4.作为函数或对象方法的调用运算符(如果定义了参数也可与语义3一样传实参)
假设已经定义了函数func
func();
假设已经定义了对象obj,且拥有func方法
obj.func()
这里提下tpyeof运算符,有人喜欢这么使用
请注意typeof后的小括号并非语义4(即不是函数调用),而是后面提到的语义5。
我使用typeof一般不加后面的小括号。
见具名函数的多种调用方式
5.强制表达式运算
functionstrToJson(str){//eval中字符串两旁加了强制运算符()
varjson=eval(‘(‘+str+’)’);
returnjson;}
关于语义5,大家最熟悉的莫过于使用eval解析JSON又如使用较多的是匿名函数自执行(funtion(){})();
注意,以上代码第1对小括号是语义5,第3对则是语义4。
大括号
javascript中大括号有四种语义作用
1.组织复合语句,这是最常见的
if(condition){}else{}for(){}
2.对象直接量声明
varobj={name:
’jack’,age:
23;}
整个是个赋值语句,其中{name:
’jack’,age:
23}是个表达式。
3.声明函数或函数直接量
functionf1(){}
varf2=function(){}
f1与f2的区别是前者在语法解释期,后者在运行期。
区别在于:
如果调用函数的代码在函数定义之后,则没有区别;如果调用函数的代码在函数定义之前,则f1仍然可以调用,f则会报错,提示f2未定义。
4.结构化异常处理的语法符号
try{}catch()ex{}finally{}
这里的大括号与符合语句(语义1)是有区别的,大括号中如果只有一条语句,在if/else/for等大括号是可以省略的,但try/catch/finally则不能省略。
以下代码纠结了偶n次
function(){}()匿名函数立即执行,语法分析期报错
{}.constructor获取对象直接量的构造器,语法分析期报错
令人不解的是为何[].constructor这么写却不报错呢,一个是想获取对象直接量的构造器,一个是获取数组直接量的构造器而已。
当然添加个变量接收也不会报错
同样的情况如
varfn=function(){}(),也不会报错。
实际上是js的“语句优先”在作怪,即{}被理解成复合语句块(语义1)而不是对象直接量(语义2)或声明函数(语义3)的语义。
function(){}(),大括号被理解成复合语句,自然前面的function()声明函数的语法不完整导致语法分析期出错。
{}.constructor,大括号被理解成复合语句,大括号后面是点运算符,点运算符前没有合理的对象自然也报错。
修复方式众所周知:
加个强制运算符()
(function(){})(),(function(){});//强制其理解为函数(语义3),“函数()”表示执行该函数,即声明后立即执行了。
({}).constructor//({})强制把大括号理解成对象直接量(语义2),“对象.xx”表示获取对象的成员,自然后面的点运算符可以正常执行了。
中括号
javascript中括号有四种语义
1.声明数组
2.varary=[]声明一个空数组
varary=[1,3]声明一个数组,同时赋值
2.取数组成员
varary=[1,2,3];varitem=ary[0]
3.定义对象成员(可以不遵循标识符规则)
varobj={}
为obj添加一个属性name,name是合法的标识符,即也可以通过obj.name方式来定义
obj[‘name’]=’jack’
为obj添加一个属性2a,2a不是合法的标识符(不能以数字开头),不能通过obj.2a来定义
obj[‘2a’]=’test’
4.取对象成员
varobj={name:
’jack’};obj[‘2a’]=’test’
obj[‘name’];//-->jack
obj[‘2a’]//-->test(不能通过obj.2a获取)
函数
Function名(参数)
{var变量名=方法(值)
名.属性=值
名.属性.属性=值
}
.名等于[名](用于样式名替换不固定的属性)
执行名(参数)
字面量(常量)(数字字符串)变量
SEO(搜索引擎优化)有很多工作要做,其中对代码的优化是一个很关键的步骤。
为了更加符合SEO的规范,下面中部IT网将对目前流行的CSS+DIV的命名规则整理如下:
页头:
header
登录条:
loginBar
标志:
logo
侧栏:
sideBar
广告:
banner
导航:
nav
子导航:
subNav
菜单:
menu
子菜单:
subMenu
搜索:
search
滚动:
scroll
页面主体:
main
内容:
content
标签页:
tab
文章列表:
list
提示信息:
msg
小技巧:
tips
栏目标题:
title
加入:
joinus
指南:
guild
服务:
service
热点:
hot
新闻:
news
下载:
download
注册:
regsiter
状态:
status
按钮:
btn
投票:
vote
合作伙伴:
partner
友情链接:
friendLink
页脚:
footer
版权:
copyRight1.CSSID的命名
外 套:
wrap
主导航:
mainNav
子导航:
subnav
页 脚:
footer
整个页面:
content
页 眉:
header
页 脚:
footer
商 标:
label
标 题:
title
主导航:
mainNav(globalNav)
顶导航:
topnav
边导航:
sidebar
左导航:
leftsideBar
右导航:
rightsideBar
旗 志:
logo
标 语:
banner
菜单内容1:
menu1Content
菜单容量:
menuContainer
子菜单:
submenu
边导航图标:
sidebarIcon
注释:
note
面包屑:
breadCrumb(即页面所处位置导航提示)
容器:
container
内容:
content
搜索:
search
登陆:
login
功能区:
shop(如购物车,收银台)
当前的 current2.另外在编辑样式表时可用的注释可这样写:
内容区
3.样式文件命名主要的master.css
布局,版面layout.css
专栏columns.css
文字font.css
打印样式print.css
主题themes.css
所以其实是不是真的有那么多生不逢时、倒霉透顶和怀才不遇?
是不是真的得等到裁员事件发生才发现“我早就想转行,但不知道做什么好”?
你不能确定,你唯一确定的是,每每这种时刻,对过去的懊悔,对现在的迷茫,对未来的恐惧交织成的暴风雨就会瞬间猛烈来袭。
这大概就是为什么说,哪里有那么多懊悔,只不过每一个你讨厌的现在,都有一个不够努力的曾经;哪里有那么多迷茫,只不过是你的才华配不上你的理想;哪里有那么多恐惧,只不过你不愿意离开当下的舒适区,又知道世上没有钱多事少离家近的工作,所以贸贸然行动,风险是不是太大了一点。
于是,我们唯一不用付诸行动就能得到的就是,被某个老板裁,被某个行业裁,或者被某个时代裁。
而且这一天一定会毫无风险地到来。
坚毅
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 常规 代码 书写