HTTP语义化实践 | 青训营

kirin
60 阅读3分钟

青训营学习记录文章

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定

HTML5也是一种用于构建网页和应用程序的标准标记语言。它引入了许多新的元素和功能，如多媒体支持、语义化标签、本地存储和离线应用等。HTML5还提供了更好的跨平台和跨设备兼容性，使开发者能够创建更丰富和交互性强的网页和应用程序。

01 HTML5标签

使用HTML标签时，更多关注的是标签的语义，而非样式

  1. <meta>自结束标签，来设置网页的字符集

    <meta charset="utf-8">

  2. <head>标签

    标签包含了所有的头部标签元素。在 标签中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: , <style>, <meta>, <link>, <script>, <noscript> 和 <base>

  3. <!doctype html>

    文档声明(doctype)
    告诉浏览器当前网页的版本
    HTML5的文档声明
    <!doctype html>
    <!Doctype HTML>

  4. 标题标签

            <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>

  5. <em>标签，表示语义加重，为行内元素

  6. <strong>标签表示强调

  7. 列表标签

    <!-- 有序列表 -->
<ol>
    <li></li>
    <li></li>
</ol>
<!-- 无序列表 -->
<ul>
    <li></li>
    <li></li>
</ul>

02 HTML语法

  • 标签和属性不区分大小写，推荐小写

  • 空标签可以不闭合，比如 input、meta

  • 属性值推荐用双引号包裹

  • 某些属性值可以省略，比如 required、readonly

  • HTML 元素以开始标签起始

  • HTML 元素以结束标签终止

  • 元素的内容是开始标签与结束标签之间的内容

  • 某些 HTML 元素具有空内容（empty content）

  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）

  • 大多数 HTML 元素可拥有属性

结构语义化标签按内容划分有：

  • header：表示网页的头部
  • nav：表示网页的导航
  • main：表示网页主体部分，一个页面中只有一个
  • article：表示独立的文章
  • aside：和主体相关的其他内容（侧边栏）
  • footer：表示网页的底部

如何做到HTML语义化？

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码
  • 参考MDN文档

03 实际网站分析

  • 部分京东网页源码：

    <div id="logo" class="logo">
    <h1 class="logo_tit">
        <a href="//www.jd.com" class="logo_tit_lk" clstag="h|keycount|head|logo_01">京东</a>
    </h1>
    <h2 class="logo_subtit">京东,多快好省</h2>
    <div class="logo_extend" clstag="h|keycount|head|logo_02"></div>
</div>

  • 部分淘宝网页源码：

    <div class="tbh-logo J_Module tb-pass" data-name="logo" data-spm="201857">
  <div class="logo">
    <h1>
      <a href="//www.taobao.com"  role="img" class="logo-bd clearfix">淘宝网</a>
      
    </h1>
    <h2 aria-hidden="true"><a class="clearfix" href="//www.taobao.com">淘宝网</a></h2>
  </div>
</div>

    <div class="shell-i">
    <div class="shell-img"></div>
    <div class="shell-text"></div>
    <div class="shell-subtext"></div>
    <div class="shell-price"></div>
</div>
  1. 二者都使用了、、、等标签来定义网页的头部、导航、主要内容和页脚部分。这些语义化标签可以提高网页的可读性和可访问性，有助于搜索引擎优化和屏幕阅读器的理解。
  2. 二者均使用了较多的非语义化的div标签来包裹内容块。
  3. 在实际应用中，语义化标签的使用可以提高代码的可维护性和可读性，但非语义化标签的使用也可以提供更灵活的布局和样式控制，
avatar
文章
阅读
粉丝