├── README.md ├── docs ├── .vuepress │ ├── templates │ │ ├── dev.html │ │ └── ssr.html │ ├── components │ │ ├── aboutme.vue │ │ ├── footer-date.vue │ │ └── yiyan.vue │ ├── public │ │ ├── favicon.ico │ │ ├── img │ │ │ ├── logo.jpg │ │ │ └── article │ │ │ │ └── python │ │ │ │ └── python.png │ │ └── manifest.json │ ├── dist │ │ ├── assets │ │ │ ├── js │ │ │ │ ├── 4.292dea78.js │ │ │ │ ├── 2.3badc248.js │ │ │ │ └── 3.3970b909.js │ │ │ ├── img │ │ │ │ └── search.83621669.svg │ │ │ └── css │ │ │ │ └── 0.styles.2fbf6f8b.css │ │ ├── 404.html │ │ └── index.html │ ├── enhanceApp.js │ ├── lib │ │ └── axios.js │ ├── util │ │ └── util.js │ ├── override.styl │ └── config.js ├── article │ ├── ui │ │ ├── README.md │ │ └── style │ │ │ └── README.md │ ├── front-end │ │ ├── README.md │ │ ├── vue │ │ │ ├── vuecli3引入全局预编译css变量.md │ │ │ ├── 使用vuecli3与ts搭建项目二—vue组件中的写法.md │ │ │ ├── README.md │ │ │ ├── 打造一款在线编辑器.md │ │ │ └── 使用vuecli3与ts搭建项目一—创建.md │ │ ├── js │ │ │ ├── README.md │ │ │ └── 压缩图片.md │ │ ├── html │ │ │ ├── 浏览器重绘与重排.md │ │ │ ├── HTML5-语义化.md │ │ │ ├── SEO关键词.md │ │ │ ├── 从输入url到显示网页发生了什么.md │ │ │ ├── HTML5-新特性.md │ │ │ └── 你应该知道的前端——缓存.md │ │ ├── css │ │ │ └── README.md │ │ └── Web前端开发工程师编程能力飞升之路.md │ ├── serve │ │ └── README.md │ ├── python │ │ └── README.md │ ├── git │ │ └── README.md │ ├── mysql │ │ ├── README.md │ │ └── MySQL常用命令汇总.md │ ├── ctf │ │ └── README.md │ └── nodejs │ │ └── README.md ├── README.md └── about │ └── index.md ├── .vuepress └── dist │ ├── assets │ ├── js │ │ ├── 6.dc29ee7d.js │ │ ├── 5.c57604f2.js │ │ ├── 3.9f8072dc.js │ │ ├── 4.3e05c877.js │ │ └── 2.2c854707.js │ ├── img │ │ └── search.83621669.svg │ └── css │ │ └── 0.styles.e993401a.css │ ├── 404.html │ └── index.html ├── .gitignore └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # Hello VuePress 2 | -------------------------------------------------------------------------------- /docs/.vuepress/templates/dev.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vuepress/templates/ssr.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/article/ui/README.md: -------------------------------------------------------------------------------- 1 | 这里是ui的文章系列 -------------------------------------------------------------------------------- /docs/article/ui/style/README.md: -------------------------------------------------------------------------------- 1 | 这里是风格 -------------------------------------------------------------------------------- /docs/article/front-end/README.md: -------------------------------------------------------------------------------- 1 | [[toc]] -------------------------------------------------------------------------------- /docs/article/serve/README.md: -------------------------------------------------------------------------------- 1 | 这里是服务器的文章系列 -------------------------------------------------------------------------------- /docs/.vuepress/components/aboutme.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/6.dc29ee7d.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{9:function(n,w,o){}}]); -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kefranabg/githubio/master/docs/.vuepress/public/favicon.ico -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/4.292dea78.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{166:function(n,w,o){}}]); -------------------------------------------------------------------------------- /docs/.vuepress/public/img/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kefranabg/githubio/master/docs/.vuepress/public/img/logo.jpg -------------------------------------------------------------------------------- /docs/.vuepress/components/footer-date.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vuepress/public/img/article/python/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kefranabg/githubio/master/docs/.vuepress/public/img/article/python/python.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.vuepress/dist/assets/img/search.83621669.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/img/search.83621669.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | import axios from './lib/axios' 2 | 3 | export default ({ 4 | Vue, // VuePress 正在使用的 Vue 构造函数 5 | options, // 附加到根实例的一些选项 6 | router, // 当前应用的路由实例 7 | siteData // 站点元数据 8 | }) => { 9 | Vue.prototype.$http = axios 10 | } -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/5.c57604f2.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{205:function(t,e,s){"use strict";s.r(e);var n=s(0),l=Object(n.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("p",[this._v("'# Hello VuePress!'")])])}),[],!1,null,null,null);e.default=l.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/lib/axios.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | let ajax = axios.create({ 4 | timeout: 7000 5 | }); 6 | 7 | ajax.interceptors.request.use(config => { 8 | return config; 9 | }, err => { 10 | return Promise.reject(err) 11 | }); 12 | 13 | ajax.interceptors.response.use(res => { 14 | return res; 15 | }, err => { 16 | return err; 17 | }); 18 | 19 | export default ajax -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /img/logo.jpg 4 | 5 | 6 | heroText: HeiYe 7 | tagline: 我于杀戮之中盛放，亦如黎明中的花朵 ——戏命师-烬 8 | features: 9 | - title: 死亡歌颂者 10 | details: 一曲终了，繁花散尽，伊人已逝，只余一声空叹 11 | - title: 机械公敌 12 | details: 因为这个世界抛弃了你,所以我才在你面前背叛整个世界,当纵火盛宴烧尽一切时我会来陪你 13 | - title: 水晶先锋 14 | details: 念当年有爱的我，可惜啊，你们看不到啦 15 | 16 | footer: Copyright © 2018-2019 HeiYeHK. All Rights Reserved 17 | --- 18 | 19 | 20 | --- 21 | 使用css画的一个壁纸画：[送给酱酱的画~](https://heiyehk.github.io/project/jj.html) -------------------------------------------------------------------------------- /docs/about/index.md: -------------------------------------------------------------------------------- 1 | 2 | # 关于我 3 | 4 | ## 本站指南 5 | 大部分文章是用来记录转载的，相当于备忘录吧，有侵权的地方联系我删除😂 6 | 7 | ## 未来的目标 8 | - 争取做到经常更新 9 | - 前端方面 10 | - ```vuecli3 ts```现在正在开始开发一个小工具 11 | - ```nodejs```配合typescript的后台服务 12 | - ```mongodb```配合nodejs的数据库 13 | - ```python```只是了解一点 14 | - 没有忘记自己的梦想，网络安全工程师（kali，渗透，局域网，WiFi。。。） 15 | 16 | ## 我是谁 17 | 一个啥都想学的肥宅程序员，想学软硬件，想学大数据，想学前后端。。。偶尔打游戏，LOL，吃鸡，手游王者。。。 18 | 19 | ## 联系方式 20 | ``` 21 | Email: heiyehk@foxmail.com 22 | QQ: 1374918347 23 | WX: HY546456 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/article/front-end/vue/vuecli3引入全局预编译css变量.md: -------------------------------------------------------------------------------- 1 | # vuecli3引入全局预编译css变量 2 | 3 | ## 安装`style-resources-loader` 4 | - 这里不能使用`npm install style-resources-loader`的方式，需要使用`vue add style-resources-loader`进行安装，输入命令后会让你进行选择。 5 | - 选择完之后会自动在`vue.config.js`中自动生成引入代码 6 | - 引入的代码是直接使用的绝对路径，当然你可以使用更简便的方法，比如`path`插件 7 | 8 | 代码： 9 | ``` js 10 | pluginOptions: { 11 | 'style-resources-loader': { 12 | preProcessor: 'less', 13 | patterns: [ 14 | path.resolve(__dirname, './src/less/index.less') 15 | ] 16 | } 17 | } 18 | ``` -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/3.9f8072dc.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{202:function(t,e,n){"use strict";var i=n(72);n.n(i).a},206:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(202),n(0)),a=Object(r.a)(i,void 0,void 0,!1,null,"02f6f0d8",null);e.default=a.exports},72:function(t,e,n){}}]); -------------------------------------------------------------------------------- /docs/article/front-end/js/README.md: -------------------------------------------------------------------------------- 1 | # JS utils 2 | 3 | [[toc]] 4 | ## 随机打乱数组 5 | ``` js 6 | const shuffle = (arr) => { 7 | for (let i = 0; i < arr.length; i++) { 8 | const randomIndex = Math.round(Math.random() * (arr.length - 1 - i)) + i; 9 | [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]] 10 | } 11 | return arr 12 | }; 13 | ``` 14 | 15 | ## 字母排序 16 | ``` js 17 | let arr = ['B', 'a', 'c', 'Z', 'e'] 18 | const letterCompareUtil = (a, b) => a.toLowerCase() > b.toLowerCase() ? 1 : -1; 19 | arr.sort(letterCompareUtil); 20 | ``` -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/2.3badc248.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[2],{164:function(t,e,n){},165:function(t,e,n){"use strict";var a=n(164);n.n(a).a},167:function(t,e,n){"use strict";n.r(e);var a={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,a=e.slots;return t("span",{class:["badge",n.type,n.vertical]},n.text||a().default)}},i=(n(165),n(0)),o=Object(i.a)(a,void 0,void 0,!1,null,"099ab69c",null);o.options.__file="Badge.vue";e.default=o.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/dist/assets/js/3.3970b909.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{168:function(e,t,s){"use strict";s.r(t);var n=s(0),i=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"content"},[t("h1",{attrs:{id:"hello-vuepress"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hello-vuepress","aria-hidden":"true"}},[this._v("#")]),this._v(" Hello VuePress")])])}],!1,null,null,null);i.options.__file="README.md";t.default=i.exports}}]); -------------------------------------------------------------------------------- /docs/article/front-end/html/浏览器重绘与重排.md: -------------------------------------------------------------------------------- 1 | # 浏览器重绘与重排 2 | 3 | ## 前言 4 | 5 | 当我们在做前端开发的时候，肯定会碰到操作DOM的情况，在操作DOM的时候，就会引起浏览器的重绘与重排。 6 | 7 | ## 1.重绘 8 | 9 | 如果DOM变化仅仅影响的了visibility、outline、背景色等等非几何属性，此时就发生了重绘（repaint）而不是重排，因为布局没有发生改变。 10 | 11 | ## 2.重排 12 | 13 | 当DOM变化影响了元素的几何属性（宽、高改变等等），浏览器此时需要重新计算元素几何属性，并且页面中其他元素的几何属性可能会受影响，这样渲染树就发生了改变，也就是重新构造RenderTree渲染树，这个过程叫做重排（reflow）。 14 | 15 | 以下情况会引发重排： 16 | 1. 页面初始渲染 17 | 2. 添加/删除可见DOM元素 18 | 3. 改变元素位置 19 | 4. 改变元素尺寸（宽、高、内外边距、边框等） 20 | 5. 改变元素内容（文本或图片等） 21 | 6. 改变窗口尺寸 22 | 23 | 非商用，侵删，转自: [https://blog.csdn.net/i_dont_know_a/article/details/82774269](https://blog.csdn.net/i_dont_know_a/article/details/82774269) -------------------------------------------------------------------------------- /docs/.vuepress/util/util.js: -------------------------------------------------------------------------------- 1 | import axios from '../lib/axios' 2 | 3 | const xhrGet = (api, params) => { 4 | return new Promise((resolve, reject) => { 5 | axios.get(api, params).then(res => { 6 | resolve(res); 7 | }).catch(err => { 8 | reject(err); 9 | }); 10 | }); 11 | }; 12 | 13 | const xhrPost = (api, params) => { 14 | return new Promise((resolve, reject) => { 15 | axios.post(api, params).then(res => { 16 | resolve(res); 17 | }).catch(err => { 18 | reject(err); 19 | }); 20 | }); 21 | }; 22 | 23 | export { 24 | xhrGet, 25 | xhrPost 26 | } -------------------------------------------------------------------------------- /.vuepress/dist/assets/js/4.3e05c877.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{204:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(0),h=Object(i.a)(n,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]); -------------------------------------------------------------------------------- /docs/.vuepress/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HeiYe", 3 | "short_name": "HeiYe", 4 | "start_url": "index.html", 5 | "display": "standalone", 6 | "background_color": "#2196f3", 7 | "description": "HeiYe的个人主页", 8 | "theme_color": "blue", 9 | "icons": [ 10 | { 11 | "src": "./logo.jpg", 12 | "sizes": "144x144", 13 | "type": "image/png" 14 | } 15 | ], 16 | "related_applications": [ 17 | { 18 | "platform": "web" 19 | }, 20 | { 21 | "platform": "play", 22 | "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "heiyehk.github.io", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "directories": { 7 | "doc": "docs" 8 | }, 9 | "dependencies": { 10 | "axios": "^0.18.0" 11 | }, 12 | "devDependencies": {}, 13 | "scripts": { 14 | "dev": "vuepress dev docs", 15 | "build": "vuepress build docs" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/heiyehk/heiyehk.github.io.git" 20 | }, 21 | "keywords": [], 22 | "author": "", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/heiyehk/heiyehk.github.io/issues" 26 | }, 27 | "homepage": "https://github.com/heiyehk/heiyehk.github.io#readme" 28 | } 29 | -------------------------------------------------------------------------------- /docs/.vuepress/components/yiyan.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/override.styl: -------------------------------------------------------------------------------- 1 | $accentColor = #409EFF // 主题色 2 | $textColor = #333333 // 文字颜色 3 | $borderColor = #eaecef // 边框颜色 4 | $codeBgColor = #282c34 // 代码背景颜色 5 | 6 | .logo 7 | border-radius 100% 8 | .home .hero .description 9 | font-size 1.2em 10 | .home .hero img 11 | display inline-block 12 | border-radius 100% 13 | max-height 180px 14 | a 15 | word-break break-all 16 | blockquote 17 | font-size 1rem!important 18 | .sidebar-heading 19 | font-size:1rem!important 20 | h1 21 | font-size 1.7rem!important 22 | h2 23 | font-size 1.5rem!important 24 | .sidebar-group a.sidebar-link 25 | padding-left 2.2rem 26 | .sidebar .sidebar-sub-headers 27 | padding-left 1.3rem 28 | 29 | @media screen and (min-width: 1000px) 30 | ::-webkit-scrollbar{width: 8px;height: 8px;} 31 | ::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(141, 141, 141, 0.1);background-color: #F5F5F5;} 32 | ::-webkit-scrollbar-thumb{background-color: #bbb;} -------------------------------------------------------------------------------- /docs/.vuepress/dist/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | VuePress 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

