您现在的位置:主页 > 网站制作 > HTML/XHTML >

HTML标签语义和HTML标签语义化的设计

来源:新2备用网址hg622.com|首页吧 责任编辑:Jzq8 发表时间:2014-10-09 点击:次
一个网页就好像是一栋房子,HTML结构就是一面面的墙,而标签则是一块块的砖,砖要摆放有序,整整齐齐,墙才会牢固。最后css则是装饰材料,美不美就靠她了。因此,我们要有一个优秀的网页,既要提供一个干净而又有清晰结构的HTML,更加离不开css的极致美化。

前段时间,在网上浏览时,发现国内几家互联网巨头公司的前端开发招聘题目,依然都提到一个标签语义化的问题,这个话题在已经是老生常谈了,但依旧问题多多,归结于一个习惯吧,有时间我也太懒,没有多加考虑就直接写代码,我知道我错了!童鞋们,我们得让标签语义化成为一种习惯!今天就再普及一下标签语义化,也鞭策下自己,别整天迷迷糊糊的!

在网页设计中,我们时常都会听到标签语义化这个名词,HTML标签语义化的设计思维其实就是给某块内容用上一个最恰当最合适的标签,这样一来,不管是谁都能看懂这块内容是什么。

一个网页就好像是一栋房子,HTML结构就是一面面的墙,而标签则是一块块的砖,砖要摆放有序,整整齐齐,墙才会牢固。最后css则是装饰材料,美不美就靠她了。因此,我们要有一个优秀的网页,既要提供一个干净而又有清晰结构的HTML,更加离不开css的极致美化。

从上面也说明标签语义化极其重要,HTML每个标签都有自己的语义,都有自己适用的范围。但往往会被我们忽略或者被我们滥用,举个例子:在一个页面中

用了几十个甚至上百个,这是个无意义的标签,只是表示一个层而已,非常不利于后期的维护;而标签则是一个数据标签,该用的时候,我们就要大胆使用。

标签语义化的好处

让你使用标签语义化的理由可以有无数条:

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

HTML标签语义汇总

为了更快更好的运用标签语义化,下面的表单列出了所有的HTML标签以及标签的描述。以下列表按字母顺序排列,其中 new?:为 HTML5 中的新标签。

标签 描述
定义注释。
定义文档类型。
定义超链接。
定义缩写。
HTML 5 中不支持。定义首字母缩写。
定义地址元素。
HTML 5 中不支持。定义 applet。
定义图像映射中的区域。
定义 article。
定义页面内容之外的内容。
定义声音内容。
定义粗体文本。
定义页面中所有链接的基准 URL。
HTML 5 中不支持。请使用 CSS 代替。
定义文本的文本方向,使其脱离其周围文本的方向设置。
定义文本显示的方向。
HTML 5 中不支持。定义大号文本。
定义长的引用。
定义 body 元素。

插入换行符。
定义按钮。
定义图形。
定义表格标题。
HTML 5 中不支持。定义居中的文本。
定义引用。
定义计算机代码文本。
定义表格列的属性。
定义表格列的分组。
定义命令按钮。
定义下拉列表。
定义定义的描述。
定义删除文本。
定义元素的细节。
定义定义项目。
HTML 5 中不支持。定义目录列表。
定义文档中的一个部分。
定义定义列表。
定义定义的项目。
定义强调文本。
定义外部交互内容或插件。
定义 fieldset。
定义 figure 元素的标题。
定义媒介内容的分组,以及它们的标题。
HTML 5 中不支持。
定义 section 或 page 的页脚。
定义表单。
HTML 5 中不支持。定义子窗口(框架)。
HTML 5 中不支持。定义框架的集。

to

定义标题 1 到标题 6。
定义关于文档的信息。
定义 section 或 page 的页眉。
定义有关文档中的 section 的信息。

定义水平线。
定义 html 文档。
定义斜体文本。
定义行内的子窗口(框架)。
定义图像。
定义输入域。
定义插入文本。
定义生成密钥。
HTML 5 中不支持。定义单行的输入域。
定义键盘文本。
定义表单控件的标注。
定义 fieldset 中的标题。
  • 定义列表的项目。
    定义资源引用。
    定义图像映射。
    定义有记号的文本。
    定义菜单列表。
    定义元信息。
    定义预定义范围内的度量。
    定义导航链接。
    HTML 5 中不支持。定义 noframe 部分。
    定义 noscript 部分。
    定义嵌入对象。
      定义有序列表。
      定义选项组。
      定义下拉列表中的选项。
      定义输出的一些类型。

      定义段落。
      为对象定义参数。
      定义预格式化文本。
      定义任何类型的任务的进度。
      定义短的引用。
      定义若浏览器不支持 ruby 元素显示的内容。
      定义 ruby 注释的解释。
      定义 ruby 注释。
      HTML 5 中不支持。定义加删除线的文本。
      定义样本计算机代码。

      相关新闻>>

        发表评论
        请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
        评价:
        表情:
        匿名?

        推荐图文

        • 网页设计列表标记ul,ol,dl在不同浏览器的兼容问题
        • 论述使用HTML5的利与弊
        • 15 个非常值得收藏的 HTML5 资源
        • 13个应用HTML5 和 CSS3 实现的Web效果
        • 8个你从未见过的HTML5 Canvas和JavaScript的动画
        • HTML常用格式 新2备用网址hg622.com|首页吧HTML第三节
        • 新2备用网址hg622.com|首页吧:HTML 5入门级技巧
        • HTML基本概念 新2备用网址hg622.com|首页吧HTML第一节
        • HTML基础Tag 新2备用网址hg622.com|首页吧HTML第二节
        Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
        Copyright ? 2013 JZQ8.COM. 新2备用网址hg622.com|首页吧|新2备用网址hg622.com|首页去吧 版权所有
        冀ICP备09002514号
        冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款