各位小伙伴
上一個頁面寫的如何
是不是覺得自己棒棒噠~
接下來我們繼續(xù)吧芳悲！
HTML5 的特殊標(biāo)簽
直接進入正題
注釋標(biāo)簽
ruby: ?
行級元素 橫排顯示 ? 試圖寫多個漢字和注釋，需要多個ruby虚婿。
直接上代碼：
-
css樣式：
頁面效果：
重點標(biāo)記
mark: ?
以灰常黃的黃色來重點標(biāo)記
頁面代碼：
類似于進度條的標(biāo)簽
meter：?
meter標(biāo)簽有以下的屬性：
min：類進度條的最小值
max：最大值
value：實際的值
頁面代碼：
設(shè)置meter的長與寬：
評判標(biāo)準(zhǔn)：
low: 低于 low 是另一種顏色顯示（殘血了赋兵，快跑）
optimum：狀態(tài)良好（狀態(tài)良好，可以開團）
high: 狀態(tài)完美（我將帶頭沖鋒）
也就是說躲胳，在 low 和 high 之間都是綠色的婶芭，在 low 以下或者 high 以上就黃了。
正宗的進度條
progress:?
如果我們不設(shè)置value屬性楞艾，頁面就是這樣的效果：
details:?
和 dl 定義列表類似参咙，也和我們的下拉列表類似，但是硫眯，顯示的方式不一樣用于描述細(xì)節(jié) ?summary 標(biāo)題（要描述的對象） 后面接上你要描述的內(nèi)容
IE瀏覽器的兼容問題
除了上面提到的常用的標(biāo)簽昂勒，在使用 HTML5 標(biāo)簽的時候，還要注意瀏覽器的兼容問題舟铜。像 IE 瀏覽器有部分內(nèi)容兼容到 IE9戈盈，IE8 及以下對 H5 完全不兼容。最新版本的 Safari谆刨、Chrome塘娶、Firefox 以及 Opera 支持某些 HTML5 特性。?
瀏覽器的兼容測試
我們可以看到這個頁面痊夭，當(dāng)選擇 IE8 的時候完全沒有效果了刁岸。那么怎么解決0這個問題
解決辦法
最簡單的處理方法引入寫好的 js 代碼！這個代碼大家搜一下她我，就可以搜到哦虹曙！這段代碼的意思是：如果瀏覽器的版本小于 IE9 就引入這段 js。
看這下即使是 IE8 頁面也是有效果的~
另一種方法番舆，就厲害了酝碳，自己來寫一段 js 代碼，就可以了恨狈。
我偷個懶就不寫了
最后一步疏哗，關(guān)門放碼
Title
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
a{text-decoration:none;color: inherit;}
img{display: block;border:none;}
ol,ul{list-style:none;}
.clearfix:after{
content:"";
display: block;
clear: both;
}
.main{
width:1200px;
margin:40pxauto;
box-shadow:0010px0#000;
background: skyblue;
}
.mainsection{
width:400px;
margin:20pxauto;
box-shadow:0010px0#000;
text-align: center;
background: blueviolet;
}
section.rubyruby{
color:mediumblue;
font:bold20px/30px"";
}
section.metermeter,section.progressprogress{
height:30px;
width:400px;
}
section.details{
text-align:left;
}
那么今天就先到這了
小伙伴們再見
學(xué)習(xí)Java的同學(xué)注意了！：痰 返奉！學(xué)習(xí)過程中遇到什么問題或者想獲取學(xué)習(xí)資源的話，歡迎加入Java學(xué)習(xí)交流群：253772578吗氏，我們一起學(xué)Java芽偏！
