整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

《网页制作初级教程》html基础入门视频教程!

《网页制作初级教程》html基础入门视频教程!

例演示视频点击进入:《2小时学会完美建站教程》

么是HTML / HTM文件?他们相差一个字母有什么区别吗,如何查看或编辑源代码以及如何转换成其他格式,例如DOCX,PDF,JPG 等,针对这些问题编程狮W3Cschool整理以下资料希望能对你有所帮助:

什么是HTM或HTML文件?

HTM / HTML 文件是超文本标记语言(Hyper Text Markup Language)文件,是 Internet 上的标准网页文件类型。

由于 HTM 文件是纯文本文件,因此它们仅包含文本(例如您现在正在阅读的内容)以及对其他外部文件的文本引用(例如本文中的配图)。

HTM 和 HTML 文件还可以引用其他文件,例如视频,CSS 或 JS 文件。

HTM与HTML的区别

HTM 与 HTML 没有本质意义的区别,只是为了满足 DOS 仅能识别 8+3 的文件名而已,因为一些老的系统 (win32) 不能识别四位文件名,所以某些网页服务器要求 index.html 最后一个 l 不能省略。MSIE 能自动识别和打开这些文件,但编写网页地址的时候必须是完全对应的,也就是说 index.htmindex.html 是两个不同的文件,对应着不同的地址。值得一提的是 UNIX 系统中对大小写敏感,不吻合的话就可能报没有文件或者找不到文件。

如何打开HTM或HTML文件?

任何 Web 浏览器,例如 Edge,Firefox,Chrome,Opera,IE,360 安全浏览器等,都可以打开并正确显示 HTM 和 HTML 文件。换句话说,在浏览器中打开这些文件并“解码(decode)” HTM 或 HTML 文件使其能正确显示。

现在有很多简化编辑和创建 HTM / HTML 文件的工具。一些著名的免费 HTML 编辑器包括 Eclipse ,Komodo Edit 和 Bluefish 。另一个流行的具有许多高级功能的 HTM / HTML 编辑器是 Adobe Dreamweaver ,不过它是收费的。

虽然 Windows 系统自带的记事本等简单的文本编辑器的功能不如专用的 HTM 编辑器那么丰富,但是对 HTM 或 HTML 文件进行简单编辑修改还是可以的。不过,W3Cschool还是建议大家使用专用的编辑器,如 WebStorm、VS Code 等,它具更多专业功能。

这是一个非常简单的 HTML 页面以文本形式显示的示例:

源码:

<!doctype html>
<html>

    
<head>
<meta charset="utf-8">
<title>什么是HTM或HTML文件? - 编程狮(w3cschool.cn)</title>
</head>


<body>
    <h1>什么是HTM或HTML文件?</h1>
    <p>HTM / HTML 文件是超文本标记语言(Hyper Text Markup Language)文件,是 Internet 上的标准网页文件类型。</p>
    <p>由于 HTM 文件是纯文本文件,因此它们仅包含文本(例如您现在正在阅读的内容)以及对其他外部文件的文本*引用*(例如本文中的配图)。</p>
    <p>HTM 和 HTML 文件还可以引用其他文件,例如视频,CSS 或 JS 文件。</p>   
</body>

    
</html>

当 Web 浏览器呈现信息时,HTML 文件的源代码被“转换”为真实的网页(尽管源代码已很精简了)。

如何转换HTML和HTM文件?

HTM 文件以特定的语法(规则)构成,以使其中的代码和文本在浏览器中打开时能够正确显示。因此,将 HTM / HTML 文件转换为另一种格式可能会丢失页面上的所有功能。

如果你想要做的是将一个 HTM / HTML 文件转换为方便离线查看的文件,这时图片或 PDF 格式会方便很多。

在 Chrome 中,鼠标右键单击网页,出现的选项菜单中进入 “打印(P)...”(快捷键:CTRL + P) ,在打印选项中选择另存为 PDF,以将窗口中的页面转换为 PDF 文件。Chrome 浏览器的扩展功能也称为“全屏截屏”,可将 Chrome 浏览器中所有打开的 HTM / HTML 文件转换为 PNG 文件。

其他浏览器具有类似的功能,例如 Firefox 的 “另存为 PDF” 加载项。

您也可以使用专门用于 HTM / HTML 进行图像文件转换的网站,例如iWeb2Shot 或Web-capture 。

一个免费的文件转换器可以用来转换并保存 HTM / HTML 文件到您的计算机。如 FileZigZag 是一个免费的文档转换器网站,可将 HTM 转换为RTF,EPS,CSV,PDF 和许多其他格式。

HTM / HTML 文件不能转换为文本文件格式以外的任何格式。例如,HTML 文件永远不能转换为 MP3 音频文件。

文件打不开?

HTML / HTM 文件应该很容易打开,因为它们只是任何 Web 浏览器都可以查看的文本文件。如果您的文件没有从上面建议的任何程序打开,则很有可能正在打开的这个文件并非超文本标记语言文件。

