<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
main{
width: 1200px;
margin: 0 auto;
}
</style>
<body>
<!-- 第一部分 -->
<main>
<header> 头部块 </header>
<nav> nav一般存放导航栏 </nav>
<article> aside元素用来定义当前页面或则文章的附属信息部分，它可以包含与当前页面或者主要相关的引用，侧边栏，广告，导航条等其他类似的又被与主要内容的部分 </article>
<section> section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常有内容喝标签组成 </section>
<footer> 底部内容 </footer>
</main>
<!-- 第二部分 -->
<h2>可以编辑列表</h2>
<ul contenteditable="true">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<!-- 第三部分 -->
<details>
<summary>
<ul>
<li>列表元素</li>
<li>分组元素</li>
<li>页面元素</li>
<li>页面交互元素</li>
</ul>
</summary>
</details>
<details>
<summary>
理想
</summary>
<img src="img/yy.png" alt="">
<details>
<summary>
理想
</summary>
<img src="img/yy.png" alt="">
<details>
<summary>理想</summary>
<img src="img/yy.png" alt="">
</details>
</details>
</details>
<!-- 第四部分 -->
<h1>元素拖动属性</h1>
<p draggable="true">这些文字可以拖动</p>
<div draggable="draggable">
可以拖动的图片
<img src="img/yy.png" alt="">
</div>
<!--第五部分-->
<p>上海卢浦大桥</p>
<p>黄埔江上的卢浦大桥</p>
<img src="img/yy.png" alt="">
<figcaption>
Fig.1 - The Pulpit Rock, Norway.
</figcaption>
<!-- 第六部分 -->
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content</p>
<p>歌曲：<mark>Welcome</mark></p>
<p><cite>歌手：筷子兄弟</cite></p>
<!-- -->
<p>显示度量值</p>
<meter value="3" min="0" max="10">3/10</meter>
<meter>60%</meter>
<time>12:00</time>
<!-- 第七部分 -->
<nav>
<ul>
<li>
<a href="#">首页</a>
<a href="#">公司概况</a>
<a href="#">产品展示</a>
<a href="#">联系我们</a>
</li>
</ul>
</nav>
<!-- 第八部分 -->
<!-- 进度 -->
<progress value="88" max="100"></progress>
<!-- 第九部分 -->
<section>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949…</p>
</section>
<div>
spellcheck属性为true <br>
<textarea spellcheck="true"></textarea>
</div>
<div>
spellcheck属性为false <br>
<textarea spellcheck="false"></textarea>
</div>
</body>
</html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
