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