HTML入门

一、什么是HTML？

• HTML全称 “ Hyper Text Markup Language ” ，意思是超文本标记语言。它是一种用于定义内容结构的标记语言，其中包含了许多的标签，用这些标签来构建网页，同时将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。因而HTML文档也叫做 web 页面。

• 超文本是指用超链接的方法，将文字，图片等信息组织在一起的网状文本。超链接则是指从一个网页指向一个目标的连接关系，当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

二、HTML文档结构

HTML基本结构如下图：

如图所示，一个HTML文档包含文档声明以及页面内容，页面内容由各种元素组成。网络上有很多不同的文件，<!DOCTYPE>声明能够正确声明HTML的版本，浏览器就能正确显示网页内容。

1、HTML元素

（1）基本元素

元素一般由一对HTML标签（tag）构成。
如下图是一个用于展示段落的元素：

元素（Element）由开始标签、结束标签和内容组成。

• 开始标签（Opening tag）：包含元素的名称（本例为 p）、左右角括号，表示元素的开始。

• 结束标签（Closing tag）：与开始标签相差一个斜杠，表示元素的结尾。

• 内容（Content）：即元素的内容，本例中就是所输入的文本本身。

（2）空元素

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

< br >：换行
< hr >：水平分割线
< input >：输入框
< img >：图片及文件路径
< a >：超链接

（3）区块元素

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

< h1 >：标题
< pre >：预设格式
< ul >：无序列表
< table >：表格
< div >：分割文档

（4）内联元素

内联元素是在一行中挨个进行显的示，不会新起一行。如： < span >, < input >, < td >, < a >, < img > 等。

（5）特殊字符

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体，详情见ISO-8859-1 字符实体手册。

2、HTML标签

• < html > < /html >：< html >元素包含了整个网页，表示整个网页是从< html >这里开始的，然后到< /html >结束。

• < head > < /head >：< head >元素代表页面的“头”，定义一些特殊内容，这些内容在浏览器是不可见的，它包括你想在搜索结果中出现的关键字和页面描述，CSS样式等。
  

• < body > < /body >：body标签代表页面的“身”，定义了网页展示的内容，在浏览器是可见的。后续标签都是在 < body >标签内部的各种标签。

• < h1 > < /h1 >：表示标题，HTML 提供了从大到小6级标题，分别是：< h1 > ~ < h6 >。在页面中，搜索引擎用标题来索引页面的内容。

注意： 不能使用标题对正文的文字进行放大或加粗。正文文字的醒目可以使用文本格式或 CSS 进行。

• < p > < /p >：表示插入段落文字，可进行嵌套。

• < !-- 和 – > : < !-- 和 – >包括起来的内容表示注释，用来对代码的工作进行注释，在浏览器中也是不可见的。

在 code 软件中，输入Ctrl + /即可快捷的进行注释！

• < a > < /a >：表示超链接，任何东西都可以加上超链接，一般文字和图片较多。
  示例超链接语法：

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

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

• < img >：表示图片及文件路径。

（1）图片绝对路径语法：

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

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

（2）图片相对路径语法：

• < table > < /table >：表示显示表格，表格标签中 < tr > 表示行， < td > 表示行中的单元，< th > 是表头的单元（将会加粗显示）。

• < li >< /li >：表示列表。
  列表语法示例：

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

1.无序列表使用 < ul >标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
2.有序列表使用 < ol > 标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

• < form > < /form >：表示表单，当网站需要获取一些信息如用户名、密码等时，我们就需要使用表单来让用户填写或选择。

• < pre > < /pre >: 预设格式，pre标签中的内容将保持格式不变。如果你想在网页中展示一首诗或一些特别格式的文本，可以用pre标签。

3、HTML属性

HTML元素可以设置属性，属性包含着元素的附加信息，但这些信息不会在浏览器中显示出来。
例如： < input type="text" >，“text”为这个输入框的属性，在浏览器中是不显示的。

元素属性一般包含：

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

三、总结

本文仅包含了HTML的定义以及一些基本的HTML标签含义用法，还有待深入。