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文档有两种后缀名
- .html
- .htm
以上两种后缀名没有区别,都可以使用。
html文件的打开方式
html文件是不需要任何运行环境就能打开,直接使用浏览器就能打开查看或者使用编辑器打开,以下浏览器可以打开:
- html文件打开方式一:用SublimeText工具打开。Sublime是很多程序员的选择,下载安装SublimeText之后,我们选择文件打开方式为SublimeText。
- html文件打开方式二:使用Dreamweaver打开。对于初学者都会选择Dreamweaver,Dreamweaver是比较流行的工具,我们只要把Dreamweaver打开,然后把要打开的文件拖进去即可。
- 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 操作系统的基本工作知识,此外您必须熟悉 -
- 使用任何文本编辑器(如记事本、notepad++ 或 Edit plus 等)的经验。
- 如何在您的计算机上创建目录和文件。
- 如何浏览不同的目录。
- 如何在文件中键入内容并将其保存在计算机上。
- 了解不同格式的图像,如 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=""/>:引入一张图片