HTML5--新增的非主体结构元素


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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,747评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,466评论 1 45
  • html5新增的非主体结构元素包含:header、footer、hgroup、address。接下来我们详细介绍它...
    便U_Life阅读 1,218评论 1 10
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0 0
  • 常识 简称 html是hyperText markup language的缩写,译为超文本标记语言 css是Cas...
    丁俊杰_阅读 374评论 0 0