HTML教程

本文章向大家介绍html,文章讲述了什么是html、html历史、为什么要学习 HTML、HTML文档的后缀名及打开方法、HTML的应用、怎么学好HTML以及一个简单的HTML实例。详情请阅读文章正文。

什么是 HTML

HTML代表超文本标记语言,它是 Web 上用于开发网页的最广泛使用的语言。HTML由 Berners-Lee 在 1991 年底创建,但“HTML 2.0”是第一个标准 HTML 规范,于 1995 年发布。HTML 4.01 是 HTML 的主要版本,于 1999 年底发布。尽管 HTML 4.01 版本被广泛使用但目前我们有 HTML-5 版本,它是 HTML 4.01 的扩展,这个版本是在 2012 年发布的。

 

HTML历史

从HTML面世开始他就显得“很不正规”,1991年年底推出HTML,但最早的HTML并没有任何严格的定义。直到1993年,IETF(Internet Engineering Task Force,互联网工程工作小组)才开始发布HTML草案。在HTML语言的发展历史中,大致经历了如下过程:

  • HTML(第一版):1993年6月由互联网工程工作小组发布的HTML工作草案。这个版本没有标准版本,主要是因为当时有很多版本的HTML,没有形成一个统一的标准,所以没有正式的HTML1.0.
  • HTML2.0:1995年11月作为RFC(Request For Comments 一系列以编号排定的文件)1866发布。
  • HTML3.2:1996年1月14日,由W3C组织发布,是HTML文档第一个被广泛使用的标准。由于该版本年代较早,很多东西都已经过时,在2018年3月15日被取消作为标准。
  • HTML4.0:1997年12月18日,由W3C组织发布,是HTML文档另一个重要的、广泛使用的标准。
  • HTML4.01:1999年12月24日,W3C组织发布。这也是另一个被广泛使用的标准。
  • XHTML1.0:2000年1月26日,W3C组织推荐标准。后来经过修订于2002年8月日重新发布。
  • XHTML1.1: XHTML最后的独立标准,2.0止于草案阶段。XHTML5则是属于HTML5标准的一部分,且名称已改为“以XML序列化的HTML5”,而非“可扩展的HTML”。
  • HTML5: HTML5 技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。

 

为什么要学习 HTML?

最初,HTML的开发旨在定义文档的结构,如标题、段落、列表等,以促进研究人员之间的科学信息共享。现在,借助 HTML 语言中可用的不同标签,HTML 被广泛用于格式化网页。

HTML是学生和工作专业人士在 Web 开发领域工作时成为优秀软件工程师的必备工具。我将列出学习 HTML 的一些主要优势:

  • 创建网站- 如果您熟悉 HTML,您可以创建网站或自定义现有的 Web 模板。

  • 成为一名网页设计师- 如果你想成为一名专业的网页设计师,HTML 和 CSS 设计是必须的技能。

  • 了解网络- 如果您想优化您的网站,以提高其速度和性能,最好了解 HTML 以产生最佳结果。

  • 学习其他语言- 一旦您了解了 HTML 的基础知识,那么其他相关技术(如 javascript、php 或 angular)就会变得更容易理解。

 

HTML文档的后缀名及打开方法

HTML文档的后缀名

HTML文档有两种后缀名

  1. .html
  2. .htm

以上两种后缀名没有区别,都可以使用。

 

html文件的打开方式

html文件是不需要任何运行环境就能打开,直接使用浏览器就能打开查看或者使用编辑器打开,以下浏览器可以打开:

  1. html文件打开方式一:用SublimeText工具打开。Sublime是很多程序员的选择,下载安装SublimeText之后,我们选择文件打开方式为SublimeText。
  2.  
  3. html文件打开方式二:使用Dreamweaver打开。对于初学者都会选择Dreamweaver,Dreamweaver是比较流行的工具,我们只要把Dreamweaver打开,然后把要打开的文件拖进去即可。
  4.  
  5. html文件打开方式三:使用Notepad++工具打开。Notepad++工具也是比较受欢迎的软件,可以打开html文件,并且编辑html文件

 

