zoukankan      html  css  js  c++  java
  • HTML基础之标签的使用 标签的语义化使用

    此系列文面向一些网页前端初学者,或者是做了很多静态页面,认为只要页面呈现出自己所要的视觉效果就万事OK,不懂W3C标准的童鞋们(我曾经就是这样的)。

    语义化标签:你认为用什么标签最能描述这块内容,觉得这样表述更有意义,那么就可以使用这个标签。现在的浏览器对CSS支持都挺完善的(不包括CSS3),讲究的是结构与表现相分离,结构与行为相分离,一个WEB页面,结构是最主要的,结构相当于一栋房子的墙,标签是一块块砖,砖摆得有序,摆得整治齐,墙才牢固,所以说标签语义化很重要,HTML每个标签都有自己的语义。——网上摘下的一段话

    上面一段话我并不完全同意。实际上w3c组织在HTML标签的语义和使用方面都有相关的条目,并且这在HTML5中得到了更大的体现。W3C标准的存在意义就是让web页面更规范,团队开发时代码更具有易读性,减少浏览器兼容问题。更深一层,不符合W3C标准的页面是会影响到整个网站的性能。尤其是对一些高并发的SNS网站来说,制作符合W3C标准的网站显得尤为重要。

    以下列举一些常见的语义化标签:

    p
    文本段落。每个p标签包裹一个段落,段落之间会自动换行,无需使用<br/>标签。一般都有默认的段间距,便于更改。
    h1,h2,h3,h4,h5,h6
    标题。数字越大,优化级别越低。该系列对搜索引擎有加权重作用。一般在文章中字体大小逐级减小,以表示标题级别。
    在HTML4中,h1是用于页面标题的,即一个页面只有一个h1。当然这是w3c标准,如果你用多个h1,浏览器也不会显示不正确。
    另外,由于h系列在SEO中的作用,经常被用作放LOGO图片和网站名称。
    ul,li
    无序列表。通俗的说,就是没有序号的列表。可以通过css的list-style轻松地改掉左侧默认的小圆点。
    另外,由于ul标签的特殊性,它经常被用于创建一些属于一个整体成序列的结构。如:导航条,现在位置等。
    ol,li
    有序列表。类似ul,li标签,使用方法相同。唯一不同的是,ol经常用于创建那种第1点,第2点,第3点……的列表。其默认在左侧的显示自动增长的数字符号。
    table,tr,th,td,caption...
    表格。很多人喜欢偷懒用table来布局,包括ASP.NET的一些控件也经常自动编译生成层层嵌套的table。对于复杂的页面,你会发现代码变得混乱不堪,改起来想吐血。
    事实上,布局应当使用div层,而table则是用于显示数据表的。table标签内还可以使用丰富的标签和属性,各自有不同的作用。
    如:caption为整个表格标题,th为某列或某行的标题,td为普通的单元格,tr为表格的行……另外还有thead,tbody,tfoot,colgroup,col,rowgroup,row等等丰富的标签在这里就不赘述了。
  • 相关阅读:
    手机进水不要慌,四个步骤告诉您正确处理方法!
    2021-08-17:学习项目代码流程
    Docker使用Centos镜像安装Openssh服务
    OpenResty简介、下载流程、简单教学
    go接收者和锁注意事项
    PHPstorm精进
    centos7找回root密码
    功能测试
    删除排序数组中的重复项
    Java多线程
  • 原文地址:https://www.cnblogs.com/jennieji/p/2748972.html
Copyright © 2011-2022 走看看