本篇主要讲前端并给制作html页面的新手一些建议，大牛勿喷大牛可以绕过。

感受：我是搞后端开发的，有时拿到一些静态（Html）页面，看到里面的页面结构命名规则极不规范，就有点不好的

感觉了。当然出现这样的情况都是发生在新人身上，一般会拿出以往的规范页面、命名DEMO给TA看下，也是为了

提高开发效率。

目的：本篇不是介绍规范，标准的规范请参考W3C。只是一种放之四海较为皆准的一种套路，也是为了制作新手能更好的上手。

编码能力是一回事，这里也不讨论，这里仅仅说一些个人觉得还可以的方法。

废话到此为止，看代码

一、页面编码结构及基础的命名规范

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<!--页面编码：以UTF-8居多-->

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<!--额外样式以及引用的外部样式文件，其中相对路径和绝对路径这里暂不讨论-->

<style type="text/css"></style>

<!--额外脚本以及引用的外部Js、Jquery库等

--><script type="text/javascript"></script>

</head>

<body>

<!--头部标签 有的时候header会包含在warp，但最好给独立标签-->

<div id="header">

<!--导航标签 注：虽然有时候头部和导航会合二为一，但不能图省事而混为一谈-->

<div id="Nav">

<ul>

<li><a href="##">Nav1</a></li>

<!--或-->

<li><a href="##"><span>Nav1</span></a></li>

</ul>

</div>

</div>

<!--页面主体 页面主体ID按我的习惯用Warp和Main比较多-->

<div id="wrap">

<!--左侧内容 一般为左侧导航，后面接着广告位、简单的联系信息或者快速搜索等-->

<div id="LeftContent">

<!--左侧导航-->

<div id="LeftNav">

<ul>

<li><a href="###">Jump To</a></li>

</ul>

</div>

<!--广告位-->

<div   id="Ad" ></div>

<!--简单联系信息-->

<div  id="Contact" ></div>

</div>

<!--右侧主体内容 这里面就自由发挥，不赘述-->

<div id="RighrContent"></div>

</div>

<!--底部 包括了版权 备案号、统计代码、推广代码等各种代码的均加到此处-->

<div id="footer"></div>

</body>

</html>

1、相信大多数新手还是看的懂得。页面总共化为为<head>、<header>、<warp>、<footer>，以上将页面划分为四块

有时候也会有三块，情况是<header>包含在了<warp>里面。具体的因设计页面来灵活调整。其实无论分几块，主要是

各个块独立成标签形成规律，这样的话在后续程序开发中<header>、<footer>以及上述代码中的<div id="LeftContent">等标签可

以使用公用控件利于后端开发效率以及后期维护

二、页面文件结构

1、如图这是一个基本的文件结构方式。其中NewsCenter、Product为各栏目，一定要按栏目建立文件夹然后在里面建立页面文件。
要不然所有页面全部放在根目录，刚开始做的时候还不觉得，给另外的人用或者自己改，那就眼睛瞎了。

2、其次也是最为重要的页面元素文件(我自己定义的)，全部放在skins文件夹里面，然后按文件属性再建立文件夹然后再建立对应文件。

本文要讲述的是一种在开发规范和标准，为了团队更好的协作开发，而这些都需要首先对自己提高要求。

博文仅代表个人观点，博文为原创，如有转载请在明显位置注明作者名称和博客园文章地址。

