案例
<!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>
<p>
<h1>1、阿卡贝拉</h1>
阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。<a href=" ">音频示例:阿卡贝拉《千与千寻》</a >
</p >
<h2>2、翻唱</h2>
“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱,包括重新填词,编曲。现在已有不少明星,都在翻唱他人的歌,不断在翻唱中突破自己,给大家带来不一样的风格。<a href=".//images/video.mp4">有一种悲伤(翻唱)-《A Kind of Sorrow》</a >
</body>
</html>
练习题
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器练习题</title>
<link rel="stylesheet" href="./作业.css">
</head>
<body>
<div class="container">
<h1>主标题</h1>
<ul class="list">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<p class="text">这是一个段落。</p >
<div class="box">盒子1</div>
<div class="box">盒子2</div>
</div>
<p class="text">另一个在容器外的段落。</p >
</body>
</html>
h1{
background-color: pink;
}
div ul>li:first-child{
background-color: red;
}
div ul>li:last-child{
background-color: green;
}
.text{
color: aqua;
}
.container .box:nth-of-type(1){
color: aquamarine;
}
input[class="text"] {
background-color: pink;
}
表单
<!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>用户注册</title>
</head>
<body>
<h1>用户注册</h1>
<P>用户名:<input type="text" name="userName" autocomplete="off"></P>
密码:<input type="password" name="one" maxlength="6">
<br>
<input type="radio" name="r1" value="女">女
<input type="radio" name="r1" value="男">男
<br>
爱好:
<input type="checkbox" name="love" value="sing" >唱
<input type="checkbox" name="love" value="dance">跳
<input type="checkbox" name="love" value="rap">rap
<input type="checkbox" name="love" value="basketball">打篮球
<p>邮箱:<input type="text" name="email" autocomplete="off" placeholder="请输入你的邮箱:"></p >
用户头像<input type="file" name="wenjian" id="">
<p> 家庭住址<select name="xiala" id="">
<option value="翻斗花园">翻斗花园</option>
<option value="郊外别墅" selected>郊外别墅</option>
<option value="山村">山村</option></p >
<P>收货地址<select name="question" multiplerequired>
<option value="">广州</option>
<option value="apple">深圳</option>
<option value="banana">重庆</option>
<option value="orange">南京</option></select>
</P>
<p>建议或意见:<textarea cols="20" rows="10" maxlength="200" placeholder="你的建议或意见"></textarea></p >
选择你喜欢的颜色<input type="color" name="" id="">
注册时间<input type="time" name="" id="">
<p><button>提交</button>
<input type="reset"></p >
</body>
</html>