【第一期】以相册开始,来创建属于你的HTML网站(更新中)

正值暑假时刻,大家都在家里窝着。与其在家里窝着 不如和我一起来学习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>

这样子点击图片也可以进入我的博客哦(

评论

  1. Windows Edge 127.0.0.0
    3 月前
    2024-7-31 21:27:34

    讲得好!

    查看图片


    • 博主
      Ryugu
      Windows Edge 127.0.0.0
      3 月前
      2024-7-31 21:31:55

      谢谢夸奖~

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