7.20 练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body><h1>今日搜索热词</h1>
<hr>
<h3> 1、阿卡贝拉</h3>
<p>阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,
当时的教会音乐只以人声清唱,并不应用乐器。<a href="music.mp3" >音频示例: 阿
卡贝拉《千与千寻》</a></p>
<h3>2、翻唱</h3>
<p> “翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱,包括重新填词
,编曲。现在已有不少明星,都在翻唱他人的歌,不断在翻唱中突破自己,给大家
带来不一样的风格。
<a href="video.mp4" >视频示例: 有一种悲伤(翻唱)-《A Kind of Sorrow》</a></p>
</body>
</html>
结果:
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="#">
账户:<input type="test" name="username">
<br>
密码:<input type="password" name="one">
<br>
性别:
<input type="radio" name="r1" value="女">女
<input type="radio" name="r1" value="男">男
<br>
爱好:
<input type="checkbox" name="habit" value="smoking">抽烟
<input type="checkbox" name="habit" value="drink">喝酒
<input type="checkbox" name="habit" value="perm">烫头
<br>
其他:<textarea name="其他" id="qita" cols="30px" rows="10px"></textarea>
<option selected disabled></option>
籍贯:<select>
<option value="sc">四川省</option>
<option value="yn">云南省</option>
<option value="gd">广东省</option>
</select>
<br>
<button>确认</button><input type="reset"><button>检测账户是否被注册</button>
</form>
</body>
</html>
结果
7.21日练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body align="center">
<h3 >用户注册</h3>
<form action="#">
用户名:<input type="test" name="userName" >
<br><br>
密码:<input type="password" name="pwd">
<br> <br>
性别:
<input type="radio" name="r1" value="男">男
<input type="radio" name="r1" value="女">女
<br><br>
爱好:
<input type="checkbox" name="唱" value="sing">唱
<input type="checkbox" name="跳" value="dance">跳
<input type="checkbox" name="rap" value="rap">rap
<input type="checkbox" name="打篮球" value="basktabale">打篮球
<br><br>
邮箱:
<input type="emali" name="email" value="请输入你的邮箱">
<br><br>
用户头像:
<input type="file" name="文件">
<br><br>
家庭住址:
<select name="下拉" >
<option value="">请选择你的住址</option> </select>
<br><br><br><br>
收货地址
<select name="shouhuo" id="">
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="重庆">重庆</option>
<option value="南京">南京</option>
</select>
<br><br>
建议或意见:
<textarea name="其他" id="qita" cols="30" rows="1">你的建议或意见</textarea>
<br><br>
你喜欢的颜色:
<input type="color">
注册时间:
<input type="datetime-local">
<br><br>
<button>注册</button>
<input type="reset">
</form>
</body>
</html>
结果
作业
<!-- 用外部样式 -->
<!-- 选取主标题(<h1>)将颜色改成粉色。
选取所有列表项(<li>)。
选取第一个列表项。背景颜色改为红
选取最后一个列表项。背景颜色改为绿
选取容器内带有"class"为"text"的段落。
选取容器内的第一个盒子。
选取所有带有"class"为"text"的元素(无论其在容器内还是容器外)。 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./作业2.1的外部样式.css">
</head>
<body>
<h1>主标题</h1>
<br>
<ul>
<li>项目1</li>
<li class="text">项目2</li>
<li>项目3</li>
</ul>
<br>
这是一个段落
<br>
<br>
<div class="container">
<div>盒子1</div>
<div class="text">盒子2</div>
</div>
<br>
另一个在容器外的段落
</body>
</html>
h1{
color: pink;
}
ul li{
}
ul>li:nth-child(1){
background-color: red;
}
ul>li:nth-last-child(1){
background-color:green;
}
.container div:first-child{
}
input[type="class"]{
}
.container div:first-child{
}
.text{
}
结果