对html制作新手的一些建议，大牛可以忽略的更多相关文章

  1. 给Java新手的一些建议----Java知识点归纳(J2EE and Web 部分)

    J2EE(Java2 Enterprise Edition) 刚出现时一般会用于开发企业内部的应用系统,特别是web应用,所以渐渐,有些人就会把J2EE和web模式画上了等号.但是其实 J2EE 里面 ...

  2. 给Java新手的一些建议----Java知识点归纳(Java基础部分)

    写这篇文章的目的是想总结一下自己这么多年来使用java的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚刚入门的Java程序员和打算入Java开发这个行当的准新手们,希望可以给 ...

  3. 给Java新手的一些建议——Java知识点归纳(Java基础部分)

    原文出处:CSDN邓帅 写这篇文章的目的是想总结一下自己这么多年来使用java的一些心得体会,主要是和一些Java基础知识点相关的,所以也希望能分享给刚刚入门的Java程序员和打算入Java开发这个行 ...

  4. 给Java新手的一些建议——Java知识点归纳(Java基础部分)

    写这篇文章的目的是想总结一下自己这么多年来使用java的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚刚入门的Java程序员和打算入Java开发这个行当的准新手们,希望可以给 ...

  5. 新手在sae部署程序容易忽略的一个细节

    从来没用过这类云空间服务,尝了下鲜试用一下sae,但是部署的时候发现问题了,各种404..各种无奈啊..虽然百度无数篇介绍,但是都千篇一律没什么启发.. 但是巧在我部署的应用有个欢迎页面,点击链接的时 ...

  6. .NET开发中基础问题,CODE First AND DB First(大牛自动忽略,小白可以看一下)

    最近在做一个新项目开发时,碰到了下面这个问题.在使用EF时,提示错误信息 To continue using Database First or Model First ensure that the ...

  7. 编写更好的jQuery代码的建议

    讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染 ...

  8. ROS探索总结（三）——ROS新手教程【转】

    转自:http://blog.csdn.net/hcx25909/article/details/8811313 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 一ROS的 ...

  9. 编写更好的jQuery代码的建议（share）

    留个备份! 原文链接: Mathew Carella   翻译: 伯乐在线- yanhaijing译文链接: http://blog.jobbole.com/52770/ 讨论jQuery和javas ...

随机推荐

  1. assert实现

    测试网站在国内国外的访问速度 关于C的右左法则 assert宏的实现(一道笔试题) 2010-11-09 13:05:48|  分类: c |  标签: |举报 |字号大中小 订阅     asser ...

  2. js中的apply call 操作小结(参考自网络)

    1.方法定义 call方法:  语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 说明: call ...

  3. Web前端浏览器兼容初探

    浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...

  4. epoll 中EPOLLIN 和 EPOLLOUT

    epoll主要是事件回调运行的,我们使用socket的时候主要使用两个事件 EPOLLOUT事件:EPOLLOUT事件只有在连接时触发一次,表示可写,其他时候想要触发,那你要先准备好下面条件:1.某次 ...

  5. DeDe缩略图路径的修改

    今天在使用dedecms的时候,遇到的一点小问题,移站的时候缩略图不显示.然后就去百度搜了一下,出来的都是千篇一律. 因为一个网站里面缩略图太多,手动比较慢而已费时间,  俗话说的好“时间就是生命” ...

  6. 用dup2和dup产生一份file descriptor 的拷贝

    在类Unix操作系统里面,.dup2和dup都通过系统调用来产生一份file descriptor 的拷贝.   dup对我来说还很简单   int dup(int filedes);   dup2就 ...

  7. notes: the architecture of GDB

    1. gdb structure at the largest scale,GDB can be said to have two sides to it:1. The "symbol si ...

  8. Android中设置文字大小的定义类型

    在Android中所有的组件可以设置大小,但是在设置大小的时候需要指定其单位,这些单位如下: px(pixels):像素: dip(device independent pixels):依赖于设备的像 ...

  9. css属性之appearance

    appearance 属性允许您使元素看上去像标准的用户界面元素. 案例: 使 div 元素看上去像一个按钮 <!DOCTYPE html> <html> <head&g ...

  10. bzoj3997[TJOI2015]组合数学

    http://www.lydsy.com/JudgeOnline/problem.php?id=3997 偏序集,看上一篇随笔. 我们要求最少路径覆盖,可以等价于求最大独立集. 我们要找到一个权值和最 ...