一、实验目的
（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) Write an HTML page. The page contains two parts: numbers and buttons. Each time the button is clicked, the number can be increased by one.
<!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>
5. Experimental reflection
- When doing the first question, I put < style >
div { font-family : "宋体" ;
color : red ;}
</ style >
in the body because I was not careful enough, so the effect was not realized. Then I checked it again carefully. It was corrected. - The second question did not encounter any problems in the process of doing the question, but because I don’t remember the knowledge points of js, so I looked up and found document.getElementById("userId"); in the Dom; the method of obtaining elements, and the function usage of.