前端规范

1.前端编程规范:

(1)命名规范:统一用小写的字母、数字和下划线的组合,文件名要易于理解和查找,首页

取名为homeindex,其它页面用英文翻译或中文拼音,但不建议英文和中文拼音混合使用。

(2)图片命名规则:分为头尾两部分,用下划线隔开,头部表示图片的大类,放在页面首部的广告、装饰图等长方形大图取名:banner,标志性图片取名:log,有链接的图片取名:button

没有链接的标题图片取名:title,装饰用的照片取名:pic,在页面上连续出现、性质相同的栏目图片取名:menu

(3)选择器:#id,.class,标签选择器。class在一个页面中可以重复,id不能,class一般用在css中,id一般用在js中。优先级:直接在标签中设置>id>class>标签选择器。

class和id命名规


页面结构

容器框架

frame/container

页头

header

页尾

footer

内容框架

wrapper/content


导航结构

导航

nav

主导航

mainnav

子导航

subnav

顶导航

topnav

菜单

menu

子菜单

submenu

标题

title

图标

icon


                                          

功能结构

标志

logo

登陆

login

登陆条

loginbar

注册

regist

评论

review

子菜单

submenu

标题

title

图标

icon

按钮

button/btn

搜索

search

(4)超链接规范:统一用相对路径,#表示链接到当前页面和javascript:void(null)链接到空页面

(5)表格规范:尽量避免表格嵌套过多,trtd标签能不换行最好不要换行。

2.前端浏览器兼容:网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。各浏览器使用了不同的内核,并且它们处理同一件事情的时候思路不同,以及用户客户端的环境不同,可能导致网页元素位置混乱,错位。

3.判断浏览器版本方法:<!--[if 条件 版本]>需要显示的内容<![endif]-->

排除条件:[if !IE 6] 除了IE6其他的都能显示

等于条件和或者条件:[if IE 8][if(IE 8)|(IE 10)]

高于版本和低于版本(不包含当前版本):[if gt IE 8]   [if lt IE 8]

高于版本和低于版本(包含当前版本):[ifgte IE 8]   [if lte IE 8]

介于两个版本之间:[if(gt IE 7)&(lt IE 10)]

4.页面内容调试:F12打开调试页面,可以查看每个元素,修改后立即查看效果

5.html一般格式

<!DOCTYPEhtml>

<html>

       <head>       //头部信息

              <metacharset="UTF-8"> //用于定义文件头信息,告诉浏览器需要干一些什么事情

                                                   //charset:定义字符集

                              //keyword:设置搜索关键字内容

                                                // description:设置描述关键内容

              <title></title>   //网页的标题内容

       </head>

       <body>  //主体内容

       </body>

</html>

6.页面中添加滚动文字

<marquee  width=”” height=””  bgcolor=””  direction=”” hspace=”” vspace=””  scrollamount= “”  loop=””>滚动文字</marquee>

Bgcolor是为滚动文字添加背景颜色,loop是设置循环次数,-1表示无限循环。Direction是设置滚动方向,behavior是设置滚动方式,scrollamount设置滚动速度,scrolldelay设置延迟时间,hspacevspace设置滚动空白时间。

7.页面中添加背景音乐

<bgsound  src= “背景音乐地址  loop = “播放次数”>

src属性用来指定背景音乐文件的地址或文件名称;

loop用来指定背景音乐播放的次数,-1表示播放无限次数,直到关闭浏览器为止。

8.插入音频和视频

<embed  src=”多媒体文件地址” width = “界面宽度  height= “界面高度  autostart=”true|false”></embed>

9.超链接

<a  href=”url” name= “规定锚的名称  title=”提示信息  target=”指定打开的目标窗口”>

target_self当前框架中打开,_blank全新空白窗口,_top顶层框架,_parent当前框架的上一层,framename指定框架或浮动框架。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值