HTML的简介以及语义化的案例分析

AgonieLing
53 阅读2分钟

什么是HTML？

HTML（超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。它由一系列的元素组成，这些元素可以用来包围标记不同部分的内容，使其以某种方式呈现或者工作。

HTML语义化

HTML语义化是指使用恰当的HTML标签来包围内容，使得页面结构清晰，便于开发者阅读与维护。同时在Web设计中，[“无障碍”](无障碍 - 学习 Web 开发 | MDN)是最重要的，语义化能够更好的满足“无障碍”要求。

语义化标签的使用

  • head: 定义页面或页面区域的头部
  • nav: 定义页面的导航链接部分
  • section: 定义文档中的节或区段，通常包含一个标题
  • article: 定义独立的、自包含的内容，如博客文章或新闻报道
  • aside: 定义与页面主内容相关但可以独立于主内容的部分，如侧边栏
  • footer: 定义页面或页面区域的底部，通常包含作者、版本信息和联系方式
  • figure和figcaption: 定义媒体内容及其标题。如图片或图表

例如，一个典型的HTML5的页面结构如下：

<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <header>
      <h1>网站标题</h1>
      <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">文章</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
          <header>
            <h2>文章标题</h2>
          </header>
          <p>文章内容...</p>
          <footer>
            <p>作者：张三</p>
          </footer>
      </article>
      <aside>
        <h3>文章标题</h3>
        <ul>
          <li><a href="#">相关文章1</a></li>
          <li><a href="#">相关文章2</a></li>
        </ul>
      </aside>
    </main>
    <footer>
      <p>版本所有</p>
    </footer>
  </body>
</html>

HTML语义化的案例分析

案例: 明日方舟官网

图片1.png

在首页页面中，背景是由画布(canvas)构成，包含着官网的宣传视频。 头部是由盒模型(div)组成，并且CSS的样式布局为弹性布局(flex)，能够更好地进行设计排版。 Logo同样由盒模型(div)组成并包含超链接(a)，超链接的url为当前页面的url。 导航栏与侧边栏同样为盒模型(div)并且为弹性布局(flex),子元素也为盒模型(div)并且均有超链接(a),用于前往不同内容的页面

图片1.png

在情报页面中，公告栏是由盒子模型(div)组成并且为弹性布局(flex)，子元素也为盒子模型(div)，公告栏中的导航栏部分通过设置js中的addEventListener来实现鼠标点击切换不同部分的内容 宣传图是由盒子模型(div)和不同图像(img)组成，这是许多网站都有的轮播图，实现将不同图像自动轮播并且能够自主地切换至指定位置的图像

总结

HTML语义化，能够使用户“无障碍”地浏览与使用页面，并且对于Web的设计者能够更方便地阅读和维护。 浏览不同风格的网站，并分析与学习网站的结构，对往后的Web设计要求才能够更加得心应手

avatar
文章
阅读
粉丝