范仁義web前端介紹課程---4、html、css、js初體驗
一、總結
一句話總結:
html:就是網站的骨架,比如div標簽、a標簽等
css:style標簽或者style屬性里面的就是css
js:頁面中的script標簽里面就是js代碼
二、html、css、js初體驗(百度為例)
課程對應的視頻地址:4、html、css、js初體驗
https://www.fanrenyi.com/video/1/4
1、html代碼
2、css代碼
3、js代碼
三、html、css、js配合小實例
1、效果圖
2、代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="text-align: center;"> 9 <h1>點擊變色實例</h1> 10 </div> 11 <div> 12 <a id="my_a" href="https://www.baidu.com" style="color: red;">去百度</a> 13 </div> 14 <div> 15 <button id="myBtn" style="margin-top:15px;padding: 5px;background-color: darkseagreen; border-radius: 5px;color: #ffffff; ">點擊將上述文字變成藍色</button> 16 </div> 17 <script> 18 let myBtn=document.getElementById('myBtn'); 19 20 myBtn.addEventListener('click', change_color); 21 function change_color() { 22 let my_a=document.getElementById('my_a'); 23 my_a.style.color='blue'; 24 } 25 26 </script> 27 </body> 28 </html>