历经12年风雨兼程，企盟仿站网与25家网络公司合作为3200余客户提供了优质的服务，设计DEDECMS模板、WORDPRESS模板、DESTOON模板等约3500余个，企盟仿站网感谢一路有你！
时间:2022-08-15
网页设计师学习网页制作之前，当然需要先了解网页的基本结构了，现在打开 Notepad++ ，它会自动新建一个空白文件 “new 0” ，如下图：
这时候就如同我们在 Photoshop 里新建了画布。然后心怀激动的开始我们的有可能十分伟大的作品吧！
复制如下代码到这个新文档中。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
于是我们得到了网页基本代码结构：
咦？！怎么五颜六色的？——这个功能叫做“代码高亮”，意思就是用不同的颜色来标记不同功能的代码。打个比方说：我们写了一篇文章，但是想要一眼在其中找到谁在干什么其实并不容易，但是如果文章中所有的人名都用红色标注，所有的动词都用蓝色标注，那么我们检索的速度必然会大大增加。这里也是相同的道理，不同颜色的标注可以使得我们快速定位代码中的关键词。
当然这么说挺复杂的，那么不管他，继续就是了。看的时间长了，自然而然的就感受出他的便捷来了。
现在我们再来看看这段代码，其实这只是一个最基础的 Html5 的网页结构。那么现在我来给它添加一些注释。
<!doctype html> <!– 这行代码说明文档类型 –>
<html lang="en"> <!– <html>是标记 html 文档的开始，lang="en" 说明网页的语言是英文 –>
<head> <!– <head>是标记网页头部信息的开始，这里主要放一些网页本身需要用到的信息 –>
<meta charset="UTF-8"> <!– 这里说的是网页的编码是 UTF-8 –>
<title>Document</title> <!– 这里是网页的标题 –>
</head> <!– </head>是标记网页头部信息的结束 –>
<body> <!– <body>标记网页的主体内容（页面内容）的开始 –>
</body ><!– </body>标记网页的主体内容（页面内容）的结束 –>
</html ><!– <html>是标记 html 文档的结束 –>
看着都想睡觉了，是不是？我也是啊，好了，记得注释的格式就好。
<!– 这个格式里面的内容是注释，不会起任何作用，但是可以用来标注一些内容留给自己看 –>
至于上面的那些内容，其实写页面之前先复制过去就好了，就好像刚开始学 Photoshop 的时候新建一个文档要设置什么颜色模式啊，分辨率啊……我们也是看不懂，所以索性不看，慢慢的也就明白了。嗯，我们来做点实际的事情吧！把代码稍微修改一下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我要看看你显示在哪里？</title>
</head>
<body>
吼吼！我的第一个页面的说~
</body>
</html>
我就修改了两个地方，就是那两个汉字的地方，然后我们把这个文件保存为 Html 文档，比如叫做 FirstPage.html 好了，嗯，一定要保存在你找得到的地方哦，比如桌面就是个不错的地方。然后我们双击打开这个文件（如果双击后不是打开了浏览器，那么就直接把文件拖到浏览器里好了，嗯，我们就是这么直接！），从浏览器看网页基本结构就是如图所示了：
好了，现在看到标题和页面内容应该分别写在哪里了吧？网页的基本结构就是这个样子的了。
本文网址：http://www.chinafangzhan.com{dede:field name='arcurl'/}
本文由企盟
仿站
网发布(
http://www.chinafangzhan.com
)，如果您还想了解更多关于
网站仿制
的文章，请点击查看
仿站知识
的其它文章。
承接以下业务：传统网站改自适应网站、网站增加手机站、网站改全屏网站改大屏展示、GBK转UFT-8、DEDECMS转WORDPRESS、网站站群制作、企业网站设计、企业网站优化、网站托管等业务
