HTML以及CSS介绍

HTML介绍

HTML（超文本标记语言）是用于创建网页和应用程序的标准标记语言。它提供了网页内容的结构和格式，定义了元素的显示和组织方式。

HTML文档由一系列用尖括号（< >）括起来的标签组成。标签用于定义文档中的不同元素及其属性。以下是一个基本的HTML结构示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 在这里编写网页内容 -->
</body>
</html>

让我们逐步解释每个部分的作用：

  1. <!DOCTYPE html>：这是HTML5的文档类型声明，用于指示文档使用HTML5规范解析。

  2. <html>：<html>标签是HTML文档的根元素，它包含了整个HTML文档的内容。

  3. <head>：<head>标签定义了文档的头部，其中包含了关于文档的元数据和引用的外部资源，如标题、样式表和脚本等。

  4. <meta charset="UTF-8">：<meta>标签用于设置文档的字符编码，这里指定为UTF-8，以支持更广泛的字符集。

  5. <title>：<title>标签定义了网页的标题，显示在浏览器的标题栏或标签页上。

  6. <body>：<body>标签包含了HTML文档的主体内容，包括文本、图像、链接和其他元素等。在这个标签中编写网页的实际内容。

这是一个基础的HTML文档结构，你可以在<body>标签中添加各种HTML标签和内容，来构建你的网页。

常见标签

  1. <html>：定义HTML文档的根元素。

  2. <head>：定义HTML文档的头部，包含了文档的元数据（如标题、样式表、脚本等）。

  3. <title>：定义网页的标题，显示在浏览器的标题栏或标签页上。

  4. <body>：定义HTML文档的主体内容。

  5. <h1>到<h6>：定义标题，按重要性递减，<h1>是最高级别的标题。

  6. <p>：定义段落，用于包裹一段文本。

  7. <a>：定义链接，创建一个指向其他网页、文件或位置的超链接。

  8. <img>：定义图像，用于在网页中插入图片。

  9. <ul>：定义无序列表，用于显示项目的列表，项目以符号（通常是圆点）表示。

  10. <ol>：定义有序列表，用于显示按顺序排列的项目，项目以数字或字母表示。

  11. <li>：定义列表中的每个项目。

  12. <table>：定义表格，用于显示数据的网格。

  13. <tr>：定义表格中的行。

  14. <td>：定义表格中的单元格。

  15. <div>：定义文档中的块级元素容器，用于组织和样式化内容。

  16. <span>：定义文档中的行内元素容器，用于对文本进行样式化或标记。

  17. <form>：定义用于收集用户输入的表单。

  18. <input>：定义表单中的输入字段，例如文本框、复选框等。

  19. <button>：定义按钮，用于触发特定的操作或事件。

  20. <script>：定义客户端脚本，通常用于添加交互性和动态功能。

这些只是HTML标签中的一部分，还有很多其他标签可用于创建不同类型的内容和功能。

CSS

CSS介绍

CSS (Cascading Style Sheets) 是一种用于描述网页样式和布局的样式表语言。它与 HTML 配合使用，用于控制网页中元素的外观和排版。

CSS 样式由选择器和声明块组成。选择器指定要应用样式的 HTML 元素，而声明块包含一个或多个属性-值对，定义元素的样式。下面是一个基本的 CSS 示例：

/* 选择器 */
h1 {
    color: blue;
    font-size: 24px;
}
​
/* 声明块 */
p {
    color: #333333;
    font-family: Arial, sans-serif;
}
​

在上面的示例中，h1 选择器选择所有的 <h1> 元素，并为其设置蓝色的文本颜色和 24 像素的字体大小。p 选择器选择所有的 <p> 元素，并为其设置颜色为 #333333（深灰色）和字体为 Arial。

CSS 样式可以应用于 HTML 页面中的元素，可以使用内联样式、嵌入样式和外部样式表三种方式来定义和应用 CSS。

  • 内联样式：直接在 HTML 元素的 style 属性中定义样式，例如 <h1 style="color: red;">标题</h1>。

  • 嵌入样式：在 HTML 页面的 <head> 元素中使用 <style> 标签定义样式，例如：

