HTML5--新增的非主体结构元素
程序员文章站
2022-05-11 10:54:19
...
header元素
通常用来放置整个页面或也页面内的一个内容区块的标题，也可以包含其他内容（数据表格、搜索表单、logo图片等）。
<html>
<head>
<title>
header demo
</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<img src="E:\照片\logo.jpg" style="width: 30px;height: 30px;;">
我是标题！
</header>
</body>
</html>
footer元素
页面或页面内一个内容区块的底部，一般承载作者姓名，版权信息等。
<html>
<head>
<title>
footer demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--footer：区域底部，一般承载作者姓名，版权信息等-->
<footer>
<small>作者：废废_siri</small>
<small>Posted by:jianshu</small>
<small>© www.mmp.com 京ICP备13141314号</small>
</footer>
</body>
</html>
address元素
承载与作者相关的信息（姓名你，住址等）。
<html>
<head>
<title>
address demo
</title>
<meta charset="UTF-8">
<style>
body{
padding:0px;
margin-left:20%;
}
.tip{
margin-left:350px;
}
.author{
margin-left:250px;
}
</style>
</head>
<body>
<article>
<aside>
<h1 class="tip">琵琶行</h1>
<!--address承载与作者相关的信息-->
<address class="author">
<small>作者：白居易</small>
<small>艺名：香山居士</small>
<small>朝代：唐代</small>
<small>祖籍：太谷</small>
</address>
</aside>
<p>
浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
</p>
<p>
忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。
<p>
千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。
</p>
<p>
低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为霓裳后六幺。大弦嘈嘈如急雨，小弦切切如私语。
</p>
<p>
嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。
</p>
<p>
别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。
</p>
<p>
东船西舫悄无言，唯见江心秋月白。
</p>
<p>
沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。
</p>
<p>
曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。
</p>
<p>
今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。
</p>
<p>
商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。
</p>
<p>
我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。
</p>
浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。
</p>
<p>
春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。
</p>
<p>
莫辞更坐弹一曲，为君翻作琵琶行。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。
</p>
<p>
座中泣下谁最多？江州司马青衫湿。
</p>
</article>
</body>
</html>
hgroup元素
对网页或区段的标题进行组合。
<html>
<head>
<title>
hgroup demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--只有一个主标题，不需要使用hgroup标题分组，若有几个主标题则可用hgroup对标题进行分组-->
<h2>主标题</h2>
<p>此处只有一个主标题，不需要对标题进行分组</p>
<hgroup>
<h1>主标题一</h1>
<h2>主标题二</h2>
<p>此处有两个主标题，可对其进行分组</p>
</hgroup>
<hgroup>
<h3>主标题</h3>
<section>子标题</section>
<p>对主标题和子标题进行分组</p>
</hgroup>
</body>
</html>
上一篇： 记一次安装nginx遇到的问题