Day 1 (html)

學習筆記

rouoxo 2021-05-22 00:23:45 ‧ 1688 瀏覽

分享至

1.版本

但是遇到舊的也不要更改,因為可能別人版本還沒這麼新

<!DOCTYPE html>
<!-- 版本5之後的寫法 -->

2.查詢資料

標籤/屬性用法,使用搜尋,並且可以自己嘗試看看
https://www.w3schools.com/tags/
最下方Default CSS Settings為該標籤/屬性的原始設定

3.外掛

Chinese (Traditional) Language Pack for Visual Studio Code (中文化)
Bracket Pair Colorizer (區分寫程式的顏色括號)
Auto Rename Tag (自動調整標籤)
Live server (預覽網頁,保存的時候便自動刷新瀏覽器頁面,
記得設定外掛Auto Rename Tag,選右下角齒輪,找開啟網頁的辦法)
indent rainbow (查看標籤頭尾)
live sass compiler (使用scss時記得打開watch)

Live server

live sass compiler

4.vscode設定

檔案 → 喜好設定 → 設定 → 文字編輯器 → 字型 → Font Size (字大小) 經常使用附近
如果要方便也可以" Ctrl + "但會全部螢幕放大
檔案 → 喜好設定 → 設定 → 工作區→(工作台) → 外觀 → color Theme (版面顏色)
檔案 → 喜好設定 → 設定 → 工作區→(工作台) → 外觀 → Tree:Indent (左排樹狀圖空隙)
檔案 → 喜好設定 → 設定 → 延伸模組 (看安裝過的模組)

設定tab

5.html檔案內+!=預設格式

6.html

是給人看的內容,放在 body 給人看

<body>
<!-- 標籤+屬性=元素 -->
<p id="apple">蘋果</p>
</body>

7.CSS

CSS是樣式,放在 head 給瀏覽器看即可

<head>
<style></style>
<head>

<style>
       /*  選p標籤 >>html  */
        p{
            color: red;
            background-color: black;  
        }
        
      /* 選id(記得#,否則會變成標籤)>>CSS */
        #g{
            color: green;
        }
</style>

8.JavaScript

寫在在下面,也是放在 body ,要加 script

<body>
    <script>
        function showMag()
        {
            alert("跳出視窗");
        }

    </script>
</body>

9.有些東西要配合CSS或JavaScript才有作用

如前述CSS內選擇html屬性

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