1224HuangJin 的HTML, CSS 和 JavaScript的学习站

欢迎来到该网站，
该网站是1224HuangJin学习HTML,
JavaScript 与 CSS 的测试网站

以此网站/视频学习：

Mozilla（只学了一页） | PAPAYA电脑教室（已全学完，看完）

《"君子藏器而身，待时而动。"》

An random background image from Siiway

HTML

所有HTML标签总结也在：GitHub中）：

（点击展开）

<!DOCTYPE html> = 声明文档类型为 HTML5
<html lang="zh"></html> = 设定网页语言为中文
<head></head> = 头部文件（不会在网站内显示，用于存放设定）
<meta name="viewport" content="width=device-width" /> = 让网页适配手机等移动设备的屏幕宽度
<title></title> = 网页标题（显示在浏览器标签页上）
<link rel="stylesheet" href="/style/style.css"> = 导入 CSS 样式文件
<body></body> = 网页中所有肉眼可见的主要内容
<nav></nav> = 网页中的导航栏
<main></main> = 网页的主体内容
<header></header> = 头部内容 / 页眉
<h1> 到 <h6> = 标题，子标题等
<p></p> = 普通段落文字
<a href="链接">文字</a> = 插入超链接
<img src="图片链接" width="宽度" height="高度" alt="替代文字"> = 插入图片
<br> = 换行
<blockquote cite="link"></blockquote> = 引用文字，cite 属性用于提供引用的来源链接
<strong></strong> = 加粗文字
<ol><li>...</li></ol> = 有序（数字）列表
<ul><li>...</li></ul> = 无序（圆点）列表
<section class=""></section> = 表示文档中的一个独立章节。—— Mozilla.org
<footer></footer> = 页脚，通常用于显示版权信息等
<div></div> = 定义一个分隔区块，常用于通过 CSS 进行排版布局。—— 菜鸟教程

CSS：

所有的CSS总结也在GitHub中

（点击展开）

1. 基本语法：

/* 选定标签 */
            a { color: blue; }

            /* 选定 Class (注意前面的点) */
            .my-class { font-size: 16px; }

2. 常用属性清单：

color: red; - 更改文字颜色
background-color: black; - 背景颜色
background-image: url(...); - 添加背景图片
background-size: cover; - 背景自动拉伸填充
width / height - 宽度与高度
line-height - 行高（文字间距）
text-align: center; - 文字居中
text-decoration: none; - 去掉链接下划线
border-radius: 5px; - 边框圆角

3. 布局核心 (Flexbox)：

display: flex; - 开启弹性布局
justify-content: center; - 水平居中
align-items: center; - 垂直居中
flex-direction: column; - 元素垂直排列（从上到下）

4. 定位 (Position)：

relative - 相对定位（作为子元素绝对定位的参考）
absolute - 绝对定位（相对于父元素自由移动）
fixed - 固定在屏幕某个位置，不随滚动条移动

5. 响应式设计 (@media)：

@media screen and (max-width: 768px) {
                /* 当屏幕小于768px时执行 */
                .menu { display: block; }
            }

An random background image from Siiway