小白如何打造一个基础的留言板网站(一)
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中快速打开该网页的效果图如下:
各位按照我上面的步骤打开的网页的路径应该和图中不同,这是因为我前期在设置文件位置时出错了,正确的路径应该为“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中快速打开该网页的效果图如下:
路径问题和上图相同,各位按照我上面的步骤打开的网页的路径应该和图中不同。
以上是从零开始打造一个网页的基础部分,是做任何一个网页都需要完成的步骤,打造基础的网页留言板(一)到此结束,我们下篇再见吧~
小白如何打造一个基础的留言板网站(一)相关推荐
- php mysql 简单留言板_PHP+MySql实现一个简单的留言板
跟着书学的,代码不是自己写的,但是都能理解,有时间自己去写个好看一点的吼吼吼-(不熟练花了一天的时间- 留言板是接触WEB开发的基础,写一个留言板需要知道前端的一些基础标签,对数据库有一个了解会基础S ...
- 【Python 骚操作】使用 Gitbook + Typora 打造一个属于自己的电子书网站
前段时间,我在互联网冲浪时候,发现了一个写作的工具组合 Gitbook + Typora,堪称神器. 安利到 Blink 和朋友圈之后,有一朋友表示很感兴趣,希望我简单出一个教程,介绍一下这套工具怎么 ...
- php开源多功能留言板网站源码V1.2
php开源多功能留言板网站源码V1.2 软件特点: 1.SpeedPHP框架驱动,高效轻快. 2.可创建多个留言板:每个留言板都能设置不同的模板:每个留言板都能设置单独管理员: 3.内置两套模板一个默 ...
- 大学生PHP简单网站制作方法 学生PHP网站作业 动态PHP毕业设计 PHP MYSQL在线留言板网站源码
PHP MYSQL在线留言板网站作品 作品介绍 作品知识点 作品简介绍 作品演示 前端演示图 后台演示图 文件演示图 作品源地址 作品介绍 作品知识点 PHP+MYSQL.会员注册.会员登录.留言的增 ...
- 【留言板】使用Think PHP6+光年模板开发一个简单的留言板
前言:本文章是使用thinkphp6框架加上光年模板开发的一套留言板,个人感觉特别适合新手有点小基础的同学尝试去实战,文章和代码可能都写得不太好! 工具与环境: VSCode(简称)也可以使用别的 光 ...
- PHP写一个简单的留言板
要求: 1.留言本,即留言后,能让客户用户查看其留言. 2.留言本该具有用户发表的标题,用户的注册名,发表的内容. 3.所以留言本的实现需要两个模块,一个是静态的html页面,提供表单供用户输入,另一 ...
- 一个初学者的留言板(登录和注册)
前言:大一新生一个,把学习内容记录一下,若有疑问或者错误可以留言并指出来,我会再看看的.下面是我写的留言板.东西有点多,分3次发完吧. 一.登录 <?php session_start(); ? ...
- Django+Layui+SQLite+JQuery实现一个简单的留言板
本次使用到的知识: Django框架的使用 Layui的使用 Jquery的使用 SQLite的使用 实现效果: 目录 功能结构图 准备工作 创建项目 1.创建项目 2.创建App 3.创建对应文件夹 ...
- HTML+PHP+MYSQL实现一个简单的留言板
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 大家好,下面将为大家展示 基于HTML PHP MYSQL的留言板的设计与实现过程,适合初学者点击观看,以下我将会以笔者自称! 废话不 ...
- 如何使用小程序云开发实现一个简单的留言板
简介 本教程将教您如何使用小程序云开发快速构建一个留言板应用程序.您将学习到如何使用云数据库.云函数和云存储等功能,以及如何将它们集成到您的小程序中. 小程序开发教程:微信小程序入门与实战 常用组件A ...
最新文章
- go get 失败 no go files in_Go 每日一库之 dig
- 接口测试入门软件及使用注意事项
- html微信窗口阻止滚动条,解决微信浏览器页面可以随意拉伸,导致页面内部滚动条滚动体验不好的问题...
- Linux 交换空间优化(swap 优化)(积极使用交换空间占比,可能会使程序运行缓慢!)
- 使用kubectl管理k8s集群(三十)
- 回炉Spring--事务及Spring源码
- android makefile文件批量拷贝文件的方法
- subclipse同步冲突问题A conflict in the working copy obstructs the current operation
- 高德地图自定义主题地图,盖住中国红色边境线
- 数据库设计案例(1)
- JavaScript 中阶 打地鼠游戏(基础版)
- 百世赴美IPO拟募7.5亿美元,“另类”大佬周韶宁迎来新冒险
- CI/CD的简介以及区别
- 计算机音乐怎么调音速,音频实现变声?学会使用Studio One改变音速
- 2020ubc大学计算机硕士录取条件,2020Fall录取|研究牛校UA阿尔伯塔大学计算机硕士两年全奖!...
- 【Linux】Linux文件锁
- php根据城市获取天气预报,中国天气网 天气预报API 国家气象局 根据城市名称抓取城市(示例代码)...
- Android JetPack组件之DataBinding的使用详解
- 多用户php商城 开源,php多用户商城选择开源的好
- 将Ops成员嵌入开发团队