[Web程序设计]实验: Web基础

news2024/11/9 9:32:12

一、实验目的

(1)掌握开发工具的安装和配置

(2)熟悉程序的编写,运行和访问方法;

二、实验内容

(1)请编写出一个HTML页面,令其输出“hello world!~~”,使用css将其字体设置为宋体红色;

(2)编写一个HTML页面,页面包含数字和按钮两部分,每次单击按钮可以使数字加一。

三、实验要求

(1)熟练掌握常用HTML标签;

(2)熟练掌握CSS的语法应用;

(3)熟练掌握JS的语法和使用。

(4)做好预习,明确试验目的。

(5)对试验过程认真记录,得出配置总结;

四、实验步骤与结果(包含程序代码及运行截图)

(1)请编写出一个HTML页面,令其输出“hello world!~~”,使用css将其字体设置为宋体红色;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <style>
        div{font-family:"宋体";
        color:red;}
    </style>
</head>
<body>
<div>hello world!~~</div>
</body>
</html>

 (2)编写一个HTML页面,页面包含数字和按钮两部分,每次单击按钮可以使数字加一。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<button οnclick="add()">click me</button>
<input type="text" id="text" value="0"/>
<script type="text/javascript">
    function add(){
        var  x=document.getElementById("text");
        var  a= x.value;
        a++;
        x.value=a;
    }
</script>
</body>
</html>

 

 五、实验反思

  1. 在做第一题时,因为不够仔细把 <style>
            div{font-family:"宋体";
            color:red;}
        </style>
    放到了body内,导致没有实现效果,后来重新仔细检查了一遍,改正了过来。
  2. 第二题在做题过程中没有遇到什么问题,但是因为不太记得js的知识点,于是往前查阅,在Dom里找到了document.getElementById("userId");获取元素的方法,以及函数的使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/684442.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

略施小计,拥有自己的GPT

ChatGPT一经发布就在AI圈引起轰动&#xff0c;GPT-4和chagpt-plugin让OpenAI和其他同行拉开了更大的差距。由于某些原因&#xff0c;我们可能无法亲身体验ChatGPT的神奇之处。但现在&#xff0c;如果你还没有体验过ChatGPT&#xff0c;就像10年前没有购买比特币一样&#xff08…

SuperMap GIS基础产品WebGIS FAQ集锦(3)

SuperMap GIS基础产品WebGIS FAQ集锦&#xff08;3&#xff09; 【iClient】iClient for Leaflet,如何修改map的默认渲染方式&#xff1f; 【解决办法】map的默认渲染方式取决于浏览器支持&#xff0c;可通过renderer属性设置&#xff0c;设置为L.SVG或L.Canvas 【iClient】le…

k8s 学习九,pod 知识点 上

在 K8S 中&#xff0c; pod 是一个非常关键的存在&#xff0c;我们一起来看看 pod 具体是个什么&#xff1f; pod 是个啥&#xff1f; pod 是个什么呢&#xff1f;pod 是 K8S中的一个核心概念 每一个 pod 都会有一个特殊的根容器&#xff0c;叫做 pause 容器&#xff0c;paus…

云原生:深入掌握Docker日志管理:高效策略与最佳实践

前言 在docker的整个生命周期中&#xff0c;超过70%的时间&#xff0c;我们都是在用docker进行运维工作&#xff0c; 查看docker的日志&#xff0c;是运维中的必会技能。 docker日志分为&#xff1a; docker引擎日志应用日志 今天我们重点来讨论下docker的日志使用&#xf…

【博客672】prometheus使用数据外推与兼容跳变重置来优化处理窗口函数(rate,irate,increase)

