如何创建一个网页:(这里为了方便直接用记事本作为示例)

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、注释

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