本篇主要讲前端并给制作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. 武汉科技大学ACM ：1005: C语言程序设计教程（第三版）课后习题6.6

    Problem Description 打印出所有"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该本身. 例如:153是一个水仙花数,因为1 ...

  2. 复制、移动和删除：cp, rm, mv

    要复制文件,请使用cp(copy)命令.不过,cp命令的用途很多.除了单纯的复制之外,还可以建立连接文件(就是快捷方式),比较两个文件的新旧而予以更新,以及复制整个目录等等.至于移动目录与文件,则使用 ...

  3. Phpcms V9全站伪静态设置方法

    为什么要伪静态?具体在这里就不说了,你懂的!一方面更新修改后不需要生成静态文件,另一方面为了SEO! 访问规则如下 1 2 list-{$catid}-{$page}.html content-{$c ...

  4. bayes

    from numpy import * import time starttime = time.time() def loadDataSet(): postingList = [['my', 'do ...

  5. 有了screen，妈妈再也不用担心我的学习啦

    创建一个srceen screen -S test1 从screen离开 crtl+a d (左手按住crtl和a 然后右手按d) 查看当前有多少screen screen -ls 回到screen ...

  6. New ipad安装Perl支持安装nikto

    Title:New ipad安装Perl支持安装nikto --2012-11-15 09:47 New Ipad 越了后. ssh new ipad 进入目录 cd /tmp 下载Key文件 wge ...

  7. ural 1353. Milliard Vasya's Function

    http://acm.timus.ru/problem.aspx?space=1&num=1353 #include <cstdio> #include <cstring&g ...

  8. Gridview将某列内容和标题隐藏起来

    protected void gvInfo_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == Dat ...

  9. android 通过post方式提交数据的最简便有效的方法

    public boolean post(String username, String password) throws Exception { username = URLEncoder.encod ...

  10. 从windows server 2003中学到的事儿

    2003让我学会了几件事儿, 第一.自己会装系统了. 第二.知道很多选项是可以自己进行设置的.这点很重要,本来xp用得很习惯,然后很多都理所当然得认为,就应该是那个样子,可是,并不是的. 在2003不 ...