一、了解 HTML 的基础概念

1. HTML 介绍

Hypertext Markup Language ：超文本标记语言。用来制作网页的一种标记语言
HTML 是一种纯文本格式的文件，内部只能书写文字内容，不能添加图片、音频、视频等，但是在网页中给用户呈现的效果却包含了文字以外的内容，这种效果就是 HTML 语言区别于其他文件的不同之处

2. HTML的重要概念

超文本：是超级文本的缩写，简单来说超文本就是用于链接另一个文本或多媒体内容的文本，比如链接到图片、链接、音频、视频、程序等
标记：又叫做标签（HTML tag），有特殊的书写规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容。在编辑器中可以编辑和查看，在浏览器中不显示

示例

<h1> HTML 的概念 </h1>
<h2> 超文本 </h2>
<p> 是超级文本的缩写，简单来说超文本就是用于链接另一个文本或多媒体内容的文本，比如链接到图片、 链接、音频、视频、程序等 </p>
<h2> 标记 </h2>
<p> 又叫做标签（HTML tag），有特殊的书写规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容。在编辑器中可 以编辑和查看，在浏览器中不显示 </p>
<img src="lagou.jpg" >
<a href="https://kaiwu.lagou.com/"> 点击跳转到拉钩教育 </a>

示例效果图

3. HTML 的功能

利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构

4. HTML 的语义化

HTML文件中，如果没有使用特殊语义的标记，也可以实现网页显示效果，但是利用标记给普通的文字添加了不同的语义，能够让网站的结构划分更加清晰

5. 语义化网页的优势

方便代码的阅读和后期维护
便于浏览器或是网络爬虫更好地解析网站内容
使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名

二、 HTML 版本规范

W3C：world wide web consortium，万维网联盟。专门发布和维护互联网的规范和标准

现在基本都是用 HTML5 进行开发使用

三、HTML标签

HTML 标记通常被称为 HTML 标签 (HTML tag)。标签在书写和使用过程中，必须遵循特定的语法

HTML标签语法

标签名必须书写在一对尖括号< >内部

<html>  </html>

标签分为单标签和双标签，双标签必须成对出现

<p> </p>  双标签
<br />    单标签

双标签包含开始标签和结束标签，结束标签必须书写关闭符号/，单标签也需要进行自封闭书写。在HTML5中，单标签可以不写关闭符号

错误写法：       正确写法：
<div> <div>     <div> </div>
<br>            <br />

四、HTML 元素

HTML元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签
例如：双标签内部包含的纯文本内容，就是元素内容

<p> 这是一段文字内容 </p>

元素内容

元素内容可以是纯文本，也可以是其他的 HTML 元素。这种元素内容包含其他 HTML 元素的情况，我们可以称为嵌套，也就是 div 标签元素内部嵌套了 p 标签元素

<div> <p> div元素内部嵌套p元素 </p> </div>

一个HTML元素div的内容可能是多个其他元素组成，例如 p 和 h1 ，此时我们习惯称 div 是 p 和 h1 的父级元素，p 和 h1 是div 的子级元素，而 p 和 h1 属于同级元素，这种嵌套关系可以有多层

<div>
    <p> div元素内部嵌套p元素 </p>
    <h1> div元素内部嵌套的h1元素 </h1>
</div>

单标签是不能添加元素内容的，可以称为空元素

标签级别

根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别

容器级：标签内部可以存放任意内容，包含容器级标签。比如 h1，div 等

<div> 
    <h1> 这是 div 中的一级标题 </h1> 
    <p> 这是 div 中的一个段落 </p>
</div>

文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等。比如 p 等

<p> 这是一个段落 </p>
错误示范 ↓
 <p> 
    <h1> 文本级标签内部只能存放文字或类似文字的内容 </h1>
 </p>

 浏览器会自动解析为 ↓
 <p> </p>
 <h1> 文本级标签内部只能存放文字或类似文字的内容  </h1>
 <p> </p>

HTML元素的特性

元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系

<p> 段落内容 </p><p> 段落内容 </p><p> 段落内容 </p>
↑↓等价于
<p> 段落内容 </p>
<p> 段落内容 </p>
<p> 段落内容 </p>

