zoukankan      html  css  js  c++  java
  • HTML学习(八)列表和块

    无序列表
    无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
    无序列表始于 <ul> 标签。每个列表项始于 <li>。
    <ul type=“”> type : (disc,circle,square)

    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>

    有序列表
    同样,有序列表也是一列项目,列表项目使用数字进行标记。
    有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
    <ol type=“”> type : (A,a,i)

    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>

    定义列表
    自定义列表不仅仅是一列项目,而是项目及其注释的组合。
    自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

    <dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
    </dl>
    <html>
    
    <body>
    
    <h2>一个定义列表:</h2>
    
    <dl>
       <dt>计算机</dt>
       <dd>用来计算的仪器 ... ...</dd>
       <dt>显示器</dt>
       <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>
    
    </body>
    </html>

    <ol> 定义有序列表。
    <ul> 定义无序列表。
    <li> 定义列表项。
    <dl> 定义定义列表。
    <dt> 定义定义项目。
    <dd> 定义定义的描述。

    HTML<div>和<span> 块

    可以通过 <div> 和 <span> 将 HTML 元素组合起来。

    HTML 块元素
    大多数 HTML 元素被定义为块级元素或内联元素。
    编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。
    块级元素在浏览器显示时,通常会以新行来开始(和结束)。
    例子:<h1>, <p>, <ul>, <table>

    HTML 内联元素
    内联元素在显示时通常不会以新行开始。
    例子:<b>, <td>, <a>, <img>

    HTML <div> 元素
    HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
    <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
    如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
    <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

    定义和用法
    <div> 可定义文档中的分区或节(division/section)。
    <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
    如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
    用法
    <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
    不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
    可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

    实例
    文档中的一个部分会显示为绿色:
    <div style="color:#00FF00">
      <h3>This is a header</h3>
      <p>This is a paragraph.</p>
    </div>
    
    案例分析
    <body>
    
     <h1>NEWS WEBSITE</h1>
      <p>some text. some text. some text...</p>
      ...
    
     <div class="news">
      <h2>News headline 1</h2>
      <p>some text. some text. some text...</p>
      ...
     </div>
    
     <div class="news">
      <h2>News headline 2</h2>
      <p>some text. some text. some text...</p>
      ...
     </div>
    
     ...
    </body>

    HTML <span> 元素
    HTML <span> 元素是内联元素,可用作文本的容器。
    <span> 元素也没有特定的含义。
    当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

    定义和用法
    <span> 标签被用来组合文档中的行内元素。

    提示和注释:
    提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。
    注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

    例子
    <p><span>some text.</span>some other text.</p>

    例子解释
    如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。
    可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。
    可以对同一个 <span> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
    提示:事实上,您也许已经注意到了,W3School 站点上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多,但是我们的做法是:使用“提示”使用 span 元素,然后对这个 span 元素的父元素,即 p 元素应用 class,这样就可以对这个类的子元素 span 应用相应的样式了。

    HTML:
    <p class="tip"><span>提示:</span>... ... ...</p>
    CSS:
    p.tip span {
        font-weight:bold;
        color:#ff9955;
        }
  • 相关阅读:
    js array数组检测方式
    js 获取时间戳
    接收二进制流(ArrayBuffer) ,并且显示二进制流图片
    文字小于12px时,设置line-height不居中问题
    设置文字小于12px
    Kafuka面试(整合Kafka两种模式区别)
    secondary namenode 检查点
    MapReduce总结
    Map、Reduce和Job方法总结
    Hadoop 两种环境下的checkpoint机制
  • 原文地址:https://www.cnblogs.com/wlsxmhz/p/5403231.html
Copyright © 2011-2022 走看看