寒假提升 ｜ Day2 HTML结构-body元素-额外知识补充

[giscus[bot]]

寒假提升 ｜ Day2 HTML结构-body元素-额外知识补充

本系列文章将会记录寒假期间的学习计划，主要是知识点和同学们当前进度的检查。

https://icodeq.com/2022/a1a80e2c436e/

[zkeq]

今日打卡任务

• 一. 完成课堂所有的代码练习（必须全部自己实现）【代码块，截图均可】
• 二. 寻找h元素和p元素的案例，并且实现【代码块，截图均可】
• 三. 寻找a元素结合img元素的案例（3个）【代码块，截图均可】
• 四. 说出div元素和span元素的作用和区别【简答题】
• 五. HTML全局属性有哪些？分别是什么作用。【简答题】
• 六.预习CSS（按照MDN文档）【已阅即可】
  https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps

[Nihaoseteve]

div 元素：division，分开、分配的意思；
span 元素：跨域、涵盖的意思；
div 元素和 span 元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的；
这两个元素有什么作用呢？无所用、无所不用。
区别
div 元素：多个div元素包裹的内容会在不同的行显示；
span 元素：多个span元素包裹的内容会在同一行显示；
HTML的全局属性
id ：定义唯一标识符 (ID)，该标识符在整个文档中必须是唯一的。其目的是在链接 (使用片段标识符)，脚本或样 式 (使用 CSS) 时标识元素
class : 一个以空格分隔的元素的类名 (classes) 列表，它允许 CSS 和 Javascript 通过类选择器或者 DOM 方法来选 择和访问特定的元素
style : 给元素添加内联样式
title : 包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的

[zkeq]

good job.

[penndu]

我也跟着学习一下！

[zkeq]

欢迎👏学习

[wslsy12]

[zkeq]

Well done.

[wslsy12]

第四题div和span的作用和区别

作用

• div元素：division，分开、分配的意思；
• span元素：**跨域、涵盖的意思；
• div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的；
• 这两个元素有什么作用呢？无所用、无所不用。

区别

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

HTML的全局属性

常见的全局属性如下：

id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样 式（使用 CSS）时标识元素。

class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选 择和访问特定的元素；

style：给元素添加内联样式；

title：包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的。

[zkeq]

收到！好棒好棒好棒，gogogo

[New-k]

一.div元素和span元素

• 作用

  1. 都是“纯粹的”容器，可理解为“盒子”，都是用来包裹内容 的
  2. 无所用，无所不用

• 区别

  1. div:多个div元素包裹的内容会在不同的行显示；
  2. span:多个span包裹的内容会在同一行显示

二.HTML的全局属性

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

[zkeq]

Well done.

[W-princess]

（1）div元素和span元素
作用
都是“纯粹的”容器，可理解为“盒子”，都是用来包裹内容 的
无所用，无所不用
区别
div:多个div元素包裹的内容会在不同的行显示；
span:多个span包裹的内容会在同一行显示
（2）HTML的全局属性
id：定义唯一标识符 (ID)，该标识符在整个文档中必须是唯一的。其目的是在链接 (使用片段标识符)，脚本或样 式 (使用 CSS) 时标识元素
class : 一个以空格分隔的元素的类名 (classes) 列表，它允许 CSS 和 Javascript 通过类选择器或者 DOM 方法来选 择和访问特定的元素
style : 给元素添加内联样式
title : 包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的

[zkeq]

Well done.

[W-princess]

[zkeq]

Well done.

[Future330]

一：

二：

三：

四. 说出div元素和span元素的作用和区别

• 作用

  1. 都是“纯粹的”容器，可理解为“盒子”，都是用来包裹内容 的
  2. 无所用，无所不用

• 区别

  1. div:多个div元素包裹的内容会在不同的行显示；
  2. span:多个span包裹的内容会在同一行显示##

  五. HTML全局属性有哪些？分别是什么作用。

• id：定义唯一标识符 (ID)，该标识符在整个文档中必须是唯一的。其目的是在链接 (使用片段标识符)，脚本或样 式 (使用 CSS) 时标识元素

• class : 一个以空格分隔的元素的类名 (classes) 列表，它允许 CSS 和 Javascript 通过类选择器或者 DOM 方法来选 择和访问特定的元素

