如何创建一个网页：（这里为了方便直接用记事本作为示例）

HTML网页文件的后缀名为“.html”

  1. 在桌面创建一个文本文档
    图片说明
  2. 另存为时加上“.html”的后缀，编码选择“UTF-8”，保存即创建了一个网页文件。
    图片说明
    图片说明
  3. 在图标上点击鼠标右键，点击用记事本打开该文件即可编写网页内容，快捷键“ctrl+z”快速保存。
    图片说明
    准备就绪后，开始学习前端最基础的部分：HTML语言基础

1、HTML文档结构

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

第一个HTML示例：

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>我的第一个网页</title>
</head>
<body>
<p>Hello，World！</p>
</body>
</html>

图片说明
观察生成的网页内容可知，其中：

  • <!DOCTYPE html>为文档类型声明。<!DOCTYPE> 声明位于文档中的最前面的位置，
    处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

  • <title>与</title>之间的网页的标题，出现在标题栏中。
    在图中最上方一栏显示的就是标题图片说明

  • <meta charset = "utf-8">声明网页所使用的字符编码为utf-8。

  • <html>与</html>之间的文本描述网页

  • <head>与</head>之间的是网页的开头部分，描述一些网页相关的信息。

  • <body>与</body>之间的是网页的主体部分，为可见的页面内容

  • <p>与</p>之间的文本被显示为段落
    HTML中之间的文本是“Hello，World！”，故网页中显示的也是：图片说明

2、HTML 标签

HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
HTML 标签由开始标签和结束标签组成

开始标签是被括号包围的元素名
结束标签是被括号包围的斜杠和元素名，比如：<p> </p>
某些 HTML 元素没有结束标签，比如<br>是没有关闭标签的空元素

tip：

  1. 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如：<br />是关闭空元素的正确方法
  2. HTML 标签对大小写不敏感。万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

3、HTML 标题

HTML 标题是通过<h1> - <h6> 等标签进行定义的。(放在body标签内)
如：

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>我的第一个网页</title>
</head>

<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>
</body>

</html>

生成内容如下：
图片说明

4、HTML 水平线和段落

<hr /> 标签在 HTML 页面中创建水平线，hr 元素可用于分隔内容。
HTML 段落是通过 <p> 标签进行定义的。

如：

<p>这是一段文字。</p>
<hr />
<p>这是另一段文字。</p>

图片说明

5、注释

<!-- --> 注释不会被浏览器显示出来。