HTML-初识HTML超文本标记语言，基本结构，HTML编写规范，标签的分类，注释，标签的关系，标签的语义化

Bertha 。 2023-10-10 09:26 8阅读 0赞

## 概述 ##

HTML 指的是超文本标记语言 (**H**yper **T**ext **M**arkup **L**anguage)是用来描述网页的一种语言；HTML 不是一种编程语言，而是一种标记语言 (markup language)；标记语言是一套标记标签 (markup tag)；HTML 属于网页中的结构层，负责控制页面的结构

超文本的含义：

*  可以加入图片、声音、动画、多媒体等内容（ **超越文本限制**）
 *  不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（**超级链接文本**）。

HTML 的作用：通过标签，给文本增加语义

## 基本结构 ##

结构说明：

<table> 
 <thead> 
  <tr> 
   <th>标签名</th> 
   <th>定义</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;html&gt;&lt;/html&gt;</code></td> 
   <td>HTML标签</td> 
   <td>页面中最大的标签，根标签</td> 
  </tr> 
  <tr> 
   <td><code>&lt;head&gt;&lt;/head&gt;</code></td> 
   <td>文档的头部</td> 
   <td>在head标签中必须要设置的标签是title</td> 
  </tr> 
  <tr> 
   <td><code>&lt;title&gt;&lt;/title&gt;</code></td> 
   <td>文档的标题</td> 
   <td>让页面拥有一个属于自己的网页标题 （在浏览器顶端选项卡中显示的内容）</td> 
  </tr> 
  <tr> 
   <td><code>&lt;body&gt;&lt;/body&gt;</code></td> 
   <td>文档的主体</td> 
   <td>元素包含文档的所有内容，页面内容 基本都是放到body里面</td> 
  </tr> 
 </tbody> 
</table>

## HTML编写规范 ##

*  所有的标记和属性要全小写（标签不区分大小写，约定全部使用小写）；
 *  单边标记必须关闭；如：`<br> ——> <br />`
 *  所有的属性值都必须要加引号；
 *  所有的属性都必须有值；如：`<hr noshade> —— <hr noshade = “noshade” />`
 *  标记之间要顺序嵌套，外层套内层，一层套一层；
 *  HTML网页必须要有 DTD 文档类型定义代码。

## 标签分类 ##

HTML 标签分为两种：

*  双标签（常规元素）
    
    语法：`<标签名> 标签包裹的内容 </标签名>`
    
    该语法中 `<标签名>` 表示该标签的作用开始，一般称为 `开始标签（start tag）`，`</标签名>` 表示该标签的作用结束，一般称为 `结束标签（end tag）`； 和开始标签相比，结束标签只是在前面加了一个关闭符 `/`；以后接触的基本都是双标签，例如：
    
        <body>内容</body>
 *  单标签（空元素）
    
    语法：`<标签名 />`
    
    就是标签里面不需要包含内容， 只有一个开始标签没有闭合标签,例如：
    
        <br />
        <img />
        <hr />
        <input />
        <link />
        <meta />

#### HTML 注释 ####

HTML 中注释使用 ``，注释标签需要另起一行

#### HTML 标签的关系 ####

主要是针对 双标签，双标签的关系分为两种：

*  嵌套关系（父子关系）
    
    例如：
    
        <head>
        	<title>标题</title>
        </head>
 *  并列关系（兄弟关系）
    
    例如：
    
        <head></head>
        <body></body>

## 文档类型<!DOCTYPE> ##

语法：

<!DOCTYPE html>

作用：

声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范来解析页面。

## 字符集 ##

用于告知浏览器此页面属于什么字符编码格式，浏览器根据编码去解码对应的 html 内容；页面通过 `meta` 标签的 `charset` 属性设置字符编码，该标签包裹在 `head` 标签中

语法：`<meta charset="UTF-8" />`

示例：

常见的字符编码：gb2312、gbk、unicode、utf-8

*  gb2312：代表国家标准第2312条，其中是不包含繁体
 *  gbk：国家标准扩展版（增加了繁体，包含所有亚洲字符集）
 *  unicode：万国码
 *  utf-8：unicode的升级版，针对Unicode的一种可变长度字符编码

**注：** 这段代码非常关键， 是必须要写的代码，否则可能引起乱码的情况。

## HTML标签的语义化 ##

所谓标签语义化，就是指标签的含义；在合适的地方给一个最为合理的标签，让结构更清晰

语义化的好处：

1.  开发人员阅读代码时能够根据标签猜出来用意，有利于开发人员阅读，便于团队开发和维护；
2.  有一些标签拥有自己默认的样式， 去掉CSS样式之后，网页依然能够呈现清晰的结构，并且有良好的可读性
3.  让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
4.  使用语义化标签会具有更好地搜索引擎优化

遵循的原则：先确定语义的HTML ，再选合适的CSS