博客列表 >常用的HTML5标签(第二章1029作业)-PHP培训九期线上班

常用的HTML5标签(第二章1029作业)-PHP培训九期线上班

yany
yany原创
2019年11月28日 17:21:19679浏览

1、描述HTML与HTTP是什么,他们之间有什么联系?
HTML是超文本标记语言,用于编写HTML文件,常见于超文本链接的后缀;HTTP是超文本传输协议,一般在超文本链接的打头部分,用于客户端向服务器端发送请求,服务器再按照协议处理请求,将处理的结果回传至客户端。可以理解为翻译器,客户端输入机器处理某项工作可以识别的语言,服务器按照规定的协议处理接收到的内容并回复客户端需要的内容。
2、制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>导航</title>
</head>

<body>
<ul>
<li><a href="https://www.php.cn/">首页</a></li>
<li><a href="https://www.php.cn/course/list/29.html">PHP视频课</a></li>
<li><a href="https://www.php.cn/course/1071.html"><img src="https://img.php.cn/upload/course/000/000/001/5d9f0b79ad447136.jpg" alt="第九期录播课"></a></li>
</ul>

</body>
</html>
解释:
html根元素标签
lang=’en’网站页面的内容为英文

<head>
源信息
</head>
charset=”UTF-8”编码语言的类型
title为网页的标题内容
body内的为网页展示的内容
3、制作一张商品信息表,要求用到标题,头部与底部,行与列方向的合并

`<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

  1. <title>商品信息表</title>

</head>

<body>
<table border='1' cellspacing='0' cellpadding='5' width='500'>
<caption><h3>采购明细表</h3></caption>
<thead>
<tr bgcolor='#add8c6'>
<th>编号</th>
<th>商品名称</th>
<th>采购数量</th>
<th>单价(单位:元)</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='2' align='center'>1</td>
<td align='center'>铅笔</td>
<td align='right'>100</td>
<td align='right'>3</td>
<td align='right'>300</td>
</tr>
<tr>
<td align='center'>文具盒</td>
<td align='right'>300</td>
<td align='right'>8</td>
<td align='right'>2400</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3' align='center'>合计:</td>
<td align='right'>400</td>
<td align='right'>2700</td>
</tr>
</tfoot>
</table>

</body>
</html>`
4、制作一张完整的用户注册表单,要求尽可能多的用到学到的表单控件
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>学生信息表</title>
</head>

<body>
<h3>学生信息表</h3>
<form action='login.php' method='post'>
<p>
<label for='username'>姓名:</label>
<input type='text' id='username' name='username' value='' </p>
<p>
<label for='email'>邮箱:</label>
<input type='email' id='email' name='email' placeholder='example@email.com'>
</p>
<p>
<label for='age'>年龄:</label>
<input type='number' id='age' name='age' min='26' max='80'>
</p>
<p>
<label for=''>科目班级分类:</label>
<select name='coures' id=''>
<optgroup label=“文科”>
<option value='' selected>地理</option>
<option value='' selected>政治</option>
<option value='' selected>历史</option>
</optgroup>
<optgroup label=“理科”>
<option value='' selected>化学</option>
<option value='' selected>物理</option>
<option value='' selected>生物</option>
</optgroup>
</select>
</p>
<p>
<label for=''>性别:</label>
<input type='radio' name='gender' id='male'>
<label for='male'>男</label>
<input type='radio' name='gender' id='female' checked>
<label for='female'>女</label>
</p>
<p>
<label for='game'>爱好</label>
<input type='checkbox' name='hobby' value='reading' id='reading'><label for='reading'>看书</label>
<input type='checkbox' name='hobby' value='swimming' id='swimming'><label for='swimming'>游泳</label>
</p>
<p>
<label for='photo'>头像上传:</label>
<input type='file' name='photo' id='photo'>
</p>
<p>
<button>提交</button>
</p>
</form>

</body>
</html>
5、制作一个网站后台,要求使用<iframe>内联框架
`<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>网站后台</title>
</head>

<body>
<ul style="float:left;margin-right:15pxi;">
<li><a href='demo2.html' target='content'>采购明细表</a></li>
<li><a href='demo3.html' target='content'>学生信息表</a></li>
</ul>
<iframe srcdoc='<h2>欢迎使用管理后台</h2>' framborder='1' name='content' width='530' height='400'></iframe>
</body>
</html>`

6,总结:为什么推荐使用语义化的标签?
语义标签有利于页面优化,搜索引擎看到标签就知道页面的内容,网页容易被收录,符合W3C的标准。语义标签是块级容器,独占一行,垂直排列,方便编辑和查看内容。!
7、手抄作业,拍照图片
1029-1
1029-2
1029-3
1029-4

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议