HTML，CSS复习（1）

最新推荐文章于 2024-10-17 10:16:05 发布

数学难

最新推荐文章于 2024-10-17 10:16:05 发布

阅读量629

点赞数 14

文章标签： html css 笔记

本文链接：https://blog.csdn.net/m0_72765822/article/details/139010341

版权

一、HTML5基础

1、HTML5文件结构

当涉及到HTML5的文件结构时，它主要由几个关键部分组成，这些部分共同构成了一个完整的HTML文档。以下是HTML5文件结构的详细介绍：

1. 文档类型声明（Doctype）:
这是HTML5文档的第一行，它告诉浏览器该文档使用的是HTML5。文档类型声明是`<!DOCTYPE html>`，并且不需要关闭标签。它确保了浏览器以正确的模式（即标准模式而非怪异模式）来渲染页面。

2. html元素:
`<html>`标签是HTML5文档的根元素，它包含了整个HTML文档的内容。所有的其他HTML元素都包含在这个标签内。

3. head元素:
`<head>`元素包含了文档的元（meta）数据，这些数据不会直接显示在页面上，但对于浏览器和其他网络机器是可用的。`<head>`元素内部通常包含以下元素：

- title元素: 使用`<title>`标签定义，它指定了文档的标题，显示在浏览器的标题栏或标签页上。同时，这个标题也是搜索引擎结果中的一个重要因素。
- meta元素: 使用`<meta>`标签定义，它可以提供文档的元信息，如字符编码、页面描述、关键词等。这些信息有助于搜索引擎理解页面内容，并可以影响页面在搜索结果中的排名。
- link元素: 使用`<link>`标签定义，用于链接到外部资源，如CSS样式表。
- style元素: 使用`<style>`标签定义，它包含了文档的CSS样式信息，这些样式信息可以直接在HTML文档中定义。
- script元素: 使用`<script>`标签定义，用于包含或引用JavaScript代码。

4. body元素:
`<body>`元素包含了所有的网页可见内容，如文本、图片、音频、视频、链接、列表、表格等。在`<body>`元素中，可以使用各种HTML标签和属性来组织、布局和样式化这些内容。

一个基本的HTML5文件结构示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <!-- 这里是网页的可见内容 -->
    <h1>欢迎来到我的网页</h1>
    <p>这是一段示例文本。</p>
    <!-- 其他HTML元素和内容 -->
</body>
</html>

2、常用基本标签

HTML（HyperText Markup Language，超文本标记语言）包含了许多用于创建网页结构和内容的常用基本标签。以下是一些常见的HTML标签及其简要说明：

1. 标题标签

*`<h1>` 到 `<h6>`：定义标题或子标题。`<h1>` 定义最重要的标题，`<h6>` 定义最不重要的标题。

2. 段落和换行标签

*`<p>`：定义段落。
*`<br>`：插入一个简单的换行符。

3. 文本格式化标签

* `<b>` 或 `<strong>`：加粗文本。`<strong>` 在语义上更强调重要性。
* `<i>` 或 `<em>`：使文本斜体。`<em>` 在语义上表示强调。
* `<u>`：对文本加下划线（但现代网页设计通常使用CSS来实现此效果）。
* `<s>` 或 `<del>`：表示文本不再正确或不再相关。`<del>` 在语义上表示文本已被删除。
* `<strike>`：为文本添加删除线（但`<del>`更常用且更具语义化）。

4. 链接标签

* `<a>`：定义超链接，用于链接到其他页面或资源。

5. 图像标签

* `<img>`：用于在网页上插入图像。

6. 列表标签

* `<ul>`：定义无序列表。
* `<ol>`：定义有序列表。
* `<li>`：定义列表项，通常与`<ul>`或`<ol>`一起使用。
* `<tr>`：定义表格行。
* `<th>`：定义表格头部单元格，通常包含粗体居中的文本。
* `<td>`：定义表格数据单元格。

8. 表单标签

* `<form>`：定义HTML表单，用于用户输入。
* `<input>`：定义输入字段，可以是文本、密码、复选框、单选按钮、提交按钮等。
* `<textarea>`：定义多行文本输入字段。
* `<label>`：为`<input>`元素定义描述或标签。
* `<select>` 和 `<option>`：定义下拉列表。
* `<button>`：定义点击按钮。

