网页基本结构

春溪小镇0

本文网址：midhe.com/博客-悦读-网页基本结构-AID215-10复制

摘要

介绍网页基本结构，title、meta的用途，css、js、include的使用方法。

关键词

title meta include

1 网页编写规则 2 网页基本结构

我们将采用Dreamweaver CS6 编写PHP，利用Wamp平台来开发网站。在编写PHP前，确定一些编写规则是很重要的。

1 网页编写规则

1.1 html使用小写标签

html标签对大小写不敏感，<P>等同于<p>。W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。所以建议，一律使用小写的html标签。

1.2 保留字

保留字是 PHP、MySQL、JavaScript等语言结构的一部分，不能使用它们作为常量、变量、方法名、函数名、ID名或类名，否则出错。比如function，是PHP用户自定义函数；group是MySQL的保留字；public是JavaScript的保留字，注意避免使用。

1.3 使用英文命名

因为用到的wamp都是英文环境下的软件，对中文不友好，所以为了避免无法识别中文而出现错误，还是采用英文命名。PHP变量、图片、url、字段名都采用英文命名，建议一律采用小写英文。有建议采用驼峰英文，比如“送货信息”，可以写成shippingInfo，但需要切换大小写，容易出错。也可采用下划线间隔，shipping_info，但会增加文件大小，一个两个没关系，但会积少成多，也增加了书写难度。

命名尽量做到自明性，一个有意义的名字有助于理解与记忆。在保证自明性的情况下，使用最少的字母来命名，名字越短出错的机率越少。所有英文采用单数形式，为了避免混淆可以加复数的S。

PHP变量不需要定义或声明，只要在需要的时候指定即可。变量是一个容器，用于存储信息，其内容可以改变。变量用美元符号＄指定，区分大小写，建议一律小写；变量名以字母或者下划线开头，不能是数字。

1.4 h1~h6标签

h1~h6标签可定义文本标题，h1标签定义最大的标题，h6标签定义最小的标题。合理使用h标签，选择恰当的标签层级来构建文档的结构，有益于SEO。搜索引擎对于标记了title的文字给予的权重最高，其次就是h1– h6标记的文字，这其中h1最高。

2 网页基本结构

为了便于管理，一般都会在网站文件夹中新建多个文件夹，包括image、js、css、inmidhe等多个文件夹用于分类存放网站图片、js文件、css文件、可重复用于多个网页的程序代码，建议一律采用小写单数英文命名。

在Dreamweaver CS6 中编写PHP，可采用 // 或者/* */来编写注释。编写HTML，采用来编写注释。php编写以结束。HTML编写以开始，以结束。

如果您使用的是火狐浏览器，点击右键，选择“查看页面源代码”，您便能查看任何网页的源代码，是一种参考来源。网站由多个网页组成，不同的网页上其实有很大一部分内容是相同的。网页基本结构（以midhe.com的主页为例）如下所示，可直接复制为您所用，只要将某些内容换成您自己的即可：

< ?php

// 创建新会话或者重用现有会话。如果通过 GET 或者 POST 方式，或者使用 cookie 提交了会话 ID，则会重用现有会话。

session_start();

$session = session_id();

<!DOCTYPE html>

<htm>

<head>

<title>春溪小镇_香料_香草_有机食品_花卉_园艺_食谱_图片

</head>

<body>

<?php

// 包含文件

include 'inMidhe/function.php';

include 'inMidhe/header.php';

// 主页内容：春溪简介、主营、特色、推荐、购物须知。

echo '<div class="slider">';

echo '</div>';

// 页脚

include 'inMidhe/footer.php';

</body>

</html>

2.1 title

head标签的内容修改需谨慎，能不修改，尽量不修改，能少改尽量少改，频繁改动不利于SEO。head包含title、meta，重要性如下：title > description > keywords，设置时注意。

title标签内的内容就是用户在浏览器上看到的网页标题，在搜索引擎的搜索中占有非常重要的地位，算得上是网页中最为重要的标签。最好把它放在meta标签前，并在其中加上网站/网页最相关的关键词。花些时间，给每个页面确定一个有吸引力的、准确的标题，会极大地提高用户体验，也更有利于SEO。

2.1.1文字排序

重要的内容放置在前面。如下是一个合理的title：迷迭香_香料香草_春溪植物库_博客_春溪小镇。网站名称--春溪小镇置于标题的最后面，文章的名称--迷迭香放在最前面，中间则是各级分类。

