HTML学习总结一本文针对HTML的基础知识学习，记录了HTML的基本结构，常见的元素及其用法：如h元素、p元素、img

一. HTML结构

1.1 文档声明

<!DOCTYPE html>

告诉浏览器当前页面是HTML5页面；
让浏览器用HTML5的标准去解析识别内容；
必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题。

1.2 html元素

<html> 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。

所有其他元素必须是此元素的后代。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

W3C标准建议为html元素增加一个lang属性，作用是：
- 帮助语音合成工具确定要使用的发音;
- 帮助翻译工具确定要使用的翻译规则。
比如常用的规则：
- lang="en"表示这个HTML文档的语言是英文；
- lang="zh-CN"表示这个HTML文档的语言是中文。

1.3 head元素

HTML head 元素规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。

什么是元数据（meta data）?
- 可以理解成对整个页面的配置
常见的设置有哪些呢？一般会至少包含如下2个设置：
- 网页的标题：title元素
  
  <title>head元素的学习</title>
- 网页的编码：meta元素：
  - 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；
  - 一般都使用utf-8编码，涵盖了世界上几乎所有的文字
    
    <meta charset="UTF-8">

二. body元素

body元素里面的内容将是能在浏览器窗口中看到的东西，也就是网页的具体内容和结构

HTML元素官方文档

常用的元素（暂时掌握下面几个就够了，90%时间都在写这几个）：
- p元素、h元素；
- img元素、a元素、iframe元素；
- div元素、span元素。

2.1 h1~h6

在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素。
<h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题
- Heading是头部的意思，通常会用来做标题
- <h1> 级别最高，而 <h6> 级别最低

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- h元素 h1~h6 -->
  <h1>我是h1标题</h1>
  <h2>我是h2标题</h2>
  <h3>我是h3标题</h3>
  <h4>我是h4标题</h4>
  <h5>我是h5标题</h5>
  <h6>我是h6标题</h6>
</body>
</html>

效果：

2.2 p元素

HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。
- p元素是paragraph单词的缩写，是段落、分段的意思
- p元素多个段落之间会有一定的间距

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <p>一、如果在z区遇见身挂红、黄、绿布标的牛羊徜徉于郊野，可不要随意驱赶、伤害，因为那是z民敬神的祭品。不要以猎枪对准鹰鹫，z民忌讳伤害他们的神鸟。</p>
  <p>
    二、不要去s庙随意拜佛，更不要轻易许愿，愿望实现后，无论相隔千山万水，一定要记得去还愿。未经同意不可入庙，入庙后不可吸烟。庙内物品观看无妨，不可擅自触摸佛像、经书、拍照。不要将s庙的石头等物品带回家。有些地方不可以逆时针方向行进，有些秘宗的地方禁止妇女进入。
  </p>

  <p>三、关于天葬，大家很好奇，x藏都不鼓励游客去看天葬.</p>

  <p>
    四、玛尼堆在z族心目中是神的路标，上面的玛尼石雕刻着六字真言或佛像，是z民的圣物。行路遇到寺院、玛尼堆、佛塔等宗教设施，必须从左往右绕行，z民认为走反了方向会有罪过。不要随意拾取玛尼石，更不可坐在玛尼堆上。
  </p>

  <p>五、不得跨越法器、火盆;经筒、经轮不得逆转;忌讳别人用手触摸头顶，忌讳用手拍肩膀。</p>
</body>
</html>

效果：

2.3 img元素

HTML <img> 元素将一份图像嵌入文档。
- img是image单词的所以，是图像、图像的意思
- 事实上img是一个可替换元素（ replaced element ）
img有两个常见的属性：
- src属性：source单词的缩写，表示源
  
  ✓ 是必须的，它包含了你想嵌入的图片的文件路径
- alt属性：不是强制性的，有两个作用
  
  ✓ 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本
  
  ✓ 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义
某些其他属性目前已经不再使用
- 比如width、height、border
- 设置img的src时，需要给图片设置路径
网络图片：一个URL地址（后续会专门讲URL）

✓ 网络图片的设置非常简单，给一个地址即可
本地图片：本地电脑上的图片，后续会和html一起部署到服务；
- 本地图片的路径有两种方式：
  - 方式一：绝对路径（几乎不用）
    
    ✓ 从电脑的根目录开始一直找到资源的路径；
  - 方式二：相对路径（常用）
    
    ✓ 相当于当前文件的一个路径
    
    ✓ . 代表当前文件夹（1个.），可以省略
    
    ✓ .. 代表上级文件夹（2个.）
