html知识点总结

HTML学习知识点总结：

一、HTML介绍

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。

HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码（用控制台工具也可）就可看到。

二、HTML文本结构

2.1 新建工作目录

运行该软件，打开/新建一个文件夹。 （ 该文件夹是我们的工作目录，一般不建在C盘）

2.2 新建 HTML 文件

接下来在该文件夹下新建一个 后缀名为html 的文件。在文件中输入内容，即可在浏览器中查看运行结果。

2.3 HTML 文档相关说明

2.3.1 注释

如同大部分的编程语言一样，在 HTML 中有一种可用的机制来在代码中书写注释 。为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号<!--和-->包括起来。

2.3.2 空元素

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>, <a>等等，我们称其为空元素。

2.3.3 元素的属性

元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。

一个属性必须包含如下内容：

1. 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
2. 属性名称，后面跟着一个 = 号。
3. 一个属性值，由一对引号 “” 引起来。

三、HTML常用标签

3.1 标题

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>。

在页面中，标题非常重要：

1. 搜索引擎用标题来索引页面的内容。
2. 用户也习惯以标题进行主要内容浏览，以决定是否查看该页面。

3.2 文本格式

标签 描述
定义粗体文本
定义着重文字
定义斜体字
定义小号字
定义加重语气
_{定义下标字
^{定义上标字}}
定义插入字
定义删除字

3.3 超链接 a

没有超链接就没有万维网（World Wide Web）。基本上，我们可以把任何东西加上超链接，不过常用的是文本、图片等。

3.3.1 超链接语法

例：

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

说明：

1.href即为要跳转去的地址 URL（Uniform Resorce Locator)
2.target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
3.超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

3.3.2 锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

例：

<!-- 文档其余部分 -->

<h2 id="C4">第四章 论零号病人的重要性</h2>

<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
...

注意：

1.元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
2.超链接中的地址需要有#符号

3.4 图片及文件路径 img

3.4.1 图片

在页面插入一张图片如下：

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

说明：

1. src属性为要显示图片文件的位置 URL，即图片文件的路径
2. alt属性当获取图片出现问题时显示的文字（占位符）
3. 可为图片指定高宽度，但不建议（可能导致图片变形）

3.4.2 文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

上面图片的例子即为绝对路径。下面是相对路径的例子：

3.5 表格 Table

有时，页面的内容需要用表格来进行呈现。我们使用<table>等标签即可：

  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>```

代码中，<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）

3.6 列表 List

我们也可以使用列表来呈现内容，分为无序列表和有序列表。

3.6.1无序列表

无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。

3.6.2有序列表

有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

3.7 其它

HTML 的元素可以以称为区块或内联的方式进行显示。

3.7.1 区块元素

区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。

3.7.2 内联元素

内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。

四、HTML元素及属性

4.1 HTML元素

HTML 文档由 HTML 元素定义。

4.1.1 HTML元素

开始标签 *	元素内容	结束标签 *
	这是一个段落
	这是一个链接
	换行

开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

4.1.2 HTML 元素语法

1.HTML 元素以开始标签起始

2.HTML 元素以结束标签终止

3.元素的内容是开始标签与结束标签之间的内容

4.某些 HTML 元素具有空内容（empty content）

5.空元素在开始标签中进行关闭（以开始标签的结束而结束）

6.大多数 HTML 元素可拥有属性

4.1.3 嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。

HTML 文档由相互嵌套的 HTML 元素构成。

4.2 HTML属性

属性是 HTML 元素提供的附加信息。

4.2.1 HTML 属性

1.HTML 元素可以设置属性

2.属性可以在元素中添加附加信息

3.属性一般描述于开始标签

4.属性总是以名称/值对的形式出现，比如：name=“value”

4.2.2 HTML元素属性

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)