通过html基础入门第一课—html概念的学习,我们已经大致知道了html的一些入门基础,今天我和大家一起创建一个简单的html文档,让我们亲自感受下创建网页文档的快感,呵呵。

如果想创建一个新的html文档,建议大家直接用文本编辑,这样写出的代码会很整洁,不会生成冗余代码。

首先,回忆html概念里面我们提到的html的基本结构,html是由一对最大的标签<html></html>包围,所有的html标签和内容都是在这对最大的标签里面的,所以这也是我们称之为html标记语言的一个原因,然后最大的html标签包含的空间又被一分为二,上边一部分是头部(head),下面一部分是身体部分(body),我们先把这个简单的结构书写出来,那就是以下内容:

  1. <html>  
  2. <head>  
  3. 这里是头部……   
  4. </head>  
  5. <body>  
  6. 这里是内容   
  7. </body>  
  8. </html>

我们可以再自己的电脑桌面上新建一个文本文件,然后把上面的代码复制在先创建的文本中,然后把文本文件的后缀名修改为.html或者.htm,保存,你会发现这个时候次文件的图标变成了一个浏览器样式,然后你右击打开方式,选择用相应浏览器打开查看了。

当然以上制作的只是一个简单的html结构,里面没有充实的内容,我们可以往结构里面加入一些东西,让我们的网页文档看起来有血有肉,首先,我们可以在以上文档的头部代码,也就是<head></head>里面给这个网页文档添加一个标题:

  1. <head>  
  2. <title>这是我的第一个网页文档,纪念一下</title>  
  3. </head>  

OK,我们继续,往内容标签中加入两个段落和一个超链接:

  1. <body>  
  2. <p>这是一个段落哦</p>  
  3. <p>这是另一个段落哦</p>  
  4. <a href=“http://www.xuejianzhan.com/”>学建站</a>  
  5. </body>  

然后你发现,刚才我们那个简单的html文件就变成了以下样子:

  1. <html>     
  2. <head>     
  3. <title>这是我的第一个网页文档,纪念一下</title>     
  4. </head>     
  5. <body>     
  6. <p>这是一个段落哦</p>     
  7. <p>这是另一个段落哦</p>     
  8. <a href=“http://www.xuejianzhan.com/”>学建站</a>     
  9. </body>     
  10. </html>    

你做好了吗?

声明:本站分享的WordPress主题/插件均遵循 GPLv2 许可协议(免费开源),相关介绍资料仅供学习参考,实际版本可能会因版本迭代或开发者调整而产生变化,如程序中涉及有第三方原创图像、设计模板、远程服务等内容,应获得作者授权后方可使用。本站不提供该程序/软件的产品授权与技术服务,亦不收取相关费用。