9. 布局和容器标签

* `<div>`：定义文档中的一个块级容器，常用于CSS布局和样式化。
* `<span>`：定义文档中的一个内联容器，常用于对文本片段应用样式。

10. 语义化标签

HTML5引入了许多语义化标签，这些标签有助于描述网页的内容，对搜索引擎友好，并且使网页更易于理解和访问。

* `<header>`：定义文档或节的头部。
* `<footer>`：定义文档或节的页脚。
* `<article>`：定义文档、页面、应用或网站中独立的自包含内容。
* `<section>`：定义文档中的独立部分。
* `<nav>`：定义导航链接。
* `<aside>`：定义页面内容之外的内容（如侧边栏）。

这只是HTML中常用基本标签的一小部分。HTML提供了丰富的标签和属性，用于创建复杂且功能强大的网页。

3、网页布局

HTML的网页布局是指在网页中安排和组织内容的方式，它涉及到如何放置页面元素（如文字、图片、视频等），以及如何确定它们之间的关系和空间。以下是对HTML网页布局的详细介绍：

1. 布局的重要性：HTML页面布局是Web开发中非常重要的一部分，因为它可以影响用户对网站的使用和体验。通过合理的页面布局，开发人员可以创建易于导航和浏览的页面，并使其具有适当的结构和外观，从而达到最佳的用户体验效果。
2. 布局方式：HTML页面布局有多种方法，包括但不限于网格系统、栅格布局、定位布局、框架布局等。每种方法都有其独特的优缺点和适用场景。例如，网格系统适用于需要整齐排列页面元素的场景，而定位布局则适用于需要精确控制元素位置的场景。
3. 页面结构：一个典型的HTML页面布局通常包括以下几个部分：
* 头部区域（Header）：位于页面顶部，通常包含网站的标题、标志、导航栏等元素。
* 导航栏（Navigation Bar）：位于页面顶部或侧边，提供网站的主要导航链接，帮助用户快速找到所需的内容。
* 内容区域（Content Area）：页面的主体部分，用于显示网站的主要内容，如文章、图片、视频等。
* 底部区域（Footer）：位于页面底部，通常包含联系信息、版权信息等与网页相关的其他查询。
4. 布局标签：在HTML中，可以使用多种标签来实现页面布局。其中，`<div>`标签是一个常用的块级元素，用于组合其他HTML元素并创建页面布局。
5. 响应式布局：随着移动设备的普及，响应式布局变得越来越重要。响应式布局可以根据设备的屏幕尺寸和分辨率自动调整页面布局，以确保在不同设备上都能获得良好的用户体验。这通常通过使用CSS媒体查询（Media Queries）来实现。
6. 设计要点：在设计HTML页面布局时，需要综合考虑美观与实用性之间的平衡。不同类型的网站和页面往往需要采用不同的布局方式。同时，还需要注意背景、导航条、图像、文字等元素的风格特色，以确保整个页面在视觉上保持一致性和和谐性。

总之，HTML的网页布局是一个复杂而重要的过程，需要开发人员具备丰富的经验和技能。通过合理的布局设计和实现方法，可以创建出易于导航、美观且实用的网页，提升用户体验并增强网站的吸引力。

4、表单

HTML的表单（Forms）是网页中用于收集用户输入数据的重要工具。它们允许用户填写文本、选择选项、上传文件等，并将这些数据提交到服务器进行进一步处理。下面我将详细介绍HTML表单的各个组成部分：

1. `<form>` 标签

`<form>` 标签用于定义HTML表单的开始和结束。该标签通常包含其他表单元素，如输入框、复选框、单选框、提交按钮等。`<form>` 标签有几个重要的属性：

- `action`：指定表单数据提交到的URL地址。
- `method`：指定提交表单时使用的HTTP方法，通常是`GET`或`POST`。
- `enctype`：指定表单数据的编码类型，通常用于文件上传，如`multipart/form-data`。

2. 表单元素

HTML表单包含各种输入元素，这些元素允许用户输入数据。以下是一些常见的表单元素：

