（html入门）html块+表格+id

心已赠人 2022-09-02 13:50 214阅读 0赞

# HTML `<div>` 和 `<span>` #

**HTML 块元素**  
大多数 HTML 元素被定义为块级元素或内联元素。  
块级元素在浏览器显示时，通常会以新行来开始（和结束）。

## HTML `<div>` 元素 ##

HTML `<div>` 元素是块级元素，它是可用于组合其他 HTML 元素的容器。  
如果与 CSS 一同使用`，<div>` 元素可用于对大的内容块设置样式属性。  
`<div>` 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 `<table>` 元素进行文档布局不是表格的正确用法。`<table>` 元素的作用是显示表格化的数据。

<html>
    <body>
    
    <h3>This is a header</h3>
    <p>This is a paragraph.</p>
    
    <div style="color:#00FF00">
      <h3>This is a header</h3>
      <p>This is a paragraph.</p>
    </div>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70]

## HTML 元素 ##

HTML `<span>` 元素是内联元素，可用作文本的容器。  
`<span>` 元素也没有特定的含义。

当与 CSS 一同使用时，`<span>` 元素可用于为部分文本设置样式属性。

# HTML 表格 #

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

![在这里插入图片描述][a17b67f131c04a6e98e8fa2031cfb530.png]

## 表格和边框属性 ##

使用边框属性来显示一个带有边框的表格

## 表格的表头 ##

表格的表头使用 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本

<table border="1">
    <tr>
    <th>Heading</th>
    <th>Another Heading</th>
    </tr>
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

![在这里插入图片描述][235e0cf92bde42438a1add2c4093dc54.png]

## 表格中的空单元格 ##

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

![在这里插入图片描述][08e3a15bc10f4e798a5f52345c86937b.png]

# HTML id 属性 #

**HTML id 属性用于 为HTML 元素指定唯一的 id。  
一个 HTML文档中不能存在多个有相同 id 的元素。**  
id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。  
d 的语法是：写一个井号 (\#)，后跟一个 id 名称。然后，在花括号 \{\} 中定义 CSS 属性。

<!DOCTYPE html>
    <html>
    <head>
    <style>
    #myHeader {
        
      background-color: lightblue;
      color: black;
      padding: 40px;
      text-align: center;
    } 
    </style>
    </head>
    <body>
    
    <h1>id 属性</h1>
    
    <p>使用 CSS 来设置 id 为 "myHeader" 的元素的样式：</p>
    
    <h1 id="myHeader">My Header</h1>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70]: /images/20220829/b90ed1d50b104fd2a447519973ade56b.png
[a17b67f131c04a6e98e8fa2031cfb530.png]: /images/20220829/42345c85857344b68ac9f53beb10a31a.png
[235e0cf92bde42438a1add2c4093dc54.png]: /images/20220829/1bf26038bd5549be814866a1b7003e79.png
[08e3a15bc10f4e798a5f52345c86937b.png]: /images/20220829/2f90456f870945a1a5da54191b873f5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMjkwNDM2_size_16_color_FFFFFF_t_70 1]: /images/20220829/df19f4df2c1d4fd2b688d89edbfad8fb.png