正值暑假时刻,大家都在家里窝着。与其在家里窝着 不如和我一起来学习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>
这样子点击图片也可以进入我的博客哦(
讲得好!
查看图片
谢谢夸奖~