优秀的编程知识分享平台

网站首页 > 技术文章 正文

边学边做网页篇------初识HTML（html网页在线制作）

nanyue 2024-10-05 18:44:37 技术文章 7 ℃

为什么学习HTML？

理解HTML代码是制作网页的基本技能。在互联网高度发达的今天，网页制作技术开始变的和修图、处理视频一样重要。

第一，学会制作网页就可以把自己想要展示的信息让其他人使用浏览器观看，无论是文字、照片还是视频都可以通过浏览器观看，甚至是分享自己制作的小游戏。

第二，理解网页运行的基本原理后可以更好的浏览他人的网页，寻找有用信息，更合理的使用第三方工具，简单高效的制作自己的网页。

HTML学习难度与重要性

HTML代码本身非常容易理解，使用也非常简单，但是单纯使用HTML代码写出的网页效果和我们平时看到的网页相差甚远。要想做出一个漂亮的页面，我们还需要CSS和JavaScript的帮助。

HTML、CSS、JavaScript这些不同的代码都有什么作用呢？简单来说，HTML代码可以为网页提供基本内容，比如文字、图片、音乐、视频等。CSS代码可以为页面安排布局，比如标题的位置、字体、颜色、大小等，笼统的说就是为HTML代码添加的内容增加样式信息，例如修改位置、尺寸、颜色等属性。JavaScript代码可以为页面提供交互（互动）功能，例如通过按钮控制页面内容的隐藏、出现，或者为多张图片添加轮播功能等。

对比起来，HTML的学习难度最低，但作用是最重要的，因为一切页面的基础是内容，没有内容，样式与交互都不存在。

认识HTML基本结构

第一行 <!DOCTYPE HTML>

第二行 <html>

第三行 <head>

第四行 </head>

第五行 <body>

第六行 </body>

第七行 </html>

以上七行代码是一个网页文件的HTML代码的基本结构。

大家观察一下可以发现一个规律，每一行的内容都是写在“<>”里面的。原因说来话长，先记住就行。每个写在“<>”里面的内容叫做“标签”。以后“标签”这个词会经常出现。

第一行<!DOCTYPE HTML>标签指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令（这句话可以暂时不必理解）。重要的是这句傲娇的代码只能存在在HTML代码的第一行！

第二行<html>标签与第七行的</html>标签是一对，“<html>”叫做开始标签，“</html>”叫做结束标签。他们之间的区别在于结束标签比开始标签多一个“/”。这是HTML代码的一个重要规律，以后我将要学到的大部分标签都是这样的，可能浏览器有些强迫症吧，如果没有结束标签它会很不舒服，有可能会消极怠工而产生麻烦（不能正常显示）。不过遗憾的是<!DOCTYPE HTML>太傲娇，至今没有另一半。<html> 与 </html> 标签限定了文档的开始点和结束点。

第三行与第四行组成一对，叫做“head”标签。顾名思义，这个“头”标签里的内容统领全局，比如控制布局与样式的CSS代码文件和添加互动功能的JavaScript代码文件在这里添加或导入；搜索页面用的关键词信息在这里添加；页面信息的编码方式也是由此指定；浏览器窗口的标题也在这里显示。

第五行与第六行组成一对，叫做“body”标签。用来显示所有的页面内容信息。

画个图来表示一下这四个标签的层级关系（就是谁包含谁的意思，或者谁在谁的势力范围内出现）：

边学边练------写一个最简单的页面

正所谓万丈高楼平地起，下面我们就动手做我们的第一个网页文件。

工具：电脑，安装一个浏览器（IE 火狐 谷歌浏览器都可以），确定“记事本”工具可用。

有了以上工具我们就可以写了。

Step1 新建一个.txt文件。

操作如下：

（1）选择合适的磁盘，比如D盘或F盘新建一个文件夹，命名为“网页”。点击进入。

（2）在空白处点击鼠标右键新建一个文本文件，命名为“第一个页面”。这时我们就有了一个“第一个页面.txt”文件了。

如果你的电脑不显示“.txt”这样的文件后缀，可以在屏幕左上方寻找“查看”菜单，如图2

点击后，出现如下菜单如图3，点击“选项”。

点击“查看”，去掉“隐藏已知文件类型的扩展名”选项前的“对号”，如图4所示。这时就能显示或修改文件后缀了。

Step2 添加内容

（1）双击打开“第一个页面.txt”文件，把HTML基本结构共七行代码输入进去。

（2）保存，关闭文件，在“第一个页面.txt”文件上点击鼠标右键，选择“重命名”，将“.txt”修改为“.html”。这时，系统会提示，如图1，大胆点“是”。

这时我们的文件就变成了html网页文件了。

我们双击这个文件发现浏览器内一片空白，这就好比我们在桌子上摆了个碟子，里面并没有放美食。浏览器中的一片白就是空碟子的颜色，而HTML基本结构就是这个碟子。

下面我们往碟子里加点东西。

Step3 添加内容

（1）在“第一个页面.html”文件上点击鼠标右键，选择“打开方式”，选择“记事本”，如果没有“记事本”选项，请点击“选择其他应用”，点击选择最下面的“更多应用”，选择“记事本”。下一次选择“打开方式”时，“记事本”就会出现了。

（2）在<head></head>标签之间添加“<title>学习写第一个网页</title>”。在<body></body>之间添加“<h1>第一个网页</h1>”；“<p>随着学的内容越来越多，网页就会越来越漂亮了！</p>”完成如图5

（3）保存，关闭，双击打开！效果如图6

今天的边学边做就到这里，下一次会详细解释<head>标签、<body>标签中常出现的子标签以及它们各自的作用。

第二篇《边学边做网页篇——<head>标签里装点啥？》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479

Tags：

猜你喜欢

最近发表
标签列表