一天搞定HTML----标签语义化04
根据页面里不同的内容，选择最适合它的标签，而不通篇只用一种标签
标签语义化作用：
代码演示
通过比较- - -H5布局和DIV+CSS 布局- - -体现标签语义化
注意：
标签语义化，不仅仅只是指使用特定含义的标签。因此不能完全否定DIV+CSS布局是没有语义化的，以前用的都是DIV+CSS布局，它是存在标签语义化的。
这里只是为了说明语义化，使用两者比较。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
标签语义化
根据页面里不同的内容，选择最适合它的标签，而不通篇只用一种标签
1、方便后期添加样式
2、提高代码的可读性
3、内容的可读性比较高
说明：按照DIV+CSS这种布局方式，通篇都是div，可读性不高，不方便修改代码
现行一般采用新增的H5标签，每个标签都有特定的含义，可读性大大提高。代码如下
-->
<!--H5布局方式：只要看到标签，我们就很容易得知这部分做的功能-->
<!--1.公共头部-->
<header>主要用于页面的头部，还可以放板块的头部</header>
<!--2.导航公用标签-->
<nav>用于制作导航导航</nav>
<!--3.主题板块-->
<section>页面中的版块，用来区分页面中的不同区域</section>
<!--4.文章板块-->
<article>文章</article>
<!--5.底部信息，一般是公司连接，版权申明，公司地址等等-->
<footer>页面底部</footer>
<!--6.补充的附属信息-->
<aside>附属信息</aside>
<!--时间-->
<time>用来放时间：2015年6月7日 13:31:30</time>
<!--DIV+CSS布局方式：通篇都是DIV，不容易得知是什么板块，做的什么功能-->
<div class="public_header">页面的头部</div>
<div class="public_nav">导航</div>
<div class="panel">主体</div>
<div class="article">文章</div>
<div class="footer">页面底部</div>
<div class="aside">附属信息</div>
</body>
</html>
一天搞定HTML----标签语义化04的更多相关文章
- 基础复习之HTML （doctype、标签语义化）
这段时间找实习看的眼花缭乱的,然后也被拒得落花流水,啊哈哈-还是写博客好玩儿-嘿嘿,下面正题 一.doctype 标准模式 (Full Standards Mode) 接近标准模式 (Almost S ...
- 标签语义化之常用HTML标签
一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...
- HTML标签语义化
标签语义化 Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可 ...
- 【转载】html标签语义化
Html语义化标签-语义化你的HTML标签和属性 1 语义化你的HTML标签和属性 1.1 <Hx> 1.2 <p> 1.3 <ul>.<ol>.& ...
- ASP.NET动态网站制作（5）-- 标签语义化及知识补充
前言:这节课主要是讲标签语义化及一些知识点的补充 内容:参考老师的博文:http://www.cnblogs.com/ruanmou/p/4821894.html
- 谈CSS布局中HTML标签语义化
很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这 ...
- web标签语义化的理解_web语义化是什么意思
web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...
- 灵魂代码分享HTML元素标签语义化及使用场景实用到爆
灵魂三问: 标签语义化是什么?为什么要标签语义化?标签语义化使用场景有哪些? 下面让我们跟着这三个问题来展开一下本文的内容. 一.标签语义化是什么? 标签语义化就是让元素标签做适当的事情.例如 p 标 ...
- HTML5--(1)兼容前缀+结构性标签+语义化标签
一.兼容前缀+兼容写法 兼容前缀 1.HTML5有部分类容兼容到IE9,IE8及以下完全不兼容的内容不再考虑. 2.部分内容需要加兼容前缀 a) -webkit- 兼容谷歌 b) -m ...
随机推荐
- 利刃 MVVMLight 7：命令深入
上面一篇我们大致了解了命令的基本使用方法和基础原理,但是实际在运用命令的时候会复杂的多,并且有各种各样的情况. 一.命令带参数的情况: 如果视图控件所绑定的命令想要传输参数,需要配置 CommandP ...
- 篇5 python自动化测试应用-Selenium环境篇
篇5 python自动化测试应用-Selenium环境篇 --lamecho 1.1概要 大家好!我是lamecho(辣么丑),从本篇开始我将开始 ...
- # Android动画笔记
标签: Android开发艺术探索笔记 View动画 帧动画 属性动画 View动画 View动画的作用对象时View,有4种动画效果,分别是平移动画.缩放动画.旋转动画.和透明度动画. 此类动画通常 ...
- CentOS 7安装Docker
在虚拟机CentOS 7上安装Docker ## 零:检查前提条件: 在Red Hat 和Red Hat系列的Linux发行版中,安装Docker所需的前提提交并不多. ### 1.内 ...
- JavaScriptCore全面解析 （下篇）
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 殷源,专注移动客户端开发,微软Imagine Cup中国区特等奖获得者,现就职于腾讯. 接JavaScript ...
- WOW.js轻松为网页添加动画切入效果
由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点 Y(^o^)Y~ . 今天就和大家 ...
- 如何在Linux实现自动运行程序
1.开机启动时 Linux加载后, 它将初始化硬件和设备驱动, 然后运行第一个进程init. init根据配置文件继续引导过程,启动其它进程.通常情况下,修改放置在 /etc/rc或 /etc/rc. ...
- mybatis mapper.xml 写关联查询 运用 resultmap 结果集中 用 association 关联其他表 并且 用 association 的 select 查询值 报错 java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for mybatis.map
用mybaits 写一个关联查询 查询商品表关联商品规格表,并查询规格表中的数量.价格等,为了sql重用性,利用 association 节点 查询 结果并赋值报错 商品表的mapper文件为Gooo ...
- 使用CSS和JQuery实现表格单元格内容超出时部分隐藏，隐藏部分以...显示
1.使用CSS实现,给此单元格添加一个Class: width:130px; display:block; overflow:hidden; word-break:keep-all; white-sp ...
- iOS 伐码猿真爱—「偷懒 || 效率 工具类」
自检 代码不会可以多敲几次,学习的重点是思想:-- 认同. BUT 如果你把自己会的.熟知的.可以说写的似流水的代码,不管是在工作 或是 自学习中你还是一点一点的敲出来,是不是有点...,copy & ...