404

Looks like we've got some broken links.
Take me home.
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /.vuepress/dist/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | VuePress 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

404

How did we get here?
Take me home.
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/article/front-end/vue/使用vuecli3与ts搭建项目二—vue组件中的写法.md: -------------------------------------------------------------------------------- 1 | # 使用vuecli3与ts搭建项目—vue组件中的写法(二) 2 | 3 | ## 前言 4 | vuecli脚手架创建的vue js 还是 vue ts模板以及css写法都是一致的，但是值得注意的是，在标签上增加了``ts声明，然后代码中导入 *.vue 文件的时候，需要写上 .vue 后缀，原因还是因为 TypeScript 默认只识别 .ts 文件，不识别 .vue 文件。 5 | > 在使用typescript前建议阅读中文文档[TypeScript 中文手册](https://typescript.bootcss.com/) 6 | 接下来就讲讲vue ts在项目中的使用。具体的可以看官网文档[Vue.js and Property Decorator](https://github.com/kaorun343/vue-property-decorator) 7 | 1. [vue-class-component](https://github.com/vuejs/vue-class-component) 8 | 强化 Vue 组件，使用 TypeScript/装饰器 增强 Vue 组件 9 | 2. [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator) 10 | 在 vue-class-component 上增强更多的结合 Vue 特性的装饰器 11 | 3. [vuex-class](https://github.com/vuejs/vue-class-component) 12 | 基于vue-class-component对Vuex提供的装饰器 13 | 14 | ## 引入Vue对象 15 | 在vscode中，使用快速创建输入`ts`就可以快速创建然后生成模板 16 | ``` ts 17 | // 把原有的ts内容替换成下面 18 | import { Vue, Component } from 'vue-property-decorator'; 19 | @Component({}) 20 | export default class Main extends Vue { 21 | // todo 22 | } 23 | ``` 24 | ## 生命周期以及属性 25 | 生命周期与原来一致，属性具体可以看官方给的github文档[vue-property-decorator](https://github.com/kaorun343/vue-property-decorator)。 26 | 27 | ## 组件引入@Component 28 | ``` ts 29 | import { Vue, Component } from 'vue-property-decorator'; 30 | import { header } from '@/components/header.vue'; 31 | @Component({ 32 | components: { 33 | header 34 | } 35 | }) 36 | export default class Main extends Vue { 37 | // todo 38 | } 39 | ``` 40 | 41 | ## data数据 42 | ``` ts 43 | import { Vue, Component } from 'vue-property-decorator'; 44 | 45 | interface ObjType { 46 | b: number; 47 | } 48 | 49 | @Component({}) 50 | export default class Main extends Vue { 51 | // 具体类型查看 TypeScript 中文手册 https://typescript.bootcss.com/ 52 | str1 = 'test'; 53 | str2: string = 'test'; 54 | private str3: string = 'test'; 55 | private str4?: string; // ?: 指可选参数 56 | private str5!: string = 'test'; // !: 指必须要有值 57 | } 58 | ``` -------------------------------------------------------------------------------- /docs/.vuepress/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello VuePress 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Hello VuePress

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/article/front-end/html/HTML5-语义化.md: -------------------------------------------------------------------------------- 1 | # HTML5-语义化 2 | 3 | ## 前言 4 | 什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。 5 | 6 | ## 语义化优点： 7 | 8 | - 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。 9 | - 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。 10 | - 方便其他设备解析，如盲人阅读器根据语义渲染网页 11 | - 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。 12 | 13 | ![avatar](http://www.daqianduan.com/wp-content/uploads/2018/03/html5-768x508.png) 14 | 15 | 1. ```
``` 16 | 17 | ```
```定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。 18 | 19 | 在一个文档中，您可以定义多个```
```元素，但需要注意的是```
```元素不能作为```
```、```