###### tags: `web` # html 基本教學 ## github page 範例 https://x06lan.github.io/ ### 要求 1. git 安裝[link](https://git-scm.com/) 2. vscode 安裝[link](https://code.visualstudio.com/download) 3. github 帳號 ### html js css html : 主要格式 css : 控制 html 外觀 js :操縱 html css ```graphviz digraph hierarchy { nodesep=1.0 node [color=Red,fontname=Courier,shape=box] edge [color=Blue, style=dashed] web->{js css html} js->{} } ``` ### html 資料夾 ``` └──web ├──index.js ├──style.css └──test └─some.js ``` html ``` html <!DOCTYPE html> <html> <head> <title>name</title> </head> <body> <script type="text/javascript" src="./index.js"></script> <link rel="stylesheet" href="./style.css"> <div id="idname" class="class name"> some text </div> <a> <h1></h1> </body> </html> ``` ### js f12 sonsole 操作 ```javascript let a="string" let b=20 //陣列 let c = [1,2,3] let d = ["123","345"] console.log(c[0]) //1 console.log(c[1]) //2 //json let f={ "number":30 "name":"data", "arr":[1,2,3], } console.log(f["number"]) //30 console.log(f.number) //30 console.log(f.arr[0]) //1 console.log(f["arr"][0]) //1 let run=10 for(let i = 0; i<run;i++) { console.log(i) } ``` 其他 js 操作html https://hackmd.io/@lanx06/js#js-html-操作 ### 超連結 圖片 ./ 代表目前資料夾 . ./ 上層資料夾 ``` <a href="./img"> <a href="https://www.google.com/"> <img src ="./img/img.png"> ``` ### css f12 element ![](https://i.imgur.com/2aBhg53.png) ```css #id_name { height: 400px; width: 200px } .class_name { /* 定位方式*/ /*絕對 使用 top right.....*/ position: absolute; /*相對 (預設)*/ position: relative; /*至中 */ margin: auto; /*跟別人的距離*/ margin-top: 20px; /*裡面的距離 */ padding-top: 50px; padding-left: 20px; /*圓角*/ border-radius: 20% 20% 20% 20%; /*背景顏色 */ background-color: #ffffff; /*文字 */ color: #ffffff; } div { height: 200px; width: 200px; background-color: #ff00ff; } ``` ### 不好看? 拉方塊 https://www.wix.com/ 用現成的外觀 https://www.vantajs.com/ ### 拓展 2D簡單[p5.js](https://editor.p5js.org/p5/sketches/Hello_P5:_animate) 3D困難[three.js](https://threejs.org/examples/) ### 上傳 github page 創建repositories name.github.io ```command git config --global user.email "" git config --global user.name "" git init git status git add --all git commit -m "what do you done" git branch -M main git remote add origin "去github上拿" git push -u origin main ```