<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

  • 外部样式表：将 CSS 样式定义在一个独立的 .css 文件中，然后在 HTML 页面中使用 <link> 标签引入样式表，例如：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

在 styles.css 文件中定义样式：

h1 {
    color: red;
}

使用 CSS，可以改变元素的颜色、字体、大小、边距、背景等属性，以及应用动画和过渡效果，实现丰富的网页设计和交互效果。

常见css设置

字体设置

设置字体样式和字体系列时，CSS提供了多个属性和值，以下是一个生成代码实例和相关讲解：

/* 设置字体样式和字体系列 */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  line-height: 1.5;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 2px;
}

上述代码示例中，我们设置了一些常见的字体属性和值，让我们逐个进行讲解：

  1. font-family：用于设置字体系列，即指定要在元素中使用的字体。在示例中，我们设置为Arial, sans-serif，这意味着首选字体为Arial，如果不可用，则使用sans-serif作为回退字体。

  2. font-size：用于设置字体大小。在示例中，我们设置为16px，表示字体大小为16像素。chrome默认字体16px，最小字体12px

  3. font-weight：用于设置字体粗细。在示例中，我们设置为bold，表示使用粗体字体。

  4. font-style：用于设置字体样式。在示例中，我们设置为italic，表示使用斜体字体。

  5. line-height：用于设置行高，即每行文字的高度。在示例中，我们设置为1.5，表示行高为字体大小的1.5倍。

  6. text-decoration：用于设置文本修饰，如下划线、删除线等。在示例中，我们设置为underline，表示给文本添加下划线。

  7. text-transform：用于控制文本转换，如大写、小写或首字母大写等。在示例中，我们设置为uppercase，表示将文本转换为大写形式。

  8. letter-spacing：用于设置字母间距。在示例中，我们设置为2px，表示字母之间的间距为2像素。

这些属性和值是设置字体样式的常见选项，你可以根据需要进行调整和组合，以达到所需的字体效果。将上述代码应用到适当的HTML元素上，即可改变该元素中文本的字体样式。

背景设置

设置背景样式时，CSS提供了多个属性和值，以下是一个生成代码实例和相关讲解：

/* 设置背景样式 */
body {
  background-color: #f2f2f2;
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

上述代码示例中，我们设置了一些常见的背景属性和值，让我们逐个进行讲解：

  1. background-color：用于设置背景颜色。在示例中，我们设置为#f2f2f2，表示背景颜色为淡灰色。

  2. background-image：用于设置背景图像。在示例中，我们设置为url("background.jpg")，表示使用名为"background.jpg"的图像作为背景图像。

  3. background-repeat：用于控制背景图像的重复方式。在示例中，我们设置为no-repeat，表示不重复背景图像。

  4. background-position：用于设置背景图像的位置。在示例中，我们设置为center，表示将背景图像居中放置。

  5. background-size：用于控制背景图像的尺寸。在示例中，我们设置为cover，表示使背景图像完全覆盖背景区域，可能会被裁剪或拉伸以适应。

这些属性和值是设置背景样式的常见选项，你可以根据需要进行调整和组合，以达到所需的背景效果。将上述代码应用到适当的HTML元素上，即可改变该元素的背景样式。

行块属性

CSS中的display属性可以用来控制元素的显示方式，包括行内（inline）和块级（block）等。以下是一个生成代码的示例和详细介绍：

/* 设置行块属性 */
span {
  display: inline;
}
​
div {
  display: block;
}

上述代码示例中，我们分别将display属性应用于span和div元素，来演示行内和块级元素的效果。

  1. display: inline;：这行代码设置span元素为行内元素。行内元素不会独占一行，它们会尽可能地与相邻的元素在同一行显示，不会有换行。常见的行内元素包括span、a、strong等。

  2. display: block;：这行代码设置div元素为块级元素。块级元素会独占一行，每个块级元素都会另起一行显示。常见的块级元素包括div、p、h1~h6等。

通过设置display属性，你可以控制元素是以行内还是块级的方式进行布局和显示。需要注意的是，并不是所有的元素都能使用这两个属性。有些元素本身就是固定的行内或块级元素，如span是行内元素，div是块级元素。而有些元素可以通过设置display属性来改变其默认行为。

另外，还有其他值可以用于display属性，例如：

  • display: inline-block;：将元素设置为行内块级元素，具有行内元素的特性（可以与相邻元素在同一行显示）和块级元素的特性（可以设置宽度、高度等）。

  • display: none;：将元素隐藏，不会在页面上显示，也不占据空间。

  • display: flex;：使用弹性盒子布局，可以实现灵活的元素排列和对齐。

这些是display属性的一些常见选项，你可以根据需要进行调整，以实现所需的布局和显示效果。

盒模型

盒模型（Box Model）是CSS中用于布局和定位元素的基本概念之一。它描述了一个元素在页面中所占据的空间，并定义了元素的内容、内边距、边框和外边距之间的关系。

盒模型由以下四个部分组成：

  1. 内容区域（Content）：指的是元素的实际内容，例如文本、图像等。

  2. 内边距（Padding）：内边距是围绕内容区域的空白区域，用于控制内容与边框之间的距离。

  3. 边框（Border）：边框是内边距的外围，它围绕着元素的内容和内边距，并可用于给元素添加边框样式。

  4. 外边距（Margin）：外边距是边框的外围，它用于控制元素与其他元素之间的距离。

下面是一个示例代码，展示了如何使用CSS设置盒模型的属性：

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid #000;
  margin: 10px;
}

