Please enable JavaScript.

Coggle requires JavaScript to display documents.

台大Html 課程_321, 20191028 (環境背景 (網頁是 (Html (內容 (文字 (標題, 內文, 網址), 多媒體 (影片),…

- - - - 內容
        
        文字
        
        標題
        
        內文
        
        網址
        
        圖片
        
        多媒體
        
        影片
    - - 樣式
        
        排版
        
        字體
        
        顏色
        
        陰影
        
        動畫
    - - 執行程序
  - - - 上方是導覽列navbar, 往下移動更改css
  - - - 前段工程 Frontend
    - - 跟資料庫連結
        
        Ex. FB 的個人照片 or 名字
      - 前端+後端 Backend
        
        後端
        
        PHP.
        
        ASP. Net
        
        NODE.JS
        
        推薦，因為用JavaScrip，且熱門
        
        Flask
- - - - 同一個網頁的東西放在一起
        
        讓瀏覽器去讀
    - - Live server
        
        用Live server 開啟
      - Chinese
      - Open in browers
  - - - Ctrl+/
    - - Ex. H1
        
        用{ } 寫屬性
        
        Color: red
        
        Font-size: 72px;
        
        要加；才是結束
    - - 使用.class {}, {}裡面填寫屬性
        
        然後在html 中h1後面輸入<h1 class=" important-title" > 中間不能有空格，空格是用來加入下一個屬性的
  - - - Body
        
        h1
        
        標題字
        
        h1~h6
        
        內文字
        
        P+tab（Paragraph 也可以換行）
        
        段行
        
        br +tab (標籤不一定一對）
      - html 必要標籤
        
        輸入！+tab 可以產生一個網頁必備的標籤
      - Head
        
        網頁設定
        
        Title 標籤顯示瀏覽器頁面
    - - Ctrl+/變成註解
    - - Tag 叫作標籤深藍色
      - 上方有原點表示沒存檔 ctrl+s
    - - ./ 可以指定路徑
- - - - head
        
        html lang="en" 表示language英文
        
        https://hackmd.io/@KbbbrL2kQGCA7eHztz-v6w/HyAQ6uJbH?type=slide&fbclid=IwAR2kw-FUzlTz7YLY4pAk2xJvs3XJaUlJXaiKiJcFhWqHfOoFcGqgrYWeGMc#/0/6
        
        <style>
        
        定義頁面內的顯示CSS，無法重複使用在別的頁面
        
        <script>
        
        <head>
        
        charset
        
        會出現亂碼，每個文字都是對應的代碼
        
        <meta charset="UTF-8"> 使用UTF-8 作為字符
      - Body
        
        <p> 文字
        
        <br> 換行
        
        可以填假字 lorem30 + tab
        
        <img src="網址" alt="替代文字">
        
        img支援格式 jpg, jpeg, png, gif, svg
        
        svg 縮放不會失真
        
        png 表示背景有透明, 通常有logo
        
        img width="" 把寬度定義，不會太大
        
        用右鍵 : 檢查看圖片大小
        
        width="100%" 隨視窗變大變小
        
        若放得下就會在同一行
        
        background 背景用css
        
        div是群組
        
        div class="card"
        
        css中設定card width:320px
        
        card-img {
        width:100%; 一起連動
        
        display: block; 把空格取消
        
        { color: red border: 1px solid black}
        
        留白
        
        對內留白 Padding 代表色綠色
        
        padding:20px 20px 上下20, 左右20
        
        瀏覽器預設文字就有留白
        
        1 more item...
        
        對外留白 margin 代表色橘色
        
        超連結
        
        用a標籤
        
        a + tab
        
        <a href="https://google.com" target="blank">另開分頁連結到google</a>
        
        <a href="https://google.com">連結到google</a>
        
        a*2
        
        直接生出兩個a標籤
        
        如何由其他資料夾中回到index
        
        2 more items...
        
        圖片不能用超連結
        
        圖片式超連結(a>img)
        
        <a href="檔案./或網址https://"><img src="檔案或網址" alt="描述"></a>
        
        當公布時，不需要更新超連結內的網址，因為是一起放在資料夾發布的
        
        div
        
        Document Division，用以包含許多有意義的區塊
        例如：導覽列、邊欄、文章或不一定有語意的區塊
    - - 以後做綁定會直接連到index
  - - - 建議先將先把架構跟假圖片建置一個假網站，避免比例看起來怪怪的，先定義好比例
        
        picsum.photos
        
        URL 上面會顯示 id/編號/寬度/高度
        
        之後才把要的圖放上去
  - - - img{ filter: grayscale(); }
      - 碰到就有顏色
        
        .img-grayscale:hover{ filter: grayscale(0%);}
      - transition: all 1s ease
        
        漸變全部 1秒內變化曲率
- - - - Stripe
      - Tappay
      - Paypal
      - 綠界
- - - - box-shadow: 20px 10px 0px red 左右偏移偏下模糊值顏色
      - 換成白色也可以變成光暈
    - - border-radius: 20px;
        
        / 讓超出此元素的內部元素隱藏 /
        
        overflow: hidden;
    - - .cards{display: flex;}
        
        / 讓flex元素內部元素置中排列 /
        
        justify-content: flex-end;
        
        flex會縮放內容物
        
        / 讓flex元素的內部元素放不下就換行 /
        
        flex-wrap: wrap;
        
        讓card 中間有間隔
        
        margin: 20px 20px;
    - - background: tomato;
      - color: white;
      - padding: 0px 5px;
      - border-radius: 6px;
    - - .price : before{cotent:"$";}
      - table, td, th{border:1px solid black;border-collapse: collapse;}
        
        加框; 剩一條線;
      - .price:after{content: " NTD";}
    - - display: block;
        
        讓此元素變成區塊元素(會換行的元素)
      - line-height: 1.5;
        
        1.5倍行高
  - - - 行內元素
        
        span
        
        同一行內想要不同顏色就可以用
        
        a
        
        img
    - - 有序清單 ordered list: ol
        
        ol>li{清單項目}*5 (是Emmet語法 xxx+tab)
        
        就會有5份
      - 無序清單 unordered list: ul
        
        ul>li{清單項目}*3
      - 清單項目 list item: li
    - - 如果用表格排版會很肥，且無法適應其他裝置(手機...)
      - 先看 tr (table row)
      - td (table data)
      - th 表頭
      - 合併儲存格,
        
        只能向右擴張2格
        
        colspan="2"
        
        只能用在th and td上
        
        向下擴張
        
        rowspan="4"
    - - form
      - input
        
        required
        
        比填
        
        textarea
        
        多行輸入
        
        type="email"
        
        確認填入email
        
        minlength="2"
        
        最少多少字
        
        maxlength="300"
        
        最多多少字
        
        placeholder="請填寫email"
        
        提示文字
      - button
      - 會把表單打到一個url server
        
        跟資料庫做比對
        
        做亂碼
      - 網站不能寄信
        
        忘記密碼
        
        送到server
        
        server寄信
        
        使用formspree
        
        form action="https://formspree.io/sam4202@gmail.com" method="POST"
        
        javascrip可以在server上執行，叫node.js
        
        javascript不能跨頁執行
      - 按下去，被清空，表示有送出
  - - - format on save
- - - - select
        
        option
      - form onsubmit
    - - 用vue script
  - - - document
        
        document.getElementById('textInput')
        
        console a=剛剛的文字
      - list.forEach((li, i)=>{li.innerHTML='我是第${i+1}個LI'})
- - - - 可以Build 環境，方便建動態網站
      - 付費
    - - 適合架靜態網站
      - 要記指令
        
        上架6組指令
        
        更新3組
      - 可以找老師問如何架
    - - 我們自己電腦無法跑JavaScript ，只能用在瀏覽器
      - Node.js可以在電腦裡編輯Javascript
      - 安裝在VS code
        
        檢視
        
        終端機
        
        下載Surge.sh相關指令
        
        指令: npm i -g surge (Node Package Manager)
        
        安裝後需要用指令去測試是否安裝完 surge -h
        
        1 more item...
        
        用mac : sudo npm i -g surge
        
        輸入密碼
      - 發布網頁
        
        可以在根目錄加入CNAME加入固定網址
        
        decision-maker.surge.sh
        
        在終端
        
        輸入surge
  - - - id 可以給名字如同class，同一個頁面只能有一個id名稱
        
        表示id 的屬性，也可以用#
      - 寫在越下面(後面)的結果會cover前面屬性
        
        因為電腦讀檔案一樣由上往下讀
      - 除錯
        
        chrom 右鍵
        
        檢查
        
        用左上角的選擇工具選擇有疑問的項目
        
        可以看到相對應CSS及行號
    - - 選擇器等級越高的生效，應用範圍越大的等級越低
        
        星號選擇器 EX. *最低
        
        標籤選擇器次高 EX. h1
        
        class選擇器 EX. .title 第二高
        
        id EX. # 最高
        
        這兩個都比id高, 特別但不建議使用
        
        inline-style
        
        h1 style="color: red;"
        
        <!important
        
        用在緊急想要先蓋掉原有的，太多或是尚未找出的屬性
    - - 瀏覽器預設樣式
        
        cdnjs.com
        
        可以找到前端所有套件
        
        可以套用Normalize.css 把頁面一致化，或在cdnjs裡搜尋，複製網址
        
        複製套件網址貼在html 中head其他css上面，避免自己的css被蓋掉
        
        可以連結有目前最新的圖標圖示(FB, 箭頭...)
        
        font-awesome
        
        複製網頁在html 的link中
        
        進入fontawesome中選擇圖標
        
        1 more item...
      - 瀏覽器使用者樣式
      - 你的CSS們
    - - 用 * 選擇畫面上所有元素
      - 用逗號一次選擇多個元素
      - 用大於>選擇A元素內「第一層」的B元素
        
        .container>p 選container 裡"第一層"的p
      - 用空格選擇A元素內「所有的」B元素
        
        .container p
      - 用加號選擇A元素「後面的第一個」B元素
        
        .title+p 選擇title 後面第一個P
      - 虛擬類別選擇器 :hover
        設定游標停留在此元素時套用到元素的樣式
      - 遇到ol中想要在list中有特別屬性
        
        加入:nth-child() 可以選單一個list 號碼
        
        .list>li:nth-child(3)
        
        .list>li:nth-child(2n) 選雙數
        
        .list>li:nth-child(2n+1) 選單數
- - - - 寬度&高度
        
        border 會往外長
        
        Width : css 300+border +3+3=306
      - 每個CSS都想要用同一個的基礎設定
        
        basic.css
        
        把box的邊框都計入box 內
        
        box-sizing: border-box;
        
        可以確保設定的寬度可以包含Border，讓瀏覽器計算元素大小以邊框做計算
        
        body旁要留白
    - - 預設: h1~h6, p, div, section, nav, il, ul, ..
        
        會換行
        
        有寬度跟高度
      - a 標籤不是區塊元素
        
        新增一個class
        
        d-block {display: block;}
    - - 預設: a, span, lable, :before, :after
        
        不會換行
        
        沒有寬度與高度
        
        中間會有空格(不是padding or margin)
      - 想把其他非行內元素變成行內
        
        建立class
        
        display: inline;
    - - 預設: img, input, textarea, button
        
        不會換行(除非放不下)
        
        有寬度與高度
        
        中間會有空格(不是padding or margin)
      - 想要建立一個inline-block ，適合做"button"排列
        
        display: inline-block;
    - - width: calc(100% / 3);
        
        想要排在一起
        
        不適合用 display : inline-block 會有空格
        
        適合用排版 display: flex;
    - - static
        
        所有元素定位模式預設都是static，static模式無法使用任何的定位屬性
        
        top, bottom, left, right, z-index
      - relative (button 移到上面有浮起來的感覺)
        
        以元素原本所在位置定位
        
        relative元素仍會在畫面佔據空間
        
        可以重疊，不會推到其他元素
        
        設定: position : relative;
        
        在relative-btn:hover
        top: 50px
        left: 100px
        
        漸變
        
        transition: all .5s ease;
        
        位置也想漸變就要加入 top: 0px
      - absolute
        
        以最近的"上一層元素"作為參考來定位
        
        做為參考的元素不得為position: static
        
        設定為absolute模式的元素將不會在畫面上佔據空間
        
        在要移動的元素上輸入
        
        position : absolute
        
        right: 0px (以大方塊的右邊)
        
        top: 0px (以大方塊的上面)
        
        要在上一層的大方塊加入position : relative
        
        若要置中
        
        margin: auto;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        
        若要決定哪個在上哪個在下
        
        設計圖片上小icon排到右下角，碰到後透明後變不透明
        
        border: none;
        
        opacity: 0.7;
        
        用card: hover .crard-btns
        
        就可以選到card 下方的 button
- - - - Fix
        
        想要至頂
        
        或是廣告一直置中
        
        使用nav
        
        功能跟div一樣，但因為div可能眾多，而多區分出來
      - 經過定位的元素都能重疊在一起
    - - https://fonts.google.com/
        
        類型
        
        display(風格)
        
        handwriting (手寫)
        
        Monospace(仿打字機，每個字體寬度一樣)
        
        Sans Serif
        
        serif (有襯線)
        
        使用方法
        
        按 +
        
        customize 點開選擇字體寬度(不要太多組，不然會太慢)
        
        copy EMBED <style>中的文字，放在CSS中
        
        copy "Specify in CSS" 的文字，放在應用的CSS區域
        
        1 more item...
    - - 放背景圖
        
        在class放入 background-image: url('../img/salmon-steak.jpg'); 注意要使用../才能有server概念
        
        background-size: cover;
      - 圖片使用亮度及灰階
        
        filter: brightness(1.3) grayscale(50%);
      - 先要設定3D環境
        
        加入class perspective: 1000px;
        
        選轉元素
        
        以左右中點為軸心
        
        transform: rotateX(45deg);
        
        以上下軸中心及左右軸中心交點跟出螢幕的點
        
        transform: rotateZ(45deg);
        
        以上下中點為軸心
        
        transform: rotateY(45deg);
        
        軸心移動
        
        旋轉軸心移到上邊 transform-origin: top;
        
        旋轉軸心移到底邊 transform-origin: bottom;
    - - opacity: 0
    - - 先把預設樣式拿掉
        
        list-style: none;
      - 文字要置中
        
        line-height: 40px;
      - 要把文字看起來可以點
      - 使用:before or :codepen
        
        可以上網看 codepen
        
        如果沒有content 才能使用before and after
        
        要排小元件時用定位
        
        使用position : absolute
        
        前面要加
      - 加入打勾圖片
        
        background-image: url(../img/checked.svg);
        
        取消背景圖repeat
        
        background-repeat: no-repeat;
        
        調配位置
        
        background-position: center center;
    - - 只有下邊有線
        
        border -bottom
      - 虛線
        
        dashed
    - - 要漸變要照先前的順序輸入
      - 若藏在很多層裡面可以使用
        
        空格+ class
    - - 寬度要縮到300左右
      - 上下留白要減少
      - CSS 會根據寬度做變化
        
        畫布寬度 viewport 從0px ->500px -> 1000px
        
        可以限制在哪個寬度才能使用
        
        / 只有裝置寬度<=576px 才可以套用以下的設計 / media (max-width: 576px)
        
        500以下才能使用
        
        max-width: 500px
        
        1 more item...
        
        500以上才能使用
        
        min-width: 500px
  - - - favicon
        
        png and ico 都可轉換
        
        16*16
        
        head
        
        link: favicon
  - - - // 是註解，或是Crtl+/
      - J
    - - 搜尋cdnjs
      - JQuery(' ') 加文字放 ' '
        
        為Ingredients>li綁定點擊事件
        
        .click()
        
        函式 function(){}
        
        在大括號{ } 中加入要做的事
        
        console.log 可以再瀏覽器檢查是否有反應
        
        可以使用$來代表
        
        jQuery(this).addClass('done')
        
        $(this).toggleClass('done') 可以選擇
- - - - 要把Bootstript的link 放在前面，才不會被default 值給蓋掉
    - - bg-dark
        
        背景
      - text-white
    - - 留白
        
        EX. mb-3
        
        EX. py-5
        
        padding 距離5
    - - 使用class="container" 就不會滿版
        
        .row 就可以做flex
        
        裡面的小格叫做col
        
        class="col-md-3"
        
        會自動縮小放大因為有media query
        
        md 是指裝置代號
        
        4 more items...
        
        可以在瀏覽器中用檢查，拖拉視窗可以看到尺寸大小
        
        切成3/12
        
        快捷鍵
        
        .col-md-4+.col-md-8
        
        justify-content-center
      - 一個頁面分成12個網格
      - img class
        
        w-100
        
        滿足div 內 100%
    - - 滑鼠選到時VS code會一起選一樣
        
        Ctrl+D
        
        +上方向鍵就可以選一樣的
    - - Bootstrap 4, Font awesome
        
        如何叫出來
        
        Index畫面
        
        b4-navbar-default
        
        navbar-light or dark
        
        navbar-expand-sm
        
        在小型裝置可以變成變成小選單
        
        1 more item...
        
        可以移動單頁內的id名字
        
        輪播
        
        carousel
        
        1 more item...
        
        有兩個輪播時，要改Id
    - - 下載Bootstrap參數表
        
        getbooststrap
        
        documentation
        
        download
        
        source files
        
        下載
        
        1 more item...
      - 需要翻譯器
        
        sass
        
        Node-sass
        
        檢視
        
        終端機
        
        npm i -g node-sass
        
        檢查是否安裝完成 : node-sass -v
        
        1 more item...
        
        Mac安裝 : sudo npm i -g node-sass --unsafe-perm
      - 生成自己的Bootstrap檔案
        
        要scss發生變化，就複製到css檔案
        
        node-sass -o css scss -w(o表示output 放到css，翻譯的資料來源 scss, -w 表示監聽器)
        
        crtl+c 可以終止監聽
      - 開啟scss 檔案中開啟_variables.scss
        
        修改$primary 的顏色
        
        無法修改的參數建議用瀏覽器檢查後，寫至style.css 中
      - 好用的主題網站
        
        brandColors
        
        複製顏色
        
        貼到_variable.scss
        
        顏色前面要加# 符號
  - - - 用內嵌
        
        copy到html
        
        選 width="100%"
  - - - background-size: cover;
        
        不會重複
      - background-attachment: fixed;
        
        讓背景圖在滾動時不動
    - - 屬性選擇器[屬性^=值]
        
        選屬性id開頭是galleryImage的元素
        
        [id^='galleryImage']
- - - - git config 查首先要輸入
        
        git init
        
        git add
        
        git commit -m "初始化"
- - - - collapse
        
        點下去會顯示或收起來
        
        先給article class=collapse
        
        給button 後面給 data-target="#article2" data-toggle="collapse"
        
        用google 檢察功能看article 做了甚麼變化
      - tab
        
        用nav功能
        
        a標籤處 data-toggle="tab"
        
        在div群組中加入class="tab-content"
        
        在要變動的文章中的class 加入 tabl-pane
      - modal
        
        安裝Bootstrap4 plug-In
        
        b4-modal-default
        
        更改id
        
        在button上寫入 data-target="#detailModal" data-toggle="modal"
      - 若放在head裡面，有可能還讀不到裡面的結果
        
        可以在main.js 中用jQuery
        
        // 當網頁載入完成後 key 入
        
        $(document).readyState(function(){
        })
        
        //綁定 .navbar .nav-link 點擊事件
        
        $('.navbar nav-link') .click(function(){
        console.log('[被點擊的按鈕是]',this)
        })
        
        1 more item...
  - - - 使用animate