从 html 诞生至今,我们构建 html 页面的使用 html 元素好像并没有太多的进步。在构建 html 页面中,用的最多的是 div 标签。但是应用 div 标签构建 html 页面有一个问题,那就是在查看别人的源代码的时候 ,并不能一下子知道 哪个 div 是表示啥的,需要在样式文件之间来回跳动,才能解决这个问题。

 html5 引入了一堆新的标签,来解决了 div 标签并不能很好的表达标签的语义的问题。

要想网页的结构更清晰,需要使用 html5 中的语义元素。这些语义元素会为他们标注的内容赋予额外的含义。

 比如 <time> 标签 就是用来标注时间:

<p> 我在 <time> 2015.11.20</time> 加入这个公司</p>

  那么为啥要使用 html5 的语义化元素呢,主要是因为它有以下的优点:

  • 1. seo 优化:像诸如 google 这样的大的搜索引擎,会使用搜索引擎机器人爬取你的网页,然后将你的网页信息存储在他们的数据库中。如果你的网页能够更好的让搜索引擎理解,那么你的网页和用户输入相匹配的概率会更高,那么你的网页在搜索结果中呈现的可能性更高。目前,搜索引擎已经开始检查一些 html5 元素了,这样可以搜集到他们想要的也面对更多的信息。
  • 2. 易于维护和修改。解读传统网页的页面结构的时候,需要不断去看样式表,以了解页面的布局和不同区块儿的重要程度。但是通过 html5 语义标签,就能够直接的传达出额外的结构信息。
  • 等.....

html5 构造网页的新方式的更多相关文章

  1. ↗☻【HTML5秘籍 #BOOK#】第2章 构造网页的新方式

    div division 分区article 表示一个完整的.自成一体的内容块,比如博文文章或新闻报道hgroup 标注副标题 从结构上讲,它只关注顶级标题(也就是这里的h1).其他标题也会显示在浏览 ...

  2. 32+激发灵感的HTML5/CSS3网页设计教程

      HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...

  3. HTML5的十大新特性

    为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者 ...

  4. 异步编程新方式async/await

    一.前言 实际上对async/await并不是很陌生,早在阮大大的ES6教程里面就接触到了,但是一直处于理解并不熟练使用的状态,于是决定重新学习并且总结一下,写了这篇博文.如果文中有错误的地方还请各位 ...

  5. 【重构前端知识体系之HTML】HTML5给网页音频带来的变化

    [重构前端知识体系之HTML]HTML5给网页音频带来的变化 引言 音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件.然而现在,估计一些年轻的开发者都不 ...

  6. 15个前卫的 HTML5 & CSS3 网页设计作品

    今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...

  7. 通过xib加载UITableViewCell的新方式

    我们以前通常会这样做 - (UITableViewCell  *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPa ...

  8. Visual Studio 2012 应用软件开发新方式

    微软正式发布Visual Studio 2012 应用软件开发新方式 2012-09-13 09:54 51CTO.com 我要评论(0) 字号:T | T “现在,开发者将有更好的机会开发与云服务连 ...

  9. 思路 一般创建展示类时候 例如page类 会在网页上新增多个对应字段的隐藏域 用于存储值

    思路 一般创建展示类时候 例如page类 会在网页上新增多个对应字段的隐藏域 用于存储值

随机推荐

  1. python web调用docker-py

    在 /etc/init.d/docker的start()函数末尾加入:chmod 777 /var/run/docker.sock 否则web程序会没有权限去操作  

  2. springcloud微服务实战:Eureka+Zuul+Feign/Ribbon+Hystrix Turbine+SpringConfig+sleuth+zipkin

    相信现在已经有很多小伙伴已经或者准备使用springcloud微服务了,接下来为大家搭建一个微服务框架,后期可以自己进行扩展.会提供一个小案例: 服务提供者和服务消费者 ,消费者会调用提供者的服务,新 ...

  3. UVA11248_Frequency Hopping

    给一个有向网络,求其1,n两点的最大流量是否不小于C,如果小于,是否可以通过修改一条边的容量使得最大流量不小于C? 首先对于给定的网络,我们可以先跑一遍最大流,然后先看流量是否大于C. 然后保存跑完第 ...

  4. 题解 P2026 【求一次函数解析式】

    高中方式轻松解决这个模拟题. 首先我们了解斜率的简单求法: \[k= {y2-y1 \over x2-x1}{=}{\Delta y \over \Delta x}\] 然后我们了解到让我们求解一次函 ...

  5. Discrete Square Roots UVALive - 4270(拓展欧几里得)

    a≡b(mod n)的含义是“a和b除以n的余数相同”,其充要条件是“a-b是n的整数倍”: 求所有满足条件r^2=x(mod m)的r 题目已经给定了一个初始的r,x,m #include < ...

  6. 洛谷 P3942 将军令 解题报告

    P3942 将军令 题目描述 又想起了四月. 如果不是省选,大家大概不会这么轻易地分道扬镳吧? 只见一个又一个昔日的队友离开了机房. 凭君莫话封侯事,一将功成万骨枯. 梦里,小\(F\)成了一个给将军 ...

  7. MyBatis.2剖析

    上次给大家介绍了一下properties 和 environments 的配置, 接下来就正式开始看源码了: 上次例子中,我们以 SqlSessionFactoryBuilder 去创建 SqlSes ...

  8. Codeforces Educational Round 57

    这场出题人好像特别喜欢998244353,每个题里都放一个 A.Find Divisible 考察选手对输入输出的掌握 输出l 2*l即可(为啥你要放这个题,凑字数吗 #include<cstd ...

  9. 【贪心】【CF1061D】 TV Shows

    Description 给定 \(n\) 个电视节目和两个参数 \(x,y\).你想要看全部的电视节目,但是同一个电视机同一个时刻只能播放一个电视节目,所以你只能多租赁电视机.在时间 \([l,r]\ ...

  10. salt源码安装

    salt是什么? 一种全新的基础设施管理方式,部署轻松,在几分钟内可运行起来,扩展性好,很容易管理上万台服务器,速度够快,服务器之间秒级通讯. salt底层采用动态的连接总线, 使其可以用于编配, 远 ...