iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >将HTML5元素定义为块元素的方法
  • 420
分享到

将HTML5元素定义为块元素的方法

2024-04-02 19:04:59 420人浏览 安东尼
摘要

本篇内容介绍了“将HTML5元素定义为块元素的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!将 HTM

本篇内容介绍了“将HTML5元素定义为块元素的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

将 HTML5元素定义为块元素

html5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级 元素。

为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:

实例

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

为 HTML 添加新元素

你可以为 HTML 添加新的元素。

该实例向 HTML 添加的新的元素,并为该元素定义样式,元素名为 :

实例

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>为 HTML 添加新元素</title><script>document.createElement("myHero")</script><style>myHero {
    display: block;    background-color: #DDD;    padding: 50px;    font-size: 30px;}</style> </head><body><h2>我的第一个标题</h2><p>我的第一个段落。</p><myHero>我的第一个新元素</myHero></body></html>

javascript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。

Internet Explorer 浏览器问题

你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素,但是:

Note Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。
我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:

<!--[if lt IE 9]>
  <script src="https://html5shiv.Googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。

注意:国内用户请使用本站静态资源库(Google 资源库在国内不稳定):

<!--[if lt IE 9]>
  <script src="Https://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。

完美的 Shiv 解决方案

实例

<!DOCTYPE html><html><head><meta charset="utf-8"><title>渲染 HTML5</title>
  <!--[if lt IE 9]>
  <script src="https://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]--></head> <body><h2>我的第一篇文章</h2><article>菜鸟教程 —— 学的不仅是技术,更是梦想!!!</article></body></html>

“将HTML5元素定义为块元素的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: 将HTML5元素定义为块元素的方法

本文链接: https://www.lsjlt.com/news/80922.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 将HTML5元素定义为块元素的方法
    本篇内容介绍了“将HTML5元素定义为块元素的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!将 HTM...
    99+
    2024-04-02
  • html5中块状元素如何转换为其他元素
    这篇“html5中块状元素如何转换为其他元素”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“...
    99+
    2024-04-02
  • css如何将内联元素转为块级元素
    这篇文章主要介绍了css如何将内联元素转为块级元素的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css如何将内联元素转为块级元素文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • css中如何将内联元素转换为块元素
    这篇文章跟大家分析一下“css中如何将内联元素转换为块元素”。内容详细易懂,对“css中如何将内联元素转换为块元素”感兴趣的朋友可以跟着小编的思路慢慢深入来阅读一下,希望阅读后能够对大家有所帮助。下面跟着小...
    99+
    2024-04-02
  • html5为何要用语义元素
    html5为何要用语义元素,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。html5使用语义元素可以:1、增加网站的可访问性,有助于创建更好的网...
    99+
    2024-04-02
  • css如何改行元素为块元素
    这篇文章主要为大家展示了“css如何改行元素为块元素”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css如何改行元素为块元素”这篇文章吧。 ...
    99+
    2024-04-02
  • HTML5行内元素和块级元素的简介与区别
    HTML5行内元素和块级元素简介及区别HTML5是一种用于创建网页结构的标记语言。在HTML5中,元素被分为两种类型:行内元素(inline elements)和块级元素(block elements)。行内元素简介:行内元素是指在文档流中...
    99+
    2023-12-28
    html 区别 简介 块级元素 行内元素
  • HTML5中语义性的块级元素有哪些
    这篇文章给大家分享的是有关HTML5中语义性的块级元素有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 HTML5还增加了一些纯语义性的块级元素...
    99+
    2024-04-02
  • css怎么把元素显示为块级元素
    这篇文章主要为大家展示了“css怎么把元素显示为块级元素”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css怎么把元素显示为块级元素”这篇文章吧。 <h...
    99+
    2024-04-02
  • HTML5中常见的内联元素和块级元素有哪些?
    HTML5中常见的行内元素和块级元素有哪些?HTML5是一种用于创建网页和Web应用程序的标记语言。在HTML5中,元素按其显示行为可以分为两类:行内元素和块级元素。行内元素指的是在一行内显示,并且只占据内容所需要的宽度,不会独占一行;而块...
    99+
    2023-12-28
    html 块级元素 行内元素
  • HTML5行内元素和块级元素特性的深入研究
    深入探究HTML5行内元素和块级元素的特性,需要具体代码示例HTML 是构建网页的基础语言,它提供了许多元素来定义和格式化网页的内容。在HTML中,元素可以分为两类:行内元素(inline elements)和块级元素(block elem...
    99+
    2023-12-28
    html 块级元素 行内元素
  • python定位元素的方法
    python中实现定位元素的方法有以下几种通过id定位元素drive.find_element_by_id('id_value')通过name定位元素drive.find_element_by_name()通过tag_name定位元素dri...
    99+
    2024-04-02
  • html5的img是不是块级元素
    这篇文章主要讲解了“html5的img是不是块级元素”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5的img是不是块级元素”吧! ...
    99+
    2024-04-02
  • html的块元素
    这篇文章主要介绍了html的块元素,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html的块元素有:1、“<address>...</adderss>...
    99+
    2023-06-14
  • HTML5实现元素拖拽的方法
    这篇文章将为大家详细讲解有关HTML5实现元素拖拽的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。先上示例:index.htmlXML/HTML Code复制内容到剪...
    99+
    2024-04-02
  • CSS行内元素和块级元素的居中的实现方法
    本篇内容介绍了“CSS行内元素和块级元素的居中的实现方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一....
    99+
    2024-04-02
  • html5中如何将元素隐藏
    这篇文章主要介绍html5中如何将元素隐藏,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! html5中将元素隐藏的语法是“<元素名 hidden=&...
    99+
    2024-04-02
  • HTML5语义化元素怎么用
    这篇文章主要介绍HTML5语义化元素怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!HTML5语义元素语义学是研究语言中单词和短语的含义。语义元素=具有意义的元素。 语义元素清楚...
    99+
    2024-04-02
  • css中行级元素和块级元素之间转换的方法
    这篇“css中行级元素和块级元素之间转换的方法”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“css中行级元素和块级元素之间转换的方法”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇...
    99+
    2023-06-06
  • HTML5行内元素和块级元素使用场景的快速指南
    快速了解HTML5行内元素和块级元素的使用场景,需要具体代码示例HTML5是网页开发的标准语言,通过HTML标记语言可以构建丰富多样的网页内容。在HTML5中,元素被分为两种类型:行内元素和块级元素。本文将快速介绍这两种元素类型的使用场景,...
    99+
    2023-12-28
    html 块级元素 行内元素
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作