【总结】HTML进阶笔记（下）|青训营笔记

Director_Li
79 阅读4分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 5 天。

一、介绍

大家好，欢迎来到 HTML 进阶笔记。

在前面的课程中，我们学习了 HTML 基本语法、元素以及如何使用它们来构建网页。那么，在今天的课程中，我们将深入学习 HTML 的进阶知识，包括布局、样式以及页面优化等。

我们将通过详细的讲解和代码实例，帮助大家了解 HTML 的各种进阶知识，并在笔记结束后，拥有足够的能力去开发出具有高可用性和高可读性的网页。

那么，我们开始今天的笔记吧！

接上回

六、HTML 样式

HTML 样式是用来给 HTML 元素添加样式（例如颜色、字体、大小等）的。

在 HTML 中，可以通过三种方式来添加样式：

内联样式：使用style属性在 HTML 元素上添加样式。 内部样式表：使用<style>标签在 HTML 文档内部定义样式。 外部样式表：使用<link>标签引用外部的 CSS 文件。 下面是一个使用内联样式的示例：

<p style="color: blue;">This is a blue paragraph.</p>

下面是一个使用内部样式表的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <body>
<p>This is a blue paragraph.</p>
<p>This is another blue paragraph.</p>

  </body>
</html>

下面是一个使用外部样式表的示例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p class="blue">This is a blue paragraph.</p>
  <p class="blue">This is another blue paragraph.</p>
</body>
</html>

/* styles.css */
.blue {
  color: blue;
}

这是一个使用了外部样式表的示例。我们在 HTML 文档的头部使用了<link>标签引用了外部的 CSS 文件 styles.css，在该文件中我们定义了一个名为 blue 的样式类，在 HTML 文档中使用了该样式类。

七、HTML 表单

HTML 表单是用来收集用户的数据的。

下面是一个简单的表单的示例：

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br><br>
  <input type="submit" value="Submit">
</form>

上述代码的显示效果如下：

image.png 在这个示例中，我们使用了两个<input>元素分别收集用户的名字和邮件地址，并使用了一个提交按钮允许用户提交数据。

除了文本输入字段，HTML 表单还支持各种其他字段，例如多选框、单选框、下拉列表等。

八、HTML 其他元素

除了上述的元素，HTML 还提供了许多其他元素，如图像、音频、视频、链接、列表等，这些元素可以帮助我们构建丰富多彩的网页。

一个使用图像的示例：

<img src="image.jpg" alt="A description of the image">

在这个示例中，我们使用了一个<img>元素来显示一张名为 image.jpg 的图片。通过指定图片的 src 属性，我们可以告诉浏览器该图片的位置。alt 属性是一个可选的属性，它提供了对图像的描述，对于图像无法正确加载的情况很有帮助。

一个使用链接的示例：

<a href="https://www.example.com">Visit Example.com</a>

在这个示例中，我们使用了一个<a>元素创建了一个链接。通过指定链接的 href 属性，我们可以告诉浏览器要链接到哪里。链接的显示文本是在链接标签之间的内容。

这些元素只是 HTML 中的一小部分，如果想了解更多，可以参考官方文档。

九、HTML 网页布局

在创建网页时，很重要的一点是如何布局网页。HTML 本身并不提供布局功能，但是我们可以通过使用 CSS 来实现。

常用的布局方式包括：浮动布局、绝对定位布局、相对定位布局、响应式布局等。

浮动布局：通过使用 CSS 中的 float 属性，我们可以将元素向左或右浮动，使得多个元素可以在一行显示。

示例代码：

<div style="float: left; width: 50%;">Left Content</div>
<div style="float: right; width: 50%;">Right Content</div>

绝对定位布局：通过使用 CSS 中的position: absolute和 top、bottom、left、right 属性，我们可以绝对定位一个元素，使得该元素可以相对于其定位父元素进行定位。

示例代码：

<div style="position: relative;">
  <div style="position: absolute; top: 10px; right: 10px;">Right Top Content</div>
  <div style="position: absolute; bottom: 10px; left: 10px;">Left Bottom Content</div>
</div>

相对定位布局：通过使用 CSS 中的position: absolute和 top、bottom、left、right 属性，我们可以相对定位一个元素，使得该元素可以相对于其原本的位置进行定位。

示例代码：

<div style="position: relative;">
  <div style="position: relative; top: 10px; right: 10px;">Right Top Content</div>
  <div style="position: relative; bottom: 10px; left: 10px;">Left Bottom Content</div>
</div>

响应式布局：通过使用 CSS 中的媒体查询，我们可以根据不同的屏幕尺寸设置不同的样式，使得网页在不同的设备上都能够得到很好的展示效果。

示例代码：

<style>
  @media only screen and (max-width: 600px) {
    .container {
      width: 100%;
    }
  }
</style>
<div class="container">
  <div class="left-content">Left Content</div>
  <div class="right-content">Right Content</div>
</div>

上面的代码实现了当屏幕宽度小于等于600像素时，将容器的宽度设置为100%，从而实现响应式布局。

除了以上这些，还有一些其他布局方式，比如表格布局、Flexbox 布局等。你可以根据自己的需求，选择适合的布局方式。

最后，我们要强调的是，布局是网页设计中非常重要的一部分，对于一个好的网页，布局是不可或缺的。因此，我们要多加学习和练习，不断提高自己的布局能力。

avatar
文章
阅读
粉丝