• style : 给元素添加内联样式

• title : 包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的

六

• 评论区禁止养🐶

[zkeq]

Well done. Don't put some NSFW things in the next assignment .

[Wanderlus]

[zkeq]

good job.

[Wanderlus]

div元素和span元素的作用和区别

作用

• div 元素：division，分开、分配的意思；
• span 元素：跨域、涵盖的意思；
• div 元素和 span 元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的；
• 这两个元素有什么作用呢？无所用、无所不用。

区别

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

HTML的全局属性

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

[zkeq]

收到！好棒好棒好棒，gogogo

[ybrxy]

[zkeq]

good job.

[Aueve]

一、head元素

• HTML head元素规定文档相关的配置信息（也称之为元数据）
  • 什么是元数据，，是描述数据的数据
  • 这里可以理解为我们对整个页面的配置
• 常见的设置有哪些？
• 网页的标题：title元素
• 网页的编码：meta元素
  • 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；
  • 一般都使用utf-8编码，涵盖了世界上几乎所有的文字；

二、body元素

• body元素里面的内容将是你在浏览器界面看到的东西，也就是网页的具体内容和结构
  • 大部分HTML元素都是在body中编写呈现的；

三、HTML元素

• HTML元素本身很多，但常用的就几个。
  • https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
  • 我们只需要记住几个常用的，不常用的学会查文档就行
• 常用的元素
  • p元素、h元素
  • img元素、a元素、iframe元素
  • div元素、span元素
• 下阶段要学习的元素：
  • ul、ol、li元素；
  • butto元素、input元素；
  • table、thead、tbody、th、tr、td；

四、img元素

• 两个属性
  • src
  • alt：占位
• 地址
  • 网络地址
  • 本地地址
    • 绝对路径
    • 相对路径

五、a元素

• 两个属性
  • href
  • target
    • -self
    • -blank
    • -parent
    • -top

六、iframe元素

• 嵌套网页
• 某些网页禁止嵌套（原理）
• 和a元素结合（target）

七、div元素和span元素

• 历史

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

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

  • 一般作为其他元素的父容器，把其他元素包住，代表一个整体
  • 用于把网页分割为多个独立的部分
  • span元素：多个span元素包裹的内容会在同一行显示；
  • 默认情况下，跟普通文本几乎没差别
  • 用于区分特殊文本和普通文本，比如用来显示一些关键字

• 案例

  <div>
      这是一个盒子独自占据一行
      <span>这也是一个盒子不会独自占据一行</span>
  </div>

八、不常用案例

• strong
• i
• code
• br

九、全局属性

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

十、额外知识

• 字符实体
  • 为什么需要字符实体
  • 常用的字符实体有三个

 
<
>

十一、URL

• URL的格式
  • 协议：//主机：端口/路径/文件名？查询#片段id
• 和URL
  • URI：标识符
  • URL：定位符（网络地址）

[zkeq]

收到！好棒好棒好棒，gogogo

[yujiansry]

[zkeq]

收到！好棒好棒好棒，gogogo

[lhaa1]

[zkeq]

good job. 本评论区支持 markdown 语法，可以直接把笔记复制粘贴过来的，gogogo。

[Tqrepeoti]

一. 课堂的代码练习

<p>
  最后一个是国王，他是小王子在离开自己的星球后拜访的第一个小星球325上仅有的居民。这个国王称自己统治所有一切，他的统治必须被尊敬和不容忤逆;然而，事实上他只是徒有虚名，他只能让别人去做别人自己想做的事。
</p>
<p>
  这些都是光遇里的小王子季节留下的一个独立的小星球，这里包括了小王子遇到的很多人，每个人都是独立的一个小星球，虽然小王子遇到他们虽然不理解，但是他们都是独立的人格，每个人都是自己独立的星球。
</p>

<h1>史蒂夫·乔布斯</h1>
<p>
  美国苹果公司联合创始人
</p>
<p>
  史蒂夫·乔布斯（Steve Jobs，1955年2月24日—2011年10月5日），出生于美国加利福尼亚州旧金山。美国发明家、企业家、苹果公司联合创始人。
