博客列表 >HTML5 常用标签 -PHP培训九期线上班

HTML5 常用标签 -PHP培训九期线上班

介子原创转载: 2019年10月30日 14:27:04587浏览

描述HTML与HTTP是什么,他们之间有什么联系?
html 超文本标记语言前端基础语言http 超文本传输协议网络协议联系 http 可以传输 html

制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素

一般用无序列表ul做导航用图片做连接元素只要把<img> 放到链接之间就可以

作业2.jpg

实例

<!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>导航</title>
 </head>
 <body>
     <div>
 	<ul>
 	    <li><a href="http://www.baidu.com"><img src="./1.png" alt="http://www.baidu.com"target='_blank'></a></li>
 	    <li><a href="http://www.baidu.com"><img src="./1.png" alt="http://www.baidu.com" target='_blank'></a></li>
 	    <li><a href="http://www.baidu.com"><img src="./1.png" alt="http://www.baidu.com" target='_blank'></a></li>
 	</ul>
    </div>
 </body>
 </html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并

表格<table> 表头<thead>表主体<tbody>表尾<tfoot> 行列合并用 colspan 和rowspan属性

作业33.PNG

实例

<!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>作业三</title>
 </head>
 <body>
 	<table border="1" cellspacing="0" align="center">
 		<capion><h3>商品篮</h3></caption>
 		<thead>
 			<tr bgcolor="lightgreen">
 				<th>编号</th>
 				<th>名称</th>
 				<th>数量</th>
 				<th>单价</th>
 				<th>金额</th>
 			</tr>
 		</thead>
 		<tbody>
 			<tr>
 				<td>1</td>
 				<td>华为(2019)MateBookX Pro</td>
 				<td>8699</td>
 				<td>1</td>
 				<td>8699</td>
 			</tr>
 			<tr>
 				<td>2</td>
 				<td>苹果(2019)MacBook Pro</td>
 				<td>18199</td>
 				<td>2</td>
 				<td>36398</td>
 			</tr>
 			<tr>
 				<td>3</td>
 				<td>ThinkPad(2019)X1 extreme</td>
 				<td>13500</td>
 				<td>1</td>
 				<td>13500</td>
 			</tr>
 		</tbody>
 		<tfoot>
 			<tr>
 				<td colspan="3" align="center">总计:</td>
 				
 				<td>4</td>
 				<td>58597</td>
 			</tr>
 		</tfoot>
 	</table>
 </body>
 </html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件

用户注册表单空间包括 text password email number select radio checkbox file button submit 等

作业4.jpg

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	<h3>用户注册</h3>
	<form action="" method="POST">
		<div>
			<label for="username"><strong>账号:</strong></label>
		    <input type="text" name="username" id='username' value= "jz">
	    </div>
		<div>
		    <label for="password"><strong>密码:</strong></label>
		    <input type="password" name="password" id="password" placeholder="不能少于六位">
	    </div>
	    <div>
		    <label for="email"><strong>邮箱:</strong></label>
		    <input type="email" id='email' name="email" placeholder="example@Emai.com">
		</div>
		<div>
			<label for="age"><strong>年龄:</strong></label>
			<input type="number" id='age' name="age" min="16" max="18">
		</div>
		<div>
			<label for="coures"><strong>课程:</strong></label>
			<select name="coures" id="coures">
				<optgroup label="前端">
				    <option value="0">html</option>
				    <option value="1">css</option>
				    <option value="2">js</option>
				</optgroup>
				<optgroup label="后端">
					<option value="3" selected>php</option>
					<option value="4">mysql</option>
					<option value="5">laravel</option>
				</optgroup>
			</select>
		</div>
		<div>
			<label for=""><strong>性别:</strong></label>
			<input type="radio" name="sex" id='male' value="male"><label for="male"><strong>男生</strong></label>
			<input type="radio" name="sex" id='female' value="female"><label for="female"><strong>女生</strong></label>
			<input type="radio" name="sex" id='security' value="security" checked><label for="security">保密:</label>
		</div>
		<div>
			<label for=""><strong>爱好</strong></label>
			<input type="checkbox" name="hobby[]" id='game' value="game"><label for="game"><strong>打游戏</strong></label>
			<input type="checkbox" name="hobby[]" id='video' value="video"><label for="video"><strong>看片</strong></label>
		</div>
		<div>
			<label for="file"><strong>头像上传:</strong></label>
			<input type="file" name='file' value="photo">
		</div>
		<div>
			<button>提交</button>
			<input type="reset" value="重置">
		</div>
	</form>
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实

制作一个网站后面, 要求使用<iframe>内联框架实现

无序列表导航target填入内敛框架iframe name 属性值即可

作业55.PNG

实例

<!DOCTYPE html> 
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
		<li><a href="http://www.baidu.com" target="content">商品列表</a></li>
		<li><a href="http://www.jd.com" target="content">添加用户</a></li>
		<li><a href="http://www.baidu.com" target="content">系统设置</a></li>
	</ul>

	<iframe srcdoc="<h2 style='color:red'>欢迎使用管理后台</h2>" frameborder="1" width="600" height="600" name='content'></iframe>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结: 为什么推荐使用语义化的标签?

主要是语义化标签便于搜索引擎爬取，收录，利于seo优化

上一条：第二课、HTML基础标签作业-php中文网第九期下一条：HTML的常用标签属性 - PHP培训第九期线上班

声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。

全部评论

文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多