代码拷入html文件，浏览器打开可看效果
网页练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>President John F. Kennedy speaking at Rice University on September 12, 1962</title>
</head>
<body>
<h1>We choose to go to the Moon</h1>
<hr color="gray" size="3" >
<p><span style="color: #dc143c; ">We set sail on this new sea because there is new knowledge to be gained</span>, and<br>
new rights to be won, and they must be won and used for the progress of all<br>
people. For space science, like nuclear science and all technology, has no<br>
conscience of its own. Whether it will become a force for good or ill depends on<br>
man, and only if the United States occupies a position of pre-eminence can we<br>
help decide whether this new ocean will be a sea of peace or a new terrifying<br>
theater of war. I do not say that we should or will go unprotected against the<br>
hostile misuse of space any more than we go unprotected against the hostile use<br>
of land or sea, but I do say that space can be explored and mastered without<br>
feeding the fires of war, without repeating the mistakes that man has made in<br>
extending his writ around this globe of ours.</p>
<p>There is no strife, no prejudice, no national conflict in outer space as yet. Its<br>
hazards are hostile to us all. Its conquest deserves the best of all mankind, and its<br>
opportunity for peaceful cooperation may never come again. But why, some say,<br>
the Moon? Why choose this as our goal? And they may well ask, why climb the<br>
highest mountain? Why, 35 years ago, fly the Atlantic? Why does Rice play Texas?</p>
<p><b>We choose to go to the Moon.</b> We choose to go to the Moon...We choose to go<br>
to the Moon in this decade and do the other things, <b>not because they are easy, but<br>
because they are hard;</b> <u>because that goal</u> will serve to organize and measure the<br>
best of our energies and skills, <u><i>because that challenge</i></u> is one that we are willing to<br>
accept, one we are unwilling to postpone, and one we intend to win, and the<br>
others, too.</p>
<p><span style="color: #00008b; ">—John F. Kennedy</span></p>
<hr color="gray" size="3" >
<p><div style="text-align: center;"> <span style="color: #a9a9a9; font-size: x-small; "> Rice University Stadium in Houston</span><br>
<span style="color: #a9a9a9; font-size: x-small; "> Copyright 1970-2022©
,All Rights Reserved ,WIKIPEDIA®</span></div></p>
</body>
</html>
表单练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User Registration Page</title>
</head>
<body>
<form action="#" method="post">
<input type="hidden" name="id" value="1007">
<label for="username">UserName:</label>
<input type="text" name="username" id="username"><br>
<label for="password">Password:</label>
<input type="text" name="password" id="password"><br>
Gender
<input type="radio" name="gender" value="1" id="male"><label for="male">Male</label>
<input type="radio" name="gender" value="0" id="female"><label for="female">Female</label><br>
Hobby
<input type="checkbox" name="hobby" value="1" id="Movie"><label for="Movie">Movie</label>
<input type="checkbox" name="hobby" value="2" id="Music"><label for="Music">Music</label>
<input type="checkbox" name="hobby" value="3" id="Magic"><label for="Magic">magic</label><br>
Icon
<input type="file"><br>
City
<select name="City">
<option label="Tokyo">Tokyo</option>
<option label="Nagoya">Nagoya</option>
<option label="Osaka">Osaka</option>
</select>
<br>
<br>
<input type="submit" value="Registry for Free"><br>
<input type="reset" value="Reset"><br>
<input type="button" value="It's a button">
</form>
</body>
</html>
CSS导入方式三种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Used in HTML three ways</title>
<!--第二种，内部样式，在head范围里定义style标签-->
<style>
span{
color: blueviolet;
}
</style>
<!--第三种，外部样式，定义link标签引入外部的CSS文件-->
<link rel="stylesheet" href="../CSSFiles/demo.css">
</head>
<body>
<!--第一种，内联样式，标签内使用style属性，属性是一个键值对-->
<div style="color: chocolate">Here is CSS 1</div>
<span>Here is CSS 2</span>
<p>Here is CSS 3</p>
</body>
</html>
第三种样式用到的CSS文件
p{
color: brown;
}
CSS选择器Selector使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS_Selector</title>
<!--从上到下分别是，元素选择第，id选择器，井号加属性值，类选择器，点加属性值-->
<style>
div{
color: blueviolet;
}
#name{
color: chocolate;
}
.cls{
color: chartreuse;
}
</style>
</head>
<body>
<div>here is div 1</div>
<div id="name">here is div 2</div>
<div class="cls">here is div 3</div>
<span class="cls">here is span 1</span>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