</p>
<p>
  1976年4月1日，乔布斯、沃兹及乔布斯的朋友龙·韦恩签署了一份合同，决定成立一家电脑公司。随后，21岁的乔布斯与26岁的斯蒂夫·沃兹尼亚克在自家的车房里成立了苹果公司。公司的名称由乔布斯定为苹果。而他们的自制电脑则被追认为“苹果Ⅰ号“电脑了。
</p>
<p>
  乔布斯被认为是计算机业界与娱乐业界的标志性人物，他经历了苹果公司几十年的起落与兴衰，先后领导和推出了麦金塔计算机、iMac、iPod、iPhone、iPad等风靡全球的电子产品，深刻地改变了现代通讯、娱乐、生活方式。乔布斯同时也是前皮克斯动画工作室的董事长及首席执行官。
</p>
<p>
  2011年10月5日，史蒂夫·乔布斯因患胰腺神经内分泌肿瘤病逝，享年56岁。
</p>

<h3>以科技创新驱动引领高质量发展</h3>
<p>
  我国已进入高质量发展阶段，高质量发展是当前和今后一个时期确定发展思路、制定经济政策、实施宏观调控的根本要求。8月27日，国家统计局、科技部和财政部联合发布《2019年全国科技经费投入统计公报》，我国研发经费2.2万亿，连续4年保持两位数增长，总量居世界第二位。据世界知识产权组织《全球创新指数报告》，2019年，中国创新指数排名第十四位，连续4年保持上升势头，是中等收入经济体中唯一进入前30名的国家。中国科学技术发展战略研究院《国家创新指数报告》及相关创新指数年度报告，均显示我国已进入“创新型国家行列”，处于中等收入经济体前列，正向“跻身创新型国家前列”目标迈进。
</p>
<p>
  我国发展阶段、环境、条件发生变化，迫切需要强化科技创新驱动引领能力。2019年，中国人均GDP超过1万美元，进入“效率驱动向创新驱动转型”阶段。我国科技创新正处于从量的积累向质的飞跃、点的突破向系统能力提升的关键时期。未来5年，我国将跨越中等收入陷阱，向高收入经济体迈进。以科技创新驱动引领高质量发展，意味着供给、需求、环境，研发、设计，生产、流通、分配、消费，资源配置、金融、对外贸易投资、国内国际双循环都应是高质量的。
</p>

二. 寻找h元素和p元素的案例

三. 寻找a元素结合img元素的案例

四. div元素和span元素的作用和区别

• 都是用来包裹内容 的

• div 元素

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

  • 一般作为其他元素的父容器，把其他元素包住，代表一个整体
  • 用于把网页分割为多个独立的部分

---

• span 元素

  多个 span 元素包裹的内容会在同一行显示；

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

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

---

五. HTML全局属性有哪些？分别是什么作用。

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

---

[zkeq]

收到！好棒好棒好棒，gogogo

[AAAikun]

HTML元素本身很多，但是常用的元素就是那么几个

• 我们只需要记住常用的，不常用的学会查看文档即可;

常用的元素(暂时掌握下面几个就够了，90%时间都在写这几个)

• p元素、h元素;
• img元素、a元素、iframe元素;
• div元素、span元素;

下阶段学习的元素:

• ul、ol、li元素;
• button元素、input元素;
• table、 thead、tbody、 thead、th、 tr、 td;HTML5新增元素(后续学习)

我们应该如何告诉浏览器来显示一张图片呢? 使用img元素

• HTML 元素将一份图像嵌入文档
• img是image单词的所以，是图像、图像的意思;
• 事实上img是一个可替换元素 ( replaced element )
• img有两个常见的属性:

src属性:

- source单词的缩写，表示源 - 是必须的，它包含了你想嵌入的图片的文件路径。

alt属性:

不是强制性的，有两个作用

• 作用一:当图片加载不成功(错误的地址或者图片资源不存在)，那么会显示这段文本

• 作用二:屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义;

iframe元素

• 利用iframe元素可以实现: 在一个HTML文档中嵌入其他HTML文档
• frameborder属性
• 用于规定是否显示边框
  • 1: 显示
  • 0:不显示
• a元素target的其他值:
  • _parent: 在父窗口中打开URL
  • _top: 在顶层窗口中打开URL

[zkeq]

6 这波偷家了

[AAAikun]

6 这波偷家了

我那个文档忘了怎么上传了也懒得截图了就不发了

[zkeq]

