HTML 5-ページ要素の強化
27115 ワード
1、figure要素
1つのfigure要素には1つのfigcaptionタイトルしか含まれませんが、複数の他の要素を含めることができます.
2、detailsとsummary要素
summaryをクリックすると、p要素の内容が表示または非表示になります.
3、mark元素
markのテキストをハイライトします.
4、progress要素
完了度が不明なタスクの進捗状況を表し、完了状況を数値で表すことができます.progressのvalueプロパティを設定することで、進捗バーの状態を変更できます.
util.js
5、meter元素
所定の空間の使用量.現在値value、最小/最大min/max、高値/低値high/low、および適切な値optimumがあります.valueがlow/highより低いか大きい場合、meterのスタイルには警告スタイルが表示され、他の場合は柔らかいスタイルが表示されます.
6、ol、dl、cite、small元素
startはシーケンス番号の開始数を表し、reversedは逆シーケンスを表す.再定義されたdl要素は、複数の名前のリスト項目を表します.
cite要素は作品のタイトルを表す.small要素は、小文字印刷体を表す.
1つのfigure要素には1つのfigcaptionタイトルしか含まれませんが、複数の他の要素を含めることができます.
2、detailsとsummary要素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>details</title>
</head>
<body>
<details id="details">
<summary> 7</summary>
<p id="p"> ？</p>
</details>
</body>
</html>
summaryをクリックすると、p要素の内容が表示または非表示になります.
3、mark元素
markのテキストをハイライトします.
4、progress要素
完了度が不明なタスクの進捗状況を表し、完了状況を数値で表すことができます.progressのvalueプロパティを設定することで、進捗バーの状態を変更できます.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>progress</title>
<script src="util.js"></script>
</head>
<body>
<section>
<h2>progress </h2>
<p> <progress id="p" max="100" value="0"></progress><span>0</span>%</p>
<input type="button" onclick="btn();" value=" ">
</section>
</body>
</html>
util.js
function btn(){
var i = 0;
function thred_one(params) {
if(i<100){
i++;
updateprogress(i);
}
}
setInterval(thred_one,100);
}
function updateprogress(newValue){
var progressBar = document.getElementById("p");
progressBar.value = newValue;
document.getElementsByTagName("span")[0].textContent = newValue;
}
5、meter元素
所定の空間の使用量.現在値value、最小/最大min/max、高値/低値high/low、および適切な値optimumがあります.valueがlow/highより低いか大きい場合、meterのスタイルには警告スタイルが表示され、他の場合は柔らかいスタイルが表示されます.
6、ol、dl、cite、small元素
<ol start="5" reversed>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
</ol>
startはシーケンス番号の開始数を表し、reversedは逆シーケンスを表す.再定義されたdl要素は、複数の名前のリスト項目を表します.
cite要素は作品のタイトルを表す.small要素は、小文字印刷体を表す.