boxmoe_header_banner_img

⋅無⋅限⋅進⋅步⋅

加载中

POST
文章导读
前置知识

HTML基础（二）

avatar
yuhui 2025年10月24日 29
0 评论

HTML基础（二）

Div+CSS

CSS (Cascading Style Sheets) 是一种样式表语言，用于描述HTML或XML（包括各种XML方言如SVG、XHTML等）文档的呈现方式。CSS允许开发者控制网页的设计和布局，包括颜色、字体、间距以及元素的位置等。通过将内容（HTML）与表现形式（CSS）分离，使得网站维护更加容易，同时提高了页面加载速度和可访问性。

CSS的基本使用方法

  1. 内联样式：直接在HTML标签中使用style属性来添加样式。
<p style="color: blue; font-size: 20px;">这是一段蓝色的文字。</p>
  1. 内部样式表：在HTML文档的<head>部分定义<style>标签来包含CSS规则。
<head>
    <style>
        p { color: red; }
        h1 { font-family: Arial, sans-serif; }
    </style>
</head>
  1. 外部样式表：创建一个单独的.css文件，并通过<link>标签链接到HTML文档中。
    • 创建一个名为 styles.css 的文件：
body {
    background-color: lightblue;
}

h1 {
    text-align: center;
}
- 在HTML文件中引用该CSS文件：
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS选择器

  • 元素选择器：直接使用HTML标签名作为选择器。
p { color: green; }
  • 类选择器：使用.加上类名来选择带有特定类的所有元素。
.warning { color: red; }
  • ID选择器：使用#加上ID名来选择具有特定ID的单个元素。
#uniqueElement { width: 200px; }
  • 属性选择器：基于元素的属性值进行匹配。
[type="submit"] { background: yellow; }
  • 伪类：用于定义元素的特殊状态。
a:hover { color: orange; }  /* 鼠标悬停时改变链接颜色 */

CSS盒模型

每个HTML元素都可以看作是一个矩形盒子，这个盒子由四个部分组成：外边距(margin)、边框(border)、内填充(padding) 和实际内容(content)。理解这些概念对于掌握布局技巧非常重要。

响应式设计

随着移动设备的普及，响应式网页设计变得越来越重要。CSS提供了媒体查询功能，可以根据不同屏幕尺寸应用不同的样式规则。

@media (max-width: 600px) {
    body {
        background-color: lightgreen;
    }
}

在HTML中引用外部样式表

通过将CSS代码放在一个单独的文件中，并使用<link>标签来链接这个文件，可以使得HTML文档更加简洁、易于阅读。下面是如何在HTML文档中引用外部样式表的基本步骤：

  1. 创建CSS文件：首先需要创建一个.css文件（例如 styles.css），并在其中定义所需的样式规则。
  2. 保存CSS文件：确保你的CSS文件保存在适当的位置。通常情况下，推荐将其放置在一个专门存放样式表的目录下，比如命名为 css 的文件夹。
  3. 在HTML文档中引入CSS文件：接下来，在你的HTML文档头部（即 <head> 标签内）添加一个 <link> 标签来指向你刚刚创建的CSS文件。这是通过设置 <link> 标签的 href 属性完成的，该属性值为CSS文件相对于HTML文件的路径。同时还需要设置 rel 属性为 "stylesheet" 以指定这是一个样式表链接。

假设项目结构如下：

/project
    /css
        styles.css
    index.html

那么，index.html 文件中的内容可能看起来像这样：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <!-- 引用外部样式表 -->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <h1>欢迎来到我的主页</h1>
    <p>这是一个简单的段落。</p>
</body>
</html>

在这个例子中，<link rel="stylesheet" href="css/styles.css"> 这一行就是在告诉浏览器去加载位于 css 文件夹下的 styles.css 文件，并应用其中定义的所有样式到当前页面上。这里使用了相对路径。

background子属性

在CSS中，background属性实际上是由多个子属性组成的，这些子属性可以单独使用来更精细地控制背景的效果。下面详细介绍几个常用的background子属性，

