当前位置：首页 > news >正文

网站开发与制作中期报告购买云服务器

news 2025/11/14 3:51:49

网站开发与制作中期报告,购买云服务器,兰溪市网站建设公司,网站片头动画用什么软件做的前端三大件核心概念 (HTML, CSS, JavaScript) HTML (HyperText Markup Language)：定义页面框架结构与内容语义CSS (Cascading Style Sheets)：负责样式修饰与视觉呈现JavaScript：实现行为交互、动态效果与逻辑处理 CSS：层叠样式表…

前端三大件核心概念 (HTML, CSS, JavaScript)

HTML (HyperText Markup Language)：定义页面框架结构与内容语义
CSS (Cascading Style Sheets)：负责样式修饰与视觉呈现
JavaScript：实现行为交互、动态效果与逻辑处理

CSS：层叠样式表 (Cascading Style Sheet)

一、引入方式

行内样式 (Inline Styles)
- 语法：在 HTML 标签内使用 style 属性
- 示例：<p style="color: red; font-size: 16px;">文本</p>
- 特点：仅作用于当前标签；样式之间无顺序要求
- 缺点：难以维护，代码冗余，不利于复用
页内样式 (Internal Styles / Embedded Styles)
- 语法：在 HTML 文件 <head> 中使用 <style> 标签定义 CSS 规则
- 示例：
```
<head><style>p {color: blue;text-align: center;}</style>
</head>
```
- 特点：作用于当前页面所有匹配元素
- 缺点：无法跨页面复用
外部样式表 (External Stylesheet)
- 语法：使用 <link> 标签引入独立的 .css 文件
- 示例：<link rel="stylesheet" href="styles.css">
- 特点：最佳实践！实现样式与结构分离，高度可维护和复用

引入方式	作用范围	维护性	复用性	推荐度
行内样式	单个标签	差	无	⭐
页内样式	当前页面	中	页面内	⭐⭐
外部样式表	所有引入页面	高	高	⭐⭐⭐

二、选择器 (Selectors)

用于指定 CSS 规则应用的目标元素

基础选择器

元素选择器 (Tag Selector)：p { ... } (选择所有 <p> 标签)
ID 选择器 (ID Selector)：#header { ... } (选择 id="header" 的元素)
类选择器 (Class Selector)：.highlight { ... } (选择 class="highlight" 的元素) - 最常用
通配符选择器 (Universal Selector)：* { ... } (选择所有元素) - 慎用

复合选择器

子代选择器 (Child Selector)：ul > li { ... } (仅选择 ul 的直接子元素 li)
后代选择器 (Descendant Selector)：div p { ... } (选择 div 内部所有层级的 p)
相邻兄弟选择器 (Adjacent Sibling Selector)：h1 + p { ... } (选择紧跟在 h1 后的第一个 p)
通用兄弟选择器 (General Sibling Selector)：h1 ~ p { ... } (选择 h1 后面所有的 p)
交集选择器 (Compound Selector)：p.special { ... } (选择同时具有 p 标签和 .special 类的元素)
并集选择器 (Grouping Selector)：h1, h2, .title { ... } (同时选择 h1, h2 和 .title)

伪类选择器 (Pseudo-classes)

基于元素状态或位置

链接伪类：
- :link - 未访问链接
- :visited - 已访问链接
- :hover - 鼠标悬停 (适用于所有元素)
- :active - 激活状态 (如点击瞬间)
- 顺序口诀：:link -> :visited -> :hover -> :active (LoVe HAte)
子元素伪类：
- :first-child - 父元素的首个子元素
- :last-child - 父元素的最后一个子元素
- :nth-child(n) - 父元素的第 n 个子元素 (n 可填数字、even, odd, 公式如 2n+1)

伪元素选择器 (Pseudo-elements)

创建虚拟元素用于修饰
- ::before - 在元素内容前插入
- ::after - 在元素内容后插入
注意：规范要求使用双冒号 :: (单冒号 : 在 CSS3 前兼容)

三、常用样式属性

属性 (Property)	作用 (Purpose)	常用值 (Common Values)
`color`	文本（前景）颜色	`red`, `#ff0000`, `rgb(255, 0, 0)`
`font-weight`	字体粗细	`normal`, `bold`, `lighter`, `bolder`, `100-900`
`font-size`	字体大小	`12px`, `1em`, `1.5rem`, `100%`
`background-color`	背景颜色	同 `color`
`width` / `height`	内容区域宽度/高度	`200px`, `50%`, `auto`
`font-family`	字体族	`'Arial'`, `'Microsoft YaHei'`, `sans-serif`
`text-decoration`	文本装饰	`none`, `underline`, `line-through`
`text-align`	文本水平对齐	`left`, `center`, `right`, `justify`
`border-radius`	边框圆角	`5px`, `50%`
`list-style`	列表项标记样式	`none`, `disc`, `circle`, `decimal`
`border`	边框（简写）	`1px solid #ccc`

单位与颜色表示法

