html基本内容

1. div标签的使用

div 是一个块级元素，通常用于定义页面中的分区或部分。它本身没有任何样式，但可以通过CSS来设置样式和布局。

• 基本语法：

  <div class="container">
    <!-- 页面内容 -->
  </div>

  在上述代码中，div 元素被赋予了一个类名 container，这使得我们可以通过CSS来为这个 div 设置样式。

• 布局示例：

  <div style="width: 100%; height: 100px; background-color: lightblue;">
    这是一个块级元素，它会占据整行的宽度。
  </div>

  这里，div 元素被设置为100%的宽度和100px的高度，并赋予了一个浅蓝色背景。

2. span标签的使用

span 是一个行内元素，用于包裹一小部分文本或行内内容，以便对其应用样式。

• 基本语法：

  <p>这是一个段落，其中有一部分是 <span class="highlight">红色文本</span>。</p>

  在上述代码中，span 元素被赋予了一个类名 highlight，可以通过CSS来改变这部分文本的颜色。

• 样式应用：

  .highlight {
    color: red;
  }

  上述CSS规则会将所有类名为 highlight 的文本变为红色。

3. class类的应用

class 属性允许你为HTML元素分配一个或多个类名，这些类名可以在CSS中被用作选择器。

• 基本用法：

  <div class="myClass">这是一个带有类名的div元素</div>

  你可以为一个元素分配多个类名，只需用空格分隔它们即可：

  <div class="class1 class2 class3">这是一个带有多个类名的div元素</div>

  在CSS中，你可以使用点号（.）作为类选择器的前缀来选择并应用样式到具有指定类名的元素上。

• CSS中的使用：

  .myClass {
    color: blue;
    font-size: 16px;
  }
  .class2 {
    background-color: lightgray;
  }

  对于具有多个类名的元素，CSS样式会按照在样式表中定义的顺序进行级联。

4. 列表的应用

HTML支持有序、无序和定义列表，它们通过不同的标签来实现。

• 无序列表：

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

  浏览器显示如下：

  - Coffee
  - Milk

• 有序列表：

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

  浏览器中显示如下：

  1. Coffee
  2. Milk

• 定义列表：

  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>

  浏览器显示如下：

  Coffee - black hot drink
  Milk - white cold drink