在上述代码中，我们创建了一个类名为.box的元素，并设置了以下属性：

  • width：设置元素的宽度为200像素。

  • height：设置元素的高度为200像素。

  • padding：设置元素的内边距为20像素，即在内容区域和边框之间留出20像素的空白区域。

  • border：设置元素的边框样式为1像素的实线边框，颜色为黑色。

  • margin：设置元素的外边距为10像素，即在元素和相邻元素之间留出10像素的空白区域。

通过设置这些属性，我们可以控制元素在页面中的尺寸、内边距、边框和外边距，从而实现布局和样式的定位。请注意，盒模型的计算方式在标准盒模型和IE盒模型中略有差异，可以通过CSS的box-sizing属性进行调整。

浮动

CSS中的浮动（float）属性用于控制元素在其父元素中的水平位置，并使其他元素环绕其周围。浮动元素会脱离正常的文档流，可以向左或向右浮动。

以下是一个示例代码，展示了如何使用CSS的浮动属性：

.float-left {
  float: left;
}
​
.float-right {
  float: right;
}

在上述代码中，我们创建了两个类名为.float-left和.float-right的元素，并分别设置了浮动属性为左浮动和右浮动。

  • float: left;：将元素向左浮动。浮动元素会尽可能向左边靠拢，并使其他元素环绕其右侧。

  • float: right;：将元素向右浮动。浮动元素会尽可能向右边靠拢，并使其他元素环绕其左侧。

浮动元素常用于创建多列布局、图文混排以及实现特定的布局需求。需要注意的是，浮动元素会导致父元素的高度塌陷（父元素无法自动撑开以容纳浮动元素），可以通过清除浮动（clear float）来解决这个问题。

清除浮动可以使用清除浮动的技术，例如：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

以上代码中，我们创建了一个类名为.clearfix的伪元素选择器，并设置了content: "";、display: table;和clear: both;属性。通过将.clearfix应用于包含浮动元素的父元素，可以清除浮动并使父元素正确地包裹浮动元素。

请注意，随着现代CSS布局的发展，使用浮动来实现布局的方式逐渐被更灵活的CSS布局技术（如Flexbox和Grid）所取代。

定位

