zoukankan      html  css  js  c++  java
  • [04]HTML基础之块级标签

    1. <p>标签

    表示段落,多个空白符会合并成一个;<pre>标签表示预文本段落,所有空白符都不合并。

    //临江仙诗句
    <p>滚滚长江东逝水,浪花淘尽英雄,是非成败转头空。
    青山依旧在,几度夕阳红。</p>
    <pre>白发渔樵江渚上,惯看秋月春风,一壶浊酒喜相逢。
    古今多少事,都付笑谈中。</pre>
    

    2. <ul>标签

    表示无序列表,表现为每个子项前都有圆点;<ol>标签表示有序列表,表现为每个子项前都有序号;<li>标签表示列表的子项目。

    //无序列表
    <ul> 导航:
        <li>首页</li>
        <li>分类</li>
    </ul>
    //有序列表
    <ol> 目录:
        <li>第一章:灵感</li>
        <li>第二章:创作</li>
    </ol>
    

    3. <dl>标签

    表示定义列表;<dt>标签表示定义列表的标题;<dd>标签表示定义列表的数据。

    <dl>
        <dt>IEC</dt>
        <dd>国际电工委员会(International Electrotechnical Commission)成立于1906
        年,它是世界上成立最早的国际性电工标准化机构,负责有关电气工程和电子工程领域中
        的国际标准化工作。 </dd>
    </dl>
    

    4. <header>标签

    语义标签,表示文档的头部;<main>标签表示文档的主体;<footer>标签表示文档的页脚。前面三个标签与<div>标签效果一致,但重在语义的强调上面。

    //可以放置网站logo及导航链接
    <header> 网站logo 导航链接 </header>
    //可以放置文章内容或评论
    <main> 文章标题 文章内容 </main>
    //可以放置联系信息或版权信息
    <footer> 版权信息 备案信息 </footer>
    

    5. <article>标签

    语义标签,表示重要的独立内容,例如某段文章的内容;<aside>标签表示不那么重要的偏旁内容,例如文章的分类标签,作者信息等。

    <h1>断章节选</h1>
    <article>你站在桥上看风景,看风景的人在桥上看你;明月装饰了你的梦,你装饰了别人的
    梦。</article>
    <aside>作者:卞之琳,祖籍南京市溧水区,现当代诗人、文学评论家、翻译家。</aside>
    

    6. <hgroup>标签

    语义标签,表示标题的分组;<h1>标签表示一级标题;<h2>标签表示二级标题;<h3>标签表示三级标题;<h4>标签表示四级标题;<h5>标签表示五级标题;<h6>标签表示六级标题。

    <hgroup>
        <h1>宇宙历史</h1>
        <h2>世界历史</h2>
        <h3>亚洲历史</h3>
        <h4>中国历史</h4>
        <h5>唐朝历史</h5>
        <h6>安史之乱</h6>
    </hgroup>
    

    7. <address>标签

    语义标签,表示文档作者的联系信息,表现为略微倾斜的字体,一般放在<footer>标签里面。

    <address>联系站长:<a href="mailto:contact@juetan.cn">绝弹</a> </adress>
    

    8. <nav>标签

    语义标签,表示导航内容,与<ol><ul>标签相比,强调语义的作用。

    <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
    </nav>
    

    英语单词

    p:段落(paragraph的缩写)
    pre: 预定义(predefined的缩写)
    header: 头部
    main:主要
    footer:脚部
    article:文章
    aside:旁白
    h:大字标题(headline的缩写)
    group:分组
    adress:地址
    nav:导航(navigation的缩写)
    ul:无序列表(unorder list的缩写)
    ol: 有序列表(order list的缩写)
    li:列表项目(list item的缩写)
    dl:定义列表(defined list的缩写)
    dt:定义列表标题(defined title的缩写)
    dd:定义列表数据(defined data的缩写)
    nav: 导航(navigator的缩写)
    
  • 相关阅读:
    关注底层:IL部分
    腾讯与敏捷开发(zz)
    关于腾讯敏捷框架TAPD (ZZ)
    最新苹果官方iphone sdk 与 xcode 下载网址汇总
    松山湖之行
    [zz]在C#程序中实现插件架构
    华为与敏捷(zz)
    OK6410 tftp下载内核、文件系统以及nand flash地址相关整理、总结
    T400换风扇解决开机fan error问题
    校园故事一个非典型工科男的电子设计之路(整理版)
  • 原文地址:https://www.cnblogs.com/juetan/p/13027143.html
Copyright © 2011-2022 走看看