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

范仁义web前端介绍课程---4、html、css、js初体验

2、css代码

范仁义web前端介绍课程---4、html、css、js初体验

3、js代码

范仁义web前端介绍课程---4、html、css、js初体验

三、html、css、js配合小实例

1、效果图

范仁义web前端介绍课程---4、html、css、js初体验

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div style="text-align: center;">

         <h1>点击变色实例</h1>

     </div>

     <div>

         <a id="my_a" href="https://www.baidu.com" style="color: red;">去百度</a>

     </div>

     <div>

         <button id="myBtn" style="margin-top:15px;padding: 5px;background-color: darkseagreen; border-radius: 5px;color: #ffffff; ">点击将上述文字变成蓝色</button>

     </div>

     <script>

         let myBtn=document.getElementById('myBtn');

         myBtn.addEventListener('click', change_color);

         function change_color() {

             let my_a=document.getElementById('my_a');

             my_a.style.color='blue';

         }

     </script>

 </body>

 </html>