prometheus使用数据外推与兼容跳变重置来优化处理窗口函数(rate&#xff0c;irate&#xff0c;increase) 场景 以下是用于计算计数器增长率的三个函数之间差异的高级概述&#xff1a; rate()&#xff1a;这计算每秒的增长率&#xff0c;在整个提供的时间窗口内平均。示例&am…

谷歌推出“能讲会听”的大语言模型AudioPaLM,实现语音理解和生成

出品人&#xff1a;Towhee 技术团队 作者&#xff1a;顾梦佳 近日&#xff0c;谷歌推出了一个能够理解并生成语音理解的大型语言模型——AudioPaLM。这一模型融合了分别基于文本和语音两种语言模型——PaLM-2 和 AudioLM&#xff0c;形成了一个统一的多模态架构。该模型不仅能对…

@monthly /root/.cfg/./dealer病毒清除

登录服务器时&#xff0c;ssh提示密码不对&#xff0c;就去控制台检查&#xff0c;查看到虚拟平台中多台服务器提示虚拟机CPU使用告警&#xff0c;占用过高。远程无法登录。 原因分析&#xff1a;所有中毒的均为linux服务器&#xff0c;密码设置过于简单&#xff0c;防火墙关闭…

【算法题】统计各位数字之和为偶数的整数个数、替换空格、旋转数组的最小数字

算法题之数字处理 一、统计各位数字之和为偶数的整数个数1.1、题目1.2、理解题目1.3、解题思路&#xff08;暴力枚举&#xff09;1.4、解题思路2&#xff08;数学公式&#xff09;1.5、小结 二、替换空格2.1、题目2.2、解题&#xff1a;遍历原地修改 三、旋转数组的最小数字3.1…

如何判断TongWeb是否支持某种数据库?

起因&#xff1a; 数据库连接池本是一项成熟的技术&#xff0c;但随着数据库厂家、种类的增加&#xff0c;常常被问到TongWeb是否支持XX数据库&#xff1f; 说明&#xff1a; 数据库连接池的基本思路是&#xff0c;平时建立适量的数据库的连接&#xff0c;放在一个集合中&…

举例说明,JS中的【return true】和【return false】的【使用场景】

1.return true和return false都是写在函数里面 2.如果一个函数需要有返回值&#xff0c;则函数中需要写return相关 3.return true和return false是之后调用这个函数判断用&#xff1a; 如果一个函数需要返回值&#xff0c;则需要在函数中添加return 如果函数中添加的是 比如 …

2-css-4

一 标准流 标准流也叫文档流&#xff0c;指的是标签在页面中默认的排布规则&#xff0c;例如&#xff1a;块元素独占一行&#xff0c;行内元素可以一行显示多个。 二 浮动 1 认识 作用&#xff1a;让块元素水平排列。 属性名&#xff1a;float 属性值 left&#xff1a;左…

跳槽过去,刚工作三天就被裁是一种怎样的体验

前言 还有谁&#xff1f;刚上三天班就被公司公司的工作不适合我&#xff0c;叫我先提升一下。 后面我也向公司那边讨要了一个说法&#xff0c;我只能说他们那边的说辞让我有些不服气。 现在之所以把这件事在csdn上记录一下&#xff0c;一是记录一下自己的成长轨迹&#xff0…

2023计算机组成原理【5-7】

第五章 中央处理器 1&#xff0e;指令周期的概念&#xff0c;与时钟周期、机器周期的区别。 指令周期是执行一条指令所需的时间&#xff0c;包括多个子阶段的时间总和时钟周期是计算机系统中的基本时间单位&#xff0c;由时钟信号控制&#xff0c;用于同步处理器和其他组件的操…

Collectors.toMap使用详解

这里写目录标题 一、使用规则二、源码及方法三、代码示例1.将list转成以id为key的map&#xff0c;value是id对应的Dept对象2.假如id存在重复值&#xff0c;则会报错Duplicate key xxx, 解决方案是3.想获得一个id和name对应的Map<Integer, String>4.把Dept集合按照group分…

5年软件测试工作经验,高不成低不就,真的只能转行了吗?

迷茫感&#xff0c;从哪里来&#xff1f; 不知不觉在软件测试行业&#xff0c;野蛮生长了5年之久。这一路上拥有了非常多的感受。有迷茫&#xff0c;有踩过坑&#xff0c;有付出有收获&#xff0c; 有坚持&#xff01; 我一直都在软件测试行业奋战&#xff0c; 毕业时一起入职…

制作自定义pfx证书(数字签名)

目录 生成server.key 生成server.crt 生成server.pfx 结果 exe文件签名 生成server.key openssl genrsa -des3 -out server.key 2048 Generating RSA private key, 2048 bit long modulus (2 p

单独生成 main.exe, pyinstaller × pyecharts 打包报错找不到文件 map_filename.json 一次搞定!

报错&#xff1a; FileNotFoundError: [Errno 2] No such file or directory: ‘C:\Users\xxx\AppData\Local\Temp_MEI3455\pyecharts\datasets\map_filename.json’ pyecharts 打包成 exe 的时候找不到 map_filename.json 文件。先找到这个文件,一般在本机 Python 安装目录下…

一文掌握linux系统管理命令

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

SuperMap GIS基础产品移动GIS FAQ集锦(3)

SuperMap GIS基础产品移动GIS FAQ集锦&#xff08;3&#xff09; 【iMobile】网络分析中设置权值字段&#xff0c;如何添加多个权值字段&#xff1f; 【解决办法】通过权值字段集合类&#xff08;WeightFieldInfos&#xff09;设置&#xff0c;该类是权值字段信息对象&#x…

回波3DFFT处理(测距、测速、测角)

回波3DFFT处理&#xff08;测距、测速、测角&#xff09; 1、测距、测速2、测角3、3DFFT处理4、MATLAB程序 本文主要针对TI 毫米波雷达的测距、测速、测角的基本方法——3DFFT处理进行简单介绍&#xff0c;并提供MATLAB处理程序&#xff0c;分析3DFFT处理结果。 1、测距、测速…