0.前言:

  1. 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意。
  2. 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码。这样更有利于读写代码。
  3. 人很容易直接或间接的呆在舒适区,当我写惯了h4的代码之后,不愿意用h5标签,为了杜绝后患,遂决定总结以下内容。
 

1.header:

  被放置在页面或者页面中某个区块元素的顶部,包含整个页面或者区块的标题、简介等信息,起到引导与导航的作用。
如:小米商城的导航栏整体,width:100%
  1. header {
  2. width: 100%;
  3. height: 70px;
  4. background-color: #515151;
  5. position: fixed;
  6. top: 0px;
  7. z-index: 222;
  8.  
  9. }
  10.  
  11. .main {
  12. width: 80%;
  13. height: 70px;
  14. margin: auto;
  15. }
  16.  
  17. .logo {
  18. width: 240px;
  19. height: 70px;
  20. background-color: rgb(153, 204, 51);
  21. text-align: center;
  22. line-height: 70px;
  23. float: left;
  24. }

  

2.nav:页面的导航

可以通过导航链接到网站的其他页面,或者当前页面的其它部分。说白了就是包含在header里的导航功能。当然如果在头部左面是logo,还是要做一些页面分离的。
  1. <header>
  2. <div class="main">
  3. <div class="logo">公司logo</div>
  4. <nav>
  5. <ul>
  6. <li><a href="">首页</a></li>
  7. <li><a href="">旅游咨询</a></li>
  8. <li><a href="">机票订购</a></li>
  9. <li><a href="">风景欣赏</a></li>
  10. <li><a href="">公司简介</a></li>
  11. </ul>
  12. </nav>
  13.  
  14. </div>
  15. </header>

3.图片标签、图片标题

  1. <div class="tour">
  2. <figure>
  3. <img src="./image/tour5.jpg" alt="">
  4. <figcaption>
  5. <span class="box1"><span class="box2">
  6. <曼谷-芭提雅6日游>
  7. </span>包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成员自费卷</span>
  8. <span class="box3">国内长线</span>
  9.  
  10. </figcaption>
  11. </figure>
  12. </div>

  figure图片标签,figcaption图片标题。

4.时间标签

  1. <time>4-29</time>

5footer标签

  页脚标签。


6。待补充完善的语义化标签

<section> 元素表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题。(没用过,感觉有用先记录下来。)

7.自定义列表

dt: 定义列表   相当于table

dl:dldefines terms 定义项目,相当于ul

dd:defines description,作用是定义列表中项目的注释 相当于li

与无序列表的区别?

  1. <dl>
  2. <dt>测试
  3. <dd>列表1</dd>
  4. <dd>列表1</dd>
  5. <dd>列表1</dd>
  6. </dt>
  7. </dl>
  8. <table>
  9. <ul>测试2 <!--我会居中-->
  10. <li>1</li>
  11. <li>2</li>
  12. <li>3</li>
  13. </ul>
  14. </table>
ul会居中,dt不会居中。在需要去掉list-style时,且不需要列表居中选择自定义列表,更有助于读写。

8.mark标签

用来突出显示文本,它的效果就像是用荧光笔给重点的语句做标记一样。

9.label标签

lable标签中设置for,来让说明文本和相对应的input关联起来,input设置id属性。

10.注意:

  • 尽量少使用无语义的span和div
  • 在语义不明显时,可以用p和div时,尽量用p自带换行,对兼容特殊终端有利。

11 to be contined......

 
 

笔记二:常用的h5语义化标签的更多相关文章

  1. html5语义化标签总结二

    HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

  2. HTML 5的革新——语义化标签(二)

    HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

  3. H5新增特性之语义化标签

    H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...

  4. H5的语义化标签(PS: 后续继续补充)

    头部信息 <header></header> 区块标签 <figure> <figcaption>123</figcaption> < ...

  5. H5中的语义化标签

    H5中的语义化标签也就是之前的id = “header”演变而来的 只不过之前是id 现在变成了标签而已 什么是语义化: 根据内容结构化(内容语义化) 选择合适的标签(代码语义化) 便于开发者阅读和写 ...

  6. HTML 5的革新——语义化标签(一)HTML 5的革新——语义化标签(二)

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  7. H5新特性之语义化标签

    一.为什么要增加新的语义化标签 在HTML 5出来之前,我们用div来表示章节,但是这些div都没有实际意义,这样的布局方式使我们的结构不够清晰,于是语义化标签应运而生. 二.何为语义化标签 顾名思义 ...

  8. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  9. HTML5语义化标签

    在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...

随机推荐

  1. 关于在WP8.1中使用剪贴板的问题

    熟悉WindowsPhone8.0和WindowsPhone8.1开发的朋友都应该很清楚,在windowphone8.0的 开发时代下,我们可以很轻松的使用系统提供的API进行简单的文本拷贝和复制.但 ...

  2. Windows下 webpack4.0 的安装

    这里我们通过npm来进行安装 1. 安装 webpack // 全局安装webpack npm install webpack -g 2. 通过 webpack -v 命令查看当前安装的版本 此时如果 ...

  3. svn和ftp的不同应用场合

    作者:朱金灿 来源:http://blog.csdn.net/clever101 本来二者不是同一类的东西,是不能比较.引发我思考的是部门一些同事错把svn工具作为一个文件共享工具.因此我在思考一个问 ...

  4. Python 关于Python函数参数传递方式的一点探索

    关于Python函数参数传递方式的一点探索 by:授客 QQ:1033553122 实践代码 #!/usr/bin/env python # -*- coding:utf-8 -*- __author ...

  5. 51Testing专访史亮:测试人员在国外

    不久前,我接受了51Testing的访问,讨论了软件测试的一些问题.以下是全文. 1.史亮老师,作为我们51Testing的老朋友,能和我们说说您最近在忙些什么吗? 自2011年起,我加入Micros ...

  6. XSS(跨站脚本攻击)漏洞解决方案

    首先,简单介绍一下XSS定义: 一 . XSS介绍 XSS是跨站脚本攻击(Cross Site Scripting)的缩写.为了和层叠样式表CSS(Cascading Style Sheets)加以区 ...

  7. LDA背景资料

    [https://zhuanlan.zhihu.com/p/30226687] LDA模型的前世今生 在文本挖掘中,有一项重要的工作就是分析和挖掘出文本中隐含的结构信息,而不依赖任何提前标注的信息.L ...

  8. vue权威指南笔记01——样式的设置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. SQLServer数据集合的交、并、差集运算

    SQLServer2005通过intersect,union,except和三个关键字对应交.并.差三种集合运算. 他们的对应关系可以参考下面图示 相关测试实例如下: use tempdb go if ...

  10. GPU与CPU的区别

    作者:虫子君 链接:https://www.zhihu.com/question/19903344/answer/96081382 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...