文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用HTML写一个最简单的页面

2024-04-02 19:55

关注

今天小编给大家分享一下怎么用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”标签。用来显示所有的页面内容信息。

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

怎么用HTML写一个最简单的页面

工具:电脑,安装一个浏览器(IE 火狐 谷歌浏览器都可以),确定“记事本”工具可用。

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

Step1 新建一个.txt文件。

操作如下:

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

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

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

怎么用HTML写一个最简单的页面

边学边做网页篇------初识HTML

图 2

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

怎么用HTML写一个最简单的页面

图 3

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

怎么用HTML写一个最简单的页面

图 4

Step2 添加内容

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

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

怎么用HTML写一个最简单的页面

图 1

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

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

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

Step3 添加内容

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

(2)在<head></head>标签之间添加“<title>学习写第一个网页</title>”。在<body></body>之间添加“<h2>第一个网页</h2>”;“<p>随着学的内容越来越多,网页就会越来越漂亮了!</p>”完成如图5

怎么用HTML写一个最简单的页面

边学边做网页篇------初识HTML

图 5

(3)保存,关闭,双击打开!效果如图6

怎么用HTML写一个最简单的页面

以上就是“怎么用HTML写一个最简单的页面”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