本篇主要讲前端并给制作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. java动态缓存技术:WEB缓存应用(转)

    可以实现不等待,线程自动更新缓存 Java动态缓存jar包请下载. 源代码: CacheData.java 存放缓存数据的Bean /** *  */package com.cari.web.cach ...

  2. i++ 与 ++i 的从字节码层面看二者的区别

    /** * javap命令可以对class反汇编得到其字节码文件(此命令并不是jdk8开始的,只不过jdk8中对工具进行加强,增加了一些参数,可通过 javap -help了解) * * 注意: * ...

  3. Oracle merge into 使用记录

    符合条件进行更新操作,不符合则进行插入操作． merge into myd_nsrdt n using ('as nsrsbh,'' as nsrmc, ' as nowphone,sysdate a ...

  4. Android隐藏标题栏

    打开程序,在onCreate()方法中添加如下代码: protected void onCreate(Bundle savedInstanceState) { super.onCreate(saved ...

  5. owncloud乱码问题

    没有人回答那我就献丑了,废话有点多,请跳着看. 先说结论:最后我选择了 Seafile 我去年之前用box同步个人文件,前几个月的时候吧,发现box不能上传几百M的文件,我才知道之前为什么会丢文件了… ...

  6. PHP PDO 安装使用

    PDO(PHP Data Object) 是PHP 5新出来的东西,在PHP 6都要出来的时候,PHP 6只默认使用PDO来处理数据库,将把所有的数据库扩展移到了PECL,那么默认就是没有了我们喜爱的 ...

  7. Go语言环境配置 Sublime Text + GoSublime+ gocode + MarGo组合

    买来<Go Web编程>一书学习Go语言,结果按照书中的步骤搭建,发现部分站点已经失效了,查了网上好多教程也没有人能够说清楚如何搭建.还是自己动手找方法吧,经过自己的不懈努力终于搭建好了. ...

  8. 设计模式（七）：Adapter 适配器模式 -- 结构型模式

    1. 概述: 接口的改变,是一个需要程序员们必须(虽然很不情愿)接受和处理的普遍问题.程序提供者们修改他们的代码;系统库被修正;各种程序语言以及相关库的发展和进化.  例子1:iphone4,你即可以 ...

  9. Java---设计模块（设计模块的简介及最简单的俩个单例代码加测试）

    设计模式学习概述: ★ 为什么要学习设计模式 1.设计模式都是一些相对优秀的解决方案,很多问题都是典型的.有代表性的问题,学习设计模式,我们就不用自己从头来解决这些问题,相当于在巨人的肩膀上,复用这些 ...

  10. libvirtsAPI

    mongodb远程服务器连接 mongo -uroot -p321 master.puppet.org:27017/admin