`<input>` 标签：
        - `type` 属性定义输入类型，如 `text`（文本）、`password`（密码）、`checkbox`（复选框）、`radio`（单选框）、`submit`（提交按钮）等。
       - `name` 属性定义输入字段的名称，当表单提交时，这个名称将被用作参数名。
       - `value` 属性定义输入字段的初始值。

`<textarea>` 标签：用于多行文本输入。

`<select>` 标签：与 `<option>` 标签一起使用，创建下拉列表。

`<button>` 标签**：定义点击按钮。虽然 `<input type="submit">` 通常用于提交表单，但 `<button>` 标签提供了更多的灵活性和样式化选项。

`<label>` 标签：为 `<input>` 元素定义描述或标签。使用 `for` 属性与对应的输入元素的 `id` 属性相关联。

`<fieldset>` 和 `<legend>` 标签：`<fieldset>` 用于将表单内的相关元素组合在一起，`<legend>` 为 `<fieldset>` 元素定义标题。

3. 表单验证

HTML5 引入了表单验证功能，可以在用户提交表单之前检查用户输入的数据。这包括必填字段、电子邮件格式、数字范围等验证。这些验证可以通过在 `<input>` 标签中添加相应的属性（如 `required`、`pattern`、`min`、`max` 等）来实现。

4. 示例

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

<form action="/submit_form" method="post">
  <label for="fname">名字:</label><br>
  <input type="text" id="fname" name="fname" required><br>
  <label for="email">邮箱:</label><br>
  <input type="email" id="email" name="email" required><br>
  <input type="submit" value="提交">
</form>

在这个示例中，表单包含两个输入字段（名字和邮箱），以及一个提交按钮。当用户填写完表单并点击提交按钮时，表单数据将被发送到`/submit_form`这个URL地址，并使用POST方法提交。`required` 属性确保用户必须在提交表单之前填写这些字段。

二、CSS3基础

1、CSS基础语法

当然，CSS（层叠样式表）是用于描述HTML或XML（包括如SVG、MathML等衍生语言）文档样式的语言。CSS的基础语法包括选择器、属性和值。下面我将详细介绍一下CSS的基础语法：

1. CSS规则

一个CSS规则由两部分组成：选择器和声明块。

选择器：选择器用于指定你想要样式化的HTML元素。例如，`p`选择器会选择所有的`<p>`元素。
声明块：声明块包含在大括号`{}`中，由一个或多个声明组成。每个声明由一个属性和一个值组成，属性和值之间用冒号`:`分隔，并用分号`;`结束。

示例：

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

在这个示例中，`p`是选择器，`color: red;`和`font-size: 16px;`是声明。

2. 注释

在CSS中，你可以使用`/*`开始，`*/`结束的注释来添加注释。注释可以帮助你和其他开发者理解代码。

示例：

/* 这是一个注释 */
p {
  color: red; /* 文本颜色为红色 */
  font-size: 16px;
}

3. 选择器类型

CSS提供了多种选择器，以便更精确地选择你想要样式化的元素。以下是一些常见的选择器类型：

元素选择器：如`p`，选择所有`<p>`元素。
类选择器：以`.`开头，如`.myClass`，选择所有带有`class="myClass"`属性的元素。
ID选择器：以`#`开头，如`#myID`，选择带有`id="myID"`属性的元素。
属性选择器：如`[type="text"]`，选择所有`type`属性为`text`的元素。
伪类选择器：如`:hover`，选择鼠标悬停在其上的元素。
后代选择器（空格分隔）：如`div p`，选择所有`<div>`元素内的`<p>`元素。
子元素选择器**（`>`分隔）：如`div > p`，选择所有`<div>`元素的直接子`<p>`元素。
相邻兄弟选择器（`+`分隔）：如`div + p`，选择紧接在`<div>`元素后的`<p>`元素。
一般兄弟选择器（`~`分隔）：如`div ~ p`，选择`<div>`元素后的所有`<p>`兄弟元素。

4. 单位和颜色值

单位：CSS使用各种单位，如`px`（像素）、`em`（相对于当前元素的字体大小）、`%`（百分比）等。
颜色值：可以使用多种颜色值，如十六进制颜色代码（如`#ff0000`表示红色）、RGB值（如`rgb(255, 0, 0)`表示红色）、RGBA值（包含透明度）、颜色名称（如`red`）等。

