正值暑假时刻，大家都在家里窝着。与其在家里窝着 不如和我一起来学习HTML！
刚好我也要学HTML 我在网上自己找了一个课程 我将整理下来发布在博客方便大家来学习！
本期的教程主要以相册为主（我没话题了） 来教大家来打造一个属于自己的教程！话不多说马上开始！
一、文本显示方式
首先的话 .html 是一个文件 它里面包含了HTML的元素
在一个 .html 的文件中 它有头有尾 而 <html> 就是作为 HTML 的开始结束标签，而内容就在这个标签之间
例如：
<html>
<body>
//内容都在这里
</body>
</html>内容包括什么呢？就像人一样 有头 有身体 有尾巴（？）
HTML就将其分成了 页头 页中 页尾
以上是我对 HTML 的相关内容的小介绍 那我们就开始学习 它的文本显示内容吧！
①h1-h6元素
h1-h6是一个标题元素 用于网页的主标题
例如：
<h1>Hello World</h1>那为什么要将h分成 123456 元素呢？是为了表明其下方内容的重要性
数字越低，重要性越高，所以 h2 元素所具有的重要性要低于 h1 元素。
在显示效果上就是 h2 元素的字体会小于 h1 元素的字体。
②p元素
如果说把 h1-6 元素视为标题 那么 p 元素就是文本内容
例如：
<html>
<body>
<h1>我是标题！</h1>
<p>俺是内容！</p>
</body>
</html>③注释
注释是对一个 名词/文本 来进行解释的内容 它的一个方便就是为了提醒你自己，这个代码在我当时写的时候是什么意思 是为了干什么 对自己提示起到了一个重要作用
它是这么表达的：
<!-- 这是注释内容 -->例如：
<html>
<body>
<h1>我是标题！</h1>
<p>俺是内容！</p>
<!-- <p>俺被屏蔽了！</p> -->
</body>
</html>④ul 元素
ul元素是什么？它是一种无序列表（就是列表了）
使用方法：
<ul> </ul>⑤li 元素
li元素是什么？其实它和上面的 ul元素 存在一定的联系 ul作为一个列表 那么 li元素就是一个项
li元素是被嵌套在 ul元素中的
例如：
<ul>
<li>第一点</li>
<li>第二点</li>
</ul>Ⅰol 元素
ol元素是类似于无序列表，但有序列表中的列表项在显示时会被编号。但是他需要嵌套li元素：
<ol>
<li>第一点</li>
<li>第二点</li>
</ol>二、指明区域的方式
HTML5 有些元素能够指明不同的内容区域。 这些元素能让你的 HTML 易于阅读，并有助于搜索引擎优化（SEO）和无障碍访问。
①main元素
main元素是什么？它主要用于显示正文中主要内容，因此它只能出现一次
它是这么表达的：
<main>
</main>例如：
<html>
<body>
<main>
<h1>我是标题！</h1>
<p>俺是内容！</p>
<!-- <p>俺被屏蔽了！</p> -->
</main>
</body>
</html>在以上例子中 h1 和 p 元素在main的内容中 这个叫做嵌套
而我们要做的就是要进行缩进，这样子可以使 HTML 文件更加方便阅读
例如：
<html>
<body>
<main>
<h1>我是标题！</h1>
<p>俺是内容！</p>
<!-- <p>俺被屏蔽了！</p> -->
</main>
</body>
</html>我在 h1 元素 p元素 和 注释 前面加上了两个空格 看这样是不是更加美观了呢？
②img元素
了解计算机的同学都知道 img 是一个图片的文件格式 没错 img 元素可以为你的网站添加图片
但是 img 元素只有一个开始标签，没有结束标签。它的标签被称为自闭合标签。
Ⅰsrc 元素
而 img元素 中 有一个 src属性 它用作指向图片的位置
例如：
<html>
<body>
<main>
<h1>我是标题！</h1>
<p>俺是内容！</p>
<!-- <p>俺被屏蔽了！</p> -->
<img src="https://图片地址.com/图片.jpg">
</main>
</body>
</html>注意：src属性的表述地址中必须用引号括起来 图片格式没有做强制要求 不一定是.png格式 jpg那些常见的也可以
Ⅱalt 元素
我认为 所有的img元素中都必须要包含 alt元素 什么叫做 alt元素？它的作用是向网站访问者来介绍这个图片是什么东西，让访问者知晓这个图片的内容。这样做可以在你图床死后 还能显示 alt元素（图死字不死）
例如：
<html>
<body>
<main>
<h1>我是标题！</h1>
<p>俺是内容！</p>
<!-- <p>俺被屏蔽了！</p> -->
<img src="https://图片地址.com/图片.img" alt="图片.jpg">
</main>
</body>
</html>和 src元素 一样，都必须要添加引号
在添加图片之后 在写后面的内容的时候记得使用 section元素 它是一个对 SEO 和无障碍特性有帮助的语义元素。
例如：
<section>
<h2>我是标题</h2>
<p>俺是内容</p>
</section>Ⅲfigure 元素
什么是 figure元素呢？它代表了一个独立内容，允许你将图像与标题相关联。
比如我可以将我刚刚创建的 img元素 进行独立：
<figure>
<img src="https://图片地址.com/图片.img">
</figure>Ⅳfigcaption 元素
上文既然谈到了 figure元素 它是作为一个独立的存在。那么figure元素里面可以丢一个figcaption元素，它是作用是对当前独立的内容进行解释。
和上文一样 我在 figure元素 中添加了一个图片 那我需要对图片进行解释：
<figure>
<img src="https://图片地址.com/图片.img">
<figcaption>这是一张图片</figcaption>
</figure>当然 如果你想对解释的内容进行强调 那你可以使用 em元素：
<figure>
<img src="https://图片地址.com/图片.img">
<figcaption>这是一张<em>图片</em></figcaption>
</figure>还有另一种强调方式是 strong元素 同 em元素一样的使用方式
③锚元素
锚元素是什么？它可以作为一个按钮把你到一条链接
例如：
<a href="https://blog.mclzyun.com">点我来到真境的博客</a>同样的 引号必须有！！！
还有另一种方式 就是直接将 p元素 内的文本添加超链接：
<p>点击<a href="https://blog.mclzyun.com">这里</a>进入真境的博客</p>其中 “这里” 就被我定义为了超链接
Ⅰtarget 元素
什么是 target元素 呢？target元素 就是针对你以上设置锚元素所定向的链接设置一个打开方式 比如说新标签页或窗口
语法：
<a href="https://" target="_blank|_self|_parent|_top|framename">| 值 | 描述 |
| _blank | 在新窗口打开链接 |
| _self | 在当前页面中打开链接（默认项，你没设置target就是这个） |
| _parent | 在父框架中打开链接 |
| _top | 在窗口的整个主体中打开 |
| framename | 在指定的 iframe 中打开 |
比如我要对刚刚的链接设置成在新窗口出打开链接：
<a href="https://blog.mclzyun.com" target="_blank">点我来到真境的博客</a>同时图片也能像文本一样添加一个超链接：
<a href="https://blog.mclzyun.com">
<img src="https://图片地址.com/图片.img" alt="这只是一张照片啊！">
</a>这样子点击图片也可以进入我的博客哦（
讲得好！
![]()
查看图片
谢谢夸奖~