tags: `web`

html 基本教學

github page

範例 https://x06lan.github.io/

要求

git 安裝link
vscode 安裝link
github 帳號

html js css

html : 主要格式
css : 控制 html 外觀
js :操縱 html css

html

資料夾

└──web
    ├──index.js
    ├──style.css
    └──test    
         └─some.js

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 操作

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

#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
3D困難three.js

上傳 github page

創建repositories

name.github.io

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

tags: web

html 基本教學

github page

要求

html js css

html

js

超連結 圖片

css

不好看?

拓展

上傳 github page

Read more

math model :population

Deferred Rendering

資安報告

git

tags: `web`

超連結圖片