【html5】02-语义标签

作者：Monodyee | 2024-05-21 04:21:09

踩

【html5】02-语义标签

1 引言

语义标签在用法上面与div标签没有区别，但是比div标签没多了层语义性！！

低版本的浏览器不支持语义标签，即语义标签失效

2 语义标签


 
<body>
 
	<!-- <div class="nav"></div>
	 <div class="header"></div>
	 <div class="abc"></div> -->
 
	<nav>用来表示导航区域的</nav>
	<header>头部区域（页眉）</header>
	<footer></footer>
	<nav></nav> ==> <div class="bac"></div>
	<header></header>
	<div class="header"></div>
	<div>没有语义的标签</div>
	<nav>有语义的标签</nav>
 
</body>

3 语义标签的兼容性

1在低版本浏览器中，nav标签它见过，认为是用户自定义标签


<head>
	<meta charset="UTF-8">
	<title>Document</title>
 
	<style type="text/css">
		nav {
			height: 200px;
			background-color: red;
		}
 
		div {
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
 
	<nav>这是导航区域: 体现语义性</nav>
 
	<div>这也是导航区域： 没有任何语义</div>
</body>

4 语义标签的兼容性解决方案

方案一：自定义语义标签


<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		nav {
			height: 200px;
			background-color: red;
			/* 将元素转化为块级元素 */
			display: block;
		}
 
	</style>
 
	<script type="text/javascript">
		//第一种解决方案
		 document.createElement("nav");
	</script>
	
 
</head>
 
<body>
	<nav>自定义的标签</nav>
</body>

方案二：引入JS插件


 
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
 
		header {
			height: 200px;
			background-color: orange;
		}
	</style>
 
	<!-- //第二种解决方案： 通过js插件 -->
	<script type="text/javascript" src="html5shiv.min.js"></script> 
 
 
 
</head>
 
<body>
	
	<header></header>
</body>

js插件内容html5shiv.min.js

本质上也是为我们创建元素


/**
* @preserve HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
!function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(t,b.frag)}function j(a){a||(a=b);var d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var k,l,m="3.7.3",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q="_html5shiv",r=0,s={};!function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",k="hidden"in a,l=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b),"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:this,document);

方案三：优化方案2

只有当ie浏览器版本小于8时，才生效
[if lte IE 8]>
	<script type="text/javascript" src="html5shiv.min.js"></script>
<![endif]

5 多媒体标签及属性介绍

☞ <video></video> 视频

☞ <audio></audio> 音频

       属性：controls 显示控制栏

       属性：autoplay 自动播放

         属性：loop 设置循环播放

	<video src="code/trailer.mp4" controls autoplay loop></video>

官方文档：http://www.w3school.com.cn/html5/html_5_video.asp

☞ 多媒体标签在网页中的兼容效果方式

       <video>

              <source src="trailer.mp4">

              <source src="trailer.ogg">

              <source src="trailer.WebM">

       </video>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/600805?site