超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
首先首先看一个HTML 实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
其中:
<!DOCTYPE html>
声明为 HTML5 文档<html>
元素是 HTML 页面的根元素<head>
元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8。<title>
元素描述了文档的标题<body>
元素包含了可见的页面内容<h1>
元素定义一个大标题<p>
元素定义一个段落
显示结果如下:
那什么是HTML?
- HTML 指超文本标记语言,是一种标记语言(不是编程语言),是一套标记标签 (markup tag)(简称标签),用来描述网页。
- HTML 文档(也叫做web页面)包含了HTML 标签及文本内容
HTML5是HTML最新的修订版本,HTML5 是下一代 HTML 标准。2014年10月由万维网联盟(W3C)完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 简单易学。
HTML 标签?
- HTML 标签通常是成对出现的,比如
<b>
和</b>
- 标签对中的第一个标签是开始标签(开放标签),第二个标签是结束标签(闭合标签)
如下:
Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。
浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:
HTML 网页结构
下面是一个可视化的HTML页面结构:
注意:只有 <body> 内容</body>
区域 (白色部分) 才会在浏览器中显示。
<!DOCTYPE>
声明
<!DOCTYPE>
声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
<!DOCTYPE>
声明有助于浏览器中正确显示网页。<!doctype>
声明必须位于 HTML5 文档中的第一行,HTML5 中仅规定了一种声明,使用非常简单:
<!DOCTYPE html> #不区分大小写
HTML编辑器选择
可以使用普通文本编辑器(保存为.html文件就可以了):
- Windows 用户可以使用记事本;
- Linux 用户可以选择文本编辑器vim
也可以使用专业的 HTML 编辑器来编辑 HTML,下面推荐几款常用的编辑器:
- Notepad++:https://notepad-plus-plus.org/
- Sublime Text:http://www.sublimetext.com/
- VS Code:https://code.visualstudio.com/
编辑并保存完成后,启动浏览器,然后选择"文件"菜单的"打开文件"命令,或者直接在文件夹中双击 HTML 文件,就能运行显示结果类似如下:
中文编码
对于中文网页需要使用 <meta charset="utf-8">
声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> #中文编码
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>