分为三个步骤
步骤一：为首页：a.html
步骤二：为图片：huoxing.jpg
步骤三：为注册页面：Untitled-1.html
a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#box {
width: 380px;
margin: 30px auto;
font-family: 'Microsoft YaHei';
font-size: 14px;
display: inline-table;
}
input {
width: 260px;
border: 1px solid #e2e2e2;
height: 30px;
float: left;
background-image: url(images/search.jpg);
background-repeat: no-repeat;
background-size: 25px;
background-position: 5px center;
padding: 0 0 0 40px;
}
#search {
width: 78px;
height: 32px;
float: right;
background: white;
border: 1px solid black;
color: black;
text-align: center;
line-height: 32px;
cursor: pointer;
display: inline-table;
}
.form {
margin: 30px auto;
display: inline-table;
float: left;
}
</style>
</head>
<body>
<h1>“老腔”何以令人震撼</h1>
<div class="form">
<span>2021-05-15 来源：网络侵删</span>
</div>
<div id="box">
<input type="search" name="search" placeholder="请输入关键字">
<div id="search">搜索</div>
<a href="Untitled-1.html" target="__blank">免费注册</a>
<img src="huoxing.jpg" alt="天文一号" tittle="天文一号" />
<h4>高考某考生作</h4>
<p>华阴老腔，在几年前还是个名不见经传的小曲目。 然而，这样一个小众甚至是默默无闻的老腔，却让陈忠实先生情难自禁，沉醉其中，不可自拔。不禁很好奇，“老腔”究竟何以令人震撼? </p>
<p>也许是那一声声铿锵有力、直击人心的嘶吼，也许是那一段段百转千回、悠扬婉转的曲调，也许是台上台下演员的倾力演唱、人们的激情感染……或者， 是藕断丝连的缕缕乡愁，是深结于心的归属与认同。前三者自不消说，确实打动了很多人，却难以让人有更深层次的、发自心灵的震颤和共鸣——这种共鸣，是需要共同的记忆和情感的。 陈忠实生于关中，长于关中，他了解并几十年如一日地热爱着它;而在老腔中，在极富感染力和冲击力的表演中，他不能更加清晰地看到了故乡的面目，听到了自己引以为豪的土地的神灵之歌。这才是老腔之所以让人震撼的原因。这种深刻而广阔的民族归属感和文化认同感，让我们在与西方文明接轨、渐渐西洋化、渐渐遗忘了民间小调的时候，
可以被一曲乡音震得泪流满面。这实在是一件可喜又可悲的事情。 </p>
<p> 喜的是，像老腔一样的民间文化依旧可以轻而易举地引起我们的感动和震撼; 悲的是，像老腔一样的的民间文化居然可以轻而易举地引起我们的感动和震撼。难能方为可贵， 都是越不容易得到，才越发觉得珍贵，觉得眼前一亮。本应深植于日常生活的风土 现在的人们，是不是已经走得太远，以至于都要看不见回家的路了呢?</p>
<p>两年前，坐在课桌前的考生们面对着“北京老规矩”的茫然无措依旧历历在目。 家家户户四合院、七折八拐胡同湾的景象已经不复存在，似乎连带着那些陈旧又充满温情的习惯也跟着一同去了。 听得别人提起，才会恍然大悟，惊喜非常：就应该是这样的啊!老腔是如此，老规矩是如此，甚至连大名鼎鼎的国粹京剧， 也不知道有多少个孩子有过完完整整听一出戏的经历。这片土地记忆的格调，就在我们这一代中逐渐被更改; 这片土地文化的精粹，就在我们这一代中逐渐被掩埋。 偶然听到、看到、感受到，所带来的震撼终究是短暂的，短暂之后又是长久的遗忘;而我们需要的，从来都不是遗忘。</p>
<p>在追逐更加多样的未来的时候，有时也需要停下来，多看看来时的路。 即使登上顶峰，一个没有自己独有回忆的人也不是一个完整的人;即使快速发展，一个没有自己独特文化的国家也不是一个值得尊敬的国家。 希望在不久的将来，我们领略到和老腔类似的民间艺术时，不会再如此“肤浅”地被震撼。</p>
</body>
</html>
Untitled-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h2>注 册 用 户</h2>
<form action="" method="post" onsubmit="test1();">
<label>账号：</label><input type="text" maxlength="10" id="userid" name="userid"><br>
<label>密码：</label><input type="password" maxlength="15" required id="password" name="password"><br>
<!-- type="radio"代表是 这种原点形式的选择键
checked="checked"为初始状态下默认选上
两个input的name 相同是为了保证两个按钮为同一个“题”只能选择一个
id不同则代表这是两个选项 -->
<label>性别：</label><input type="radio" id="man" name="sex" />男
<input type="radio" id="woman" name="sex">女<br>
<label>生日：</label><input type="date"><br>
<label>所在地区：</label><input type="area" maxlength="15" id="area" name="area"><br>
<label>婚姻状况：</label><input type="radio" name="condition" id="yes">已婚<input type="radio" name="condition" id="no">未婚<input type="radio" name="condition" id="broke">离婚<br>
<label>学历：</label><input type="education" maxlength="15" id="education" name="education"><br>
<label>喜欢的类型：</label><input type="checkbox" name="like" id="1">好的
<input type="checkbox" name="like" id="2">不好的
<input type="checkbox" name="like" id="3">挺好的
<input type="checkbox" name="like" id="4">很不好的
<input type="checkbox" name="like" id="5">都喜欢 <br>
<label>个人介绍</label><textarea name="" cols="40" rows="5"></textarea><br>
<label></label><input type="submit" value="免费注册" onclick="getsub()"><br>
<label></label><input type="checkbox" name="" id="">我同意注册条款和加入标准
<div>
<label></label>
<h3>我承诺 </h3>
<ul>
<li>1.凑字数</li>
<li>2.凑字数</li>
<li>3.凑字数</li>
</ul>
</div>
</form>
</div>
</body>
</html>
