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-size 和 color 是属性，它们用于设置字体大小和颜色，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