HTML5自定义语义元素

最新推荐文章于 2025-06-11 09:01:14 发布

韩湘

最新推荐文章于 2025-06-11 09:01:14 发布

阅读量581

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/qq_38228254/article/details/88071847

HTML 专栏收录该内容

12 篇文章

订阅专栏

这篇HTML5笔记介绍了HTML5中新增的8个语义元素，强调了它们在网页结构中的作用。此外，文章讨论了如何在旧版浏览器中添加新元素，并提到了shiv解决方案。还提及了HTML5的图形绘制能力，如canvas和内联SVG，以及其他的HTML5特性，如MathML、拖放功能、地理定位和输入类型。

HTML5笔记之一

本节的主要内容：HTML添加新的元素、shiv解决方案、HTML5添加的新元素

HTML的语义(semantic)元素

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是块级元素。

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

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

HTML中添加新的元素

所谓添加新的元素，实则通过修改元素定义样式，定义新的类。

<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
  
  <!--提示浏览器添加新的元素-->
<script>document.createElement("myHero")</script>
<style>
myHero {
	display: block;
	background-color: #ddd;
	text-align: center;
	padding: 50px;
	font-size: 30px;
} 
</style> 
</head>

<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>

<myHero>我的第一个新元素</myHero>

</body>
</html>

其中<style>中定义的部分即为新的元素。

shiv解决添加新元素

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

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