某些文件格式使用的文件扩展名与 HTML / HTM 非常相似,但实际上并非相同。一个主要的示例是用于压缩 HTML 电子书文件的 HTMLZ 文件扩展名。有 HTML 文件在内的 HTMLZ 文件,但整个包的格式为 ZIP,不会在 Web 浏览器或文本编辑器打开。

在此示例中,您需要特定的 HTMLZ 文件查看器,例如Caliber 。或者,由于此文件格式实际上是存档,因此您可以使用 7-Zip 之类的文件解压缩器将其打开,然后您可以使用网络浏览器或上述任何其他 HTML 查看器/编辑器打开任何单独的 HTML 文件。

TMLANGUAGE 是另一个可能与 HTML / HTM 文件混淆的文件扩展名。这些实际上是TextMate 用于 macOS 的 TextMate 语言语法文件。

以上就是编程狮W3Cschool为你整理的关于《什么是HTM或HTML文件?如何打开、编辑和转换HTM和HTML文件?》的全部内容,现希望可以帮到你~

TML元素的属性

属性是为HTML元素提供的附加信息。

为相同的HTML元素指定不同的属性,会呈现不同的功能或效果。

举个例子:

比如我们在上一篇中练习过的<a></a>标签构成的超链接元素中有一个href属性,这个属性指定的是点击后跳转的页面地址,相同的<a>标签改变href属性就能跳转不同的页面。例如

<a href="https://www.bilibili.com/read/cv2720755">歼-20战斗机</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml">歼-20战斗机</a><!-- 注释 看起来一样的超链接元素因为href属性不同,打开的页面也不同。-->

小伙伴们自己写的时候要注意使用半角符号,不然不能正确打开链接。

超链接元素中还有一个控制链接页面打开的属性叫做target,是用来控制新打开页面窗口的位置。下面我们就看看target属性为_blank和_parent的情况下的不同。例如

<a href="https://www.bilibili.com/read/cv2720755" target="_blank">歼-20战斗机</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml" target="_parent">歼-20战斗机</a><!-- 注释 看起来一样的超链接元素因为target属性不同,打开的页面所在窗口不同。-->

测试后,target="_blank"时,新页面在测试页面窗口旁边新建一个窗口打开。

target="_parent"时,新页面在原有测试页面窗口中打开。

如图所示:

左边为_blank,右边为_parent,点击左边链接后,新窗口在原有窗口旁边打开。如下图:

点击右侧

新页面在原窗口处打开。

<a>标签的target属性还有_self、_top这样的属性,感兴趣的小伙伴可以自行测试。

一般HTML元素的通用属性有:class 、id 、style 、title这四类,其中class 、id 、style这三个属性会在CSS的讲解中详细学习。

下面我们通过练习来看看title属性的作用。

HTML元素属性使用练习1

NO.1: title

title属性用于显示元素的额外信息使用。示例代码如下:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body>
  <h1>第一个网页</h1><hr>
<a href="https://www.bilibili.com/read/cv2720755" target="_blank" title="中国最先进战斗机">歼-20战斗机</a>
</body> 
</html>

效果如图:当鼠标移动到超链接上时,"中国最先进战斗机"的说明就出现在下侧。

NO.2:href/src/url

这三个属性虽然写法不同,但都是为元素指定路径使用的。不属于通用属性。

例如<a>标签中指定链接路径使用的是href,而<img>标签中导入图片的路径是src,url在css中也常用来引入链接。具体练习大家可以翻看《HTML中的元素使用方法2——零基础自学网页制作》一文。

这里要介绍的是关于网页中的路径的两个重要概念:绝对路径相对路径

绝对路径是指文件在硬盘上真正存在的路径。

相对路径就是相对自己的目标文件的位置。

怎么理解这两个概念呢?举个例子:

如果我们要在"第一个页面.html"中显示一张图片image1.jpg,它们都在我的"D盘/零基础自学网页制作"这个文件夹中。如图:

如果用绝对路径导入写法是这样的:

<img src="file:///D:/零基础自学网页制作/image1.jpg"/>

相对路径这样写:

<img src="image1.jpg"/>

大家观察一下,也看出了绝对路径与相对路径的区别了。

另外,这样的链接也属于绝对路径:href="https://www.bilibili.com/read/cv2720755"

那么什么时候使用相对路径什么时候使用绝对路径呢?这个问题我会在明天深入为大家讲解,这涉及到网页或网站上传服务器的问题。

做教程确实是没什么人看,但是我依然会坚持,我是一名高校教师(认证资料等疫情结束后去办公室拍摄上传吧),把自己的知识写出来对自己来说是一个提高,也把原来很多常用却不甚了然的概念再次打磨清晰是我最大的收获。本篇教程针对完全没有基础的网页制作学习者,利用碎片时间学习,只要我们坚持,必然可以完成网页制作的学习,为未来学习更加复杂的内容打下基础!

喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作