搜索引擎一般会对title靠前的14个字节（七个汉字）给予很高的权重，假如将顺序倒过来：春溪小镇_博客_春溪植物库_香料香草_迷迭香，那么搜索引擎蜘蛛在网站上爬行抓取时，很可能会抓取到很多“春溪小镇_博客_”这样相同的字眼，如果量大的话，蜘蛛可能会认为这个网站的大部分页面都是相同内容，会因此被误导而不去深度抓取页面内容。

2.1.2文字数量

搜索引擎所显示的标题字数，会有长度限制，超过限度的文字会被省略号代替。长度应保持在28个汉字以内（56个字节），对大多数搜索引擎而言，都可以完整显示标题。标点符号用英文输入法，不要用中文输入法，可节省一个字节。太长的标题对用户来说也不够简洁，让人望而却步，所以控制文字数量是很有必要的。

2.1.3文字内容

创建一个完全符合网页内容，不重复的title是SEO的第一步，过多重复的标题会影响搜索引擎对本网站/网页的收录。title应该只包括当前网页的主题、一个或几个紧密相关的关键词以及网站名称（春溪小镇）。适当体现网页在网站中的位置，如“文章标题_所属分类_网站名称”这样的格式能让用户更容易明白当前文章的归属关系。

尽量不要重复关键词，可以使用 | 间隔重复的关键词。比如有机迷迭香，有机柠檬香茅，可以写成：有机迷迭香|柠檬香茅。搜索引擎允许进行一些title优化，包括对标题结构的优化和内容形容更准确的优化。如果添加无关的关键词作为优化，或者在一个页面的title上列出和整个网站相关的一大堆关键词，或者频繁的修改title，就可能会被认为作弊。

2.2 meta

2.2.1 meta name="description"

description标签是一小段描述本网页主要内容的文字，与title一起显示在搜索引擎搜索而得的结果页面。主流搜索引擎允许的字数在100个左右，超出的不会被显示，可能会造成网站描述不完整，所以最好控制字数。

2.2.2 meta name="keywords"

keywords向搜索引擎提供一组与该网页内容相关的关键词或关键短语，每个关键词都要能在该网页内容中找到相应匹配。相较于description与title标签，keywords标签显得并不那么重要。有些搜索引擎把它完全地忽略，但是使用正确的keywords标签对提高排名仍然有效。

keywords一般不超过3个，每个关键词不宜过长。重要的关键词尽量靠前放，因为靠后的关键词排名较差（除非网站有很高的权重）。词语间可用英文输入法的逗号隔开，逗号表示逻辑“或”。很多搜索引擎也会把关键词以空格隔开，并以一定方式组合。空格表示逻辑“与”，这样做能搜索出更相关的结果。根据您的网页的实际情况，上述两种方法都可以尝试。

关键词不宜以同一形式重复，必须避免关键词一次又一次地重复。这对于任何一个搜索引擎来说是都是SPAM（关键词垃圾），会因此而受到惩罚。

2.3 网页logo小标识

随便打开一个网站，会发现在网站title前会有一个小图案，一般是该网站的logo。这样做有助于加深用户对网站的记忆，也能够给用户一个较佳的第一印象。要实现这样的效果，首先利用photoshop将网站logo制作成16x16像素的图片，重命名为favicon.ico。midhe在文件夹image下，新建文件夹icon，用于存放网站所有小图标，可将上述图片放置于此。最后将如下代码嵌入每个网页的head区，即可实现：

2.4 CSS 外部样式表

CSS也是在Dreamweaver CS6 中编写，点击文件--新建，选择页面类型--css即可。推荐采用CSS 外部样式表，方便管理整个网站的外观。

样式表允许以多种方式规定样式信息，可以规定在单个的 HTML元素中，在 HTML的head区中，或在一个外部的 CSS 文件中，甚至可以在同一个 HTML 文档内部引用多个外部样式表。

当同一个 HTML 元素被不止一个样式定义时，样式优先顺序如下：

浏览器缺省设置 < 外部样式表 < 内部样式表（位于 head标签内部）< 内联样式（在 HTML 元素内部）。

举例来说，<div><p>春溪小镇</p></div>，如果css设定div字体颜色红色，设定p中的字体颜色褐色，那么最终“春溪小镇”字体颜色为褐色。也就是说，和将要样式化的内容越近的规则，其优先级越高。

2.5 JavaScript

在 HTML 中，JavaScript 代码必须位于 <script>与</scrip>标签之间。JavaScript 代码的数量没有限制，可被放置于 HTML 页面的<body>或<head> 部分中，或兼而有之。如果把代码置于<body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。但科学进展一日千里，这点速度的提高越来越失去意义。所以，JavaScript 代码放置在哪里，取决于网页内在逻辑，取决于您的编程习惯。有时A段JavaScript 代码的运行需要B段代码先行运行，就需要将A放置于B之后。举例来说，一般外部引用的jQuery会放置在所有JavaScript 代码之前。

