网页的制作

最新推荐文章于 2021-12-03 14:41:34 发布

静逐

最新推荐文章于 2021-12-03 14:41:34 发布

阅读量1.1k

点赞数

文章标签：百度浏览器 HTML 图片

本文链接：https://blog.csdn.net/u010010102/article/details/8801434

版权

网页的制作

这次大概是我的第四个任务了，模仿制作一个网页-----百度首页，我这次指的是静态网页。这次呢，我就简单总结一下我做这次任务的过程及收获。

首先，我先讲一下制作网页的前序工作。第一步：在电脑桌面建立一个文本文档，并将“.txt”

后缀名改为“.html”的后缀；第二步：在这个文本文档中写入自己的代码，完成后保存；第三步：选中你已经编辑好了的文本文档，单击鼠标右键选中“打开方式”，选择一个浏览器打开就行了。这样你写的东西就会呈现在你的面前了。

另外，我再讲一个查看一些已经做好了的网页的代码的方法，如果你上网时看到你喜欢的网页界面，你就可以参考它的代码将它做出来。例如查看百度的内部代码。第一：用浏览器打开百度首页（我这次用的是google浏览器，可能不同浏览器打开的页面内容有所不同。）第二：单击F12，之后，下方会出现一个方框，找到左下角的那个放大镜图标，单击，之后将你的鼠标放在百度界面的任何一个图标或者文字，单击后下方就会出现相应的代码。那么，你就可以研究它的代码仿照着做了。

接下来，具体总结这次任务的重心---作品的代码。其实，我个礼拜，先用百度提供的代码敲了一遍，好长好烦，之后好不容易敲完了，竟然还出现乱码的情况，可能是因为里面有许多我们做静态网页不需要的东西，然而我又混合进去。所以，后来我自己根据网上提供的html的一些基本语法做出来的。现在，具体谈谈如何用代码来实现这个静态画面。

首先，了解一下这个项目要用到的一些html的基础知识：

html的一个基本框架：

<html>

</head>
<body>
<li>新闻</li>
<li>影视</li>
<li>音乐</li>
</body>
</html>

可以看出，其中最明显的特点就是“对称性”。title就是顶头的横条，作为标题。下面的body内容就是网页中的内容。你尝试着将上述代码用浏览器打开的话，你就会知道相应的内容所放的位置，比我笔述明朗多了。谨记其中的一些语法：1.这里的每个对应的一对“<>”（即：标签符）都是成对存在的；；2.每一对标签都有一个结束标签，这个结束标签就是在开始标签中加一个“/”就行；3.每一对标签之间的内容就是这对标签中的内容；4.所有标签的顺序不可颠倒，并且它们之间的包含关系在途中已经很明朗的体现；4.在界面上你想加入任何文字时，你要用如此语法：“<li>文字</li”,或者什么都不加直接写文字就行；5.在界面上加入图片的语法：“<img src="图片名.gif">”即可。（注：图片和你编辑的网页需要在同一个根目录下）；6.“.......”是用来将这个标签符内的内容单独成段；7."<center>"用来将下文的内容置于居中位置，"....用来将其中文字置于此行右边；8."...."用来设置标签内文字的大小；9.“”用来设置标签内文字的颜色；10.“ ”用来加大此行所有字的间距。

了解了这么多制作网页的基础知识，现在开始来使用它们：

首先打开百度界面，对着这个画面开始编辑吧（我是用google浏览器打开的百度首页，跟其他一些浏览器打开的有点不同）。加上标题总共有九行，我就一行一行进行讲解吧。

第一行：

<html>

<head>

</head>

到这里就将标题这行完成，当然这里的代码并不完整，因为html整体架构不完整，须结合接下来的代码才算完整。

第二行：

<body>

这里是将第二行的“搜索设置、|、登入、注册”文字写入，且定义其大小为2pt，颜色为蓝色，位置置于此行靠右边界，且这些内容单独成段。

第三行：

这里是将名为“2.gif”图片插入，这个图片我是直接将百度上下载来的，并且将这个图片单独成段且居中。

第四行：

这里是写入第四行的所有文字，即：“新闻、网页、贴吧、知道等”。并且设置字体的大小为3pt，颜色为蓝色。&nbsp；加大此行字间距离，且此段单独居中。

第五行：

这里比较稍微复杂些，写入文本输入框和”百度一下“按钮键。这些是涉及一些css的知识点。即将文本输入框设置为：高：33px,宽：400px;按钮键高：37px,宽：100px；这里的写入是一种格式，以后要用的话记住就可以了。

第六行：

这里就是简单地讲”百科、文库”等内容写入并设置其大小为3pt，颜色为蓝色。

第七行：

<li>把百度设为主页</li>
<li>安装百度浏览器</li>

这里也是简单的写入文字，且单独成段。

第八行：

<li>加入百度推广</li>
<li>|</li>
<li>搜索风云榜</li>
<li|</li>
<li>关于百度</li>
<li>|</li>
<li>About Baidu</li>

写入文字及“|”符号，且此行单独成段。后面两个是上一行的结束标签，结合使用。

第九行：

<li>@2013 Baidu 使用百度前必读京ICP证030173号</li>
<img src="1.gif">

此行是写入文字并在文字尾部加入了一个小图标，图标同样以图片格式加入。其中文字大小设置为2pt。另外，第七和第八行之间多加入几个 ，这个是用于加大行距的。

到这里就将所有的代码就完成了，你可以用浏览器打开进行检验了。（其实，你可以边做边打开，做一部分时就打开，以检验是否正确，但是一定要注意结构是否完整）

鉴于我是个新手，可能有些地方解释不够清楚，还望多包涵，所以若有看不懂的地方，还望你百度详细了解，或者直接留言给我，我定将竭力为你进一步解释，其实html中的知识点不胜枚举，这里只是沧海一粟，所以，你若想深入学习，请自行研究，这里只是简单介绍。谢谢观看！！！

静逐

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
5
评论
网页的制作

网页的制作这次大概是我的第四个任务了，模仿制作一个网页-----百度首页，我这次指的是静态网页。这次呢，我就简单总结一下我做这次任务的过程及收获。首先，我先讲一下制作网页的前序工作。第一步：在电脑桌面建立一个文本文档，并将“.txt”后缀名改为“.html”的后缀；第二步：在这个文本文档中写入自己的代码，完成后保存；第三步：选中你已经编辑好
复制链接

扫一扫