iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0
Modern Web

三十天持續努力挑戰py系列 第 4

Day_4 Web html 初開始 with vscode(下)

  • 分享至 

  • xImage
  •  
  • 還沒看過上篇的請先看上篇喔。
  • css雖然可以直接寫在div後面但是,那樣寫的話以後有些東西會用到一模一樣的style,會要再寫一次這樣會變得很麻煩,所以其實可以在外面的style裡面寫上此樣式,然後再把這個樣式套用在某個class上,再把div套上class就可以使用其樣式了,以後有任何div需要相同的樣式也可以直接給他class就可以了。https://ithelp.ithome.com.tw/upload/images/20230913/20162170rrryKBFvFY.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .test{
        color: red;
        font-size: 20px;
    }
</style>
<body>
    <p>Lorem, ipsum.</p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <h2>Lorem, ipsum.</h2>
    <a href="www.youtube.com">Lorem, ipsum.</a>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7TVwjjjxSYr4-Ibegd4YU-GORlReBpnQej2C5ju8ouA&s" alt="pun">
    
    <div class="test">
        <p>Lorem ipsum dolor sit amet.</p>
        <h2>Lorem, ipsum.</h2>
    </div>
    <div class="test">
        Lorem ipsum dolor sit amet.
    </div>
</body>
</html>
  • css也不單單只有這樣,詳細可以看我另外的幾篇。
  • html除了css還有一個很重要的東西JavaScript(js),這是用來做一些腳本、資料傳遞、動畫等等的功能,也可以用js更改css屬性,是一個十分強大的功能。
  • 我們在裡面新增一個按鈕,之後添加onclick的Function,之後再script裡寫上此函式想要執行的動作如下。
    <button onclick="myFunction()">Click me</button>
    <script>
        function myFunction(){
            alert("Hello World");
        }
    </script>

https://ithelp.ithome.com.tw/upload/images/20230913/20162170f9BeDiHng0.png

  • 以上,html、css、javaScript這三種就是前端Web的三巨頭,雖然看似很簡單,但是每樣東西都可以很深入的再研究,所以我接下來會再出幾篇講這幾個東西。

上一篇
Day_3 github的基礎應用(上)
下一篇
Day_5 github的基礎應用(下)
系列文
三十天持續努力挑戰py30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言