前端速通——HTML

1.HTML简介HTML（Hyper Text Markup Language）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行语义化的描述。HTML和其他编程语言不同，HTML不是一门真正意义上的编程语言，而是一种标记语言，通过带有尖角号的标签对文本进行标记，从而实现网页的结构搭建。

-指短琴长-

3607人浏览 · 2023-12-04 20:15:26

-指短琴长- · 2023-12-04 20:15:26 发布

1. HTML简介和发展史

1.HTML简介

HTML（Hyper Text Markup Language）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行语义化的描述。

HTML和其他编程语言不同，HTML不是一门真正意义上的编程语言，而是一种标记语言，通过带有尖角号的标签对文本进行标记，从而实现网页的结构搭建。

HTML之所以成为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点，通过超链接将网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面。

2.HTML发展史

1）HTML创始人（蒂姆-伯纳斯-李）

蒂姆-伯纳斯-李除了是HTML的创始人，还是W3C（万维网）组织的主席。
在这里插入图片描述

2）HTML 1.0（1991年12月）

1991年万维网（www）在互联网上首次露面，标志着HTML 1.0版本的诞生。
1989年，伯纳斯-李写了一份备忘录，提出建立一个基于互联网的超文本系统。
同年和另一个工程师一起进行联合资金申请，但这个项目并没有通过。
1991年底时，伯纳斯-李公开了一份“HTML Tag”的文档，里面表述了组成初始版本的18个元素。

3）HTML 2.0（1995年11月）

HTML2.0是HTML语言的扩展。
与原始版本不同，HTML 2.0被创建为Web标准，规定了常见的网页结构。

4）HTML 3.2（1996年1月）

惨淡的“第一次浏览器大战时期（Netscape VS IE）”，两大巨头不断推出重大举措试图控制整个领域。
网页开发是这场战争的焦点。
那时，你不得不写两份不同的网页，一个用于网景的浏览器，另一个用于微软的浏览器。

5）HTML 4.0（1997年12月）

浏览器大战接近尾声，W3C（世界万维网联盟）成立，他们打算通过制定统一的HTML标准，使整个产业能有序发展。
他们计划用两种语言分离出HTML的表达式（HTML 4.0）和结构（CSS），并且说服浏览器厂商接收这些标准。
这次发布提供了规范的三种变体：

Strict，严格版本；
Transitional，过度版本；
Framset，iframe 框架集；

HTML 4.0采纳了许多浏览器特定的元素类型及属性，但是同时也把Netscape的视觉化标记标记为过时的需求被淘汰；赞成使用样式表；同时在1998年4月对HTML 4.0进行了微小的修订，没有增加版本号HTML 5.0。

6）HTML 4.01（1999年12月）

像HTML 4.0一样提供了三种变体，并且他的最终错误修订版在2001年5月12日发布。

7）XHTML 1.0（2000年1月）

各大浏览器厂商纷纷接收W3C标准时，新技术出现了。
HTML和另一种语言XML融合，XHTML（可拓展的超文本标记语言）就此诞生。
它继承了HTML的通用性和浏览器的兼容性，继承了XML的严密性和可拓展性。

8）HTML5（2014年10月）

HTML5是HTML最新的修订版本，由W3C制定，目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准。
接下来学习的就是HTML5版本。

2. 纯文本和超文本

1.纯文本：

纯文本只包含文字内容，不能包含文字以外的，例如图片、视频等，不能传输文字样式，常见的纯文本格式文件：.txt，.html，.css，.js。

例：（记事本）

在这里插入图片描述

如果更改这个“文字”的字体格式（如放大缩小），再把这个txt文件传输出去，会发现“文字”的格式还是原来默认的格式，因为纯文本文件不能传输文字格式。

2.超文本：

超文本文件是一种含有特殊标记的文本文件，其作用类似于word中的排版标记，常用格式：.doc，.ppt。

例：（word文档）

在这里插入图片描述

