本篇主要讲前端并给制作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. 在iOS8下使用CLLocationManager定位服务需要系统授权

    最近在ios8.0使用CLLocationManager定位服务,发现老不能定位,查看设置菜单中的项也是处于未知状态.想起之前都有一个弹出框提示用户是否允许定位,这次一直没有出现了.原来ios8.0下 ...

  2. 【转】解读Qt 事件处理机制（上篇）

    [转自]:http://mobile.51cto.com/symbian-272812.htm 在Qt中,事件被封装成一个个对象,所有的事件均继承自抽象类QEvent. 接下来依次谈谈Qt中有谁来产生 ...

  3. C# 配置文件读取与修改(转)

    C# 配置文件读取与修改   配置文件在很多情况下都使用到, 配置文件分为两种 一种是应用程序的配置文件, 一种是web的配置文件. 两种配置文件最大的区别是web的配置文件更新之后会实时更新, 应用 ...

  4. 安装centos mini版，无法联网，用yum安装软件提示 cannot find a valid baseurl for repo:base/7/x86_64 的解决方法

    *无法联网的明显表现会有:  cannot find a valid baseurl for repo:base/7/x86_64 1.yum install出现 Error: cannot find ...

  5. MarkdownPad 使用 MathJax

    一直想要在MarkdownPad中支持数学公式,终于找到了一个方法: 在MarkdownPad中,点击"Tools > Options > Advanced > HTML ...

  6. APKTool用法

    APKTool是GOOGLE提供的APK编译工具,需要JAVA运行环境,推荐使用JDK1.6或者JDK1.7. 如果你想对APK文件进行修改,那么就不可避免的要使用到APKTool.论坛里有很多关于R ...

  7. Sicily 1133. SPAM

    题目地址:1133. SPAM 思路: 题目意思是说在‘@’的前后出现题目给定的合法字符或者不连续出现‘.’字符的话,这个就是合理的输出. 那么以@为中心,向前,向后扫描,当扫描到不符合字符时,记录此 ...

  8. nosql newsql

    http://www.cnblogs.com/end/archive/2011/10/19/2217244.html http://www.csdn.net/article/2011-09-26/30 ...

  9. angularjs directive and component 指令与组件 ( 1.5.0 以后 )

    之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...

  10. Entity Framework with MySQL 学习笔记一(查询)

    参考 : http://msdn.microsoft.com/en-us/data/jj574232.aspx EF 查询基本上有3中 默认是 Lazy Loading 特色是只有在需要数据的时候EF ...