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

转载

mob604756fc3573 2019-11-30 14:44:00

文章标签 范仁义web前端介绍课程 html css 微信人工智能 文章分类 Html/CSS 前端开发

范仁义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初体验_html

2、css代码

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

3、js代码

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

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

1、效果图

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

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>