Skip to content

C
Coding Tree

檀越@新空间 / Coding Tree

通知 2
Star 0
Fork 0
C
Coding Tree
提交 d4a406d0 编写于 作者: 彭世瑜's avatar 彭世瑜
浏览文件
操作

fix

上级 3d874b90
显示空白变更内容
内联 并排
Showing with 273 addition and 10 deletion
_sidebar.md
浏览文件 @ d4a406d0
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
- [Javascript](doc/javascript.md) - [Javascript](doc/javascript.md)
- [Css](doc/css.md) - [Css](doc/css.md)
- [Canvas](doc/canvas.md) - [Canvas](doc/canvas.md)
- [微信小程序](doc/miniprogram.md)
- [Vue.js](doc/vue.md)
- 后端 - 后端
......
blog/demo/demo.html 0 → 100644
浏览文件 @ d4a406d0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
button {
width: 60px;
height: 30px;
cursor: pointer;
}
</style>
<div id="app">
<p>{{count}}</p>
<button @click="handleClick(1)"> +1 </button>
<button @click="handleClick(-1)"> -1 </button>
</div>
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script>
console.log("[Docsify Example] : This is a script in a gist");
</script>
<script>
console.log('hi')
new Vue({
el: '#app',
data() {
return {
count: 0
}
},
methods: {
handleClick(val) {
this.count += val;
}
}
})
</script>
</body>
</html>
\ No newline at end of file
blog/front-edn-learn.md 0 → 100644
浏览文件 @ d4a406d0
# 笔记：web 前端开发入门
<!-- <a href="/blog/demo/demo.html" target="_blank">demo</a> -->
[](demo/demo.html ':include :type=code')
[](demo/demo.html ':include height=95px')
## 资源
[2022 年前端学习路线图](https://www.bilibili.com/read/cv10431130)
[黑马程序员 web 前端开发入门教程，前端零基础 html5+css3+前端项目视频教程](https://www.bilibili.com/video/BV1Kg411T7t9)
[菜鸟教程-HTML 教程- (HTML5 标准)](https://www.runoob.com/html/html-tutorial.html)
## HTML 认知
1、常见 5 大浏览器
- IE
- 火狐 FireFox
- 谷歌 Chrome
- Safari
- 欧朋 Opera
2、渲染引擎
| 浏览器 | 内核 |
| ------------ | ------- |
| IE | Trident |
| FireFox | Gecko |
| Safari | Webkit |
| Chrome/Opera | Blink |
3、Web 标准
保证不同浏览器打开页面显示效果一样
| 构成 | 语言 | 说明 |
| ---- | ---------- | -------- |
| 结构 | HTML | 页面元素 |
| 表现 | CSS | 页面样式 |
| 行为 | JavaScript | 页面交互 |
4、HTML
Hyper Text Markup Language 超文本标记语言
5、hello world
需要设置显示`文件扩展名`
文件扩展名：`.html`
index.html
```html
<strong>hello world</strong>
```
<output>
<strong>hello world</strong>
</output>
6、HTML 骨架
```html
<html>
<head>
<title></title>
</head>
<body></body>
</html>
```
- html 最外层标签
- head 头部
- title 标题
- body 主体
7、开发工具
- Visual Studio Code （首选）
- WebStorm
- Sublime Text
- DreamWeaver
- HBuilder
8、VS Code 使用
快速生成 html 网页结构：
- `! + Tab` 多了一行代码`<!DOCTYPE html>`
- `doc + Tab`
快捷键
- 浏览器打开：`Alt + B` / `option⌥ + B`
- ÏLive Server 打开：`[command⌘ + L, command⌘ + O]`
9、注释
```html
<!-- 注释内容 -->
```
- 浏览器中不显示注释内容
- 添加和取消注释快捷键：`command + /`
10、标签结构
- 双标签 `<开始标签>内容</结束标签>`, 例如：`<strong>内容</strong>`
- 单标签 `<标签 />`, 例如：`<br>`
11、标签关系
- 父子关系（嵌套关系）
```html
<html>
<head></head>
</html>
```
- 兄弟关系（并列关系）
```html
<head></head>
<body></body>
```
12、标题标签 Heading
`h1~h6`
```html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```
<output>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</output>
同时选中下一个相同字符：`command + D`
特点：
- 独占一行
- 文字加粗
- 文字变大，h1->h6 文字逐渐变小
13、段落标签 paragraph
```html
<p>内容</p>
```
<output>
<p>内容</p>
</output>
特点：
- 段落之间存在间隙
- 独占一行
doc/canvas.md
浏览文件 @ d4a406d0
# canvas # canvas
[菜鸟教程 - HTML5 <canvas> 参考手册](https://www.runoob.com/tags/ref-canvas.html) [菜鸟教程 - HTML5 \<canvas\> 参考手册](https://www.runoob.com/tags/ref-canvas.html)
[html：canvas 画布绘图简单入门](https://pengshiyu.blog.csdn.net/article/details/122143631) [html：canvas 画布绘图简单入门](https://pengshiyu.blog.csdn.net/article/details/122143631)
......
doc/html.md
浏览文件 @ d4a406d0
# html # html
[笔记：web前端开发入门](blog/front-edn-learn.md)
[HTML 快速参考](https://www.w3school.com.cn/html/html_quick.asp) [HTML 快速参考](https://www.w3school.com.cn/html/html_quick.asp)
[https://www.w3.org/](https://www.w3.org/) [https://www.w3.org/](https://www.w3.org/)
......
doc/javascript.md
浏览文件 @ d4a406d0
...@@ -48,6 +48,8 @@ ...@@ -48,6 +48,8 @@
[UIkit](https://getuikit.com/): A lightweight and modular front-end framework for developing fast and powerful web interfaces. [UIkit](https://getuikit.com/): A lightweight and modular front-end framework for developing fast and powerful web interfaces.
[html2canvas](http://html2canvas.hertzen.com/): Screenshots with JavaScript
## Node.js ## Node.js
https://npm.devtool.tech/ https://npm.devtool.tech/
......
doc/miniprogram.md 0 → 100644
浏览文件 @ d4a406d0
# 微信小程序
[微信官方文档-微信小程序](https://developers.weixin.qq.com/miniprogram/dev/framework/)
[wechat-miniprogram](https://github.com/wechat-miniprogram)
[微信小程序开发资源汇总](https://github.com/justjavac/awesome-wechat-weapp)
[稀土掘金-微信小程序](https://juejin.cn/tag/微信小程序)
## 开发资源
[Vant Weapp](https://vant-contrib.gitee.io/vant-weapp/): 有赞前端团队开源,轻量、可靠的小程序 UI 组件库
\ No newline at end of file
doc/php.md
浏览文件 @ d4a406d0
# PHP # PHP
[PHP 手册](https://www.php.net/manual/zh/index.php) [PHP 手册](https://www.php.net/manual/zh/index.php)
[黑马程序员 PHP 零基础入门到精通教程（P1 基础 6 天）](https://www.bilibili.com/video/BV18x411H7qD)
[PHP零基础入门到精通教程（P2 mysql数据库5天）](https://www.bilibili.com/video/BV1Vx411g7uJ)
[PHP零基础入门到精通教程（P3 核心编程技术）](https://www.bilibili.com/video/BV1jx411M7B7)
\ No newline at end of file
doc/vue.md 0 → 100644
浏览文件 @ d4a406d0
# Vue.js
```html
<!-- Production -->
<script src="//cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
```
index.html
浏览文件 @ d4a406d0
...@@ -13,13 +13,16 @@ ...@@ -13,13 +13,16 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="icon" <link rel="icon"
href="img/logo-icon.png"> href="img/logo-icon.png">
<link rel="stylesheet" <link rel="stylesheet"
href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css"> href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
</head> </head>
<body> <body>
<div id="app">Please wait...</div> <div id="app">Please wait...</div>
<script> <script>
window.$docsify = { window.$docsify = {
name: 'Coding Tree', name: 'Coding Tree',
...@@ -34,16 +37,16 @@ ...@@ -34,16 +37,16 @@
placeholder: '搜索', placeholder: '搜索',
noData: '没有结果！', noData: '没有结果！',
}, },
} }
</script> </script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-java.min.js"></script> <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-java.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script> <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script> <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.js"></script>
<script src="https://cdn.jsdelivr.net/npm/docsify-copy-code"></script> <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
</body> </body>
</html> </html>
\ No newline at end of file
package.json
浏览文件 @ d4a406d0
{ {
"name": "spring-boot-demo", "name": "coding-tree",
"version": "1.0.0", "version": "1.0.0",
"description": "项目地址：", "description": "",
"main": "index.js", "main": "index.js",
"private": true, "private": true,
"scripts": { "scripts": {
...@@ -9,13 +9,13 @@ ...@@ -9,13 +9,13 @@
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/mouday/Spring-Boot-Demo.git" "url": "git+https://github.com/mouday/coding-tree.git"
}, },
"keywords": [], "keywords": [],
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"bugs": { "bugs": {
"url": "https://github.com/mouday/Spring-Boot-Demo/issues" "url": "https://github.com/mouday/coding-tree/issues"
}, },
"homepage": "https://github.com/mouday/Spring-Boot-Demo#readme" "homepage": "https://github.com/mouday/coding-tree#readme"
} }
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或