img元素支持的图片格式如下表:

2.4 a元素(anchor)

在网页中需要跳转到另外一个链接，使用a元素实现

HTML<a>元素（或称锚（anchor）元素）：
- 定义超链接，用于打开新的URL
a元素有两个常见的属性：
- href：Hypertext Reference的简称
  
  ✓ 指定要打开的URL地址
  
  ✓ 也可以是一个本地地址
- target：该属性指定在何处显示链接的资源
  
  ✓ _self：默认值，在当前窗口打开URL
  
  ✓ _blank：在一个新的窗口中打开URL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <!-- blank: 空白的 -->
  <!-- http://www.baidu.com -> 百度的服务器 -> index.html文件 -->
  <a href="http://www.baidu.com" target="_blank">百度一下</a>

  <!-- 链接到本地的网页(本地的资源地址) -->
  <a href="./abc.html" target="_self">本地网站</a>

  <!-- 案例: 网页的跳转 -->
  <a href="https://juejin.cn/post/7078670526721294343">Git多人单分支集成协作时的常见场景</a>

</body>
</html>

锚点链接可以实现：跳转到网页中的具体位置
- 锚点链接有两个重要步骤：
  - 在要跳到的元素上定义一个id属性
  - 定义a元素，并且a元素的href指向对应的id

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    页面内的锚点效果
    1. 在跳转到的元素上添加id
    2. 定义a元素, 并且a元素的href属性指向id
   -->

   <a href="#theme01">跳转到主题一</a>
   <a href="#theme02">跳转到主题二</a>
   <a href="#theme03">跳转到主题三</a>
  
  <h2 id="theme01">主题一</h2>
  <p>主题一</p>
  <h2 id="theme02">主题二</h2>
  <p>主题二</p>
  <h2 id="theme03">主题三</h2>
  <p>主题三</p>
</body>
</html>

img元素跟a元素一起使用，可以实现图片链接

实现思路：
- a元素中不存放文字，而是存放一个img元素
- 也就是img元素是a元素的内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="https://www.mi.com/redmik50" target="_blank">
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ab8e5096ac6f08bd632e4d5a15d1792.jpg?w=632&h=340" alt="">
  </a>
</body>
</html>

元素一定是用来跳转到新网页的么？
- 指向链接: zip压缩包
  - github.com/coder-sporg…
- 指向其他协议地址: mailto
  - mailto:12345@qq.com

2.5 iframe元素

利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档

frameborder属性
- 用于规定是否显示边框
  
  ✓ 1：显示
  
  ✓ 0：不显示
某些网页禁止嵌套
- 如下网站响应头设置X-Frame-Options: sameorigin(同源)
a元素target的其他值（结合iframe使用）:
- _parent：在父窗口中打开URL
- _top：在顶层窗口中打开URL

2.6 div/span

在HTML中有两个特殊的元素div元素、span元素：

div元素：division，分开、分配的意思
span元素：跨域、涵盖的意思

这两个元素有什么作用呢？无所用、无所不用。

产生的历史：
- 网页的发展早期是没有css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示
- 后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可
- 比如h1元素可以是一段普通的文本+CSS修饰样式
- 这个时候就出现了div、span来编写HTML结构所有的结构，样式都交给css来处理

理论上来说：

页面可以没有div、span
页面也可以全部都是div、span

div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的：

div元素：多个div元素包裹的内容会在不同的行显示

✓ 一般作为其他元素的父容器，把其他元素包住，代表一个整体

✓ 用于把网页分割为多个独立的部分
span元素：多个span元素包裹的内容会在同一行显示

✓ 默认情况下，跟普通文本几乎没差别

✓ 用于区分特殊文本和普通文本，比如用来显示一些关键字

2.7 不常用元素

strong元素：内容加粗、强调
- 通常加粗会使用css样式来完成
- 开发中很偶尔会使用一下
i元素：内容倾斜
- 通常斜体会使用css样式来完成
- 开发中偶尔会用它来做字体图标（因为看起来像是icon的缩写）
code元素：用于显示代码
- 偶尔会使用用来显示等宽字体
br元素：换行元素
- 开发中已经不使用
更多元素详解，可以查看MDN文档

MDN文档

2.8 全局属性

id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。
class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素。
style：给元素添加内联样式。
title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。