5. 继承

在CSS中，某些属性可以从其父元素继承到子元素。例如，如果为`<body>`元素设置了字体颜色，那么除非在子元素中特别指定，否则该子元素将继承该字体颜色。

6. 层叠和优先级

当多个样式应用于同一个元素时，CSS使用层叠规则来确定哪个样式将应用。样式的优先级由选择器的特异性、来源和顺序决定。例如，内联样式（直接在HTML元素中使用的样式）通常具有比外部或内部样式表更高的优先级。

2、文本、背景、列表、超链接属性

当使用CSS来样式化网页时，文本、背景、列表和超链接是常见的元素，它们各自有一组相关的属性用于调整其外观和行为。下面我将详细介绍这些元素及其相关的CSS属性。

文本属性

文本属性用于设置文本的颜色、字体、大小、对齐方式等。以下是一些常见的文本属性：

- `color`：设置文本颜色。
- `font-family`：设置文本的字体系列。
- `font-size`：设置文本字体大小。
- `font-weight`：设置文本的粗细，如 `normal`、`bold`、`bolder`、`lighter` 或数字值（如 `400` 为正常，`700` 为粗体）。
- `font-style`：设置文本样式，如 `normal`、`italic` 或 `oblique`。
- `text-align`：设置文本的水平对齐方式，如 `left`、`right`、`center` 或 `justify`。
- `text-decoration`：设置文本的装饰效果，如 `none`、`underline`、`overline`、`line-through` 或 `blink`。
- `text-indent`：设置文本首行缩进。
- `line-height`：设置文本行高。
- `letter-spacing`：设置字符间距。
- `word-spacing`：设置单词间距。
- `text-transform`：控制文本大小写，如 `none`、`uppercase`、`lowercase` 或 `capitalize`。

背景属性

背景属性用于设置元素的背景颜色、图像、位置、大小等。以下是一些常见的背景属性：

- `background-color`：设置元素的背景颜色。
- `background-image`：设置元素的背景图像。
- `background-repeat`：设置背景图像是否重复以及如何重复，如 `repeat`、`repeat-x`、`repeat-y` 或 `no-repeat`。
- `background-position`：设置背景图像的起始位置，可以使用像素值、百分比或关键字（如 `top`、`right`、`bottom`、`left`、`center`）。
- `background-size`：设置背景图像的大小，如 `auto`、`cover`、`contain` 或具体的宽度和高度值。
- `background-attachment`：设置背景图像是否固定或随页面其余部分滚动，如 `scroll`、`fixed` 或 `local`。

注意，还可以使用 `background` 简写属性来同时设置上述所有背景属性。

列表属性

列表属性用于调整HTML列表（如有序列表 `<ol>` 和无序列表 `<ul>`）的样式。以下是一些常见的列表属性：

- `list-style-type`：设置列表项标记的类型，如 `disc`（实心圆点）、`circle`（空心圆点）、`square`（实心方块）、`decimal`（数字）等。
- `list-style-image`：使用图像作为列表项标记。
- `list-style-position`：设置列表项标记的位置，如 `inside`（标记在文本内）或 `outside`（标记在文本外）。
- `list-style`：简写属性，用于同时设置上述所有列表样式属性。

超链接属性

超链接属性主要用于调整HTML中超链接（`<a>` 元素）的样式。虽然超链接的样式可以通过文本和背景属性来设置，但以下是一些专门针对超链接的属性：

- `color`：设置超链接文本的颜色（未访问、已访问、鼠标悬停和活动状态可以有不同的颜色）。
- `text-decoration`：设置超链接文本的装饰效果，如 `underline`（下划线）或 `none`（无装饰）。

另外，可以使用伪类选择器来针对超链接的不同状态应用不同的样式，如 `:link`（未访问的超链接）、`:visited`（已访问的超链接）、`:hover`（鼠标悬停在超链接上）和 `:active`（用户激活超链接时，如点击时）。

这些属性可以帮助你创建出具有吸引力和可读性的网页。记住，你可以将这些属性应用于任何HTML元素，而不仅仅是文本、背景、列表和超链接。

3、盒子模型