HTML的应用

HTML 是网络上使用最广泛的语言之一。我将在这里列出其中的几个:

  • 网页开发- HTML 用于创建在网络上呈现的页面。几乎每个网页页面都包含 html 标签,用于在浏览器中呈现其详细信息。

  • Internet 导航- HTML 提供用于从一个页面导航到另一个页面的标签,并且在 Internet 导航中大量使用。

  • 响应式 UI - 由于响应式设计策略,现在的 HTML 页面在所有平台、移动设备、标签、台式机或笔记本电脑上都能很好地工作。

  • 离线支持HTML 页面一旦加载就可以在机器上离线使用,无需任何互联网。

  • 游戏开发- HTML5 原生支持丰富的体验,现在在游戏开发领域也很有用。

 

怎么学好HTML

学习html首先要了解什么是html,然后,我们要下载一个html编辑器,并且要对html各个标签熟练掌握,灵活运用,另外也可以参考一些html视频网站,一些视频网站对html都有详细的介绍,新手完全可以对照教程去学习html。

html并不很难学,只是一些简单标签和属性,只要我们认真学习HTML视频教程,不用多久就差不多学会了html。

在学习HTML之前,您应该具备 Windows 或 Linux 操作系统的基本工作知识,此外您必须熟悉 -

  1. 使用任何文本编辑器(如记事本、notepad++ 或 Edit plus 等)的经验。
  2. 如何在您的计算机上创建目录和文件。
  3. 如何浏览不同的目录。
  4. 如何在文件中键入内容并将其保存在计算机上。
  5. 了解不同格式的图像,如 JPEG、PNG 格式。

 

一个简单的HTML实例

现在向大家展示一个简单的html实例,并且对这个html实例作简单的解释。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Notch signaling pathway</title>
    <base href="http://www.runoob.com/images/" target="_blank">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style type="text/css">
        body {background-color:yellow}
        p {color:blue}
    </style>
</head>

<body>
    <h1>Notch signaling pathway</h1>
    <p>The Notch signaling pathway is a highly conserved cell signaling system present in most animals.[1] Mammals possess four different notch receptors, referred to as NOTCH1, NOTCH2, NOTCH3, and NOTCH4.[2] The notch receptor is a single-pass transmembrane receptor protein. It is a hetero-oligomer composed of a large extracellular portion, which associates in a calcium-dependent, non-covalent interaction with a smaller piece of the notch protein composed of a short extracellular region, a single transmembrane-pass, and a small intracellular region.[3]</p>
    <!--annotation-->
    <p>Notch signaling promotes proliferative signaling during neurogenesis, and its activity is inhibited by Numb to promote neural differentiation. It plays a major role in the regulation of embryonic development.</p>
    <br>
    <h4>References</h4>
    <a href="https://en.wikipedia.org/wiki/Notch_signaling_pathway">Wiki</a>

    <img loading="lazy" src="C:/Users/Administrator/Desktop/1.jpg" width="258" height="139"/>
</body>

</html>

 解释:

<!DOCTYPE html>

声明为 该文档为HTML文档

<html>...</html>

是HTML的根元素

<head>...</head>

包含了文档的头部标签元素,可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部的元素标签为:

  • <meta>:<meta>标签描述了一些基本的元数据。元数据也不显示在页面上,但会被浏览器解析。META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。中文网页必须定义:charset="utf-8"
  • <title>...</title>:描述了文档的标题,在标签中显示。
  • <style>:定义了HTML文档的样式文件引用地址。
  • <link>:定义了文档与外部资源之间的关系,通常用于链接到样式表。
  • <base>:描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接

<body>...</body>

定义主体部分:

  • <h1>...</h1>:定义第一大标题,标题可以用<h1>~<h6>来定义
  • <p>...</p>:定义一个段落
  • <br >:折行
  • <a href="">...</a>:加入一个链接
  • <img src="" width="" height=""/>:引入一张图片