• HTML标签语义化小结


        HTML语义化是个面试过程中喜闻乐见的问题,问得多了,也是时候要作个系统的总结,这样才能形成知识网络。

        所谓标签语义化,其实就是按照标准,给内容用上一个最恰当最合适的标签,这样一来,就算样式表没加载,也能正常浏览文章。对了,说起这个,我想起我手机在浏览部分网站的时候会有个阅读模式的东西,就是把样式去掉,让你更专注于文本,所以如果你的语义化做得不好,在这种阅读模式下是会“死人”的,哈哈哈。

    阅读模式

      每个HTML标签都有自己的意义,也有自己的适用范围,但往往会被我们忽略或者滥用,比如,div标签,这个标签常用来布局,但是它其实是一个无意义的标签,并不利于后期维护。

      好处:

    1. 去掉样式或者样式丢失时页面结构依然清晰分明
    2. 移动设备能够更加完美的展示你的网页
    3. 阅读器会根据标签的语义自动解析,呈现更容易阅读的内容形式(无障碍阅读)
    4. 搜索引擎会根据标签的语义确定上下文和权重问题(有利于SEO)
    5. 便于后期的开发以及维护,团队合作效率提高

      既然好处多多,那么是需要好好记记的,下面这个表格来源于网络:

    标签描述
    <!–…–> 定义注释。
    <!DOCTYPE> 定义文档类型。
    <a> 定义超链接。
    <abbr> 定义缩写。
    <acronym> HTML 5 中不支持。定义首字母缩写。
    <address> 定义地址元素。
    <applet> HTML 5 中不支持。定义 applet。
    <area> 定义图像映射中的区域。
    <article> 定义 article。
    <aside> 定义页面内容之外的内容。
    <audio> 定义声音内容。
    <b> 定义粗体文本。
    <base> 定义页面中所有链接的基准 URL。
    <basefont> HTML 5 中不支持。请使用 CSS 代替。
    <bdi> 定义文本的文本方向,使其脱离其周围文本的方向设置。
    <bdo> 定义文本显示的方向。
    <big> HTML 5 中不支持。定义大号文本。
    <blockquote> 定义长的引用。
    <body> 定义 body 元素。
    <br> 插入换行符。
    <button> 定义按钮。
    <canvas> 定义图形。
    <caption> 定义表格标题。
    <center> HTML 5 中不支持。定义居中的文本。
    <cite> 定义引用。
    <code> 定义计算机代码文本。
    <col> 定义表格列的属性。
    <colgroup> 定义表格列的分组。
    <command> 定义命令按钮。
    <datalist> 定义下拉列表。
    <dd> 定义定义的描述。
    <del> 定义删除文本。
    <details> 定义元素的细节。
    <dfn> 定义定义项目。
    <dir> HTML 5 中不支持。定义目录列表。
    <div> 定义文档中的一个部分。
    <dl> 定义定义列表。
    <dt> 定义定义的项目。
    <em> 定义强调文本。
    <embed> 定义外部交互内容或插件。
    <fieldset> 定义 fieldset。
    <figcaption> 定义 figure 元素的标题。
    <figure> 定义媒介内容的分组,以及它们的标题。
    <font> HTML 5 中不支持。
    <footer> 定义 section 或 page 的页脚。
    <form> 定义表单。
    <frame> HTML 5 中不支持。定义子窗口(框架)。
    <frameset> HTML 5 中不支持。定义框架的集。
    <h1> to <h6> 定义标题 1 到标题 6。
    <head> 定义关于文档的信息。
    <header> 定义 section 或 page 的页眉。
    <hgroup> 定义有关文档中的 section 的信息。
    <hr> 定义水平线。
    <html> 定义 html 文档。
    <i> 定义斜体文本。
    <iframe> 定义行内的子窗口(框架)。
    <img> 定义图像。
    <input> 定义输入域。
    <ins> 定义插入文本。
    <keygen> 定义生成密钥。
    <isindex> HTML 5 中不支持。定义单行的输入域。
    <kbd> 定义键盘文本。
    <label> 定义表单控件的标注。
    <legend> 定义 fieldset 中的标题。
    <li> 定义列表的项目。
    <link> 定义资源引用。
    <map> 定义图像映射。
    <mark> 定义有记号的文本。
    <menu> 定义菜单列表。
    <meta> 定义元信息。
    <meter> 定义预定义范围内的度量。
    <nav> 定义导航链接。
    <noframes> HTML 5 中不支持。定义 noframe 部分。
    <noscript> 定义 noscript 部分。
    <object> 定义嵌入对象。
    <ol> 定义有序列表。
    <optgroup> 定义选项组。
    <option> 定义下拉列表中的选项。
    <output> 定义输出的一些类型。
    <p> 定义段落。
    <param> 为对象定义参数。
    <pre> 定义预格式化文本。
    <progress> 定义任何类型的任务的进度。
    <q> 定义短的引用。
    <rp> 定义若浏览器不支持 ruby 元素显示的内容。
    <rt> 定义 ruby 注释的解释。
    <ruby> 定义 ruby 注释。
    <s> HTML 5 中不支持。定义加删除线的文本。
    <samp> 定义样本计算机代码。
    <script> 定义脚本。
    <section> 定义 section。
    <select> 定义可选列表。
    <small> 将旁注 (side comments) 呈现为小型文本。
    <source> 定义媒介源。
    <span> 定义文档中的 section。
    <strike> HTML 5 中不支持。定义加删除线的文本。
    <strong> 定义强调文本。
    <style> 定义样式定义。
    <sub> 定义下标文本。
    <summary> 定义 details 元素的标题。
    <sup> 定义上标文本。
    <table> 定义表格。
    <tbody> 定义表格的主体。
    <td> 定义表格单元。
    <textarea> 定义 textarea。
    <tfoot> 定义表格的脚注。
    <th> 定义表头。
    <thead> 定义表头。
    <time> 定义日期/时间。
    <title> 定义文档的标题。
    <tr> 定义表格行。
    <track> 定义用在媒体播放器中的文本轨道。
    <tt> HTML 5 中不支持。定义打字机文本。
    <u> HTML 5 中不支持。定义下划线文本。
    <ul> 定义无序列表。
    <var> 定义变量。
    <video> 定义视频。
    <xmp> HTML 5 中不支持。定义预格式文本。
  • 相关阅读:
    方法 —— 参数传递、重载、命令行参数与可变参数
    Float型 与 Double型数据的存储方式
    交换两个变量的值
    【LeetCode-数组】螺旋矩阵(顺时针打印矩阵)
    【LeetCode-链表】二叉树展开为链表
    【LeetCode-动态规划】零钱兑换 II
    【LeetCode-树】将有序数组转换为二叉搜索树
    【LeetCode-树】从上到下打印二叉树 III
    【LeetCode-链表】相交链表
    【LeetCode-字符串】字符串转换整数 (atoi)
  • 原文地址:https://www.cnblogs.com/danielweb/p/4473375.html
Copyright © 2020-2023  润新知