盒子模型（Box Model）是CSS技术中用于设计和布局的重要概念。它将HTML元素视为由内容、内边距（padding）、边框（border）和外边距（margin）组成的矩形盒子。下面我将详细介绍盒子模型的各个部分，并给出一个示例。

盒子模型的组成部分

1. 内容（Content）：这是盒子模型的中心部分，用于包含元素的具体内容，如文本、图片等。内容的大小可以通过设置元素的`width`和`height`属性来定义。
2. 内边距（Padding）：内边距是内容与其边框之间的空间。它位于内容的周围，用于控制内容与边框之间的距离。内边距的大小可以通过设置`padding`属性来定义，该属性可以分别设置上、下、左、右四个方向的内边距，也可以统一设置。
3. 边框（Border）：边框是紧接内边距并围绕在内边距和内容之外的线条。边框的颜色、样式和宽度可以通过设置`border`属性来定义。
4. 外边距（Margin）：外边距是盒子与其他盒子之间的空间。它位于盒子的最外层，用于控制盒子之间的距离。外边距的大小可以通过设置`margin`属性来定义，同样可以分别设置上、下、左、右四个方向的外边距，也可以统一设置。

盒子模型的示例

假设我们有一个`<div>`元素，我们想要为其应用盒子模型的样式。下面是一个示例的CSS代码：

div {
  /* 设置内容的大小 */
  width: 300px;
  height: 200px;
  
  /* 设置内边距 */
  padding: 10px;
  
  /* 设置边框 */
  border: 2px solid #000000;
  
  /* 设置外边距 */
  margin: 15px;
  
  /* 设置背景颜色以便观察 */
  background-color: #f0f0f0;
}

在这个示例中，`<div>`元素的内容大小为300px宽和200px高。它有一个10px的内边距，一个2px宽、黑色实线的边框，以及一个15px的外边距。背景颜色设置为`#f0f0f0`以便更好地观察盒子的结构。

通过将这个CSS样式应用到HTML中的`<div>`元素上，你将看到一个具有指定盒子模型样式的矩形盒子。你可以根据需要调整这些属性的值来改变盒子的外观和布局。

4、浮动与定位

浮动（Float）

在CSS中，浮动（float）是一种定位属性，它允许元素向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。浮动元素不再占据文档流中的空间，因此它们会覆盖在文档流中的其他元素上。浮动主要用于创建文本环绕图像的效果，或者使元素在同一行中排列。

示例：

HTML代码：

<div class="container">
  <img class="float-left" src="example.jpg" alt="浮动的图像">
  <p>这是一段文字，它会环绕在浮动的图像周围。</p>
</div>

CSS代码：

.container {
  width: 600px;
  border: 1px solid #ccc;
  overflow: auto; /* 用于清除浮动产生的布局问题 */
}

.float-left {
  float: left;
  margin-right: 10px; /* 为文本留出空间 */
}

定位（Position）

在CSS中，定位（position）属性允许我们控制元素在页面上的确切位置。CSS提供了四种不同的定位类型：static、relative、absolute和fixed。

* static：这是元素的默认值，表示元素按照文档流进行定位。
* relative：元素相对于其正常位置进行定位。因此，“left:20px”会向元素的LEFT位置添加20像素。
* absolute：元素相对于最近的已定位祖先（而非正常流中的祖先）进行定位。如果没有已定位的祖先元素，那么它的位置相对于最初的包含块。
* fixed：元素相对于浏览器窗口进行定位，即使页面滚动，它仍然始终位于同一的位置。

示例：

HTML代码：

<div class="container">
  <div class="relative">我是相对定位的元素</div>
  <div class="absolute">我是绝对定位的元素</div>
</div>

CSS代码：

.container {
  position: relative; /* 设置为相对定位，以便其子元素可以使用绝对定位 */
  width: 600px;
  height: 400px;
  border: 1px solid #ccc;
}

.relative {
  position: relative;
  top: 50px;
  left: 50px;
  background-color: #f0f0f0;
}

.absolute {
  position: absolute;
  top: 100px;
  right: 0;
  background-color: #ddd;
}

在这个示例中，`.relative`元素相对于其正常位置（即`.container`元素的左上角）移动了50px（向右和向下）。而`.absolute`元素则相对于`.container`元素（因为它是最近的已定位祖先）移动了100px（向下）并紧贴在右边。