如何创建一个简单网页

我们已经基本熟悉了HTML的格式，现在我们来尝试一下创建一个简单的网页。

1.创建一个.html格式的文件

选择一个文本编辑软件，我这里用的是Notepad++.在工具栏选择“language”，勾选html，这个时候软件就知道你在编辑html格式的文件了，你在输入元素的时候按“Tab”键它就会自动帮你补全，输入块元素，内敛元素的时候就会帮你在元素的开始和结束符自动匹配并标记。

2.编辑html内容

下面我们来举个例子：

<html>
<head><title>Starbuzz Coffee</title><style>body {background-color: #d2b48c;    <!--设置html背景颜色为土黄色-->margin-left: 20%;             <!--设置左外边距占网页宽度的20%-->margin-right: 20%;            <!--设置右外边距占网页宽度的20%-->border: 2px dotted black;     <!--设置边框为2px粗的黑虚线-->padding: 10px 10px 10px 10px; <!--设置内边距上下左右均为10px-->font-family: sans-serif;      <!--设置字体样式-->}   </style>
</head>                                   <!--这一部分是为html创建样式-->

<body><h1>Starbuzz Coffee Beverages</h1><h2>House Blend, $1.49</h2><p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p><h2>Mocha Caffe Latte, $2.35</h2><p>Espresso, steamed milk and chocolate syrup.</p><h2>Cappuccino, $1.89</h2><p>A mixture of espresso, steamed milk and milk foam.</p><h2>Chai Tea, $1.85</h2><p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>
</html>                                 <!--这一部分是创建网页主体内容-->

我们前面提到的为网页添加样式，实际上就是为把网页看作一个盒子模型，然后对这个盒子的外边距，内边距，边框宽度样式，内容宽度，背景颜色等进行设置。具体参见下图

3.将文件保存为HTML格式，然后双击打开它

好了，一个简单的网页制作就完成了，你有没有发现这个文件是用你的默认浏览器打开的呢？你有没有发现这个浏览器的地址栏显示的是你的文件所在路径呢？其实，当你有了一个自己的域名（经过DNS解析后就是网页的ip地址）和网络主机（功能类似于给你提供了一个存放网页文件的文件夹）后，你看的网页地址就会类似下面，这里拿我的当前网页来举例吧：

前面的http://write.blog.csdn.net指的是CSDN当前博客的根目录，后面的/mdeditor指的是我这个博客的内容将会被存放的文件夹为mdeditor。

目前个人已在万网上注册了一个40元一年的域名www.317cpan.com，但是光有域名没有用，要想有一个可以存放网页文件的文件夹，我又购买了一个200多元一年的虚拟云主机，这样我就可以通过不断的编辑我的网页文件，然后把它存放到我的云主机文件夹里，来不定期对网页进行更新啦。
有条件的同学可以买一个云服务器，这样就可以通过ssh来登录传文件了，相关的linux指令也可以得到很好的锻炼，服务器就好比是一台电脑，而云虚拟主机只是提供了一个文件夹。大家自己权衡吧。我是小白，入门为主的话建议买个虚拟主机就够了。

如何创建一个简单网页相关推荐

用Django创建一个简单网页
---首先新建一个新项目: ---在这里命名工程的名字 ---在右侧的齿轮处选择create创建虚拟环境,命名后勾选inherit global site-packages ---在applicati ...
使用Webtask.io创建一个简单的REST API端点
by ismapro 由ismapro 使用Webtask.io创建一个简单的REST API端点 (Create a simple REST API endpoint using Webtask.i ...
利用thinkphp创建一个简单的站点
本文我们将利用thinkphp创建一个简单的站点,这里所使用的thinkphp版本是5.0.24,这里是它的中文文档.如果有需要可以参考它的中文文档. thinkphp框架是一个典型的MVC框架,该框 ...
使用 Vanilla JavaScript 框架创建一个简单的天气应用
大家好,不知道大家听说过 Vanilla JavaScript 这款框架吗?最近我在浏览国外的一些技术网站时,这个词出现的频率实在是太高了,好多框架都宣称自己是基于 Vanilla JavaScrip ...
html5 打造桌面便签,HTML5 – 创建一个Web网页便利贴
在我之前的博客里,我给大家分享了HTML5上拖拽功能的例子.在这篇文章里我将研究HTML5上2个新的功能:contenteditable 和 localStorage.当我看了 HTML5.W3C规 ...
html5 网页便利贴,HTML5 – 创建一个Web网页便利贴
当你在看我前面所写的HTML 5例子时,我正在思考创建一个简单但又适用的例子.以一种更新奇的方式来演练这些HTML5新特性.我的目标并不是想单纯的展示这些HTML 5 API,而是想用例子来告诉开发人 ...
创建一个HTML5网页,HTML5 创建一个Web网页便利贴
在这篇文章里我将研究HTML5上2个新的功能:contenteditable 和 localStorage.当我看了HTML5.W3C规范说明后,我迫不及待的要在这同一个程序上写出例子来演示这些新功能 ...
创建一个简单的存储过程(RroGetA_Z)，要求输出A到Z之间的26个大写字母
<SQL Server数据库设计与项目实践> ISBN:978-7-302-40610-5 p121 动手实践-实训内容-(1) (1)创建一个简单的存储过程(RroGetA_Z),要求输 ...
Unity 2D游戏开发快速入门第1章创建一个简单的2D游戏
Unity 2D游戏开发快速入门第1章创建一个简单的2D游戏即使是现在,很多初学游戏开发的同学,在谈到Unity的时候,依然会认为Unity只能用于制作3D游戏的.实际上,Unity在2013年发布 ...

如何创建一个简单网页

如何创建一个简单网页相关推荐

最新文章

热门文章