笔记二:常用的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门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...
随机推荐
- [转] Mac下 快速写博客的软件 MarsEdit
正文 marsedit最好. 这东西还是收费的,这里, 我给个注册码: Name: The Blade SN: RSME3-DA4KUN-3EL6Y-MXD2X-LYMT9-6KGX8-4 ~~~~~ ...
- HotSpot 虚拟机对象揭秘【转载】
对象的创建 Java 对象的创建过程, ①类加载检查: 虚拟机遇到一条 new 指令时,首先将去检查这个指令的参数是否能在常量池中定位到这个类的符号引用,并且检查这个符号引用代表的类是否已被加载过.解 ...
- 转载--tomcat调优
转载 https://www.cnblogs.com/wangsen/p/9337969.html
- Visualforce控制器
Visualforce框架是遵循MVC结构的.Visualforce页面代表了"视图"部分,Salesforce的各种对象代表了"模型"部分,而Apex则代表了 ...
- JMeter—前置处理器(九)
参考<全栈性能测试修炼宝典JMeter实战>第六章 JMeter 元件详解中第四节前置处理器前置处理器用来处理请求前的一些准备工作,比如参数设置.环境变变量设置等 一.BeanShell ...
- 将 Azure VM 迁移到 Azure 中的托管磁盘
Azure 托管磁盘无需单独管理存储帐户,从而简化了存储管理. 还可以将现有的 Azure VM 迁移到托管磁盘,以便受益于可用性集中 VM 的更佳可靠性. 它可确保可用性集中不同 VM 的磁盘完全相 ...
- Fedora 29 查看 rpm 包 依赖性 以 libconfig 为例
查看依赖性方法:# rpmrepater会向用户显示已安装包的列表,你可以使用上/下箭头来滚动屏幕# 可以在指定包上使用"r"键来显示其依赖关系,循环在指定包上按下"r& ...
- owncloud 实现私有云进行多端文件同步
研究生生涯开始了,事情逐渐多了起来.都没时间写博客了... 开学实验室配了台电脑,我把主机装上了Fedora 作为我的服务器.平时有些实验室的材料,经常几个电脑一起看,使用U盘拷来拷去很是麻烦.今天重 ...
- IntelliJ IDEA 创建Spring项目
第一步:点击file --> new --> project... 第二步: 在左侧选择Spring, 然后勾选Spring , 最后点击Next 第三步 : 填写项目名称和项目地址,点击 ...
- 使用golang求出A-Z的所有子集
参考链接:https://blog.csdn.net/K346K346/article/details/80436430 有一个集合由A-Z这26个字母组成,打印这个集合的所有子集,每个子集一行,写C ...