<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width:650px;
height:60px;
background-color: #000;
color:#fff;
}
span {
width:120px;
height:60px;
display:inline-block;
text-align:center;
/*文字行高等于盒子高度时文字垂直居中*/
line-height:60px;
}
a {
/*清除下划线*/
text-decoration: none;
color:#fff;
}
/*伪类选择器 :target,:hover（鼠标移入时）*/
span:hover {
background-color:gold;
color:black;
}
</style>
</head>
<body>
<div>
<a href="#"><span>发现音乐</span></a>
<a href="#"><span>我的音乐</span></a>
<a href="#"><span>朋友</span></a>
<a href="#"><span>商城</span></a>
<a href="#"><span>下载客户端</span></a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style: none;
width:200px;
height:auto;
/*边框*/
border:2px blue solid;
float:left;
}
li {
height: 200px;
width:100%;
font-size:50px;
color: green;
text-align:center;
}
div {
float:left;
width:600px;
}
p {
width:500px;
height:auto;
border: aqua 1px solid;
}
a {
text-decoration: none;
}
/*目标选择器：target 激活，点击了锚点，添加相应的样式内容*/
#p1:target:first-letter{
font-size:50px;
color:red;
}
#p2:target {
font-size:50px;
}
</style>
</head>
<body>
<ul>
<li><a href="#p1">龙族I</a></li>
<li><a href="#p2">龙族II</a></li>
<li><a href="#p3">龙族III</a></li>
</ul>
<div>
<p id="p1">龙族I
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<p id="p2">龙族II
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<p id="p3">龙族III
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
</div>
</body>
</html>
扫描二维码关注公众号，回复：
5813650 查看本文章
<!--列表系列-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul style="list-style: none">
<!--unoder list 无序列表-->
<li>11</li> <!--数据 list-->
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
<ol type="a" start="3">
<!--有序列表-->
<li style="height: 50px">12345</li> <!--数据 list-->
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
</ol>
<dl>
<!--自定义列表-->
<dt style="height:50px;text-indent: 40px"><b>标题</b></dt><!--列表标题-->
<!--缩进属性 text-indent:-->
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表单 form-->
<form action="" method="post" style="border:1px black solid;width:300px;">
<!--表单控件 类型h4,h5类型+属性
required:必填项，如果此项不填则无法提交-->
姓名：<input type="text" name="username" placeholder="请输入姓名" required><br>
密码：<input type="password" name="userpasswd" placeholder="请输入密码" maxlength="15" required><br>
电话：<input type="tel" name="usertel" maxlength="11" required><br><!--tel专用于移动端，打开数字键盘-->
邮箱：<input type="email" name="useremail" required><br>
<!--单选框必须有相同的name属性-->
性别：<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女<br>
<!--复选框,同name-->
爱好：<br>
<input type="checkbox" name="hobby" value="1">游泳
<input type="checkbox" name="hobby" value="2">吃
<input type="checkbox" name="hobby" value="3">看电影
<input type="checkbox" name="hobby" value="4">睡觉<br>
颜色：<input type="color" name="color"><br>
年龄：<input type="number" name="year" max="10" min="1"><br>
出生日期：<input type="date" name="birthday"><input type="time" name="time"><br>
<input type="range" max="100 min=10 value=50"><br>
<meter max="100" min="0" low="59" high="90" value="30" style="width:200px"></meter><br>
评价: <input type="search"><br>
<!--重置按钮-->
<input type="reset" value="重置">
<!--图片提交-->
<input type="image" src="plane.png">
<!--提交按钮：收集用户数据-->
<input type="submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--action:数据的提交地址
method:提交方式
get:默认提交方式 显示到地址栏上 作用：请求界面 数据量小
post:安全 提交的数据会到请求头 network 鼠标单击打开 request header 参数 数据量大
-->
<form action="01.java" method="get" style="width:400px">
<fieldset style="border:1px red solid">
<legend>学生档案</legend>
<!--autofocus:默认聚焦-->
姓名：<input type="text" name="username" placeholder="请输入姓名" required autofocus><br>
密码：<input type="password" name="userpasswd" placeholder="请输入密码" maxlength="15" required><br>
电话：<input type="tel" name="usertel" maxlength="11" required><br><!--tel专用于移动端，打开数字键盘-->
邮箱：<input type="email" name="useremail" required><br>
<!--省市区下拉列表 h5 配合一个文本输入框 list属性=“datalist里的值”-->
<input type="text" list="mylist">
<datalist id="mylist">
<option value="0" name="place">北京</option>
<option value="1" name="place">重庆</option>
<option value="2" name="place">天津</option>
<option value="3" name="place">上海</option>
</datalist>
<br>
<!--老式 h4-->
<select name="" id="">
<option value="0" name="place">北京</option>
<option value="1" name="place">重庆</option>
<option value="2" name="place">天津</option>
<option value="3" name="place">上海</option>
</select><br>
<!--文本输入框 cols列 row行
需添加禁止用户拖拽 resize:none-->
<textarea name="" id="" cols="30" rows="10" style="resize: none" placeholder="自我介绍"></textarea>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--样式css
1：写到标签身上，行内，缺点：冗杂，没有实现结构和样式相分离
2：文本内样式，语法：在head标签里引入style标签
-->
<!--样式表-->
<style>/*必须写到head标签里*/
/* 挑选元素
方法1：标签选择器 {属性名字：属性值;}
*/
td {
width:100px;
color:green;
background-color: yellow;
text-align: center;/*文本居中*/
}
</style>
</head>
<body>
<table align="center" border="1" cellpadding="10px" cellspacing="0px">
<!--cellpadding:增加表格边框和内容的间距
cellspacing:增加表格边框之间的间距-->
<caption style="font-size:30px;color:blue">产品信息表</caption>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>生产日期</th>
<th>描述</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td colspan="2">手机</td><!--跨2行合并-->
<!--<td>2018-03-09</td>-->
<td>非常棒</td>
<td rowspan="3">电子产品</td><!--跨3列合并-->
</tr>
<tr>
<td>1002</td>
<td>电脑</td>
<td>2017-10-31</td>
<td>不赖</td>
<!--<td>家电</td>-->
</tr>
<tr>
<td>1003</td>
<td>空调</td>
<td>2017-11-10</td>
<td>挺好</td>
<!--<td>家电</td>-->
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<base target="_blank">
<!--target="_blank"在新页面打开
base用于修改超链接的打开方式-->
</head>
<body>
<a href="http://baidu.com">百度搜索</a>
<a href="day30表格.html" target="_self">表格代码</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>世纪佳缘-你在我也在</title>
<style>
tr {
height:40px;
}
th {
height:60px;
text-align:center;
}
</style>
</head>
<body>
<table align="center" width="600px" cellspacing="0" cellpadding="0">
<tr>
<th colspan="2">青春不常在，抓紧谈恋爱</th>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" value="0" name="sex"> <img src="images/man.jpg" alt=""> 男
<input type="radio" value="1" name="sex"><img src="images/women.jpg" alt=""> 女
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select name="" id="myyear">
<option name="year" value="0">请选择年</option>
<option name="year" value="1">1991年</option>
<option name="year" value="2">1992年</option>
<option name="year" value="3">1993年</option>
</select>
<select name="" id="mymon">
<option name="month" value="0">请选择月</option>
<option name="month" value="1">1月</option>
<option name="month" value="2">2月</option>
<option name="month" value="3">3月</option>
</select>
<select name="" id="myday">
<option name="day" value="0">请选择日</option>
<option name="day" value="1">1日</option>
<option name="day" value="2">2日</option>
<option name="day" value="3">3日</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text" list="mycity1" placeholder="北京">
<datalist id="mycity1">
<option value="北京" name="city"></option>
<option value="重庆" name="city"></option>
<option value="天津" name="city"></option>
<option value="上海" name="city"></option>
</datalist>
<br>
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="married" value="0"> 未婚
<input type="radio" name="married" value="1"> 离婚
<input type="radio" name="married" value="2"> 丧偶
</td>
</tr>
<tr>
<td>学历</td>
<td>
<input type="text" list="mylist2" placeholder="小学">
<datalist id="mylist2">
<option value="小学" name="educate"></option>
<option value="初中" name="educate"></option>
<option value="高中" name="educate"></option>
<option value="专科" name="educate"></option>
<option value="本科" name="educate"></option>
<option value="研究生" name="educate"></option>
</datalist>
</td>
</tr>
<tr>
<td>月薪</td>
<td>
<input type="text" value="5000-10000">
</td>
</tr>
<tr>
<td>手机号</td>
<td>
<input type="tel" name="usertel" maxlength="11" required>
</td>
</tr>
<tr>
<td>昵称</td>
<td>
<input type="text" name="username" required>
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="hobby" value="0"> 妩媚
<input type="checkbox" name="hobby" value="1"> 柔美
<input type="checkbox" name="hobby" value="2"> 可爱
<input type="checkbox" name="hobby" value="3"> 小鲜肉
<input type="checkbox" name="hobby" value="4"> 型男
<input type="checkbox" name="hobby" value="5"> 气质
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea name="" id="" cols="50" rows="10" style="resize:none"></textarea>
</td>
</tr>
<tr style="height:60px">
<td></td>
<td>
<input type="image" src="images/btn.png">
</td>
</tr>
<tr style="height:60px">
<td></td>
<td>
<input type="checkbox" name="agree" value="0" checked> 我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="day30作业2.html" target="_blank">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>世纪佳缘登录界面</title>
<style>
tr {
height:40px;
}
th {
color:#666;
font-size:18px;
height:39px;
}
p2 {
font-size:12px;
color:#666;
}
p1 {
font-size:12px;
color:#aaa;
}
input {
color:#ccc;
}
</style>
</head>
<body>
<table align="center" width="400px">
<tr>
<th colspan="2">会员登录</th>
</tr>
<tr>
<td width="120px">登录账号</td>
<td>
<input type="text" name="username" value="邮箱/ID/手机号">
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="text" name="userpasswd" value="密码">
</td>
</tr>
<tr>
<td></td>
<td>
<p1><input type="checkbox" name="auto" value="0" checked> 两周内自动登录</p1>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="images/login.png">
<a href="#">忘记密码</a>
</td>
</tr>
<tr>
<td>其他账号登录</td>
<td>
<p2>
<img src="images/ico1.png" alt=""> QQ账号
<img src="images/ico2.png" alt=""> 新浪微博
<img src="images/ico3.png" alt=""> 百度账号
</p2>
</tr>
<tr>
<td></td>
<td>
<a href="day30作业1.html" target="_blank">还不是会员？立即注册</a>
</td>
</tr>
</table>
</body>
</html>