1.1

语义标签对于我们并不陌生,如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备来理解HTML页面内容。

传统的做法,我们通过添加类名,Html页面具有语义化,但是不具有通用性。

Html5则是通过新增语义标签的形式来解决这个问题,例如<header></header>、<footer></footer>等,这样就可以使其具有通用性。

1.2常用的心语义标签

<nav> 表示导航

<header> 表示页眉

<footer> 表示页脚

<section> 表示区块

<article> 表示文章 如文章、评论、帖子、博客

<aside> 表示侧边栏 如文章的侧栏

<figure> 表示媒介内容分组

<mark> 表示标记

<progress> 表示进度

<time> 表示日期

......

本质上新语义标签与<div>、<span>没有区别,只是其具有表意性,使用时除了在HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成<div class="nav"> 相当于 <nav>。它只不过是一个标签!

但应尽量避免全局使用header、footer、aside等语义标签。

1.3兼容问题

由于HTML5新标签的并没有得到所有浏览器都支持,特别是IE9以下的低版本。在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题。

 <!--[if lte IE 8]>
<script src="./js/html5shiv.min.js"></script>
<![endif]-->

Html5 中的新语义标签的更多相关文章

  1. html5中hgroup和address标签使用总结

    html5中hgroup和address标签使用总结 一.总结 一句话总结: hgroup元素(不推荐使用):用来给标题分组,通常放在header中: address元素:斜体显示:用来说明作者的联系 ...

  2. HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  3. 认识HTML5中的新标签与新属性

    前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...

  4. HTML5 中的新特性:

    一,用于绘画的 canvas 元素,<canvas>标签替代Flash Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件.<canvas>标签 ...

  5. html5中的一些新语义标签

    <header> <nav> <ul> <li><a href="">栏目1</a></li> ...

  6. html5中新增的语义化的标签

    html5是html最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定.目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络 ...

  7. 让低版本IE支持Html5的新语义标签

    HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因为现在你也可以在IE上用到HTML5. ...

  8. HTML5 按字母顺序排列的标签列表 new : HTML5 中的新标签。

    标签 描述 <!--...--> 定义注释. <!DOCTYPE>  定义文档类型. <a> 定义超链接. <abbr> 定义缩写. <acron ...

  9. New : HTML5 中的新标签

    基础 标签 描述 <!DOCTYPE>  定义文档类型. <html> 定义 HTML 文档. <title> 定义文档的标题. <body> 定义文档 ...

随机推荐

  1. Django-Admin后台管理

    Rhel6.5 Django1.10 Python3.5 应用环境:Python+Virtualenv(Python Virtualenv运行Django环境配置) Django-Admin后台管理 ...

  2. KAOS模型

    问题描述: 我们开发了一种针对时序数据的文件格式TSFile,本身不支持sql查询.为了让公司分析人员能够用SQL进行分析,并且应用一些机器学习算法进行预测,需要设计并实现一个TSFile与Spark ...

  3. vmware 下centos7配置网络

    步骤一: 虚拟机中的网络设置配置为桥接模式: 步骤二: 注:本人配置的为非静态IP,ip为自动获取 vi /etc/sysconfig/network-scripts/ifcfg-eth0 配置内容如 ...

  4. UILabel 根据文本内容设置frame

    CGRect senderFrame = cell.senderLabel.frame;    CGRect creatAtFrame = cell.creatAtLabel.frame;    CG ...

  5. javascript学习笔记之array.sort

    arrayName.sort()方法: 功能是实现排序(按ascii编码或按数字大小),可无参或有参使用,无参时默认升序排列.有参时可实现升序或降序排列,参数必须是具有返回值的方法,当方法表达式大于0 ...

  6. Selenium通过WebDriver控制IE浏览器出错 Browser zoom level was set to 109%. It should be set to 100%

    错误信息: WebDriverException: Message: Unexpected error launching Internet Explorer. Browser zoom level ...

  7. Conditional project or library reference in Visual Studio

    Conditional project or library reference in Visual Studio In case you were wondering why you haven’t ...

  8. 关于 Dictionary<string,string>,和List<T>在View的使用

    在MVC中Dictionary<string,string>如何应用到View页面中呢,例: <input type="text" name=key value= ...

  9. java网络编程1

    Socket的构造方法包括: 1.Socket(),无参构造方法: 2.Socket(InetAddress address,int port) throws UnknownHostException ...

  10. Future和Promise

    Future用于获取异步操作的结果,而Promise则比较抽象,无法直接猜测出其功能. Future Future最早来源于JDK的java.util.concurrent.Future,它用于代表异 ...