长度单位 (Length Units)：
- px (像素)：最常用基础单位
  - 物理像素 (Physical Pixel)：设备屏幕的实际发光点 (如 2560x1440)
  - 逻辑像素 / CSS 像素 (Logical Pixel / CSS Pixel)：CSS 中使用的抽象单位 (如 800x600)
颜色表示法 (Color Representations)：
1. 颜色关键词：red, blue, transparent
2. RGB 函数：rgb(255, 0, 0) (红绿蓝分量，各值 0-255)
3. 十六进制：#ff0000 (Red: ff/255, Green: 00/0, Blue: 00/0)
4. 简写十六进制：当每两位相同时可简写为一位，如 #f00 等价于 #ff0000

核心概念：盒模型 (Box Model)

CSS 将每个元素视为一个矩形盒子 (Box)

组成部分：
- 内容区 (Content)：元素的实际内容（宽/高 width/height）
- 内边距 (Padding)：内容区与边框之间的透明区域 (padding-top, padding-right, padding-bottom, padding-left)
- 边框 (Border)：围绕内边距和内容的线条 (border-width, border-style, border-color)
- 外边距 (Margin)：盒子与其他盒子之间的透明区域 (margin-top, margin-right, margin-bottom, margin-left)
尺寸计算：
- 总宽度 = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
- 总高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom

简写属性：

/* 4值: 上 右 下 左 */
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;/* 3值: 上 左右 下 */
margin: 10px 20px 30px;/* 2值: 上下 左右 */
margin: 10px 20px;/* 1值: 上下左右 */
margin: 10px;

文档流 (Normal Flow) 与布局控制

文档流默认规则

块级元素 (Block Elements)：从上到下垂直排列，独占一行 (如 <div>, <p>, <h1>-<h6>)。可设置宽高。
行内元素 (Inline Elements)：从左到右水平排列，不独占一行 (如 <span>, <a>, <strong>)。宽高由内容决定，设置宽高无效。

浮动 (Float)

作用：使元素脱离标准流，向左或向右移动，直到碰到包含框或另一个浮动元素。常用于实现文字环绕或早期布局。
值：float: left; / float: right; / float: none;

清除浮动 (Clear)

解决父元素高度塌陷（因浮动元素脱离文档流导致父元素高度计算为0）问题

原则：
1. 必须作用于块级元素 (block 或 inline-block)。
2. 必须位于所有浮动元素之后。
3. 必须是浮动元素的兄弟元素。
值：clear: left; / clear: right; / clear: both; (最常用)
常用方法：在浮动元素末尾添加一个空元素并设置 clear: both;，或使用伪元素 ::after 清除。

显示模式 (Display)

作用：控制元素的显示类型及其子元素的布局方式。
常用值：
- display: block; - 块级元素
- display: inline; - 行内元素
- display: inline-block; - 行内块元素 (具有行内元素的排列特性，同时可设置宽高)
- display: none; - 隐藏元素，不占据空间
- display: flex; - 弹性盒子布局 (现代布局核心)
- display: grid; - 网格布局 (现代布局核心)

定位 (Positioning)

精确控制元素在页面中的位置，打破文档流规则

属性：position
常用值：
1. static (默认)：静态定位，元素遵循标准流。
2. relative：相对定位。
  - 参照物：元素在标准流中的原始位置。
  - 使用 top, right, bottom, left 进行偏移。
  - 占据原始空间（偏移后原位置保留空白）。
3. absolute：绝对定位。
  - 参照物：最近的非 static 定位祖先元素。若无，则相对于初始包含块 (通常是 <html> 或 <body>）。
  - 完全脱离文档流，不占据空间。
  - 使用 top, right, bottom, left 进行定位。
4. fixed：固定定位。
  - 参照物：浏览器视口 (Viewport)。
  - 完全脱离文档流，不随页面滚动而移动。
  - 使用 top, right, bottom, left 进行定位。
5. sticky (补充)：粘性定位。
  - 特性：在特定阈值内表现为 relative，超出后变为 fixed。
  - 参照物：最近的滚动祖先或视口。
  - 需配合 top, right, bottom, left 设置阈值。

CSS 布局 (Layout)

HTML 页面设计与实现的过程，本质就是布局的过程

核心目标：在页面上合理、灵活地排列和组织元素。
经典布局模式：
- 圣杯布局 (Holy Grail Layout)：
  - 三栏布局（左右固定宽度，中间自适应）。
  - 中间内容在 HTML 结构中优先出现 (利于 SEO)。
  - 实现技术：浮动 + 负外边距 + 相对定位。
- 等分布局 (Equal Column Layout)：
  - 多列宽度相等且自适应容器宽度。
  - 实现技术：浮动、Flexbox (flex: 1;)、Grid (grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));) 均可实现。
现代布局技术：
- Flexbox (弹性盒子)：适合一维布局（行或列）。
- Grid (网格)：适合二维布局（行列同时控制）。
- Responsive Design (响应式设计)：使用媒体查询 (@media)、Flexbox、Grid 等技术使页面适应不同屏幕尺寸。