移动端总结 新增页面标签

    科技2022-07-21  107

    移动端总结 新增页面标签

    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)

    /** * @preserve HTML5 Shiv 3.7.2 | @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.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);
    Processed: 0.010, SQL: 8