在html5中,新增了几个语义化标签:<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>等。

1.什么是HTML语义化?

通过标签判断内容语义,例如根据h1标签判断出内容是标题,根据<p>判断内容是段落、<input>标签是输入框等。

2.为什么要语义化?

1).去掉或样式丢失的时候能让页面呈现清晰的结构

2).方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页

3).有利于SEO

4).便于团队开发和维护,遵循W3C标准,可以减少差异化

3.如何确定你的标签是否语义良好?

去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。

html5新增的语义化标签极其作用的更多相关文章

  1. Html5新增的语义化标签(部分)

    2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...

  2. HTML新增的语义化标签及其作用

    在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...

  3. HTML5学习之语义化标签(一)

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  4. HTML5学习之语义化标签

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  5. 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. HTML5常用的语义化标签

    快速查询 article | aside | nav | section | header | footer 架构预览 nav 定义导航链接的部分 在页脚显示一个站点的导航链接,如首页.服务信息页面. ...

  7. [HTML知识体系]语义化标签概论

    1.什么是语义化 语义化(Semantic)在HTML5中被大量提起,就是语义化标签向浏览器和开发者展示了它所包裹内容的类型与意思,可是至今我看了好多代码,HTML5新增的语义化标签的使用率还是挺低的 ...

  8. 第二季第十一天 html5语义化标签 css透明度

    span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...

  9. HTML5语义化标签重构页面

    在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...

随机推荐

  1. vue-cli3 clone项目后如何安装插件及依赖模块启动项目

    一. 前提条件1.确保使用的是Node 8.11.0+和NPM 3+:2.确保已全局安装vue-clie3:npm install -g @vue/cli: 二.安装依赖 1.在安装依赖之前,先安装官 ...

  2. paramiko的使用

    import paramiko import sys user = "root" pwd = " # 上传文件 def sftp_upload_file(server_p ...

  3. yii行为和过滤器

    行为是对类的功能进行了扩展,针对开闭原则,为了类的扩展而生,不去修改类原有的代码. yii的行为需要继承yii\base\Behavior,这就好比你要给人安装一个胳膊,这个胳膊得是人的,而不能是老虎 ...

  4. [Luogu] 让我们异或吧

    https://www.luogu.org/problemnew/show/P2420 异或满足 A ^ B = B ^ A A ^ A = 0 0 ^ A = A #include <cstd ...

  5. JavaWeb_(SpringMVC框架)SpringMVC&Spring&MyBatis整合

    JavaWeb_(SpringMVC框架)测试SpringMVC&Spring&MyBatis三大整合 传送门 1.整合ssm 3大框架 过程 a)导包 -> spring_Ja ...

  6. Pstools使用

    pstool的介绍 PsTools是Sysinternals Suite中一款排名靠前的一个安全管理工具套件.现在被微软收购.目前pstools中含有12款各式各样的小工具.如果将它们灵活的运用,将会 ...

  7. 【原创】FltGetFileNameInformation蓝屏分析

    FAULTING_IP: nt!SeCreateAccessStateEx+5b80564184 848788000000 test byte ptr [edi+88h],al TRAP_FRAME: ...

  8. Java中路径相关的获取方式

    [参考文章]:Java文件路径(getResource) [参考文章]:关于java:如何获取正在运行的JAR文件的路径? [参考文章]:关于Class.getResource和ClassLoader ...

  9. CISCO实验记录八:ACL访问控制

    1.使用ACL实现免ping #access-list 100 deny icmp 192.168.0.1 0.0.0.0 192.168.1.2 0.0.0.0 #access-list 100 p ...

  10. vmware压缩vmdk文件大小

    在搭建靶机环境的过程中总是遇见vmdk越来越大,导致上传时间变长.记一下压缩vmdk的方法 ;sync;rm -f zero.fill /usr/bin/vmware-toolbox-cmd disk ...