静态网页代码书写习惯之我见

自学前端一个多月了,但是还没有完整地学习过一个电商网站的开发。这两天看了慕课网的视频“手把手教你电商网站开发”,觉得老师讲的很好,尤其是书写代码的习惯很好,总结如下:

第一:建立一个项目文件夹,里面包括html,css,js,images等文件夹,文件夹下面可以根据实际情况嵌套多个子文件夹和子文件,保证文件结构清晰有条理,同时要注意,文件夹和文件的命名最好有语义,让人一看就明白大概是什么。

第二:分析页面结构,即html框架,心里有谱后,然后开始书写,清晰优美的结构很重要。

第三:html大结构搭好后,可以开始写css样式了。书写前,可以把页面不同板块间的相同样式抽取出来,即公用样式,公用样式的抽取和书写到位,可以很大程度上提高书写和运行代码的效率。

第四:公用样式书写好后,此后书写每一个版块的css样式之前,建议书写注释,用于解释下面的代码是描述哪一版块的样式,这样无论代码再多,都能很清楚的把css样式和html结构对应起来,方便日后自己或者他人查看,而且很清晰美观。

第五:一个页面做好后,一定还要用不同的浏览器查看效果和进行调试,即不同浏览器之间的兼容性问题,尤其是被老师多次提到的”万恶的IE6“,基本每次书写好后,”万恶的IE6“都会出现各种不合拍的情况,此时就需要回头查看代码,看下问题出在哪里,耐心调试,直到问题解决。

时间: 2024-12-26 02:05:14

静态网页代码书写习惯之我见的相关文章

Android 优化代码代码写作习惯代码规整

今天我想说说代码习惯: 刚开始学Android时相信很多新手都会有一个疑问,我们作为菜鸟除了技术上的不足到底哪点比不上大神呢?相信问这个问题的新手,肯定是一个不服输的人(不能叫愤青吧,我认 为愤青貌似是个贬义词)所以喜欢问问题,但是一些经验丰富的大神有的时候就会说自己百度,不行谷歌,这么简单的问题还问!这可能深深的伤害到我们菜鸟,但挺多时候是应 该我们自己动手找自己研究,其实作为菜鸟不是不喜欢动手自己找自己写,只是想有个捷径站在巨人的肩膀上,但是事实却不是这样的因为所有的问题要想记得更牢固,更清

静态网页开发技术-HTML

今天我重新复习了一下静态网页开发技术,概括如下. 一 .HTML文档结构与基本语法 :放置了标签的文本文档,可供浏览器解释执行的网页文件 1.注释标记 2.标记 3.属性 二.基本标记与使用 1.网页基本结构与标记 2.文本与段落标记 3.列表标签 4.超链接标签 5.图片标记 6.定时刷新或跳转 7.表格 三 HTML表单标签与表单设计 1.<FORM>标记及其属性 2  <INPUT>标记及其属性 3 <下拉列表框<SELECT>,<OPTION>

静态网页框架设计首次体验(文章改)

根据教材与上网成功解决了Tomcat与Myeclipse的安装,同时熟悉了Java web创建项目到部署运行整个过程.今天起正式开始学习有关Java web的编程部分.Java web静态网页(HTML网页)的标记含义.基本语法的介绍到框架设计基本模板与案例,今天的学习的内容,让网页编程有了一个初步的框架.结合自身所在协会的情况,计划制作一个关于协会的网页,已有初步想法,望通过学习不断完善和修改协会网站.根据今天所学,并参考书本30页框架设计案例对网页进行初步搭建. 具体代码如下 TW.jsp:

Java(静态)变量和(静态)代码块的执行顺序

本文讨论Java中(静态)变量.(静态)代码块的执行顺序 首先创建3个类: 1.Foo类,用于打印变量 public class Foo { public Foo(String word) { System.out.println(word); } } 2.Parent类 public class Parent { static Foo FOO = new Foo("Parent's static parameter"); Foo foo = new Foo("Parent'

HTML5静态网页实战开发—企业网页

一.首先找到模板 二.勾画框架(写div),切图(ps) 三.实战开始 这一次共花了一下午时间,利用html.css做出静态网页 在外观,布局,动画都有一点改善 四.静态网页效果 倒数第二的div是一组图片滚动动画(仿js),利用css3写出(缺点是兼容性并不是很好) 五.部分源码(需要完整的可以联系我) HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

原理与示例:php+mysql+jquery 生成静态网页(含后台编辑功能)

从Web的工作原理来看,用户访问HTML所带来的服务器负载要远小于访问动态页面,因为在前者中,服务器只用把对应的html代码发送给客户端即可,而在后者中,服务器则需要根据访问条件进行一系列的计算,然后生成html代码,最后把运算结果代码发送给客户端. 所以,对于访问量较大的宣传式网站(比如新闻类),要尽可能地使用静态页面. 另一方面,我们不可能让网站编辑人员来一个一个地手工制作这些HTML,那样就是回到多年前的纯静态时代了.我们可以用动态语言来方便.快捷地生成这些静态网页.而且,目前这一技术已经

代码书写规范和命名规范

上一篇给大家分享了一下,关于文档编写的几个概念.这篇文章阐述如果编写代码书写规范以及命名规范文档.[以java语言为例] 1.代码书写规范 代码书写规范,能够让不同的人,写出相同风格的代码.很多人都看过java源代码,你会发现java源代码的整体风格几乎是一致的,但是你要知道编写源代码的人是很多的,如何才能让他们写出同一风格的代码呢?这就是代码书写规范的作用. 代码书写规范描述的是如何从头到尾书写代码(自己定义的).通俗点讲就是如何书写java文件.就像你写毕业论文一样,从头到尾每个细节都是有要

关于写毕业设计网页代码写后感

哎,心累! 开始      本次本着自己养活自己的原则,接了三个学姐的毕业设计,都是是把她们的设计图编写成网页.实际都是一些布局规整,页面简介的网页.虽然一份网页有15页,但其实以正常速度大约两天就可以写完.所以毫无顾虑,接了三份,时间比较赶,差不多都三天之类要(不是同时接的). 过程     第一个学姐的设计是关于美食方面的网页,十五张网页大概只有五种样式.一共是三个人做,但第一次经验不足,在分配任务时非常随意,没有按照网页样式来分配,本来里面有八张样式一样的网页,硬是我们三人一人两三张给做完

利用CSS制作静态网页的注意事项

利用CSS制作静态网页主要是在<head>里面使用外联CSS文件来赋予网页样式 首先用div分区块,了解网页布局,脑子里面有个大概的页面布局 目前学习写的几种的网页布局可以分为以下几种情况: 1.页面中间 centen ,两边留白 :直接测量 centen 内容的宽度和高度,利用 maigin:auto 让内容居中即可: 2.页面顶部 head 满页面内容 ,下面centen 居中 ,两边留白:head 宽度设为100%,中间centen 内容的宽度和高度,利用 maigin:auto 让内容