超文本文件，可以传输文字格式。

3.纯文本文件和超文本文件的大小比较：

在这里插入图片描述

纯文本文件占用的内存较小。

3. 开发工具的使用

1.所有的纯文本编辑器都能编辑HTML文件。（例：记事本、Editplus、notepad++等）

市场上活跃度较高的代码编辑器：

在这里插入图片描述

2.用记事本来写纯文本文件：

1）先打开记事本写这样一行东西：

在这里插入图片描述

2）回到桌面，将.txt后缀改为.html

在这里插入图片描述

3）打开这个文件，在浏览器界面中右击鼠标，点击检查。再点击小箭头，点击控制台中的文本内容，检查写入的文本。

在这里插入图片描述

但是这种写代码的方式太麻烦，推荐使用编辑器，接下来我们学习使用VScode。

3.VScode的使用：

1）常用必备插件：

自动保持前后标签一致。
支持在vscode中直接打开文件。
保存自动后页面自动刷新：

2）编辑器的基本使用：

!+回车，快速生成代码框架。

在这里插入图片描述

指定文件编码规则（编码规则要和解码规则保持一致）：

在这里插入图片描述

4. HTML结构

4.1 认识HTML标签

HTML代码是由 “标签” 构成的，形如：

<body>hello</body>

标签名body放到< >中；
大部分标签成对出现，<body> 为开始标签，</body> 为结束标签；
少数标签只有开始标签，称为 “单标签”；
开始标签和结束标签之间, 写的是标签的内容hello；
开始标签中可能会带有 “属性”，其中id属性相当于给这个标签设置了一个唯一的标识符（就像身份证号码一样）。

<body id="myId">hello</body>

4.2 HTML文件基本结构

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

html 标签是整个 html 文件的根标签（最顶层标签）；
head 标签中写页面的属性；
body 标签中写的是页面上显示的内容；
title 标签中写的是页面的标题。

4.3 标签层次结构

1. 父子关系和兄弟关系

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

head 和 body 是 html 的子标签，html 就是 head 和 body 的父标签；
title 是 head 的子标签，head 是 title 的父标签，他们之间是父子关系；
head 和 body 之间是兄弟关系。

2. 标签之间的结构关系, 构成了一个 DOM 树

DOM 是 Document Object Mode (文档对象模型) 的缩写：

4.4 快速生成代码框架

1. 在vscode中创建文件 xxx.html ，直接输入! ，按 tab 键，此时能自动生成代码的主体框架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2. 细节解释

<!DOCTYPE html> 称为 DTD (文档类型定义)，描述当前的文件是一个 HTML5 的文件；
<html lang="en"> 其中 lang 属性表示当前页面是一个 “英语页面”（有些浏览器会根据此处的声明提示是否进行自动翻译）；
<meta charset="UTF-8"> 描述页面的字符编码方式，没有这一行可能会导致中文乱码；
<meta name="viewport" content="width=device-width, initial-scale=1.0"> ：
- name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域；
- content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽，并设置初始缩放为不缩放（这个属性对于移动端开发更重要一些）

5. HTML常见标签

5.1 注释标签

<!-- 我是注释 -->

注释不会显示在界面上，目的是提高代码的可读性。

ctrl + / 快捷键可以快速进行注释/取消注释。

5.2 标题标签：h1-h6

有六个，从 h1 - h6，数字越大，字体越小。

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

5.3 段落标签：p

1. 问题引入

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落，以下列代码为例：

<!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>
   css中的1px并不等于设备的1px

   在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。

   还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。

   在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。
css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css
像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个
css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼
容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
</body>
</html>

显示结果：

在这里插入图片描述

2. 通过 p 标签改进上述代码, 每个段落放到 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>
   css中的1px并不等于设备的1px
    </p>

    <p>
   在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
    </p>

    <p>
   还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。
    </p>

    <p>
   在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。
css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css
像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个
css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼
容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
    </p>
</body>
</html>

