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！