1. background-size

  • 作用：定义背景图片的尺寸。
  • 值：
    • auto（默认）: 图片保持其原始大小。
    • length：指定宽度和高度，例如50px 100px。
    • %：相对于包含块的百分比，例如50% 75%。
    • cover：调整图片大小以覆盖整个背景区域，同时保持图片的比例。如果需要，图片会被裁剪。
    • contain：调整图片大小使其完全适应背景区域，同时保持图片的比例。可能会留下空白边缘。
    • initial：设置为默认值。
    • inherit：从父元素继承该属性的值。
  • 示例：
.example {
    background-image: url('image.jpg');
    background-size: cover; /* 背景图像将覆盖整个元素 */
}

2. background-position

  • 作用：确定背景图像的位置。
  • 值：
    • 关键词：top, bottom, left, right, center。
    • 长度值或百分比：如20px 30px或20% 30%。
    • 可以组合使用，例如center top表示居中且顶部对齐。
  • 示例：
.example {
    background-image: url('image.jpg');
    background-position: center; /* 背景图像居中 */
}

3. background-repeat

  • 作用：定义背景图像是否以及如何重复。
  • 值：
    • repeat（默认）：水平和垂直方向上都平铺。
    • repeat-x：仅沿x轴（水平）平铺。
    • repeat-y：仅沿y轴（垂直）平铺。
    • no-repeat：不重复。
    • space：平铺但保留一定间距。
    • round：调整图片大小以填满整个空间，可能拉伸或压缩图片。
  • 示例：
.example {
    background-image: url('image.jpg');
    background-repeat: no-repeat; /* 不重复 */
}

4. background-attachment

  • 作用：控制背景图像是固定不动还是随着页面滚动。
  • 值：
    • scroll（默认）：背景随内容滚动。
    • fixed：背景固定不动，即使页面滚动也保持位置不变。
  • 示例：
.example {
    background-image: url('image.jpg');
    background-attachment: fixed; /* 固定背景 */
}

5. background-origin

  • 作用：定义背景图像相对于哪个盒子进行定位。
  • 值：
    • border-box（默认）：背景图像相对于边框盒定位。
    • padding-box：背景图像相对于内填充盒定位。
    • content-box：背景图像相对于内容盒定位。
  • 示例：
.example {
    background-image: url('image.jpg');
    background-origin: content-box; /* 相对于内容盒定位 */
}

6. background-clip

  • 作用：定义背景图像的绘制区域。
  • 值：
    • border-box（默认）：背景图像绘制到边框盒。
    • padding-box：背景图像绘制到内填充盒。
    • content-box：背景图像绘制到内容盒。
  • 示例：
.example {
    background-image: url('image.jpg');
    background-clip: padding-box; /* 绘制到内填充盒 */
}

border样式

在HTML中，border属性通常不是直接应用于HTML标签上的，而是通过CSS（层叠样式表）来定义元素的边框样式。CSS中的border属性可以非常详细地控制一个元素四周边框的表现形式，包括宽度、样式以及颜色等。下面是对border及其子属性的一个详细介绍：

1. border 简写属性

border 是一个简写属性，允许你在一个声明中设置所有四个边的边框宽度、样式和颜色。

  • 语法：border: [width] || [style] || [color];
  • 示例：
div {
  border: 2px solid red; /* 设置了宽度为2像素，实线样式，红色 */
}

2. 子属性详解

a. border-width

指定边框的宽度。

  • 可能值：thin, medium, thick, 或者具体的长度单位如 px, em 等。
  • 示例：
div {
  border-width: 5px; /* 所有边宽都是5px */
  border-width: 2px 4px 6px 8px; /* 上右下左分别为2px, 4px, 6px, 8px */
}

b. border-style

定义边框的样式。

  • 常见值：none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
  • 示例：
div {
  border-style: dotted; /* 点状边框 */
}

c. border-color

