1.前端编程规范:
(1)命名规范:统一用小写的字母、数字和下划线的组合,文件名要易于理解和查找,首页
取名为home或index,其它页面用英文翻译或中文拼音,但不建议英文和中文拼音混合使用。
(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)表格规范:尽量避免表格嵌套过多,tr和td标签能不换行最好不要换行。
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设置延迟时间,hspace和vspace设置滚动空白时间。
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指定框架或浮动框架。