Skip to content

简介

什么是 HTML?

HTML 语言用于描述网页

  • HTML是指超文本标记语言: Hyper Text Markup Language
  • HTML不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签(markup tag)
  • HTML使用标记标签来描述网页
  • HTML文档包含了HTML标签及文本内容
  • HTML文档也叫做web页面

HTML发展史

HTML没有1.0，因为关于它的初版存在争议，1995年HTML 2.0面世，1997年由国际官方组织W3C推出了HTML 3.2以及HTML 4.0标准，后面W3C(万维网联盟)也渐渐变成Web技术领域的权威，经过漫长的演变，2014年，HTML 5标准最终面世。

发布时间 版本
1989 Tim Berners-Lee 发明万维网
1991 Tim Berners-Lee 制定 HTML 规范
1993 Dave Raggett 拟定了 HTML+
1995 HTML 工作组定义 HTML 2.0
1997 W3C 推荐标准: HTML 3.2
1999 W3C 推荐标准: html 4.01
2000 W3C 推荐标准: XHTML 1.0
2008 WhatWG 首次公开 HTML5
2012 WHATWG 制定 HTML5 标准
2014 W3C 推荐标准: HTML5
2016 W3C 候选推荐： HTML 5.1
2017 W3C 推荐： HTML5.1 第二版
2017 W3C 推荐： HTML5.2

HTML基础语法

HTML (Hyper Text Markup Language)：超文本标记语言，是在WWW中用来建立超媒体文件的语言，通过标记/标签/元素和属性对一段文本进行描述。

HTML文件由一系列称为标记的元素组成，标记用<>框定，大部分元素有起始标记和结束标记，部分标记只有起始标记。所有HTML文件中的各种元素均由标记表示。

HTML文件以<!DOCTYPE >开始，随后由两部分组成：文件头部和文件体部。

hello_world.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 声明了文档的类型 -->
<!DOCTYPE html>

<!-- HTML 页面的根元素，该标签的结束标志为</html> -->
<html>

<!-- 包含了文档的元数据（meta），如<meta charset="utf-8">定义网页编码格式为utf-8 -->

<head>
  <meta charset="UTF-8"><!-- 编码 -->
  <title>My First Web Page!</title><!-- 定义文档的标题 -->
</head>

<!-- 定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body> -->

<body>
  <!-- 作为一个标题使用，该标签的结束标志为</h1> -->
  <h1>First Title!</h1>
  <!-- 作为一个段落显示，该标签的结束标志为</p> -->
  <p>Hello World!</p>
</body>

</html>

HTML标签

HTML标记标签通常被称为HTML标签(HTML tag)。

  • HTML标签是由尖括号包围的关键词，比如<html>
  • HTML标签通常是成对出现的，比如<b>和</b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
实例
1
<标签>内容</标签>

HTML元素

HTML文档由HTML元素定义，HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML提示：使用小写标签

由于HTML标签对英文字母的大小写不敏感，所以 <P> 和 <p> 表达的意思相同，在未来 (X)HTML 版本中强制使用小写，所以推荐使用小写

HTML属性

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

  • HTML元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name="value"。
实例
1
<a href="https://www.sohu.com">这是一个链接使用了 href 属性</a>

Html页面创建一般步骤

纯前端页面可使用任意文本编辑器(推荐:Visual Studio Code)编写，参考过程如下：

  1. 打开文本编辑器

  2. 编写HTML代码

  3. 保存为*.html或*.htm文件，注意格式问题

  4. 使用浏览器(推荐：Chrome)打开网页预览效果

  5. 使用浏览器的开发者工具调式