范仁义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>