今天心血来潮,想试试自己动手做一个简单的网页,就用HTML来搞。之前我对网页制作一窍不通,就知道HTML是个啥标记语言,不是啥C#、Java那种编程语言,没啥逻辑,就是个结构。
我先是在桌面上建个文本文档,把后缀名改成.html,文件名就叫index,变成*。然后右键点这个文件,用记事本打开它。用别的文本编辑器也完全没问题,看你喜欢。
打开之后,我开始往里面敲代码。得有个基本的结构,我查一下,大概是这个样子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
</body>
</html>
这个<!DOCTYPE html>据说是告诉浏览器这是HTML5文档。然后<html>标签是整个网页的根元素,所有的内容都得放这里面。
<head>里面放的是一些关于网页的信息,比如标题啥的,这些东西不会直接显示在网页上。我在这里面加个<title>标签,给网页起个名字,叫“我的第一个网页”。
真正能看到的内容,都得放在<body>里面。我琢磨着,先放个大标题,就用<h1>标签:
<h1>这是我的第一个标题</h1>保存文件,双击用浏览器打开,还真出来!
我打算加点正文内容。正文一般用段落标签<p>来表示:
<p>这是一个段落。今天我开始学习制作网页,感觉还挺有意思的。</p> 我又加个图片,用到的是<img>标签:
<img src="图片的名字.jpg" alt="图片"/>注意:那个src后面跟的是图片的地址,我这儿直接写的文件名,是因为我的图片跟这个html文件放在一个文件夹里。那个alt是图片加载不出来的时候显示的文字,可以随便写。
保存,刷新浏览器,图片也出来!
我想加个列表,把今天的学习内容列出来。列表分两种,一种是有序列表<ol>,一种是无序列表<ul>。我这里用无序列表就行:
<ul>
<li>学习HTML的基本结构</li>
<li>学会使用标题标签</li>
<li>学会使用段落标签</li>
<li>学会插入图片</li>
</ul>
<ul>表示无序列表,<li>表示列表里的每一项。
保存,刷新!搞定!一个简单的网页就这么做出来,虽然很简单,但还是挺有成就感的!以后再慢慢学,做出更复杂的网页!