第一章：HTML基础

.1 HTML的起源和发展

HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它的起源可以追溯到1989年，当时一位名叫蒂姆·伯纳斯-李的物理学家在CERN（欧洲核子研究中心）工作时，他想寻找一种更好的方式来共享研究论文和其他信息。他开发了一种名为ENQUIRE的项目，可以通过超链接把相关的文档连接在一起。之后，他决定开发一种更具普遍性的系统，这就是HTML的起源。

HTML的发展历程可以分为以下几个阶段：

HTML 1.0（1991年发布）：这是HTML的最初版本，只包含很少的标记，如<h1>、<p>、<br>等。它不能包含图像、表格等高级元素。
HTML 2.0（1995年发布）：这个版本增加了表格、图像等高级元素，也引入了一些新的标记，如<img>、<table>等。
HTML 3.2（1997年发布）：这个版本增加了表单元素和CSS样式表。
HTML 4.01（1999年发布）：这个版本增加了一些新的元素和属性，如<iframe>、<label>等。也引入了一些新的特性，如框架、样式表和脚本。
XHTML 1.0（2000年发布）：这个版本是HTML的一种XML变体，用更严谨、严格的方式规定了标记的使用。它也包括了一些新的标记和属性。
HTML5（2014年发布）：这个版本是HTML的最新版本，增加了一些新的元素和属性，如<canvas>、<audio>、<video>等。它还增加了更多的语义标记，使网页内容更易于理解和访问。

HTML已成为创建网页的标准语言之一，随着技术的不断进步和应用场景的不断扩大，HTML也在不断发展和演变。

1.2 HTML元素和标记

HTML元素是在网页中创建结构的基本单位，它由开始标记和结束标记组成，并包含了中间的内容。HTML元素可以包含其他元素和标记，以此来构建复杂的网页结构。

HTML标记是一些特殊的代码，用于将文本转换成浏览器中呈现的网页内容。它们起到指示浏览器应该如何显示页面内容的作用。

以下是一些常见的HTML标记：

<html> 标签表示 HTML 文档的根元素；
<head> 标签包含了文档的头部信息，如文档的标题、样式表等；
<title> 标签用于定义文档的标题，它会显示在浏览器的标题栏上；
<body> 标签包含了文档的主要内容部分；
<h1> 到 <h6> 标签表示标题，其中 h1 是最高级别的标题；
<p> 标签表示一个段落；
<img> 标签用于插入一个图片；
<a> 标签表示一个链接；
<ul> 和 <li> 标签用于创建无序列表；
<ol> 和 <li> 标签用于创建有序列表；
<table>、<tr>、<td> 表示表格和表格的行列。

在每一个标签中，还可以添加一些属性来定义标记的特性，例如：

class 和 id 属性可以用于设置样式或指定元素的唯一标识符；
href 属性可以用于指定链接的目标地址；
src 属性可以用于指定图片或其他媒体文件的地址；
style 属性可以用于设置元素的样式，例如字体大小、颜色等。

需要注意的是，在编写 HTML 代码时应遵守一定的语法规则，例如标签应该正确嵌套，属性值应该用双引号引起来等，这些都是为了保证页面的正确性和展示效果。

1.3 HTML表单和输入控件

HTML表单是一个用于收集用户信息的交互性模块，它由一组表单元素和相应的表单控件组成。以下是一些常见的HTML表单元素和输入控件：

<form> 元素用于创建一个表单，在其中包含各种输入控件。例如：

<form>
  <!-- 输入控件 -->
</form>

<input> 元素是用于创建一个输入控件的基本元素。它有多个不同的类型，如文本输入框、密码输入框、单选按钮、复选框、文件上传框等。例如：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br>

  <input type="submit" value="登录">
</form>

在这个例子中，我们创建了一个包含两个文本输入框和一个提交按钮的表单。第一个输入框是用于输入用户名的，第二个是密码输入框。type 属性指定了这两个输入框的类型，其中 type="text" 表示是文本输入框，type="password" 表示是密码输入框。name 属性用于指定此输入框的名称，后续在后台可以根据这个名称获取输入框中的值。id 属性用于指定此输入框的唯一标识符，通常与 for 属性一起使用。

<select> 元素是用于创建一个下拉列表的元素，它包含多个 <option> 元素，表示每一个选项。例如：

<form>
  <label for="fruit-select">选择一个水果：</label>
  <select name="fruit" id="fruit-select">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
  </select>
</form>

在这个例子中，我们创建了一个下拉列表用于选择水果。name 属性用于指定此下拉列表的名称，可以在后台根据此名称获取选择的值。每一个 <option> 元素包含了选项的文本和值。value 属性用于指定选项的值，当提交表单时，这个值将被发送到服务器。

<textarea> 元素用于创建一个多行文本输入框。例如：

<form>
  <label for="comment">留言：</label>
  <textarea id="comment" name="comment" rows="5" cols="50"></textarea>
</form>

在这个例子中，我们创建了一个多行文本输入框。rows 属性用于指定文本框的行数，cols 属性用于指定文本框的列数。这些属性只是用于设置文本框的尺寸，它不会限制用户输入的文字数量。

HTML表单和输入控件提供了一种方便的方式来收集用户的信息和数据。它们不仅可以用于注册页面和登录页面，还可以用于不同类型的数据收集和展示。

　用HTML怎么制作网页呢?静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计 ? ,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的。

　　一、网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

　　二、网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

　　三、网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

　　四、网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

　　五、网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。其中： (1) html文件包含：其中index.html是首页、其他html为二级页面; (2) css文件包含：css全部页面样式,文字滚动, 图片放大等; (3) js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。

　　更多关于“用HTML怎么制作网页呢?”的问题，欢迎咨询千锋教育在线名师。千锋教育拥有多年IT培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。

么是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.htm 和 index.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文件？》的全部内容，现希望可以帮到你~

在线咨询

上一篇：ai扩写软件有哪些免费？分享4款好用的AI扩写工具
下一篇：加密货币之注意力币（BAT）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商