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

标签语义化作用：

代码演示

通过比较- - -H5布局和DIV+CSS 布局- - -体现标签语义化

注意：

  1. 标签语义化，不仅仅只是指使用特定含义的标签。因此不能完全否定DIV+CSS布局是没有语义化的，以前用的都是DIV+CSS布局，它是存在标签语义化的。
  2. 这里只是为了说明语义化，使用两者比较。
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!--
  9.             标签语义化
  10.                 根据页面里不同的内容，选择最适合它的标签，而不通篇只用一种标签
  12.                 1、方便后期添加样式
  13.                 2、提高代码的可读性
  14.                 3、内容的可读性比较高
  16.             说明：按照DIV+CSS这种布局方式，通篇都是div，可读性不高，不方便修改代码
  18.             现行一般采用新增的H5标签，每个标签都有特定的含义，可读性大大提高。代码如下
  19.         -->
  21.         <!--H5布局方式：只要看到标签，我们就很容易得知这部分做的功能-->
  22.         <!--1.公共头部-->
  23.         <header>主要用于页面的头部，还可以放板块的头部</header>
  24.         <!--2.导航公用标签-->
  25.         <nav>用于制作导航导航</nav>
  26.         <!--3.主题板块-->
  27.         <section>页面中的版块，用来区分页面中的不同区域</section>
  28.         <!--4.文章板块-->
  29.         <article>文章</article>
  30.         <!--5.底部信息，一般是公司连接，版权申明，公司地址等等-->
  31.         <footer>页面底部</footer>
  32.         <!--6.补充的附属信息-->
  33.         <aside>附属信息</aside>
  34.         <!--时间-->
  35.         <time>用来放时间：2015年6月7日 13:31:30</time>
  37.         <!--DIV+CSS布局方式：通篇都是DIV，不容易得知是什么板块，做的什么功能-->
  38.         <div class="public_header">页面的头部</div>
  39.         <div class="public_nav">导航</div>
  40.         <div class="panel">主体</div>
  41.         <div class="article">文章</div>
  42.         <div class="footer">页面底部</div>
  43.         <div class="aside">附属信息</div>
  44.     </body>
  45. </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. CF IndiaHacks 2016 F Paper task 后缀数组

    题目链接:http://codeforces.com/problemset/problem/653/F 大意是给出一个只包含'('和')'的括号串,求有多少不同的子串是合法的括号串 解法:对于每一个后 ...

  2. java线程控制方法

    一.中断线程 1.Thread.sleep()让线程进入睡眠状态,放弃CPU的占用暂停若干毫秒使用方法: public class runable implements Runnable { @Ove ...

  3. Web性能优化工具WebPageTest（三）——本地部署（Windows 7版本）

    这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本"WebPageTest 3.0". 1. agent:浏览器代理软件 2. mobile:移动端参数相关代码 3. w ...

  4. angular 实现自定义样式下拉菜单

    自己闲着没事写了一个自定义的下拉菜单希望和大家交流一下!望能和大神们成为朋友. 下面上代码: <!doctype html> <html lang="en" ng ...

  5. Centos 7 安装mysql后出现 ERROR 2002 (HY000)解决方案

    Centos 7 安装mysql后出现 ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib ...

  6. Mobile game analysis

    Let's take a look at a very popular mobile game "Garena 传说对决" . It would be very interesti ...

  7. 为RecyclerView的item之间设置相同的间距

    项目中经常碰到列表当中的每一项之间需要设置间距的问题,我们可以通过给列表中的每一项设置margin值来实现,例如纵向的间距可以给每一项设置right_margin,这种方法下,整个列表的最左边会紧贴屏 ...

  8. PHP怎么打开或者关闭文件？

    什么是文件处理? 文件处理包括读取,关闭,重写等.掌握文件的处理需要读者理清思路,掌握好文件处理的关键步骤和常用函数,那么就可以运用自如了!感兴趣的请移步php文件处理专题. 比如,访问一个文件需要 ...

  9. 随机Prim法创建随机迷宫（C#实现）

    因为这两天想参加一个比赛,所以就在上网找素材,刚好看到了迷宫生成,就决定拿这个开刀了. 参考的原文地址为(来源页面) 源地址中是使用AS实现的,没学过AS,所以直接不会运行,于是就自己根据原文的概念进 ...

  10. [ABP实战开源项目]--YoYoCms目录

    ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WE ...