zoukankan      html  css  js  c++  java
  • 01 认识html、css和javascript

    简介

    网页是个文本文件,主要由html,css和javascript组成。

    HTML称为超文本标记语言,可以用来显示文字、图片、声音、视频、按钮、表格等。

    CSS称为层叠样式表,可以描述元素的样式:例如位置、颜色、边框、字体、字号。

    Javascript,简称js,是一种脚本语言,可以用来对用户的操作做出响应。例如:改变文字、改变样式、从服务端请求数据等。

    这是一个简单的例子:

     效果图:

    页面中添加了一个标题、一个按钮、一个宽度和高度都是100像素,红色的方框;点击按钮,红色方框会变成绿色。

    是不是很简单?

    操作步骤

    1、首先安装开发工具,推荐VSCode和谷歌浏览器。

    VSCode是一个编写代码的工具,有智能提示,很好用。下载地址:https://code.visualstudio.com/

    谷歌浏览器具有开发者工具,方便开发。下载地址:https://www.google.cn/chrome/

    2、打开VSCode,安装汉化包和Liver Server扩展。

    安装汉化包:

    安装完成后,重启VSCode,就变成汉化版的了。

    安装Live Server:

     Live Server是一个简单的服务器,可以在浏览器中查看我们的页面。修复页面保存,会自动刷新浏览器。

    3、创建文件01.html,并编写代码。

    代码如下:

    <!DOCTYPE html>
    
    <html lang="zh-cn">
    
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            #box {
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    
    <body>
        <h1>点击按钮,红色变绿色</h1>
        <button onclick="changeColor()">按钮</button>
        <div id="box"></div>
        <script>
            function changeColor() {
                document.getElementById('box').style.background = 'green';
            }
        </script>
    </body>
    
    </html>

     4、在浏览器中输入localhost:5500/index.html,打开页面。点击按钮,看看是否会变颜色。

    恭喜!您已经学会了搭建前端开发环境,并编写了第一个页面。

  • 相关阅读:
    虚拟机网络不通
    设计师升职加薪必须知道的10个设计网站
    Centos设置防火墙与开放访问端口
    设置Jexus开机启动
    .Net 操作Excel表格
    Core 2.0使用Nlog记录日志+Mysql
    C# 操作docx文档
    JS截取页面,并保存到本地
    XmlReader 使用
    requireJS简单应用
  • 原文地址:https://www.cnblogs.com/tengge/p/13519516.html
Copyright © 2011-2022 走看看