根据页面里不同的内容，选择最适合它的标签，而不通篇只用一种标签

标签语义化作用：

代码演示

通过比较- - -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的更多相关文章

  1. 基础复习之HTML （doctype、标签语义化）

    这段时间找实习看的眼花缭乱的,然后也被拒得落花流水,啊哈哈-还是写博客好玩儿-嘿嘿,下面正题 一.doctype 标准模式 (Full Standards Mode) 接近标准模式 (Almost S ...

  2. 标签语义化之常用HTML标签

    一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...

  3. HTML标签语义化

    标签语义化 Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可 ...

  4. 【转载】html标签语义化

    Html语义化标签-语义化你的HTML标签和属性   1 语义化你的HTML标签和属性 1.1 <Hx> 1.2 <p> 1.3 <ul>.<ol>.& ...

  5. ASP.NET动态网站制作（5）-- 标签语义化及知识补充

    前言:这节课主要是讲标签语义化及一些知识点的补充 内容:参考老师的博文:http://www.cnblogs.com/ruanmou/p/4821894.html

  6. 谈CSS布局中HTML标签语义化

    很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这 ...

  7. web标签语义化的理解_web语义化是什么意思

    web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...

  8. 灵魂代码分享HTML元素标签语义化及使用场景实用到爆

    灵魂三问: 标签语义化是什么?为什么要标签语义化?标签语义化使用场景有哪些? 下面让我们跟着这三个问题来展开一下本文的内容. 一.标签语义化是什么? 标签语义化就是让元素标签做适当的事情.例如 p 标 ...

  9. HTML5--(1)兼容前缀+结构性标签+语义化标签

    一.兼容前缀+兼容写法 兼容前缀 1.HTML5有部分类容兼容到IE9,IE8及以下完全不兼容的内容不再考虑. 2.部分内容需要加兼容前缀 a)     -webkit- 兼容谷歌 b)     -m ...

随机推荐

  1. 第六章 Hibernate关联映射

    第六章 hibernate关联映射一.本章知识点分为2部分:1.关联关系:单向多对一关联关系,双向一对多关联关系(含一对多关联关系),多对多关联关系2.延迟加载:类级别加载策略,一对多加载策略,多对一 ...

  2. spring mvc中，直接注入的HttpServletRequst是否安全呢?

    看似很简单的一个问题,借此追踪下spring的源码处理 在写springMVC的Control中有很多这种代码, 如需要获取request对象去做某些事情 如: @Controller @Reques ...

  3. JS取消浏览器文本选中的方法

    一 .问题的出现 今天在使用Easy-UI 的messager.alert()方法时候出现浏览器文本被选中,不知道其中是什么原因,如下图所示. 二 .解决思路 我最后的思路时在弹出消息框的同时,取消浏 ...

  4. Linux - 函数的栈帧

    栈帧(stack frame),机器用栈来传递过程参数,存储返回信息,保存寄存器用于以后恢复,以及本地存储.为单个过程(函数调用)分配的那部分栈称为栈帧.栈帧其实是两个指针寄存器, 寄存器%ebp为帧 ...

  5. Java 中的接口有什么作用？好处？

    接口的作用就是把使用接口的人和实现接口的人分开,实现接口的人不必要关心谁去使用,而使用接口的人也不用关心谁实现的接口,由接口将他们联系在一起. 很多JAVA初级程序员对于接口存在的意义很疑惑.不知道接 ...

  6. Oracle修改监听端口号1521[转]

    在oracle中,默认的监听端口号为1521,一旦有人扫描出这个端口号就会知道此服务器为oracle数据库服务器,存在极其大的安全隐患,在这里,教大家如何修改oracle默认端口号为9999: 1.查 ...

  7. AOJ/搜索递归分治法习题集

    ALDS1_4_A-LinearSearch. Description: You are given a sequence of n integers S and a sequence of diff ...

  8. [Git]07 如何在提交过程中忽略某些文件

     一般我们总会有些文件无需纳入 Git 的管理,也不希望它们总出现在未跟踪文件列表.通常都是些自动生成的文件,比如日志文件,或者编译过程中创建的临时文件等.我们可以创建一个名为 .gitignor ...

  9. 全易通人事考勤工资验厂管理系统软件创建连接SQL2000数据库的操作方法和说明

    全易通人事考勤工资验厂管理系统软件创建连接SQL2000数据库的操作方法和说明.全易通人事考勤工资验厂管理系统软件,有2种数据库,一个是ACCESS,另一个是SQL.不过由于ACCESS数据库比较小, ...

  10. IOS安装CocoaPods详情过程

    一.简介 什么是CocoaPods CocoaPods是OS X和iOS下的一个第三类库管理工具,通过CocoaPods工具我们可以为项目添加被称为“Pods”的依赖库(这些类库必须是CocoaPod ...