Blogger Information
Blog 8
fans 1
comment 0
visits 6466
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML常用标签极速入门 7月2日课程作业
大兔子的博客
Original
621 people have browsed it

HTML常用标签极速入门 7月2日课程作业


实例

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<!-- 网页编码 -->
		<meta charset="UTF-8">
		<!-- 网页标题 -->
		<title>大兔子作业</title>
	</head>
	<body>
		<!-- 标题 -->
		<h1>大兔子的作业</h1>
		<!-- 段落 -->
		<p>HTML常用标签极速入门 7月2日课程作业</p>
		<!-- a标签 -->
		<a href="http://blog.datuzi.top" target="_blank" title="大兔子博客">大兔子博客</a>
		<!-- img标签 -->
		<img src="https://img.php.cn/upload/course/000/001/120/59edb17869f79684.png" alt="php中文网">
		<!-- 分隔线 -->
		<hr>
		<!-- 无序列表 -->
		<ul>
			<li>html</li>
			<li>css</li>
			<li>javascript</li>
			<li>php</li>
		</ul>
		<!-- 有序列表 -->
		<ol>
			<li>php</li>
			<li>javascript</li>
			<li>css</li>
			<li>html</li>
		</ol>
		<!-- 定义列表 -->
		<dl>
			<dt>标题</dt>
			<dd>这里是内容</dd>
		</dl>
		<!-- 换行 -->
		<br>
		<!-- 表格 -->
		<table border="1" cellspacing="0" cellpadding="10" width="500" align="center">
			<caption>大兔子购物车</caption>
			<thead style="background-color: aquamarine;">
				<tr>
					<th>编号</th>
					<th>商品</th>
					<th>单价</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>汽车皮套</td>
					<td>800</td>
				</tr>
				<tr>
					<td>2</td>
					<td>汽车后视镜</td>
					<td>3000</td>
				</tr>
				<tr>
					<td>3</td>
					<td>汽车仪表盘</td>
					<td>5000</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2">总计:</td>
					<td rowspan="2">8800</td>
				</tr>
				<tr>
					<td colspan="2">货币:¥</td>
				</tr>
			</tfoot>
		</table>
		<!-- 换行 -->
		<br>
		<!-- 表单 -->
		<div>
			<form action="" method="get">
				<!-- 文本 -->
				<p>
					<label for="ursename">用户名:</label>
					<input type="text" name="ursename" id="ursename" placeholder="由2-8个英文或数字组成" autofocus="autofocus" />
				</p>
				<!-- 密码 -->
				<p>
					<label for="password">密码:</label>
					<input type="password" name="password" id="password" placeholder="由8-16个英文或数字组成" required="required" />
				</p>
				<!-- 邮箱 -->
				<p>
					<label for="email">邮箱:</label>
					<input type="email" name="email" id="email" placeholder="请输入您的邮箱" />
				</p>
				<!-- 数值 -->
				<p>
					<label for="age">年龄:</label>
					<input type="number" id="age" name="age" min="16" max="70">
				</p>
				<!-- 日期选择 -->
				<p>
					<label for="birthday">生日:</label>
					<input type="date" id="birthday" name="birthday">
				</p>
				<!-- 下拉列表 -->
				<p>
					<label for="course">课程:</label>
					<select name="course" id="course" size="1">
						<!-- 分组 -->
						<optgroup label="前端开发:">
							<option value="0">请选择</option>
							<option value="1">HTML5</option>
							<option value="2">CSS3</option>
							<!-- selected: 设置默认选项 -->
							<option value="3" selected>JavaScript</option>
						</optgroup>

						<optgroup label="后端开发:">
							<option value="4">PHP</option>
							<option value="5">MySQL</option>
							<option value="6">ThinkPHP</option>
						</optgroup>
					</select>
				</p>
				<!-- 多选按钮 -->
				<p>
					<label for="programme">爱吃的食物: </label>
					<input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">火锅</label>
					<input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">炸鸡</label>
					<input type="checkbox" name="hobby[]" value="programme" id="movies" checked><label for="movies">汉堡</label>
				</p>
				<!-- 单选按钮 -->
				<p>
					<label for="male">性别: </label>
					<input type="radio" name="gender" value="male" id="male"><label for="male">男生</label>
					<input type="radio" name="gender" value="female" id="female"><label for="female">女生</label>
					<input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label>
				</p>
				<!-- 文本域 -->
				<p>
					<label for="comment">简介:</label>
					<textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="内容不超过30字"></textarea>
				</p>
				<!-- 按钮 -->
				<p>
					<button type="submit">提交</button>
				</p>
			</form>
		</div>
	</body>
</html>

运行实例 »

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


Correction status:qualified

Teacher's comments:完成的不错,继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post