HTML文档分节

1. 添加基本的标题

HTML定义了一套标题元素体系,从h1到h6,h1级别最高。

2. 隐藏子标题

hgroup元素可以用来将几个标题元素作为一个整体处理,以免扰乱HTML文档的大纲。

<hgroup>
    <h1>Fruits I Like</h1>
    <h2>How I Learned to Love Citrus</h2>
</hgroup>

hgroup元素在从h1到h6的标题体系中的位置取决于其第一个标题子元素。(hgroup元素的子元素中,只有第一个标题子元素会被列入文档的大纲。)

3. 生成节

section元素表示文档中的一节。section元素用来包含的是那种应该列入文档大纲或目录的内容。section元素通常包含一个或多个段落及一个标题。

4. 添加首部和尾部

首部

header元素表示一节的首部(通常包含各种适合出现在首部的东西,包括刊头和徽标)。

尾部

footer元素表示一节的尾部(通常包含着该节的总结信息,还可以包含作者介绍、版权信息、到相关内容的链接、徽标及免责声明等 )。

5. 添加导航区域

nav元素表示文档中的一个区域,它包含着到其他页面或同一页面的其他部分的链接。该元素的目的是规划出文档的主要导航区域。

<header>
    <nav>
        <ul>
            <li><a href="#">链接1</a></li>
            <li><a href="#">链接2</a></li>
            <li><a href="#">链接3</a></li>
        </ul>
    </nav>
</header>

6. 使用article

article元素代表HTML元素中一段独立成篇的内容。(可以独立于页面其余内容发布或使用)

7. 生成附注栏

aside元素用来表示跟周边内容稍沾一点边的内容,类似于书籍或杂志中的侧栏。其内容与页面的其他内容、article或section有点关系,但并非主体内容的一部分。它可能是一些背景信息、到相关文章的链接,诸如此类。

8. 提供联系信息

address元素用来表示文档或article元素的联系信息。

<address>
    Content us <a href="mailto:example@qq.com">Email us</a>
</address>

9. 生成详情区域

details元素在文档中生成一个区域,用户可以展开它以了解关于某主题的更多详情。

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

推荐阅读更多精彩内容

  • 首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要...
    DecadeHeart阅读 3,408评论 0 3
  • HTML 5的革新之一:语义化标签一节元素标签。 在HTML 5出来之前,我们用div来表示页面章节,但是这些di...
    吴越公子阅读 753评论 0 0
  • 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。(即使我们用css样式的id和c...
    浪漫歌阅读 374评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,709评论 1 92
  • 在生活中,我们是不是经常觉得孩子自信心不足,做事情这也不行那也不行? 那我们有没有想过原因在哪里?我们不经意话语有...
    小阮11阅读 391评论 2 1