zszqwe / note_html5

尚硅谷Web前端HTML5 CSS3初学者零基础入门全套完整版学习笔记

NOTE_HTML5

介绍

✨尚硅谷Web前端HTML5 CSS3初学者零基础入门全套完整版学习笔记

更新

• 语雀🔗：Web前端HTML5&CSS3 · 语雀 (yuque.com)
• Github🔗：vectorxxxx/NOTE_HTML5: 尚硅谷Web前端HTML5 CSS3初学者零基础入门全套完整版学习笔记 (github.com)
• Gitee🔗：NOTE_HTML5: 尚硅谷Web前端HTML5 CSS3初学者零基础入门全套完整版学习笔记 (gitee.com)
• CC🔗：VectorUx / NOTE_HTML5 · CODE CHINA (csdn.net)

✨看文档推荐使用语雀，感觉更加简洁；需要图片资源的推荐下面几个代码托管平台，都是同步更新的哦！

✨同时，为了更方便大家在托管平台上直接看，特意整理了一下结构（因为默认只有README文件会有目录结构，所以每节单独放到了一个文件夹下面）

✨其他平台因为审核限制的原因，内容上应该没有上面几个全，大家可以自行选择

• 博客园🔗：Web前端HTML5&CSS3 - 随笔分类 - VectorX - 博客园 (cnblogs.com)
• CSDN🔗：Web前端_VectorX's Blog-CSDN博客
• 掘金🔗：VectorX 的个人主页 - 文章 (juejin.cn)

✨另外，新搭建了一个Github Pages网站，大家可以去尝尝鲜~

• 我的博客🔗：标签 | VectorX (vectorxxxx.github.io)

**整理不易，还望各位看官一键三连 ❤️ ❤️ ❤️ **

**整理不易，还望各位看官一键三连 ❤️ ❤️ ❤️ **

**整理不易，还望各位看官一键三连 ❤️ ❤️ ❤️ **

✨下面开始吧~

---

✨目前，因为本人是边学边更的，目前还没有学习完毕，所以暂时只整理了这些

软件

✨视频中使用到的软件和资源，还有一些其他的开发工具，仅供参考（eg. 考虑到部分下载速度的问题，特意整理了部分软件到Software仓库下，大家可以自取）

Zeal

• 离线文档：Zeal - Offline Documentation Browser

NotePad

• 官方地址：notepad-plus-plus.org
• Softonic地址：Notepad++ - Download (softonic.com)

Sublime

• 官方地址：Sublime Text - A sophisticated text editor for code, markup and prose

VS Code

• 官方地址：Visual Studio Code - Code Editing. Redefined
• 安装的插件
  • Chinese (Simplified) Language Pack for Visual Studio Code
  • Ayu
  • vscode-icons
  • Live Server
  • JS & CSS Minifier (Minify)

Atom

• 官方地址：Atom

• Github地址：atom/atom: The hackable text editor (github.com)

• 中文地址：Atom中文网 (baisheng999.com)

WebStorm

• 官方地址：Download WebStorm: The Smartest JavaScript IDE by JetBrains

FastStone Capture

• 下载地址：FastStone Capture - Download

Photoshop精简版

• 下载地址：Adobe_Photoshop_CS6_Lite.7z - 蓝奏云 (lanzoui.com)

网址

字符实体

• HTML 字符实体
• HTML ISO-8859-1 参考手册

CSS Dinner

• 官方地址：CSS Diner - Where we feast on CSS Selectors!

reset样式

• 官方地址：reset.css

normalize样式

• 官方地址：normalize.css

贝叶斯曲线

• 在线地址：https://cubic-bezier.com

实战

• ✅ 京东图片列表
• ✅ 京东左侧导航条
• ✅ 网易新闻列表
• ⬜田径场（这个是我自己学完盒模型之后突发奇想的，大家可以忽略跳过）
• ✅ w3school顶部导航栏
• ✅ 京东轮播图
• ✅ 京东顶部导航条
• ✅ 背景按钮
• ✅ 电影卡片
• ✅ 小米商城
• ✅ 米兔
• ✅ 奔跑的少年
• ✅ 奔跑的川普
• ✅ 弹力球
• ✅ 酷炫球
• ✅ 鸭子表
• ✅ 复仇者联盟

字体

demo\font\

• ZCOOLKuaiLe-Regular.ttf
• ZCOOLQingKeHuangYou-Regular.ttf
• ZCOOLXiaoWei-Regular.ttf

图片

✨为了方便大家，特意上传至图床了，大家可以直接访问链接地址即可右键下载

✨当然也可以直接在代码托管里面demo文件夹下找到再下载

京东图片列表

• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614085058.jpg
• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614085105.jpg
• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614085110.jpg

网易新闻列表

• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614091718.png

京东轮播图

• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614091756.jpg
• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614091849.jpg
• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614091853.jpg
• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614091857.jpg
• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614091909.jpg
• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614091914.jpg
• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614091919.jpg
• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614091924.jpg

背景按钮

• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614092638.png
• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614092650.png
• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614092701.png

雪碧图

• 亚马逊🔗：https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614092755.png
• 背景按钮🔗：https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614092802.png

电影卡片

• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210614092937.jpg

✨psd文件因为没法上传图床，所以大家还是在demo\assets\电影卡片\1.psd直接下载吧~

小米商城

✨因为图片较多，特意写了一个Python脚本爬取了小米商城的部分结构的图片集合

• 头部导航栏img
• 左侧展开导航栏icon

✨如果想要最新的图片，可以安装下Python环境后执行脚本即可；其他图片可以自取

米兔

• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210623204918.png

奔跑的少年

• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210623205014.png

奔跑的川普

• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210626190723.png

鸭子表

• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210626190532.jpg
• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210626190558.png

复仇者联盟

• 🔗 https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210626190817.jpg
• 🔗 ​https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210626190822.jpg
• 🔗 ​https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210626190826.jpg
• 🔗 ​https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210626190838.jpg
• 🔗 ​https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210626190851.jpg
• 🔗 ​https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210626190855.jpg

整理难免有疏忽和遗漏的地方，欢迎大家指正批评！

---

署名 4.0 国际 (CC BY 4.0)。您可以自由地：共享 — 在任何媒介以任何形式复制、发行本作品；演绎 — 修改、转换或以本作品为基础进行创作；在任何用途下，甚至商业目的。只要你遵守许可协议条款，许可人就无法收回你的这些权利。惟须遵守下列条件：署名 — 您必须给出适当的署名，提供指向本许可协议的链接，同时标明是否（对原始作品）作了修改。您可以用任何合理的方式来署名，但是不得以任何方式暗示许可人为您或您的使用背书。