我是后来的同学 这段时间有点忙现在才开始写作业 我自己都不好意思了哈 以后请老师和同学多多指教
描述HTML与HTTP是什么,他们之间有什么联系?
1、HTML：HTML是一种超文本标记语言，静态的页面就是由这种语言设计的，而由HTML语言写出的静态网页文件的扩展名有HTM、HTML、SHTML、DHTML等多种。
2、HTTP：HTTP是一种协议，简单的说，我们看网页就需要这种协议，你会发现，虽然你输入网址时没有打这几个字母，但当网页打开后，它会自己出现在地址栏中，它就是专门用来解释网页代码的协议。
所以 html与http是两个不一样的东西，因为html是一种超文本标记语言；而HTTP是一种传输协议，HTTP的产生还是为HTML服务的，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。
制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
display: flex;
}
a{
text-decoration: none;
color: #FFFFFF;
}
nav{
width: 100%;
height: 42px;
background: #eeeeee;
display: flex;
}
nav>ul{
display: flex;
}
nav>ul>li{
display: flex;
align-items: center;
list-style: none;
}
nav>ul>li>a{
padding: 5px 15px;
background: #0E9A00;
margin: 0 3px;
border-radius: 10px 0 10px 0;
}
nav>ul>li>a:hover{
background: #8be9fd;
}
nav>ul>li>a:last-of-type img{
width: 30px;
height: 30px;
}
nav>ul>li:last-of-type a{
padding: 0;
border-radius:0;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">首页</a> </li>
<li><a href="">栏目1</a> </li>
<li><a href="">栏目2</a> </li>
<li><a href="">栏目3</a> </li>
<li><a href=""><img src="user_avatar.jpg" alt="个人中心"> </a> </li>
</ul>
</nav>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品信息</title>
<style>
table{
margin: 0 auto;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="6">
<caption><h3>商品信息</h3></caption>
<thead>
<tr bgcolor="#EEF2FB" align="center" >
<td>编号</td>
<td>商品名称</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td>连衣裙</td>
<td>300</td>
<td>2</td>
<td>600</td>
</tr>
<tr align="center">
<td>2</td>
<td>皮鞋</td>
<td>200</td>
<td>1</td>
<td>800</td>
</tr>
</tbody>
<tfoot align="center">
<tr style="background: #eee8d5">
<td colspan="4">合计</td>
<td>1400</td>
</tr>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
.form{
width: 800px;
border: 1px #eeeeee solid;
margin: 0 auto;
display: flex;
flex-flow: column nowrap;
align-items: center;
}
p{
width: 500px;
border-bottom: 1px #eeeeee solid;
}
</style>
</head>
<body>
<form action="1.php" method="post" class="form">
<h3>用户注册</h3>
<p>
<label for="username">账号：</label>
<input type="text" name="username" id="username" placeholder="请输入账号">
</p>
<p>
<label for="email">邮箱：</label>
<input type="email" name="email" id="email" placeholder="请输入邮箱">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="请输入密码">
</p>
<p>
<label for="age">年龄：</label>
<input type="number" name="age" id="age" min="16" max="80">
</p>
<p>
<label for="male">性别：</label>
<input type="radio" name="gender" id="male">男
<input type="radio" name="gender" id="female">女
</p>
<p>
<label for="reading">爱好：</label>
<input type="checkbox" name="like[]" id="reading">看书
<input type="checkbox" name="like[]" id="game">游戏
<input type="checkbox" name="like[]" id="sport">运动
</p>
<p>
<label for="course">课程：</label>
<select name="course" id="course">
<optgroup label="前端">
<option value="">HTML</option>
<option value="">CSS</option>
<option value="" selected>php</option>
</optgroup>
<optgroup label="后端">
<option value="">PHP</option>
<option value="">MYSQL</option>
<option value="">LARAVEL</option>
</optgroup>
</select>
</p>
<p>
<label for="avatar">头像：</label>
<input type="file" name="avatar" id="avatar">
</p>
<p>
<button>提交</button>
</p>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
<style>
body{
display: flex;
justify-content: center;
}
ul{
float: left;
margin-right: 15px;
list-style: none
}
ul>li{
}
ul>li>a{
display: inline-block;
padding: 5px 15px;
background: #0E9A00;
margin-bottom: 10px;border-radius: 10px 0 10px 0;
list-style: none;
color: #FFFFFF;
text-decoration: none;
}
ul>li>a:hover{
background: #8be9fd;
}
</style>
</head>
<body>
<ul>
<li><a href="1.html" target="content">导航列表</a></li>
<li><a href="2.html" target="content">商品列表</a></li>
<li><a href="3.html" target="content">用户注册</a></li>
</ul>
<iframe srcdoc="<h2>欢迎使用管理后台</h2>" frameborder="1" name="content" width="530" height="400"></iframe>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结: 为什么推荐使用语义化的标签?
答：利于SEO，让搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的排名权重； 更有利于团队开发，让开发者更加容易对代码理解，提升工作效率。