1.HTML5简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

虽然说HTML也算是一种程序语言，但是事实上HTML并不像C、C++以及Java语言那样必须记住大量的语法，正确地说，HTML只是一种标记（tags），每个标记都是一个特定的指令，这些指令组合起来就是我们在浏览器看到的网页界面！！！ 

1.1 什么是HTML？ 

HTML 是用来描述网页的一种语言。

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

1.2 HTML标签 

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

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

1.3 HTML编辑器 

目前支持HTML的编辑器有很多，例如：VS Code、Sublime Text、HBuildX等等，怎么说呢，每一个编辑器都有各自的优点、特点吧，我在这里使用的HTML编辑器是：HBuildX。（当然也可以通过记事本来写，需要另存为 .html 后缀的文件格式） 

 

2.初识HTML5的小实例 

2.1 实例一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的第一个网页</title>
	</head>
	<body>
		Hello,欢迎来到我的网页!!!
	</body>
</html>

2.1.1 运行结果如下： 

web前端学习（一）——初识HTML5_html

2.2 实例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的第一个网页</title>
	</head>
	<body>
		<h1>Hello,欢迎来到我的网页!!!</h1>
		<p>网页中的第一个段落</p>
	</body>
</html>

2.2.1 运行结果如下：

web前端学习（一）——初识HTML5_标记语言_02

2.3 实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

其中<!DOCTYPE html>的声明是不区分大小写的。以下四种方式都是一样的：👇👇👇

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

目前在大部分浏览器中，直接输出中文可能会出现中文乱码的情况，这时候我们就需要在头部将字符集声明为 UTF-8 或 GBK。 也就是下面这条语句：👇👇👇

<meta charset="utf-8">