CSS中的定位分为五种：

  1. 静态定位（static）：

    .static-position {
      position: static;
    }

    静态定位是元素的默认定位方式，元素会按照正常的文档流进行布局。position: static;可以省略，它不能通过top、right、bottom和left属性进行定位，无法使用层叠上下文（z-index）属性。

  2. 相对定位（relative）：

    .relative-position {
      position: relative;
      top: 10px;
      left: 20px;
    }

    相对定位是相对于元素在正常文档流中的位置进行定位，使用top、right、bottom和left属性来调整元素的位置。元素仍然占据原来的空间，其他元素不会填充其位置。

  3. 绝对定位（absolute）：

    .absolute-position {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    绝对定位是相对于最近的已定位祖先元素（如果没有则相对于文档）进行定位。使用top、right、bottom和left属性来精确控制元素的位置。元素会脱离正常文档流，并且不占据空间，其他元素会填充其位置。通常与父元素设置position: relative;配合使用，以建立定位上下文。

  4. 固定定位（fixed）：

    .fixed-position {
      position: fixed;
      top: 10px;
      right: 10px;
    }

    固定定位是相对于浏览器窗口进行定位，元素将始终保持在相对于窗口的固定位置。使用top、right、bottom和left属性来指定元素在窗口中的位置。

  5. 粘性定位是相对于滚动容器进行定位的一种特殊方式。元素在滚动容器的可视区域内表现为相对定位，而在滚动容器滚动超出其可视区域时则表现为固定定位。

    以下是一个示例代码，展示了如何使用粘性定位：

.sticky-position {
  position: sticky;
  top: 10px;
}

在上述代码中，我们创建了一个类名为.sticky-position的元素，并设置了粘性定位属性position: sticky;，并通过top属性指定了相对于滚动容器顶部的偏移量为10像素。

粘性定位的使用场景通常是在需要元素在滚动容器中保持在某个特定位置时，比如导航栏在页面滚动时保持在顶部。需要注意的是，粘性定位在一些老旧的浏览器上可能不支持，因此在使用粘性定位时需进行兼容性考虑。

总结起来，CSS中常见的定位方式包括静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。通过灵活组合和使用这些定位属性，可以实现各种不同的布局需求。

这些定位方式可以根据具体需求进行选择和组合。相对定位、绝对定位和固定定位可以使用top、right、bottom和left属性来调整元素的位置。此外，通过使用z-index属性，还可以控制定位元素在垂直堆叠中的顺序。

需要注意的是，定位属性的使用需要谨慎，过多的定位元素可能导致布局复杂性增加。合理地使用定位属性可以实现精确的布局效果，但建议先考虑使用Flexbox和Grid等现代布局技术来解决布局需求，减少对定位的依赖。

z-index是CSS属性，用于控制元素在垂直方向上的堆叠顺序。它决定了哪个元素在叠放时显示在前面，哪个在后面。

z-index属性接受一个整数值作为参数，数值越大表示元素在堆叠顺序中越靠前，即显示在更上层。

以下是一个示例代码，展示了如何使用z-index属性：

.element1 {
z-index: 1;
}
​
.element2 {
z-index: 2;
}

在上述代码中，我们创建了两个类名为.element1和.element2的元素，并分别设置了不同的z-index值。

  • .element1的z-index值为1，表示它在堆叠顺序中较低，将位于.element2的下方。

  • .element2的z-index值为2，表示它在堆叠顺序中较高，将位于.element1的上方。

需要注意以下几点关于z-index的使用：

  1. z-index仅对定位元素（即position属性值为relative、absolute或fixed）有效。对于静态定位（position: static）的元素，z-index属性不起作用。

  2. z-index只对同级元素之间的堆叠顺序起作用。即使一个元素具有较高的z-index值，如果它的父元素具有较低的z-index值，那么它仍然可能被位于父元素之外的其他元素覆盖。

  3. 当多个元素的z-index相同时，它们的堆叠顺序将按照它们在HTML文档中的顺序来确定。先出现在HTML文档中的元素将位于后出现的元素之上。

  4. z-index的值可以是负数，表示元素在堆叠顺序中较低的位置。负数的值越小，元素越靠后。

通过合理设置z-index属性，可以实现元素的层叠效果，创建出丰富的页面布局和交互效果。

 
posted on 2023-06-30 16:23  堃K  阅读(44)  评论(0)  编辑  收藏  举报
Copyright © 2024 堃K
Powered by .NET 9.0 on Kubernetes Powered By: 博客园