移动端总结 新增页面标签
1新增结构标签:(我们以前布局页面经常用到的是div或者span等,但是这些没有语义化)2功能标签:3兼容IE低版本浏览器的办法(IE低版本把h5新增标签解析成了行元素)4兼容代码(html5shiv.min.js)
1新增结构标签:(我们以前布局页面经常用到的是div或者span等,但是这些没有语义化)
标签名 标签 案例 页面头部标签 header 页脚底部标签 footer 导航 nav 划分区域 section 主题内容块 article 侧边栏 aside
2功能标签:
标签名标签案例
标题组合hgrounp<hgrounp><h1></h1><h2></h2></hgrounp>进度条progress<progress min='0' max='100' value='30' progress>选项列表datalist<input type="text" name="" list="k" /><datalist id="k"> <option value="html">html</option> <optionvalue="css">css</option><option value="js">js</option>/datalist>定义对话框或窗口dialog<dialog open><dt>1问题</dt> <dd>1答案</dd><dt>2问题</dt><dd>2答案</dd></dialog>媒体标签figure媒体组合标签figcaption<figure><figcaption>标题</figcaption><p>标题内容</p></figure>标记标签mark
3兼容IE低版本浏览器的办法(IE低版本把h5新增标签解析成了行元素)
1手动创建:在js中创建h5新增标签,css中给h5标签添加display:block属性 举例:
<script type
="text/javascript">
var e
=("abbr,article,aside,audio,canvas,datalist,details,"+"figure,footer,header,hgroup,mark,menu,meter,nav,output,"+"progress,section,time,video").split(',');
for(var i
=0;i
<e
.length
;i
++) {
document
.createElement(e
[i
]);
}
</script
>
2网址链接:
<script src
="https://cdn.bootcss.com/html5shiv/3.7/html5shiv-printshiv.js"></script
>
<script src
="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script
>
3本地链接:
<script src
="js/html5shiv.js"></script
>
4兼容代码(html5shiv.min.js)
!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.2",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
)}(this,document
);