设置边框的颜色。

  • 可能值：任何有效的CSS颜色值，例如关键字 (red, blue), 十六进制 (#FF0000), RGB, RGBA, HSL, HSLA.
  • 示例：
div {
  border-color: #ff0000; /* 红色边框 */
  border-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

d. 分方向设置

除了使用通用的border外，还可以针对每个方向单独设置边框：

  • border-top, border-right, border-bottom, border-left —— 这些属性都可以接受与border相同的值组合。
    示例:
div {
  border-top: 3px solid black;
  border-right: 3px dashed blue;
  border-bottom: 3px double green;
  border-left: 3px inset yellow;
}

注意事项

  • 如果只指定了border-style而没有指定宽度或颜色，则默认宽度为medium，颜色为文本颜色。
  • border属性可以用来快速定义整个边框，但如果需要更细致的控制，推荐分开使用border-width, border-style, 和 border-color.

CSS里的注释/…/

字体属性

在HTML中，CSS（层叠样式表）用于控制网页的布局和外观。关于文字属性，CSS提供了多种方式来改变文本的表现形式，包括字体、大小、颜色、对齐方式等。下面是一些常用的文字相关CSS属性及其详细说明：

  1. font-family：定义文本的字体系列。
    • 例子：font-family: Arial, sans-serif;
    • 这条规则首先尝试使用Arial字体显示文本；如果用户的系统上没有安装Arial，则会使用默认的无衬线字体。
  2. font-size：设置字体大小。
    • 例子：font-size: 16px;
    • 可以用像素(px)、百分比(%)或其他单位如em或rem来指定大小。
  3. color：定义文本的颜色。
    • 例子：color: #ff0000; 或 color: red;
    • 颜色可以通过名称、十六进制值、RGB值等多种方式进行设定。
  4. text-align：水平对齐文本。
    • 例子：text-align: center;
    • 值可以是left, right, center或者justify（两端对齐）。
  5. line-height：设置行间距。
    • 例子：line-height: 1.5;
    • 数字表示相对于当前字体大小的比例。也可以直接设置为具体的长度单位。
  6. letter-spacing：增加或减少字符间的间距。
    • 例子：letter-spacing: 2px;
    • 正值将使字母间距离变宽，负值则相反。
  7. word-spacing：调整单词之间的间距。
    • 例子：word-spacing: 5px;
    • 类似于letter-spacing，但作用于整个单词之间。
  8. text-decoration：向文本添加装饰线。
    • 例子：text-decoration: underline;
    • 可选值包括none, underline, overline, line-through等。
  9. text-transform：控制文本的大小写转换。
    • 例子：text-transform: uppercase;
    • 其他选项有lowercase和capitalize。
  10. font-weight：定义字体粗细。
    • 例子：font-weight: bold;
    • 可以使用关键字如normal, bold，或是数字从100到900。
  11. font-style：设置斜体。
    • 例子：font-style: italic;
    • 主要用于强调内容，除了italic外还有normal和oblique。
      这些只是基础的一部分，CSS还提供了更多高级功能如文本阴影(text-shadow)、多列布局(columns)等。

列表

    的属性

HTML 列表（包括无序列表 <ul>、有序列表 <ol> 和定义列表 <dl>）可以使用多种 CSS 属性来控制其外观。下面是一些常用的 CSS 属性，这些属性可以帮助你定制列表的样式：

  1. list-style-type:
    • 用于设置列表项标记的类型。
    • 常见值：disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none等。
    • 示例: list-style-type: square;
  2. list-style-position:
    • 控制列表项目符号的位置。
    • 可选值：inside 或 outside。
    • 示例: list-style-position: inside;
  3. list-style-image:
    • 使用图像作为列表项标记。
    • 需要提供一个 URL 地址。
    • 示例: list-style-image: url('images/bullet.png');
  4. margin 和 padding:
    • 调整列表及其项周围的空白区域。
    • 示例: 
ul {
  margin: 10px 0;
  padding-left: 20px;
}
  1. color:
    • 设置文本颜色。
    • 示例: color: #333;
  2. font-family, font-size, font-weight:
    • 分别用来指定字体系列、大小和粗细。
    • 示例: 
li {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
}
  1. text-align:
    • 控制文本对齐方式。
    • 可选值：left, right, center, justify。
    • 示例: text-align: left;
  2. background-color:
    • 为列表或单个列表项添加背景色。
    • 示例: background-color: #f0f0f0;
  3. border:
    • 添加边框到列表项上。
    • 包括宽度、样式和颜色。
    • 示例: border: 1px solid #ccc;
  4. display:
    • 更改元素显示模式。
    • 如将列表项显示为内联块(inline-block)以允许在同一行显示多个列表项。
    • 示例: display: inline-block;
  5. float:
    • 浮动元素，常用于创建水平布局。
    • 可选值：left, right, none, inherit。
    • 示例: float: left;
  6. clear:
    • 指定元素旁不允许有浮动元素。
    • 可选值：both, left, right, none, inherit。
    • 示例: clear: both;

超链接的属性

在HTML中，超链接是通过<a>标签来定义的。对于这个标签，可以通过CSS（层叠样式表）设置多种属性来改变其外观和行为。下面是一些常用的CSS属性，可以应用于<a>标签来定制超链接的样式：

  1. color – 设置链接文字的颜色。
a {
  color: blue; /* 默认颜色为蓝色 */
}
  1. text-decoration – 控制链接下划线、上划线等装饰效果。
a {
  text-decoration: none; /* 去除默认的下划线 */
}
  1. font-size – 调整链接字体大小。
a {
  font-size: 16px;
}
  1. font-weight – 设置链接字体粗细。
a {
  font-weight: bold; /* 加粗显示 */
}
  1. background-color – 设置链接背景色。
a {
  background-color: yellow; /* 黄色背景 */
}
  1. padding – 给链接添加内边距。
a {
  padding: 10px 20px; /* 上下10像素，左右20像素 */
}
  1. border – 为链接添加边框。
a {
  border: 2px solid red; /* 宽度为2像素的红色实线边框 */
}
  1. transition – 添加过渡效果，使链接样式变化更平滑。
a {
  transition: all 0.3s ease; /* 所有属性变化时使用0.3秒的缓动效果 */
}
  1. display – 改变元素的显示方式（如块级或行内）。
a {
  display: block; /* 将链接作为块级元素显示 */
}
  1. cursor – 更改鼠标悬停时的指针形状。
a {
  cursor: pointer; /* 指针变成手形 */
}

此外，还可以根据链接的不同状态应用不同的样式，比如：

  • a:link – 正常未访问过的链接。
  • a:visited – 已经访问过的链接。
  • a:hover – 鼠标悬停于链接之上。
  • a:active – 链接被点击激活的状态。
    示例代码：
/* 不同状态下的链接样式 */
a:link {
  color: #FF0000; /* 红色 */
}
a:visited {
  color: #00FF00; /* 绿色 */
}
a:hover {
  color: #0000FF; /* 蓝色，并且有下划线 */
  text-decoration: underline;
}
a:active {
  color: #FFFF00; /* 黄色 */
}

盒子模型

1743073609097-16309bfc-3a65-4f12-9e95-80d00e60c140.png

1743073661102-e24c39b6-523c-4dba-8664-8e517f463ced.png

HTML中的盒子模型（Box Model）是用于布局和设计网页的基础概念。每个HTML元素都可以看作是一个矩形的盒子，这个盒子由几个部分组成：内容区域（content）、内边距（padding）、边框（border）以及外边距（margin）。

1. 内容区域 (Content)

  • 定义：这是盒子内部实际存放文本或图像等信息的地方。
  • 属性：
    • width 和 height：设置内容区的宽度和高度。
    • 注意，在某些情况下，如当使用了box-sizing: border-box;时，设定的宽度会包括padding和border在内。

2. 内边距 (Padding)

  • 定义：围绕着内容区域的一层空间，可以用来增加内容与边框之间的距离。
  • 属性：
    • padding-top, padding-right, padding-bottom, padding-left 分别控制上、右、下、左四个方向上的内边距。
    • 简写形式如 padding: 10px 20px; 表示上下为10像素，左右各20像素；或者 padding: 5px 10px 15px 20px; 依次对应上、右、下、左四个方向。

3. 边框 (Border)

  • 定义：包围内边距及内容的一个边界线。
  • 属性：
    • border-width 控制边框粗细。
    • border-style 定义边框样式，如实线(solid)、虚线(dashed)等。
    • border-color 设置边框颜色。
    • 可以通过组合简写，例如 border: 2px solid black; 同时设置了宽度、样式和颜色。
    • 每个方向也可以单独设置，比如 border-top、border-right 等。

4. 外边距 (Margin)

  • 定义：位于边框之外的空间，主要用于调整元素间的间距。
  • 属性：
    • margin-top, margin-right, margin-bottom, margin-left 分别控制四周的外边距。
    • 类似于padding，也支持简写方式，如 margin: 10px 20px; 或 margin: 5px 10px 15px 20px;。
    • 特别地，margin: auto; 通常用于水平居中块级元素。

其他相关属性

  • box-sizing:
    • 默认值为 content-box，即宽度和高度仅应用于内容区。
    • 设置为 border-box 时，宽度和高度将包含padding和border，这使得布局更加直观。

  • display:

    • 影响元素如何显示以及与其他元素交互的方式。例如，block、inline、inline-block 等。

float属性

1. float 属性值

  • left：使元素向左浮动。
  • right：使元素向右浮动。
  • none (默认)：元素不浮动。
  • inherit：从父元素继承float值。

2. 使用场景

  • 布局设计：常用来创建多列布局或让图片等元素与其他内容并排显示。
  • 清除浮动：使用clear属性来防止后续元素因前一个元素的浮动而受到影响。

3. 示例代码

HTML

<div class="container">
    <div class="box left">左边浮动</div>
    <div class="box right">右边浮动</div>
    <p>这是段落文字，可以看到两边都有浮动元素。</p>
</div>

CSS

.container {
    width: 80%;
    margin: auto;
    border: 1px solid #ccc;
}
.box {
    width: 45%;
    padding: 10px;
    background-color: lightblue;
    margin: 5px;
}
.left {
    float: left;
}
.right {
    float: right;
}

4. 浮动的影响与解决方法

  • 影响：如果一个容器内所有子元素都设置了浮动，则可能导致父容器的高度塌陷，即父容器看起来像是没有高度一样。
  • 解决方案：
    • 添加额外的<div>标签并在其上设置clear:both;样式。
    • 对于现代浏览器，可以使用伪类选择器::after加上clear:both;以及content:""; display:block;来自动清理浮动而不需额外添加HTML标记。
    • 或者直接给父级元素设置overflow:auto;或overflow:hidden;也可以触发BFC（块格式化上下文），从而包含浮动元素的高度。

5. 注意事项

  • 尽量减少对float的依赖，因为随着Flexbox和Grid布局技术的发展，现在有了更多更灵活的方式来实现复杂的网页布局。
  • 确保正确处理浮动带来的布局问题，避免页面结构混乱。

在HTML中，元素主要分为两大类：块级元素（Block-level elements）和行内元素（Inline elements）。这两者之间的区别主要体现在它们如何布局以及与其他元素的关系上。

块级元素

  1. 定义：块级元素在页面中默认会以新行开始，并且占据其父容器的全部宽度。这意味着，如果一个块级元素被放置在一个新的位置，它通常会从新的一行开始。
  2. 例子：
    • <div>
    • <p>
    • <h1>, <h2>, …, <h6>
    • <ul>, <ol>, <li>
    • <table>
    • <form>
  3. 特点：
    • 可以设置宽度、高度、内外边距等属性。
    • 如果不指定宽度，则会自动扩展到其包含它的容器边缘。
    • 不能与另一个块级元素在同一行显示，除非使用了CSS浮动或绝对定位等技术来改变这种行为。

行内元素

  1. 定义：行内元素不会导致换行，多个行内元素可以并排显示在同一行内。它们只占用自身内容所需的宽度，因此可以和其他行内元素一起位于同一行。
  2. 例子：
    • <span>
    • <a>
    • <strong>, <em>
    • <img>
    • <br> (虽然<br>本身是自闭合标签，但它属于行内元素)
  3. 特点：
    • 默认情况下无法设置宽度和高度；不过可以通过CSS的一些特殊处理来实现这一点。
    • 内外边距只能水平方向生效（即左右），垂直方向上的边距不会影响其他元素的位置。
    • 可以通过CSS的display: inline-block;属性将其转换为具有某些块级特性的行内元素，这样就可以同时享受两者的好处了。

转换显示模式

  • 使用CSS中的display属性可以改变元素的默认显示方式。例如，将一个本来是行内级别的<span>设为display: block;后，它就会表现得像一个块级元素一样；反之亦然。
  • inline-block是一种特别有用的值，它允许元素保持行内元素的特性（如可与其他元素共存于一行），同时也能够应用一些块级元素的样式规则（比如设定具体的宽高）。

更新: 2025-03-27 19:31:24
原文: https://www.yuque.com/yuhui.net/network/hchtddx0092wkckt

Post Views: 30
字体

评论（0）

查看评论列表

暂无评论

发表评论

表情 颜文字

插入代码