HTML+CSS基础

最新推荐文章于 2024-09-16 23:05:35 发布

miraclemeister

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量212

点赞数 2

文章标签： html css 前端

本文链接：https://blog.csdn.net/miraclemeister/article/details/131520591

版权

1.标题

HTML（超文本标记语言）中的标题用于定义网页的标题文本。HTML提供了六个级别的标题，从最高级别的标题开始（h1），到最低级别的标题（h6）。以下是HTML中标题的示例：

<h1>标题<h1>
<h2>标题<h2>

通过这些标题级别，可以对网页的不同部分进行结构化和层次化的表示。通常，h1标题用于表示页面的主要标题，h2标题用于表示次级标题，以此类推。

请注意，标题的样式通常由CSS（层叠样式表）定义，可以使用CSS样式表为标题设置字体、颜色、大小等样式。

2.列表

无序列表

无序列表使用<ul>标签，并在其中使用<li>标签来定义列表项。列表项将以圆点或其他符号进行标记。例如：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

有序列表

有序列表使用<ol>标签，并在其中使用<li>标签来定义列表项。列表项将以数字或字母进行标记。例如：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

自定义列表

此外，还有一个描述列表（description list），用于表示一组名称和对应的描述。描述列表使用<dl>标签，并在其中使用<dt>标签定义名称（term），使用<dd>标签定义描述（description）。例如：

<dl>
  <dt>名称1</dt>
  <dd>描述1</dd>
  <dt>名称2</dt>
  <dd>描述2</dd>
  <dt>名称3</dt>
  <dd>描述3</dd>
</dl>

3.表格

HTML中使用<table>标签来创建表格。表格由行（<tr>）和列（<td>）组成。以下是创建简单表格的示例：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

4.图片

在HTML中，可以使用<img>标签来插入图片。需要指定图片的来源（src属性）和可选的图片描述（alt属性）。以下是一个基本的插入图片的示例：

  <Img src="黄鹤楼.jpg" width="500" height="300" alt="这是黄鹤楼"></Img>

5.超链接

在HTML中，使用<a>标签创建超链接。超链接用于在网页中链接到其他页面、文件、位置或外部资源。以下是创建超链接的示例：

 <A href="#top">回到有序列表</A>

6.表单

表单标签

HTML表单用于在网页中收集用户输入的数据。表单包含一个或多个输入字段（例如文本框、复选框、下拉列表等），用户可以在这些字段中输入或选择数据，然后通过提交表单将数据发送到服务器进行处理。以下是一个基本的HTML表单的示例：

<form action="/submit" method="POST">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required><br>

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required><br>

  <input type="submit" value="提交">
</form>

表单注意事项

在上面的示例中，<form>标签用于创建表单。action属性指定了表单提交的目标URL，method属性指定了使用的HTTP方法（通常是"GET"或"POST"）。在这个示例中，表单将数据提交到"/submit"路径，并使用"POST"方法。

在表单内部，使用<label>标签定义输入字段的标签。for属性指定了与输入字段关联的ID。然后，使用<input>标签定义不同类型的输入字段。type属性指定了输入字段的类型（例如文本、电子邮件等），id属性用于与标签关联，name属性用于标识该字段的名称。

在上面的示例中，有两个输入字段：姓名和邮箱。它们都被指定为必填字段（required属性），这意味着用户必须在提交表单之前提供这些信息。

最后，使用<input>标签定义了一个提交按钮，用户点击该按钮时，表单将被提交。

表单可以包含其他类型的输入字段，如复选框（<input type="checkbox">）、单选按钮（<input type="radio">）、下拉列表（<select>和<option>）、文本区域（<textarea>）等。可以根据需要在表单中添加和组织这些字段。

提交表单后，数据可以通过服务器端处理，例如使用后端编程语言（如PHP、Python等）来接收和处理提交的数据。

7.CSS

CSS引入

在HTML中引入CSS样式表有几种常见的方法：

内联样式：可以在HTML元素的style属性中直接定义CSS样式。这样的样式仅适用于该特定元素。例如：
```
<p style="color: red; font-size: 16px;">这是一段红色的文字。</p>
```

内部样式表：可以使用<style>标签在HTML文档的<head>部分定义CSS样式。这样的样式将适用于整个文档。例如：

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>这是一段红色的文字。</p>
</body>

外部样式表：可以将CSS样式定义在独立的外部CSS文件中，并在HTML文档中使用<link>标签将其引入。这样的样式表可以在多个HTML文件之间共享。例如：

p {
  color: red;
  font-size: 16px;
}

然后，在HTML文档的<head>部分使用<link>标签引入外部样式表：

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一段红色的文字。</p>
</body>

以上是几种常见的引入CSS样式表的方法。推荐使用外部样式表，因为它可以提高代码的可维护性和可重用性，并允许样式与内容分离。

CSS选择器

CSS选择器用于选择HTML文档中要应用样式的元素。通过选择器，可以根据元素的标签名、类名、ID、属性等来选择元素。以下是几种常见的CSS选择器示例：

标签选择器：通过元素的标签名选择元素。例如，选择所有的段落元素：
```
p {
  color: red;
}
```
类选择器：通过元素的类名选择元素。使用.来指定类选择器。例如，选择具有highlight类的元素：
```
.highlight {
  background-color: yellow;
}
```
ID选择器：通过元素的ID选择元素。使用#来指定ID选择器。注意，ID在HTML文档中应该是唯一的。例如，选择具有header ID的元素
```
#header {
  font-size: 24px;
}
```
属性选择器：通过元素的属性选择元素。例如，选择所有具有target="_blank"属性的链接：
```
a[target="_blank"] {
  color: blue;
}
```
后代选择器：通过元素的后代关系选择元素。使用空格分隔元素。例如，选择所有段落元素内部的强调元素
```
p strong {
  font-weight: bold;
}
```
子元素选择器：通过元素的直接子元素关系选择元素。使用>符号指定子元素选择器。例如，选择所有div元素下的直接子元素p元素：
```
div > p {
  margin-top: 10px;
}
```