002 | HTML

最新推荐文章于 2022-12-17 11:48:02 发布

zljiaa

最新推荐文章于 2022-12-17 11:48:02 发布

阅读量168

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zljiaa/article/details/81711403

版权

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

<html>

  <body>

    <p>每个表格由 table 标签开始。</p>
    <p>每个表格行由 tr 标签开始。</p>
    <p>每个表格数据由 td 标签开始。</p>

    <h4>一列：</h4>
      <table border="1">
        <tr>
          <td>100</td>
        </tr>
      </table>

    <h4>一行三列：</h4>
      <table border="1">
        <tr>
          <td>100</td>
          <td>200</td>
          <td>300</td>
        </tr>
      </table>

    <h4>两行三列：</h4>
      <table border="1">
        <tr>
          <td>100</td>
          <td>200</td>
          <td>300</td>
        </tr>
        <tr>
          <td>400</td>
          <td>500</td>
          <td>600</td>
        </tr>
      </table>

  </body>
</html>

`<div>`,`<span>`

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

HTML 块元素

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

HTML 内联元素

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

<div>
HTML<div> 是块级元素，它是可用于组合其他HTML元素的容器。
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

用法
<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>

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

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

如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。