呃呃呃 微信发给我，我给你上传

[AAAikun]

呃呃呃 微信发给我，我给你上传

Doge [评论区🈲️止养🐶]

[AAAikun]

这里养了一只kun kun 路过的ikun可以过来摸赞一次
⠀⠀⠀ ⠰⢷⢿⠄
⠀⠀⠀⠀⠀⣼⣷⣄
⠀⠀⣤⣿⣇⣿⣿⣧⣿⡄
⢴⠾⠋⠀⠀⠻⣿⣷⣿⣿⡀
⠀ ⢀⣿⣿⡿⢿⠈⣿
⠀⠀⠀⢠⣿⡿⠁⠀⡊⠀⠙
⠀⠀⠀⢿⣿⠀⠀⠹⣿
⠀⠀⠀⠀⠹⣷⡀⠀⣿⡄
⠀⠀⠀⠀⣀⣼⣿⠀⢈⣧

[zkeq]

good job.

[Nihaoseteve]

作用
div 元素：division，分开、分配的意思；
span 元素：跨域、涵盖的意思；
div 元素和 span 元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的；
这两个元素有什么作用呢？无所用、无所不用。
区别
div 元素：多个div元素包裹的内容会在不同的行显示；
span 元素：多个span元素包裹的内容会在同一行显示；
HTML的全局属性
id ：定义唯一标识符 (ID)，该标识符在整个文档中必须是唯一的。其目的是在链接 (使用片段标识符)，脚本或样 式 (使用 CSS) 时标识元素
class : 一个以空格分隔的元素的类名 (classes) 列表，它允许 CSS 和 Javascript 通过类选择器或者 DOM 方法来选 择和访问特定的元素
style : 给元素添加内联样式
title : 包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的。

[zkeq]

good job.

[Gliih]

[zkeq]

good job.

[MGwaanjai]

第一题

第二题

第三题

第四题

div元素,span元素的区别(36)

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

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

  • 一般作为其他元素的父容器，把其他元素包住，代表一个整体;
  • 用于把网页分割为多个独立的部分;

• span元素:多个span元素包裹的内容会在同一行显示;

  • 默认情况下，跟普通文本几乎没差别;
  • 用于区分特殊文本和普通文本，比如用来显示一些关键字;

第五题

常见的全局属性:

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

[zkeq]

收到！好棒好棒好棒，gogogo

[caterinali]

![Uploading 屏幕截图

2022-12-14 1734

48.png…]()

[zkeq]

good job. 本评论区支持 markdown 语法，可以直接把笔记复制粘贴过来的，gogogo。

[Lovehmj]

[zkeq]

good job.

[Lovehmj]

[zkeq]

well done!

[lianghuiyuan123]

（1）div元素和span元素
作用
都是“纯粹的”容器，可理解为“盒子”，都是用来包裹内容 的
无所用，无所不用
区别
div:多个div元素包裹的内容会在不同的行显示；
span:多个span包裹的内容会在同一行显示
（2）HTML的全局属性
id：定义唯一标识符 (ID)，该标识符在整个文档中必须是唯一的。其目的是在链接 (使用片段标识符)，脚本或样 式 (使用 CSS) 时标识元素
class : 一个以空格分隔的元素的类名 (classes) 列表，它允许 CSS 和 Javascript 通过类选择器或者 DOM 方法来选 择和访问特定的元素
style : 给元素添加内联样式
title : 包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的

[zkeq]

good job!

[lmnlmnlmnlmn]

[zkeq]

well done!

[lmnlmnlmnlmn]

[zkeq]

well done!

[zhixu001]

内容回顾

一. HTML结构

1.1. 文档声明

<!DOCTYPE html>

1.2. html元素

• lang

<html>
 <head>
  <meat>
  <title></title>
  <style></style>
 </head>
 <body>
  <h1></h1>
  <h6></h6>
  <p></P>
  <div><div>
  <span></span>
  <img>
  <a></a>
  <ul>
   <li></li>
  </ul>
 </body>
</html>

1.3. head

• 元数据(配置信息)
  • meta -> charset -> utf-8
  • title -> 标题

二. body元素

2.1. h1~h6

