zoukankan      html  css  js  c++  java
  • HTML块级元素

    前面的话

      在HTML5出现之前,人们一般把元素分为块级、内联和内联块元素。本文将详细介绍HTML块级元素

    h

      标题(Heading)元素有六个不同的级别,<h1>是最高级的,而<h6>则是最低的。一个标题元素能简要描述该节的主题

      从<h1><h6>,重要性逐渐减小,字体大小也逐渐减小。在使用标题元素时,要注意以下几点

      1、不要为了减小标题的字体而使用低级别的标题,而是使用CSS的font-size样式

      2、避免跳过某级标题:始终要从<h1>开始,接下来使用<h2> 等等

      3、使用<section> 元素时,为了方便起见,避免重复在一个页面上使用<h1><h1>应该用来表示页面的标题,其他的标题当从<h2>开始。使用<section>时,应当每个 section都使用一个<h2>

    【默认样式】

    //从h1到h6
    margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;
    font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
    font-weight: bold;
    

      HTML5新增了<hgroup>标签,它表示标题组,用于组合标题,只在区块需要有多个级别的标题时使用 

    <hgroup>
        <h1>水果</h1>
        <h2>苹果</h2>
    </hgroup>
    

    p

      <p>元素(paragraph)表示文本的一个段落,该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进

    【默认样式】

    margin: 16px 0;
    
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    

    div

      <div>元素(divide)(或HTML文档分区元素)是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,它可以被用来对其它元素进行分组,一般用于样式化相关的需求(使用class或id特性)或者对具有相同特性的一组元素进行分组(比如lang),它应该在没有任何其它语义元素可用时才使用(比如<article><nav>)

    hr

      <hr>元素表示段落级元素之间的主题转换(例如,一个故事中的场景的改变,或一个章节的主题的改变)。在HTML的早期版本中,它是一个水平线。现在它仍能在可视化浏览器中表现为水平线,但目前被定义为语义上的,而不是表现层面上

      <hr>用于段落级元素之间的分割,区块之间不需要使用<hr>进行分割

    <p>段落1</p>
    <hr>
    <p>段落2</p>
    

    【默认样式】

    margin: 8px 0;
    border-style: inset;
    border- 1px;
    

    pre

      <pre>元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来,通常表示已排版的内容,如代码块和字符画等

    <pre>
    body {
      color:red;
    }
    </pre>
    

    【默认样式】

    margin: 1em 0;
    white-space: pre;
    

    blockquote

      <blockquote>元素(或者HTML块级引用元素),代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进。若引文来源于网络,则可以将原内容的出处URL地址设置到cite特性上,若要以文本的形式告知读者引文的出处时,可以通过<cite>元素

      [注意]引用的署名必须在引用外部定义

    <blockquote cite="https://baike.baidu.com/view/921793.htm">
      <p>横眉冷对千夫指,俯首甘为孺子牛</p>
    </blockquote>    
    <p>鲁迅</p>
    

    【默认样式】

    margin: 1em  40px;
    

    address

      <address>元素可以让作者为它最近的<article>或者<body>祖先元素提供联系信息。在后一种情况下,它应用于整个文档

      当表示一个和联系信息无关的任意的地址时,使用<p>元素而不是<address>元素。这个元素不能包含除了联系信息之外的任何信息,比如出版日期(这应该包含在<time>元素中)。通常,<address>元素可以放在当前section的<footer>元素中,如果存在的话

    【默认样式】

    font-style: italic;
    

    其他

      除了上面介绍的<div><h><p><hr><blockquote><address>标签外,还有一些前面已经介绍过的标签属于块级标签

      包括骨架类标签(<html><body>),列表类标签(<ul><ol><dl><dd><dt>),表单类标签(form<fieldset><output><legend><optgroup><option>),HTML5新增的结构标签(<article><aside><header><footer><nav><section>),HTML5新增的多媒体标签(<figure><figcaption>),HTML5新增的功能性标签(<summary><details>)

    最后

      可能有人会觉得<br>标签应该是一个块级元素,因为它有换行,与块级元素的特征很相似。但它实际上是一个内联元素,它的用途是在文本中产生一个换行

  • 相关阅读:
    摘:SQL Server数据类型的25种
    二维码简介和容错率的问题
    PHP QR Code
    Git 更新操作
    [转载]ecmall语言包程序
    linux 从百度网盘下载文件的方法
    Linux定时备份数据到百度云盘
    nginx整合php+lua+oracle环境搭建
    php 36进制与10进制转换
    “互联网+”取代O2O将成为2016最大风口
  • 原文地址:https://www.cnblogs.com/xiaohuochai/p/6216633.html
Copyright © 2011-2022 走看看