PHP程序员小白到大牛集训(12期免息)
首页 >web前端 >前端问答 > 正文

html文件的扩展名是什么?文件的文件类型是什么?

原创2022-09-16 16:40:13938 + Vue前端学习QQ群(点击入群)

html文件的扩展名有两种:“html”和“htm”。html文件是一种纯文本文件,是由HTML命令组成的描述性文本,是一种静态的网页文件;HTML文件在编辑时只能写入纯文本,无法像“.doc”文档那样直接为文字内容设置样式。

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

HTML 英文全称是 Hyper Text Markup Language,中文译为“超文本标记语言”,专门用来设计和编辑网页。

使用 HTML 编写的文件称为“HTML 文档”,一般后缀为.html(也可以使用.htm,不过比较少见)。HTML 文档是一种纯文本文件,您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。

HTML 文档 = 网页

  • HTML 文档描述网页。

  • HTML 文档也被称之为网页。

  • HTML 文档包含了 HTML 标签和纯文本。

HTML标签:

HTML 是一种标记语言,使用各种标签来格式化内容,标签的特点如下所示:

  • HTML 标签由尖括号包围的关键词构成,比如 <html>;

  • 除了少数标签外,大多数 HTML 标签都是成对出现的,比如 <b> 和 </b>;

  • 成对出现的标签中,第一个标签称为开始标签,第二个标签称为结束标签(闭合标签)。

HTML 中的不同标签具有不同的含义,学习 HTML 其实就是学习各个标签的含义,根据实际场景的需要,选择合适的标签,从而制作出精美的网页。


浏览器相对于HTML文档的作用:
  • Web 浏览器的作用读取 HTML 文档,并以网页的形式去显示出内容
  • Web 浏览器不会显示 HTML 标签,而是使用标签来解释页面里的内容

HTML 标签代码如下:




    
    第一个网页


    

这是我的第一个网页

我一定会成为一名优秀的前端开发工程师。

登录后复制

本例标签代码解释:

1、网页的描述需写在 <html></html> 标签中。

2、标题、字符编码、兼容性、关键字、描述等信息需写在 <head></head> 标签中。

3、网页需要展示的内容需写在 <body></body> 标签中。

某些时候不按标准书写代码虽然可以正常显示,但是作为职业素养,还是一定要养成正规的编写习惯。

  • <!DOCTYPE html> 文档声明头.告知浏览器是使用哪种html版本进行编写(这里是HTML5).
  • <html lang="en"> 向搜索引擎表示该页面是html语言,并且语言为英文.
  • <h1></h1> 标题标签. 为其中的文本内容增加了作为标题的语义.
  • <p></p> 段落标签. 为其中的文本内容增加了作为段落的语义.

编辑器运行此段代码,Web 浏览器就会编译 HTML 标签代码,以标签来解释页面里的内容。
最终的运行结果便是展示出页面里的内容,不会显示 HTML 标签。

Web 浏览器展示效果如下:

1.webp.jpg


OK 我们再来认识下什么是"纯文本"文件:
  • Windows 中自带一个软件,叫做记事本。
    记事本保存的文档格式是 .txt 格式,就是英语text的缩写。
    术语上,称呼这个文件叫做:“ 纯文本文件 ”。

非纯文本文件和纯文本文件的含义与区别:

  • ** .doc 非纯文本文件:**
    我们做一个小实验,打开我们的 word 软件,写一个文档再进行保存,发现保存后的文档后缀名格式是 .doc 。 另外我们在写的过程中还发现 .doc 这个格式的文件它还能够设置以及保存文本的样式,比如文本有蓝色的、橙色的,还可以为文本设置下划线等等繁多的样式。

2.webp.jpg

  • ** .txt 纯文本文件:**
    现在我们再打开 Windows 自带的记事本并进行写作,我们发现在写作的过程中是不能为文本设置颜色、不能为文本设置下划线等样式的

4.webp.jpg

总结非纯文本文件和纯文本文件的 含义 与 区别:

含义:

  • 非纯文本文件(比如.doc):
    它除了有文本,还可以为文本设置花样繁多的样式。
  • 纯文本文件(比如.txt):
    它只有文本,没有样式。

区别:

  • 非纯文本文件(比如.doc):
    它除了有纯文本那样可写入文本的基本功能,并且还能够设置以及保存文本的样式,比如将文本设置保存为不同的文本颜色,为文本设置下划线等等繁多的样式。
  • 纯文本文件(比如.txt):
    一句话概括就是它只能规规矩矩老老实实工工整整的写入文本,不能够为文本设置任何样式。
注:当 .doc 和 .txt 存储着同样的内容时,.doc 比 .txt 要大(因为含有样式)。
为什么这里会先说明下非纯文本文件和纯文本文件的含义与区别呢?
  • 因为:
    HTML 就是纯文本!
    HTML 文件在编辑时只能写入纯文本, 你会发现它无法像 .doc 文档那样直接为文字内容做样式!

我们可以做个小实验, 也是应验HTML是纯文本文件的最经典实验:

我们在电脑桌面上新建一个记事本 .txt 文件. 打开并随意写上文字内容后 Ctrl+S 保存, 然后关闭文件。

2.png

下一步我们强行将文件的 .txt 拓展名改为 .html 拓展名. 此时这个 .html 文件它便是一个网页文件

3.jpg

4.jpg

5.png

这时我们使用浏览器去打开它, 我们发现浏览器是完全可以正常显示原有的全部内容的!

6.png

这样开始从一个 .txt 文件修改为了 .html 文件, 直至最后使用浏览器运行, 发现也是会正常显示全部内容的过程, 足以证明 HTML 是纯文本文件!

另外我们也是完全可以使用记事本去编写 HTML 文件, 因为 HTML 文件完全就是纯文本文件(但实际开发中没人这么干, 这里只是说明下罢了)。

更多编程相关知识,请访问:编程视频!!

以上就是html文件的扩展名是什么?文件的文件类型是什么?的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:html
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    后端、前端、测试,同时在线协作,内容实时同步

    支持grpc,http,websocket,socketio,socketjs类型接口调试

    相关文章

    相关视频


    视频教程分类

    专题推荐

    官方公众号

    php中文网课程

    扫码关注官方公众号
    回复“phpcn01”领取php学习资料课程
    全套工具、电子书、脑图、内部课程等

    推荐视频教程

    开通VIP会员课 0元学

    热门推荐