• 演练

  <body>
      <h1>这是第一个标题</h1>
      <h2>这是第二个标题</h2>
      <h3>这是第三个标题</h3>
      <h4>这是第四个标题</h4>
      <h5>这是第五个标题</h5>
      <h6>这是第六个标题</h6>
  </body>

• 区别

  由

  ~

  依次缩小

2.2. p元素

• 演练

  <body>
      <p>
          这是一个段落
      </p>
  </body>

• 区分

2.3. 案例练习

2.4. img元素

• 两个属性
  • src（图片的绝对/相对路径）
  • alt: 占位（如果图片出问题浏览器将显示替代文本）
• 地址
  • 网络地址（uil>
  • 本地地址
    • 绝对路径(由磁盘开始，到文件的路径)
    • 相对路径(由本文件开始相对本文件的路径)

2.5. a元素(anchor)

• 两个属性:

  • href（链接地址）
  • target（在哪一个页面打开链接）
    • _self（默认的打开方式）
    • _blank（在新窗口中打开链接）(空白的意思)
    • _parent（不常用）
    • _top（不常用）

• 本页面的锚点链接

  <body>
     <h1 id="one">
         这里有一个标题
     </h1>
     <a herf="#one">跳转到标题</a>
  </body>

• a元素和img元素

<a herf="#" taget="_blank"><img src="#"></a>

2.6. iframe元素

• 嵌套网页

  <body>
      <iframe herf="......">
          
      </iframe>
  </body>

• 某些网页禁止嵌套(原理)

  网络请求被限制了

• 和a元素结合(target另外两个值)

_self

_blank

_parent(父级窗口)

_top(用于多级嵌套)（最顶层打开）

2.6. div/span

• 历史

  之前网页没有CSS的技术，为了让网页更好看而整了很多元素如：strong，i，del，（因为这玩意发明太多了，乱的一批所以出现了CSS并变成了标准）然后结构和样式分离{出现了

  块级元素行内元素}这两个都是盒子

• 案例

<div>
    这是一个块级元素可以在CSS中为我添加样式
    <h1>
        这是一个标题
    </h1>
    <p>
        这是一个段落
    </p>
    <img>这是一个图片
    <a>这是一个超链接</a>
    
</div>
<span>这是行内元素span可以为我添加好看的样式</span>

2.7. 不常用元素

• strong{加粗，强调}

  <p>这是一段（
      <strong>强调一下我</strong>）话
  </p>

• i{倾斜，有时会用来做图标}

• code{用于显示代码}

• br{换行}

• ...

2.8. 全局属性

• id{定义唯一标识符（用于a标签锚点或者JS和CSS标识元素） 唯一的

• class{类名：不限制数量}CSS通过类选择器访问特定元素或者JS通过DOM方法选择特定元素

• style{给元素添加样式时使用}

• title{把一些相关的信息提示给观众（标题，提示使用}

三. 额外知识

3.1. 字符实体

• 为什么需要字符实体;

  计算机识别不出来空格，换行，>,<等

• 三个:

 （空格）
&lt;   （大于号    <）
&gt;   （小于号    >）

3.2. URL

• URL的格式:
  • 协议://主机:端口/路径/文件名?查询#片段id
• 和URI的区别:
  • URI:标志符
  • URL: 定位符(网络地址)

[zhixu001]

把我的图片和特殊标记吞了啊啊啊（忘了复制的是本地图片）

[zkeq]

下次传网络地址图片 well done！

[Zhq-nb]

div 元素：division，分开、分配的意思；
span 元素：跨域、涵盖的意思；
div 元素和 span 元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的；
这两个元素有什么作用呢？无所用、无所不用。
区别
div 元素：多个div元素包裹的内容会在不同的行显示；
span 元素：多个span元素包裹的内容会在同一行显示；
HTML的全局属性
id ：定义唯一标识符 (ID)，该标识符在整个文档中必须是唯一的。其目的是在链接 (使用片段标识符)，脚本或样 式 (使用 CSS) 时标识元素
class : 一个以空格分隔的元素的类名 (classes) 列表，它允许 CSS 和 Javascript 通过类选择器或者 DOM 方法来选 择和访问特定的元素
style : 给元素添加内联样式
title : 包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的

[zkeq]

good job ！

[vionchina]

[zkeq]

不错，下次直接交代码，和 markdown 笔记，而不是截图！

[xxlxxlxxlxxl]