显示结果：

在这里插入图片描述

3. 注意：

p 标签的内容在显示时，之间会出现一个空隙；
当前的 p 标签描述的段落，前面还没有缩进（未来 CSS 会学）；
内容在显示时自动根据浏览器宽度来决定排版；
html 内容首尾处的换行，空格均无效；
在 html 中文字之间输入的多个空格只相当于一个空格；
html 中直接输入换行不会真的换行，而是相当于一个空格。

5.4 换行标签：br

1. br 是 break 的缩写，表示换行

br 是一个单标签，不需要结束标签；
br 标签不像 p 标签那样带有一个很大的空隙；
<br/> 是规范写法，不建议写成 <br>。

2. 代码展示

之后的代码都是写在标签body中的：

<br/>
   css中的1px并不等于设备的1px

    <br/>
   在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。

    <br/>
   还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。

    <br/>
   在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。
css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css
像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个
css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼
容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。

显示结果：

在这里插入图片描述

5.4 格式化标签

加粗：strong 标签和 b 标签
倾斜：em 标签和 i 标签
删除线：del 标签和 s 标签
下划线：ins 标签和 u 标签

<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

显示结果：

在这里插入图片描述

使用 CSS 也可以完成类似的效果，实际开发中以 CSS 方式为主。

5.5 图片标签：img

1. src 属性

img 标签必须带有 src 属性，表示图片的路径：
- 此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中。

<img src="rose.jpg">

2. 其他属性

alt：替换文本，当文本不能正确显示的时候，会替换显示的文字；
title：提示文本，鼠标放到图片上，就会有提示；
width/height：控制宽度高度，高度和宽度改一个就行，另外一个会自动等比例缩放，否则就会图片失衡；
border：边框，参数是宽度的像素，一般使用 CSS 来设定。

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">

3. 注意

属性可以有多个，不能写到标签之前；
属性之间用空格分割，可以是多个空格，也可以是换行；
属性之间不分先后顺序；
属性使用 “键值对” 的格式来表示。

5.6 超链接标签：a

1. 两个属性

href：必须具备，表示点击后会跳转到哪个页面；
target：打开方式，默认是 _self，在当前标签页打开；如果是 _blank，则用新的标签页打开。

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

2. 链接的几种形式

外部链接：href 引用其他网站的地址。

<a href="http://www.baidu.com">百度</a>

内部链接：网站内部页面之间的链接，写相对路径即可。
- 在一个目录中，先创建一个 1.html，再创建一个 2.html

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>

<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

空链接：使用 # 在 href 中占位。

<a href="#">空链接</a>

下载链接：href 对应的路径是一个文件（可以使用 zip 文件）

<a href="test.zip">下载文件</a>

网页元素链接：可以给图片等任何元素添加链接
- 把元素放到 a 标签中

<a href="http://www.sogou.com">
    <img src="rose.jpg" alt="">
</a>

锚点链接：可以快速定位到页面中的某个位置

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
   第一集剧情 <br>
   第一集剧情 <br>
   ...
</p>
<p id="two">
   第二集剧情 <br>
   第二集剧情 <br>
 ...
</p>
<p id="three">
   第三集剧情 <br>
   第三集剧情 <br>
 ...
</p>

禁止 a 标签跳转：<a href="javascript:void(0);"> 或 <a href="javascript:;">

5.7 表格标签

5.7.1 基本使用

1. 标签介绍

table：表示整个表格；
thead：表格的头部区域；
tbody：表格得到主体区域；
tr：表示表格的一行；
td：表示一个单元格；
th：表示表头单元格，会居中加粗。

table 包含 tr，tr 包含 td 或 th。

2. 一些属性

align：是表格相对于周围元素的对齐方式（注意不是内部元素的对齐方式）；
border：表示边框，1表示有边框（数字越大，边框越粗）， " " 表示没边框；
cellpadding：内容距离边框的距离，默认 1 像素；
cellspacing：单元格之间的距离，默认为 2 像素；
width / height：设置尺寸。

