面試總結（2）:H5新標籤的相容寫法
阿新 • • 發佈：2019-02-11
前段時間面試。。被問到了H5新標籤的相容寫法。。一臉懵逼。。現在做個筆記。。避免下次被問到同樣的問題！！
方法一：
自己建立標籤。。把H5新標籤創建出來。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>測試H5新標籤相容性</title> <script> document.createElement(‘header‘); document.createElement(‘footer‘);</script> <style> header, footer{display: block; width:50px; height: 50px; background-color: #f00; display:block;} </style> </head> <body> <header id="header">header</header> <footer id="footer">footer</footer> </body> </html>創建出來的元素是內聯元素，所以要在樣式檔案裡面寫上‘display:block;’
方法二：
引用js庫 - - - html5shiv.js
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>測試H5新標籤相容性</title> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> </head> <body> <header id="header">header</header> <footer id="footer">footer</footer> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $('#header').css('color','#f00'); $('#footer').css({'width':'100px','height':'100px', 'border':'1px solid #ddd', 'backgroundColor':'#f00'}); $('#header').html('我是一隻小小鳥'); </script> </body> </html>
面試總結第二彈完成~~ 撒花 O(∩_∩)O~~