JavaScript也可外部引用，可通过完整的 URL 或相对于当前网页的路径引用外部脚本，以下是从jQuery官网上外部引用jQuery：<script src=" http://code.jquery.com/jquery-1.9.1.min.js "></script>。

推荐使用外部JavaScript 文件，放置于<head>中。JavaScript可在Dreamweaver CS6 中编写，点击文件--新建，选择页面类型--JavaScript即可。如需在网页中使用外部脚本，需在<script>标签的 src (source) 属性中设置脚本的名称：<script src="js/midhe.js"></script>。使用外部JavaScript 文件有如下优势：相同的脚本可被用于许多不同的网页、分离了HTML和JavaScript代码使它们更易于阅读和维护、已缓存的 JavaScript 文件可加速页面加载。如需向一个网页添加多个脚本文件，可使用多个 script 标签。

使用外部文件：<script src="js/jquery-1.9.1.min.js">< /script>是为了使用jQuery，一个最受欢迎的JavaScript库。jquery-1.9.1.min.js 已经下载，放置于D:\midhe\js文件夹中。

可以将不同功能的JavaScript代码全部放在同一个外部文件--midhe.js中，便于管理。切记不可重复引用同一个JavaScript脚本程序，否则出错。尤其是当您的文件包含（include）另外一个文件的时候，记得检查包含文件内是否重复引用了同一个JavaScript脚本程序。

ID唯一，类名可重复。JavaScript代码中，在需要寻找的某个类名前最好加上ID，寻找到ID再寻找类名，否则JavaScript可能无法识别不同页面内的同一个程序内的同一个类名，导致JavaScript在一个页面内有效，在另一个页面内无效。

2.6 include

服务器端包含 (include) 用于创建可在多个页面重复使用的代码。include （或 require）语句会获取指定文件中存在的所有文本/代码/标记，并复制到使用 include 语句的文件中（在服务器执行它之前）。如果把include语句放在if语句中，还可以控制插入包含文件的时机。包含文件很有用，如果需要在网站的多张页面上引用相同的 PHP、HTML 或文本的话。包含文件可以节省大量工作，极大提高编程效率，意味着可以为所有页面创建标准页眉、页脚、函数、数据库连接密码或者菜单文件。举例来说，将页眉创建为一个单独的php文件，并且采用include包含于需要页眉的页面中。当页眉需要更新时，只需更新这个页眉即可，而不需要把所有的页面的页眉内容都依样画葫芦地修改一次。

include 和 require 语句是相同的，除了错误处理方面：require 会生成致命错误（E_COMPILE_ERROR）并停止脚本；include 只生成警告（E_WARNING），并且脚本会继续。因此，如果希望继续执行，并向用户输出结果，即使包含文件已丢失，那么请使用 include。否则，在框架、CMS 或者复杂的 PHP 应用程序编程中，请始终使用 require 向执行流引用关键文件。这有助于提高应用程序的安全性和完整性，在某个关键文件意外丢失的情况下。

2.7 函数

使用函数可提高代码的效率，函数可以放在脚本的任意位置，也可以在脚本的任意位置调用。可以把常用的函数全部放在程序的开头，这样更便于调试。最好的方法是把所有的函数都放在一个文件中，然后在程序里包含该文件。function.php是midhe的函数文件，会将其包含于任何需要它的文件中。

提交评论

104

作者：春溪小镇

本文网址：midhe.com/博客-悦读-网页基本结构-AID215-10复制

本站资源、文章欢迎转载，著作权归作者所有。商业转载请联系春溪小镇获得授权，非商业转载请注明出处，midhe.com 春溪小镇。

免责声明：本站部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，请在下载后24小时之内自觉删除，若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系站长删除，我们将及时处理！

Disclaimer: Some download resources on this site are collected on the Internet, only used for learning and communication. The copyright belongs to the original author. Please consciously delete within 24 hours after downloading. If you use it for commercial purposes, please purchase the original version. If the content posted on this site violates your rights, please contact us to delete it, and we will deal with it in time!

食谱照片征集（2个积分）

食谱分享(3个积分)

发表文章（3个积分）

活动规则

网页基本结构

摘要

关键词

1 网页编写规则

1.1 html使用小写标签

1.2 保留字

1.3 使用英文命名

1.4 h1~h6标签

2 网页基本结构

2.1 title

2.1.1文字排序

2.1.2文字数量

2.1.3文字内容

2.2 meta

2.2.1 meta name="description"

2.2.2 meta name="keywords"

2.3 网页logo小标识

2.4 CSS 外部样式表

2.5 JavaScript

2.6 include

2.7 函数