空白折叠现象：元素内容如果是文本，所有文字（类似文字内容）之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象

<p> HTML中所有文字内容之间的空 格、换
    行、缩 进都会被折叠成一个空格显示 </p>

五、HTML 属性

HTML标签可以添加属性，属性可以提供关于HTML元素的更多信息

HTML属性规范

书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔

 <p> 段落1 </p>
 <p> 段落2 </p>
 <p> 段落3 </p>

属性包含：属性名（key）、属性值（value）。属性名与属性值之间的写法通常称做键值对写法，HTML 标签属性的键值对写法是 k= ” v ” 。XHTML 要求属性值必须在双引号内部

 <p class="p1" > 段落1 </p>
 <p> 段落2 </p>
 <p> 段落3 </p>

一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是 k="v"

 <p class="p1" id="pp" > 段落1 </p>
 <p> 段落2 </p>
 <p> 段落3 </p>

部分标签属性 k 可以设置多个属性值 v ，所有属性值 v 都必须写在同一对双引号内，值与值之间需要使用空格分隔

 <p class="p1 p12 p13" id="pp" > 段落1 </p>
 <p> 段落2 </p>
 <p> 段落3 </p>

六、HTML 基本结构

基本骨架
DTD
命名空间
字符集

1. 基本骨架

HTML文件最基本的四个标签，组成了网页的基本骨架，包括：<html>、<head>、<title>、<body> 四组标签

 <html>
     <head> 网页标题 </head>
     <body>
         网页主体
     </body>
 </html>

<html> 标签

作用: 定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在标签内部

<head> 标签

作用：用于存放<title>、<meta>、<base>、<style>、<script>、<link>，内部用于对网页的设置，除了 <title> 内部的文字，其他标签都不显示在浏览器上
注意在 <head> 标签中我们必须要设置的标签是 title

<title> 标签

让页面拥有一个属于自己的标题
title 中的关键字可以作为搜索引擎抓取时的关键字，提高 SEO 搜索引擎优化
内部的内容会显示在搜索结果的标题部分
作为浏览器收藏夹默认的网页标题
建议网页必须添加title标签内部内容，内容尽量精简，提取网页的关键字

<body> 标签

定义网页的主体部分，用于存放所有的HTML显示内容的标签
<body> >内部的元素内容会显示在浏览器的窗口中

2. DTD

完整的 HTML 文件的第一行内容叫做文档定义类型，英文 DocType Definiton 简称 DTD 。也称作文档声明类型，DocType Declaration
作用：告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面

不同版本的DTD

XHTML1.0 版本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5版本

<!DOCTYPE html>

3. 命名空间

<html> 元素表示整个网页文档，在开始标签上设置了命名空间 xmlns 属性
XHTML1.0版本

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
</html>

命名空间 xmlns

xml：可扩展标记语言，使用在传输过程中的规范。被设计用来传输和存储数据，是 html 的补充
xmlns：全称叫做 XML NameSpace，NameSpace 叫做命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容
<html> 元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准，避免出现标签名冲突，这个标准使用的就是一个固定的网址 http://www.w3.org/1999/xhtml 中的规范

语言

xml:lang= "en" 和 lang= "en" 表示所有的标签元素内容的语言都是英语，对搜索引擎和浏览器是有帮助的
lang= " zh-cn" 表示中文（中国）

4. 字符集

<head> 标签内部的 <meta> 标签通过 http-equiv 属性定义了当前的网页所使用的字符编码。
char：character，字符。set：集合
XHTML1.0版本

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

常用字符集编码

国际通用字库

UTF-8：以字节为单位对 Unicode 万国码进行编码，涵盖了所有人类的语言文字，一个汉字为 3 个字节大小

中文国标字库

gb2312：共收入汉字 6763 个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的 682 个
gbk：是 gb2312 的扩展，增加了繁体字，共收入 21886 个汉字和图形符号，其中汉字（包括部首和构件）21003 个，图形符号 883 个，一个汉字为 2 个字节大小

字符集常见问题（使用情况建议）

如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8
如果含有大量中文汉字的网站，而且要求网页加载速度快，使用gbk

注意：meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载时出现乱码

前端学习 -- 了解 HTML