前端开发基础知识整理--web综合篇

阅读时长 3 分钟读完

1. HTML

1.1 基本结构和标签

HTML 是 Web 开发的基石,它定义了网页的结构和内容。一个典型的 HTML 文档包括以下几个部分:

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    -------------------
  -------
  ------
    ---- ---- ---
  -------
-------

其中,<!DOCTYPE html> 是文档类型声明,告诉浏览器这是一个 HTML5 文档。<html> 标签包含了整个文档,<head> 标签中通常包含一些元数据,比如字符集定义和页面标题,<body> 标签中包含了实际的页面内容。

1.2 常用标签和属性

HTML 中有很多标签和属性,下面列出一些常用的:

  • <a>:链接标签,用于跳转到其他页面或位置。
  • <div>:块级元素,用于组织和布局页面内容。
  • <p>:段落标签,用于表示文本段落。
  • <img>:图片标签,用于显示图片。
  • <input>:输入标签,用于接收用户输入。
  • <ul><li>:无序列表标签,用于显示项目列表。
  • <ol><li>:有序列表标签,用于显示编号列表。

这些标签可以通过属性来进行更加细致的定制,比如 class 属性用于指定 CSS 样式表中的样式类名,id 属性用于在 JavaScript 中获取元素。

2. CSS

2.1 基本语法和选择器

CSS 用于控制网页的样式和布局。它可以通过选择器来选中页面上的元素,并为其定义样式。

-- -------------------- ---- -------
-- ----- --
-- -
  ---------- -----
  ------ -----
-

--------- -
  ----------------- -----
-

上面的代码定义了两个样式,一个是应用于所有 <h1> 标签的样式,另一个是应用于具有 my-class 类名的元素的样式。其中,font-sizecolor 是属性,它们用于设置字体大小和颜色,background-color 则用于设置背景颜色。

CSS 中常见的选择器包括:

  • 元素选择器:通过元素名称选中元素,例如 h1
  • 类选择器:通过类名选中元素,例如 .my-class
  • ID 选择器:通过 ID 名称选中元素,例如 #my-id
  • 后代选择器:通过嵌套关系选中元素,例如 ul li
  • 伪类和伪元素选择器:选中特殊状态或位置的元素,例如 :hover::before

2.2 盒子模型和布局

CSS 中的盒子模型用于描述元素的尺寸和边框。每个元素可以看作是一个矩形盒子,包含内容区、内边距、边框和外边距四个部分。其中,内边距和外边距用于控制盒子之间的距离和元素内部的空间。

CSS 的布局方式有很多种,常见的包括:

  • 流式布局:元素按照文档流排列,可以通过设置宽度或百分比实现自适应布局。
  • 弹性布局:元素可以根据容器大小自动调整大小和位置。
  • 栅格布局:将页面划分为多个网格区

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/8872

纠错
反馈