这些属性是可以用于设置大小边框等，但是一般使用 CSS 来设置。

3. 代码示例

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" 
height="500">
    <head>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </head>
    <body>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>10</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>11</td>
        </tr>
    </body>
</table>

显示结果：

在这里插入图片描述

5.7.2 合并单元格

1. 使用到的属性

跨行合并：rowspan="n"
跨列合并：colspan="n"

2. 步骤

先确定跨行还是跨列；
找好目标单元格（跨列合并，左侧是目标单元格，从左向右合并；跨行合并，上方是目标单元格，从上向下合并）
删除的多余的单元格。

3. 代码示例

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" 
height="500">
    <head>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </head>
    <body>
        <tr>
            <td>张三</td>
            <td colspan="2">男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>11</td>
        </tr>
    </body>
</table>

显示结果：

在这里插入图片描述

6. 表单标签

表单是让用户输入信息的重要途径，分成两个部分

表单域：包含表单元素的区域，重点是 form 标签；
表单控件：输入框，提交按钮等，重点是 input 标签。

6.1 form标签

<form action="test.html">
   ... [form 的内容]
</form>

描述了要把数据按照什么方式，提交到哪个页面中。

关于 form 需要结合服务器 和网络编程来进一步理解，后面再详细研究。

6.2 input标签

1. 介绍

各种输入控件，单行文本框，按钮单选框复选框。

2. 属性

type：必须有，取值种类很多多，button, checkbox, text, file, image, password, radio等；
name：给 input 起了个名字，尤其是对于单选按钮，具有相同的 name 才能多选一；
value：input 中的默认值；
checked：默认被选中（用于单选按钮和多选按钮）；
maxlength：设定最大长度；

3. 代码示例

1）文本框：

<input type="text">

显示结果

在这里插入图片描述

2）密码框：

<input type="password">

显示结果

在这里插入图片描述
3）单选框：

性别: 
<input type="radio" name="sex">男 
<input type="radio" name="sex" checked="checked">女

显示结果

在这里插入图片描述

注意：单选框之间必须具备相同的 name 属性，才能实现多选一效果。

4）复选框：

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 
打游戏

显示结果

在这里插入图片描述
5）普通按钮

<input type="button" value="我是个按钮">

显示结果

在这里插入图片描述

当前点击了没有反应，需要搭配 JS 使用（后面会重点研究）。

6）提交按钮：

<form action="demo1.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送：

在这里插入图片描述

7）清空按钮：

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

显示结果

在这里插入图片描述

清空按钮必须放在 form 中，点击后会将 form 内所有的用户输入内容重置。

8）选择文件

<input type="file">

点击选择文件，会弹出对话框，选择文件：

在这里插入图片描述

6.3 label标签

1. 作用

搭配 input 使用，点击 label 也能选中对应的单选/复选框，能够提升用户体验。

2. 代码示例

for 属性指定当前 label 和哪个相同 id 的 input 标签对应（此时点击才是有用的）

<label for="male">男</label> <input id="male" type="radio" name="sex"> 
<label for="female">女</label> <input id="female" type="radio" name="sex">

显示结果

在这里插入图片描述

6.4 select标签

1. 作用

一个下拉菜单。

2. 代码示例

option 中定义 selected="selected" 表示默认选中：

<select>
    <option>北京</option>
    <option selected="selected">上海</option>
</select>

结果显示

在这里插入图片描述

7. 无语意标签：div & span

1. 作用

div：division的缩写，含义是分割，独占一行；
span：含义是跨度，不独占一行。

2. 代码示例

<div>
        <span>hello</span>
        <span>hello</span>
        <span>hello</span>
    </div>
    <div>
        <span>what</span>
        <span>what</span>
        <span>what</span>
    </div>
    <div>
        <span>no</span>
        <span>no</span>
        <span>no</span>
    </div>