HTML语义化标签

1 篇文章 0 订阅
  1. 首先对W3C的HTML5其进行大概的分类,随意看看(可以这样回答面试官,说你归纳过):

     

    1:定义上的:

    <!--...-->   定义注释。

    <!DOCTYPE>  定义文档类型。

    <html>定义 HTML 文档。

    <body>     定义文档的主体。

    <script>定义客户端脚本。

    <frame>定义框架集的窗口或框架。

    <frameset>定义框架集。

     

    <head>定义关于文档的信息。

    <iframe>定义内联框架。

    <meta>定义关于 HTML 文档的元信息。

    <link>定义文档与外部资源的关系。

    <noframes>定义针对不支持框架的用户的替代内容。

    <noscript>定义针对不支持客户端脚本的用户的替代内容。

     

    2:功能上的(js或者css上的作用比较有特色的语义化标签):

    <a>           定义锚。

    <abbr>      定义缩写。

    <address> 定义文档作者或拥有者的联系信息。

    <area>       定义图像映射内部的区域。

    <audio>    定义声音内容。

    <base>     定义页面中所有链接的默认地址或默认目标。

    <br>         定义简单的折行。

    <button>  定义按钮 (push button)。

    <col>定义表格中一个或多个列的属性值。

    <colgroup>定义表格中供格式化的列组。

    <dfn>        定义一个定义项目。

    <code>     定义计算机代码文本。

    <samp>     定义样本文本。

    <kbd>       定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。

    <var>       定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

    <cite>       定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

    <datalist>定义下拉列表。

     

     <wbr> 定义长单词在哪里换号;元素来添加 Word Break Opportunity(单词换行时机)

    <video>定义视频。

    <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

    <title>定义文档的标题。

    <time>定义日期/时间。

    <textarea>定义多行的文本输入控件。

    <strong>定义强调文本。

    <style>定义文档的样式信息。

    <sub>定义下标文本。

    <summary>为 <details> 元素定义可见的标题。

    <sup>定义上标文本。

    <source>定义媒介源。

    <samp>定义计算机代码样本。

    <section>定义 section。

    <select>定义选择列表(下拉列表)。

    <rt>定义 ruby 注释的解释。

    <ruby>定义 ruby 注释。

    <q>定义短的引用。

    <progress>定义任何类型的任务的进度。

    <param>定义对象的参数。

    <pre>定义预格式文本。

    <optgroup>定义选择列表中相关选项的组合。

    <option>定义选择列表中的选项。

    <output>定义输出的一些类型。

    <details>定义元素的细节。

    <dir>不赞成使用。定义目录列表。

    <div>定义文档中的节。

    <dfn>定义定义项目。

    <dialog>定义对话框或窗口。

    <dl>定义定义列表。

    <dt>定义定义列表中的项目。

    <embed>定义外部交互内容或插件。

    <fieldset>定义围绕表单中元素的边框。

    <figcaption>定义 figure 元素的标题。

    <figure>定义媒介内容的分组,以及它们的标题。

    <form>定义供用户输入的 HTML 表单。

    <hr>定义水平线。

    <img>定义图像。

    <input>定义输入控件。

    <ins>定义被插入文本。

    <kbd>定义键盘文本。

    <keygen>定义生成密钥。

    <label>定义 input 元素的标注。

    <legend>定义 fieldset 元素的标题。

    <map>定义图像映射。

    <mark>定义有记号的文本。

    <menu>定义命令的列表或菜单。

    <menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。

    <meter>定义预定义范围内的度量。

    <nav>定义导航链接。

    <object>定义内嵌对象。

     

    3:结构上的(方便分块查看,这个很重要):结构上的可以被其他div+css代替但是好的前端会用这些标签来使代码可读性增强。

     

    <header>定义 section 或 page 的页眉。

    <dd>定义定义列表中项目的描述。

    <article>  定义文章。

    <aside>    定义页面内容之外的内容。

    尤其上面的四位主要用于划分页面块,一般不做样式处理

     

    <p>定义段落。

    <em>       把文本定义为强调的内容。

    <strong>  把文本定义为语气更强的强调的内容。

    <bdo>       定义文字方向。

    <bdi>        定义文本的文本方向,使其脱离其周围文本的方向设置,与bdo配合使用试试。

    <big>        定义大号文本。

    <b>           定义粗体字。

    <del>定义被删除文本。

    <ul>定义无序列表。

    <ol>定义有序列表。

    <table>定义表格。

    <tbody>定义表格中的主体内容。

    <td>定义表格中的单元。

    <tfoot>定义表格中的表注内容(脚注)。

    <th>定义表格中的表头单元格。

    <thead>定义表格中的表头内容。

    <tr>定义表格中的行。

    <footer>定义 section 或 page 的页脚。

    <h1> to <h6>定义 HTML 标题。

    <i>定义斜体字。

    <li>定义列表的项目。

  2. 2

    语义化标签的好处要从HTML 全局属性说起,即有的标签有默认的HTML全局属性,所以最好用语义化标签。

     

    1:以下元素支持 tabindex 属性:<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。

     

    用法:

    <element tabindex="number">

     

    number规定元素的 tab 键控制次序(1 是第一个)。

    作用:

    增强用户键盘的可操作性,所以不要用div代替

     

    2:以下元素支持 accesskey 属性:<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。

     

    用法:

    <element accesskey="character">

     

    character规定激活(使元素获得焦点)元素的便捷按键。

    作用:

    增强用户键盘的可操作性,所以不要用div代替

     

    3:contextmenu 属性的值是要打开的 <menu> 元素的 id。目前只有火狐支持

     

    4:spellcheck 属性规定是否对元素进行拼写和语法检查。

    可以对以下内容进行拼写检查:

            input 元素中的文本值(非密码)

           <textarea> 元素中的文本

           可编辑元素中的文本

    5:lang 属性在以下标签中无效:<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>。

  3. 3

    对外的意义:

    有利于SEO的!!有利于解析代码!!可读性可维护性增强!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值