笔记二:常用的h5语义化标签
0.前言:
- 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意。
- 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码。这样更有利于读写代码。
- 人很容易直接或间接的呆在舒适区,当我写惯了h4的代码之后,不愿意用h5标签,为了杜绝后患,遂决定总结以下内容。
1.header:
- header {
- width: 100%;
- height: 70px;
- background-color: #515151;
- position: fixed;
- top: 0px;
- z-index: 222;
- }
- .main {
- width: 80%;
- height: 70px;
- margin: auto;
- }
- .logo {
- width: 240px;
- height: 70px;
- background-color: rgb(153, 204, 51);
- text-align: center;
- line-height: 70px;
- float: left;
- }
2.nav:页面的导航
- <header>
- <div class="main">
- <div class="logo">公司logo</div>
- <nav>
- <ul>
- <li><a href="">首页</a></li>
- <li><a href="">旅游咨询</a></li>
- <li><a href="">机票订购</a></li>
- <li><a href="">风景欣赏</a></li>
- <li><a href="">公司简介</a></li>
- </ul>
- </nav>
- </div>
- </header>
3.图片标签、图片标题
- <div class="tour">
- <figure>
- <img src="./image/tour5.jpg" alt="">
- <figcaption>
- <span class="box1"><span class="box2">
- <曼谷-芭提雅6日游>
- </span>包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成员自费卷</span>
- <span class="box3">国内长线</span>
- </figcaption>
- </figure>
- </div>
figure图片标签,figcaption图片标题。
4.时间标签
- <time>4-29</time>
5footer标签
页脚标签。
6。待补充完善的语义化标签
<section>
元素表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题。(没用过,感觉有用先记录下来。)
7.自定义列表
dt: 定义列表 相当于table
dl:dldefines terms 定义项目,相当于ul
dd:defines description,作用是定义列表中项目的注释 相当于li
与无序列表的区别?
- <dl>
- <dt>测试
- <dd>列表1</dd>
- <dd>列表1</dd>
- <dd>列表1</dd>
- </dt>
- </dl>
- <table>
- <ul>测试2 <!--我会居中-->
- <li>1</li>
- <li>2</li>
- <li>3</li>
- </ul>
- </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语义化标签的更多相关文章
- html5语义化标签总结二
HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...
- HTML 5的革新——语义化标签(二)
HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...
- H5新增特性之语义化标签
H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
- H5的语义化标签(PS: 后续继续补充)
头部信息 <header></header> 区块标签 <figure> <figcaption>123</figcaption> < ...
- H5中的语义化标签
H5中的语义化标签也就是之前的id = “header”演变而来的 只不过之前是id 现在变成了标签而已 什么是语义化: 根据内容结构化(内容语义化) 选择合适的标签(代码语义化) 便于开发者阅读和写 ...
- HTML 5的革新——语义化标签(一)HTML 5的革新——语义化标签(二)
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- H5新特性之语义化标签
一.为什么要增加新的语义化标签 在HTML 5出来之前,我们用div来表示章节,但是这些div都没有实际意义,这样的布局方式使我们的结构不够清晰,于是语义化标签应运而生. 二.何为语义化标签 顾名思义 ...
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- HTML5语义化标签
在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...
随机推荐
- 关于在WP8.1中使用剪贴板的问题
熟悉WindowsPhone8.0和WindowsPhone8.1开发的朋友都应该很清楚,在windowphone8.0的 开发时代下,我们可以很轻松的使用系统提供的API进行简单的文本拷贝和复制.但 ...
- Windows下 webpack4.0 的安装
这里我们通过npm来进行安装 1. 安装 webpack // 全局安装webpack npm install webpack -g 2. 通过 webpack -v 命令查看当前安装的版本 此时如果 ...
- svn和ftp的不同应用场合
作者:朱金灿 来源:http://blog.csdn.net/clever101 本来二者不是同一类的东西,是不能比较.引发我思考的是部门一些同事错把svn工具作为一个文件共享工具.因此我在思考一个问 ...
- Python 关于Python函数参数传递方式的一点探索
关于Python函数参数传递方式的一点探索 by:授客 QQ:1033553122 实践代码 #!/usr/bin/env python # -*- coding:utf-8 -*- __author ...
- 51Testing专访史亮:测试人员在国外
不久前,我接受了51Testing的访问,讨论了软件测试的一些问题.以下是全文. 1.史亮老师,作为我们51Testing的老朋友,能和我们说说您最近在忙些什么吗? 自2011年起,我加入Micros ...
- XSS(跨站脚本攻击)漏洞解决方案
首先,简单介绍一下XSS定义: 一 . XSS介绍 XSS是跨站脚本攻击(Cross Site Scripting)的缩写.为了和层叠样式表CSS(Cascading Style Sheets)加以区 ...
- LDA背景资料
[https://zhuanlan.zhihu.com/p/30226687] LDA模型的前世今生 在文本挖掘中,有一项重要的工作就是分析和挖掘出文本中隐含的结构信息,而不依赖任何提前标注的信息.L ...
- vue权威指南笔记01——样式的设置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- SQLServer数据集合的交、并、差集运算
SQLServer2005通过intersect,union,except和三个关键字对应交.并.差三种集合运算. 他们的对应关系可以参考下面图示 相关测试实例如下: use tempdb go if ...
- GPU与CPU的区别
作者:虫子君 链接:https://www.zhihu.com/question/19903344/answer/96081382 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...