HTML介绍

1、什么是 HTML？

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

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

2、HTML 标签

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

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

3、HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页
  • Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

代码解释：

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

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题

<p> 与 </p> 之间的文本被显示为段落

HTML基本结构

1、HTML基本结构

<html> <!--根控制开始标签 -->
<head> <!-- 头开始标签 -->
<title>标题</title> <!-- 浏览器窗口标题 -->
</head> <!-- 头结束标签 -->
<body> <!-- 主体开始标签 -->
    内容显示区域
</body> <!-- 主题结束标签 -->
</html> <!-- 根控制结束标签 -->

以上就是一个最基本的网页，下面为解释：
（1） HTML文档是由html、head和body三大元素构成。
（2） <html>…</html>: 表示文档最外层的元素，浏览器以<html>开始解释，到</html>结束，所有网页内容都必须放在他们之间。
（3） <head>…</head>: 表示HTML文档头标签，不显示在正文中。
（4） <title>…</title>: 表示文本的标题，它被显示在浏览器窗口的标题栏中。
（5） <body>…</body>: 表示文档的主体部分，在浏览器中要显示的内容。

2、示例

<!DOCTYPE HTML>
<head>
    <meta ="Content-Type" content="text/html; charset=utf-8">
    <title>认识html文件基本结构</title>
</head>
<body>
    <h1>在本小节中，你将学会认识html文件基本结构</h1>
</body>

HTML基础语法

1、HTML语法由标签和属性组成

标签被尖括号 < 和 > 包围，并且成对出现，不同标签可以嵌套，对大小写不敏感，<b>和<B>效果一样。

2、HTML标签分为单标签和双标签两种类型

（1）单标签：由一个标签组成，使用时最好加上关闭（/）。
常用单标签:

  • <br /> : 换行
  • <hr /> : 分割线
  • <img /> : 显示图片资源
  • <meta /> : 描述网页用于搜索引擎
  • <link /> : 定义文档与外部资源,常用于链接CSS外部样式表
  • <input /> : 表单输入框
  • <param /> : 定义网页中嵌入内容的运行时参数

（2）双标签：由开始标签和结束标签组成，必须成对使用。除了单标签几乎都是双标签，例如<p></p>

3、HTML元素表示形式

空元素: 例如<br>
带属性的空元素: <hr color="blue">
带有内容的元素: <title>标题</title>
带有内容和属性的元素: <font color="red">文字显示</font>
注意:对于<br>这类单标签，使用时最好写成<br />

4、注释

解释：增加代码可读性，可以出现在代码任何位置，不会在网页中显示。
格式：<!-- 注释 --> 用惊叹号“!”和两个“-”开始，两个“-”结束。

5、示例

<!DOCTYPE HTML>
<html>
    <head>
        <meta ="Content-Type" content="text/html; charset=utf-8">
        <title>HTML的代码注释</title>
    </head>
    <body>
        <!-- 单标签-换行 -->
        <br />

        <!-- 带属性标签 -->
        <font color="red">文字显示</font>

        <!--注释 begin-->
        <div>
            <p>专做IT编程技能教程<a href="#">个人博客</a></p>
        </div>
        <!--注释 end-->
    </body>
</html>
————————————————