小白如何打造一个基础的留言板网站(一)

最新推荐文章于 2024-08-05 22:35:13 发布

Shriley_X

最新推荐文章于 2024-08-05 22:35:13 发布

阅读量3.8k

点赞数 4

分类专栏：谢飞飞的留言板文章标签： html css

本文链接：https://blog.csdn.net/Shriley_X/article/details/108713989

版权

谢飞飞的留言板专栏收录该内容

2 篇文章 2 订阅

订阅专栏

web小白打算从做一个留言板开始学习web前端，这篇博客用来记录留言板制作过程
首先编程工具我使用的是Visual Studio Code，vs code可以安装插件包，实现中文和快速在浏览器中显示文件对应网站的功能；编程环境用的是wampserver，运行后可以通过localhost访问网页和数据库

（一）基础准备

新建一个文件夹
在wamp/www/下新建一个文件夹，我命名为messageboard，然后在vs code中打开
新建index默认文件
在文件中新建一个index.html文件，这是网站的默认文件，在浏览器的网址栏中输入localhost/messageboard/就会出现该文件对应的网页
在index.html中键入H5声明
在vs code中输入html然后选择补全代码中的html:5即可得到一段默认的H5声明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1.第二行代码是html的lang属性，该属性规定了元素内容的语言。
2.head标签中包含的是头部的内容，放的是一些描述文档的各类属性和元信息（meta），引用文件脚本，还有一些css和javascript。
第一个meta标签声明了字体编码为utf-8，第二个meta标签是网站的元信息。
3.title标签描述的是该页面的标题，并且在浏览器打开该网页时会标题栏显示出来

H5声明的完善
根据留言板网站的设计初衷对H5声明的内容进行了完善

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-compatoble" content="IE=Edge">
    <meta charset="UTF-8">
    <meta name="keywords" content="首页">
    <title>谢飞飞的留言板</title>
    <link rel="stylesheet" href="style/indexStyle.css">
</head>
<body>
    
</body>
</html>

1.添加的meta标签是让IE采用其所支持的最新模式
2.元信息选择了关键字，该网站的关键字选择了“首页”
3.每个网页都需要相对应的样式文件，样式文件是用来规定页面的内容以何种方式呈现给用户浏览，例如：文字的颜色、排版、大小、图片的大小、显示或者隐藏等等，样式文件都以css后缀命名。所以现在在message文件夹中新建一个文件夹，命名为style，并在该文件夹下新建样式文件indexStyle.css，然后使用link标签引用该文件
现在在vs code中快速打开该网页的效果图如下：
首页图1
各位按照我上面的步骤打开的网页的路径应该和图中不同，这是因为我前期在设置文件位置时出错了，正确的路径应该为“file:///D:/Wampserver64/www/messageboard/index.html”

（二）HTML和CSS初始化

下面我们开始对首页进行初步编辑

首页内容编辑
在首页中添加想要添加的元素，对html文件中的body标签部分进行相应修改

<body>
    <div class="title">
        <h1>欢迎来到谢飞飞的留言板</h1>
        <p>在这里你可以畅所欲言</p>
        <small>开发者：shriley</small>
    </div>
</body>

首页样式初始化
现在应该修改css文件为添加的元素编辑样式，在写样式之前要将css初始化，因为每个浏览器他自身有着默认的css样式，而且在某些标签下数值各不相同，因此，我们应该将他们统一

html,body,div,article,section,ul,li,form,p,input,button,textarea,h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
}
ol,ul,li { list-style: none; }
a,a:hover { text-decoration: none; }
img { border: none; }
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
    font-size: 100%;
    line-height: 1.5;
}

现在在vs code中快速打开该网页的效果图如下：
首页图2
路径问题和上图相同，各位按照我上面的步骤打开的网页的路径应该和图中不同。

以上是从零开始打造一个网页的基础部分，是做任何一个网页都需要完成的步骤，打造基础的网页留言板（一）到此结束，我们下篇再见吧~

Shriley_X

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
小白如何打造一个基础的留言板网站(一)

小白如何打造一个基础的留言板web小白打算从做一个留言板开始学习web前端，这篇博客用来记录留言板制作过程制作留言板网站是我参考了CSDN中义务小白写的《从留言板开始做网站》的博客首先编程工具我使用的是Visual Studio Code，vs code可以安装插件包，实现中文和快速在浏览器中显示代码对应网站的功能。（一）基础准备新建一个文件夹在合适的位置新建一个文件夹，我命名为messageboard，然后vs code中打开新建index默认文件在文件中新建一个index.htm
复制链接

扫一扫

专栏目录