html5標籤

時間 2019-11-17

標籤 html5 html 標籤欄目 HTML5 简体版

原文原文鏈接

1.語義化標籤（此類標籤就樣式說能夠經過div+css代替，可是它主要是爲了語義化而誕生）
css

<article>定義文章。html

<aside>定義頁面內容以外的內容。前端

<figure>定義媒介內容的分組，以及它們的標題。html5

<footer>定義 section 或 page 的頁腳。web

<header>定義 section 或 page 的頁眉。app

<mark>定義有記號的文本。ide

<nav>定義導航連接。動畫

<section>定義文章板塊。this

<time>定義日期/時間。spa

關係是這樣的：

<body>

</section> </article> </main>

</body>

body裏面有header（頭）、footer（尾）、main（主要內容）和nav（導航）

而後main裏面有article（文章）

而後article裏面分section（板塊）

板塊裏面能夠有mark和time

aside是不屬於頁面的內容，因此位於main以外

下面舉一個例子：

<!DOCTYPE html>
<html>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

header,nav,article,footer,article,aside {
	border: 1px solid grey;
	padding: 10px;
}
</style>
<body>

	<header>
		header start:<br />
		<base href="http://www.w3school.com.cn/"></base>
		header end!

	</header>

	<nav>
		nav start:<br /> <a href="index.asp">Home</a> <a
			href="html5_meter.asp">Previous</a> <a href="html5_noscript.asp">Next</a><br />
		nav end!
	</nav>
	<main>
	<article>
		article1:<br />
		<section>
			<time>9:00</time>
			<br />
			<mark>The People's Republic of China was born in 1949...</mark>
		</section>
	</article>
	<article>
		article2:<br />
		<section>
			<figure>
				<p>黃浦江上的的盧浦大橋</p>
				<p>拍攝者：W3School 項目組，拍攝時間：2010 年 10 月</p>
				<img src="i/shanghai_lupu_bridge.jpg" width="350" height="234" />
			</figure>
		</section>
	</article>
	</main>
	<aside>
		<b><large>aside標籤：定義頁面內容以外的內容。</large>
		</b><br /> aside start:<br /> The Epcot Center is a theme park in Disney
		World, Florida. aside end!
	</aside>

	<footer>
		footer start:
		<p>Posted by: W3School</p>
		<p>
			Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.
		</p>
		footer end!
	</footer>
</body>
</html>

2.HTML <datalist> 標籤

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

這就是前端組件dropdownlist，或者是可輸入的combobox，頗有用的組件！

3.HTML <details> 標籤

<!DOCTYPE HTML>
<html>
<body>

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

</body>
</html>

能夠伸縮的div塊，也是頗有用的，html5的改進讓人很興奮！

4.HTML <dialog> 標籤

<dialog open>這是打開的對話窗口</dialog>

<script>
function myFunction()
{
var x = document.createElement("DIALOG");
var t = document.createTextNode("This is an open dialog window");
x.setAttribute("open", "open");
x.appendChild(t);
document.body.appendChild(x);
}
</script>

能夠用如上代碼控制打開一個dialog，而dialog內容能夠是任意的標籤

5.HTML <embed> 標籤

6.HTML <mark> 標籤

<p>Do not forget to buy <mark>milk</mark> today.</p>

至關因而加了文字背景

7.HTML <meter> 標籤

<!DOCTYPE html>
<html>
<body>

<p>顯示度量值：</p>
<meter value="41" min="0" max="100"></meter><br>
<meter value="0.75">60%</meter>

<p><b>註釋：</b>Internet Explorer 不支持 meter 標籤。</p>

</body>
</html>

8.HTML <nav> 標籤

這個標籤其實用div代替也是能夠的，可是比div更具備語義化，表示導航

<!DOCTYPE HTML>
<html>
<body>

<nav>
<a href="/html/index.asp">Home</a>
<a href="/html/html_intro.asp">Previous</a>
<a href="/html/html_elements.asp">Next</a>
</nav>

</body>
</html>

9.HTML <progress> 標籤

<!DOCTYPE html>
<html>
<body>

下載進度：
<progress value="22" max="100">
</progress>
<progress>

<p><b>註釋：</b>Internet Explorer 9 以及更早的版本不支持 progress 標籤。</p>

</body>
</html>

進度條，perfect！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。