1.常用的语义标签

  • 意义：语义标签便于阅读代码，也便于搜索引擎解析文档结构与内容
标签 含义
article 定义页面独立的内容区域
aside 定义侧边栏内容
header 定义了文档的头部区域
section 定义文档中的区块
nav 定义文档中的区块
footer 定义 section 或 document 的页脚

2.兼容性

  • IE8及IE8以下版本中，无法识别新标签，需要执行相关代码
  • 解决办法就是：在页面渲染前，用js创建这些标签元素，再为其设置css样式
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

        <script>

            document.createElement('header');

            document.createElement('footer');

            document.createElement('article');

            document.createElement('aside');

            document.createElement('section');

            document.createElement('nav');

        </script>

    </head>

    <body>

        <header>我是header</header>

        <footer>我是footer</footer>

        <article>我是article</article>

        <aside>我是aside</aside>

        <section>我是section</section>

        <nav>我是nav</nav>

    </body>

</html>

这样ie8就可以正常识别新的语义标签了，但是默认渲染为行内元素，需要再为其设置css样式为块级元素

<style>

    article,aside,header,section,nav,footer{

        display:block;

    }

</style>

3.第三方插件 html5shiv.js

  • 由来：H5那么多的新标签，如果每个都要通过这种方法去生产的话，是不是太麻烦了呢
  • 解决办法：直接借用前辈大牛封装好的js库 --- html5shiv.js
  • 使用方法：直接引入标签即可（js代码必须在Dom渲染之前运行！！！）
<head>

    <meta charset="UTF-8">

    <title>Test</title>

    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>

</head>

4.自定义标签

  • 在高级浏览器中，默认能识别自定义标签，只是默认将其渲染为行内元素。
  • 可以自己给这些自定义标签设置css属性
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

        <style>

            yyy{

                display: block;

            }

        </style>

    </head>

    <body>

        <xxx>我是xxx标签的文本</xxx>

        <xxx>我是xxx标签的文本</xxx>

        <yyy>我是yyy标签的文本</yyy>

        <yyy>我是yyy标签的文本</yyy>

    </body>

    <script>

        // 获取第2个xxx标签

        var xxx = document.getElementsByTagName("xxx")[1]

        // 尝试操作样式

        xxx.style.color = "red"

    </script>

</html>

渲染结果：

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

  1. HTML5中的语义标签兼容IE8以及更低版本的浏览器

    看某教程,说让HTML5的这些语义标签能够兼容低版本的浏览器,原文是“你可以设置css的display属性为block”.很好理解,就设置css样式为block嘛,那就直接设置咯: header, s ...

  2. HTML5新增的语义标签和IE版本低的兼容性问题

    <!DOCTYPE html><html> <head> <!-- HTML5中浏览器兼容(较低版本的IE浏览器不支持H5的布局):需要在<head&g ...

  3. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  4. 第二季第八天 HTML5新特性

    在函数内部window.a =  a  在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...

  5. 前端进阶系列(三):HTML5新特性

    HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...

  6. Html5 中的新语义标签

    1.1 语义标签对于我们并不陌生,如<p>表示一个段落.<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更 ...

  7. HTML5 十大新特性(一)——语义标签

    说语义标签前先来理解下什么叫语义化,当下html是靠div+css来铸造页面的整体框架和结构的,通篇大量的div可读性极低,因此诞生了这些特殊的标签,简单地说就是见名知义,使页面更清晰,方便维护和开发 ...

  8. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  9. 让IE6,7,8支持HTML5新标签的方法

    很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...

  10. HTML5学习之语义化标签（一）

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

随机推荐

  1. MaterialDesignInXamlToolkit 5.0 发布

    5.0.0 发布 这是一个重大版本更新,又许多破坏性变化 升级到5.0.0版本,请参考:https://www.cnblogs.com/sesametech-dotnet/p/18028565 变化 ...

  2. async/await和Grand Central Dispatch代码切换

    很多iOS开发开始学习结构化并发时已经用过了很多年Grand Central Dispatch,虽然从思想上二者区别很大,但是利用熟悉的东西去理解新的事物有助于提升学习理解的效率,接下来是这Grand ...

  3. 智慧医院IT运维方案，全局网络态势感知

    随着医疗卫生体制改革不断深化,卫生行业信息化应用不断普及,大数据.AI.医疗物联网等技术的应用,快速推动"智慧医院"建设.以HIS(医院信息系统).EMRS(电子病历系统).PAC ...

  4. 墨天轮专访TDengine陶建辉：坚持做难而正确的事，三次创业成就不悔人生

    导读: 时序数据库(Time Series Database)在最近几年被越来越多的用户接受并使用,并有广泛的应用场景.云原生时序数据库 TDengine 一直稳居墨天轮时序数据库榜首,其近期的海外发 ...

  5. k8s的pod的理解

    pod共享相同的IP地址和端口空间. 这意味着在同一 pod中的容器运行的 多个进程需要注意不能绑定到相同的端口号, 否则会导致端口冲突, 但这只涉及同一pod中的容器. 由于每个pod都有独立的端口 ...

  6. 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-2-环境准备与搭建-基于Maven（详细教程）

    1.简介 上一篇宏哥已经讲解和分享了如何通过引入jar包来搭建Java+Playwright自动化测试环境,这一种是比较老的方法,说白了就是过时的老古董,但是我们必须了解和知道,其实maven搭建无非 ...

  7. KubeSphere 3.3.2 版本正式发布！

    距离上一个版本 v3.3.1 发布,已经过了 3 个多月,今天我们很高兴宣布 KubeSphere v3.3.2 正式发布! 此版本由 68 位贡献者参与代码提交,感谢各位贡献者对 KubeSpher ...

  8. nginx配置高可用的集群

    上图: (1)需要两台 nginx 服务器 (2)需要 keepalived (3)需要虚拟 ip 准备工作 配置高可用的准备工作 (1)需要两台服务器,两个Linux虚拟机即可,这里是 192.16 ...

  9. TOYOTA SYSTEMS Programming Contest 2024（AtCoder Beginner Contest 377) 补题记录（A-E)

    AtCoder Beginner Contest 377 A - Rearranging ABC 字符串有ABC三个字母即可. #include<bits/stdc++.h> using ...

  10. Problem K. Master of Sequence（二分）

    Problem K. Master of Sequence(二分) 补补题,人太菜了,一个题解看了两个小时才看明白(当然也可能是比赛的时候这个题完全不知道怎么下手qwq) 题目链接:http://ac ...