HTML标签的理解与实现 8.30

HTML标签

HTML由<>包裹的特殊字符，分单标签和双标签，HTML文档由标签将内容由不同的形式表示出来

每个标签可以视为一个元素，标签的属性定义标签的表达形式

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML标签</title>
</head>
<body>
    <h1>一些双标签</h1>
    <p>p标签，段落标签</p>
    <div>div，块标签</div>
    <h6>h1,2,3,4,5,6,六级标题标签</h6>
    <a href="http://php.cn">a,超链接标签</a>
    <h1>一些单标签</h1>
    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1605018186,2918784672&fm=26&gp=0.jpg" alt="蓝泽润">
    hr标签<hr>
    br标签<br>
</body>
</html>

运行实例 »

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

HTML列表

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML列表<title>
</head>
<body>
无序列表
<ul>
	<li>观看视频</li>
	<li>消化理解</li>
	<li>编程实战</li>
</ul>
有序列表
<ol>
	<li>观看视频</li>
	<li>消化理解</li>
	<li>编程实战</li>
</ol>
详情列表
<dl>
	<dt>观看视频</dt>
	<dd>下班之后观看视频</dd>
	<dt>消化理解</dt>
	<dd>将课堂知识消化理解</dd>
	<dt>编程实战</dt>
	<dd>使用代码实现学的内容</dd>
</dl>
</body>
</html>

运行实例 »

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

列表与表格

列表更适合展示单项数据，表格适合展示多项数据之间的联系，一个事物的多个属性

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML表格</title>
</head>
<body>
<table>
<!-- 表头 -->
<thead>
<tr>
<th>商品类别</th>
<th>商品名称</th>
<th>商品单价</th>
<th>***数量</th>
<th>共计金额</th>
</tr>
</thead>
<!-- 表格正文 -->
<tr>
<td rowspan="3">电子产品</td>
<td>联想笔记本</td>
<td>5000</td>
<td>20</td>
<td>100000</td>
</tr>
<tr>
<td>联想笔记本</td>
<td>5000</td>
<td>20</td>
<td>100000</td>
</tr>
<tr>
<td>联想笔记本</td>
<td>5000</td>
<td>20</td>
<td>100000</td>
</tr>
<tr>
<td colspan="4">共计</td>
<td>300000</td>
</tr>
</table>
</body>
</html>

运行实例 »

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

注册表单的实现

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML注册表单</title>
</head>
<body>
<form>
	<p>
		<label for="name">用户名：</label>
		<input type="text" name="name" placeholder="用户名不能超过8个字符">
	</p>
	<p>
		<label for="password">密码：</label>
		<input type="password" name="password" placeholder="密码不能小于6个字符">
	</p>
	<p>
		<label for="email">邮箱：</label>
		<input type="email" name="email" placeholder="example@admin.com">
	</p>
	<p>
		<label for="age">年龄：</label>
		<input type="number" name="age" min="16" max="60">
	</p>
	<p>
		<label for="course">课程：</label>
		<select name="course">
			<option selected>请选择...</option>
			<optgroup label="前端">
				<option value="html">HTML</option>
				<option value="css">CSS</option>
				<option value="javascript">JavaScript</option>
			</optgroup>
			<optgroup label="后端">
				<option value="php">PHP</option>
				<option value="mysql">MySQL</option>
				<option value="redis">Redis</option>
			</optgroup>
		</select>
	</p>
	<p>
		<label>兴趣：</label>
		<input type="checkbox" name="ins[]" value="game"><label>game</label>
		<input type="checkbox" name="ins[]" value="code"><label>code</label>
		<input type="checkbox" name="ins[]" value="girl"><label>girl</label>
	</p>
	<p>
		<label>性别：</label>
		<input type="radio" name="gender" value="male"><label>男生</label>
		<input type="radio" name="gender" value="female"><label>女生</label>
		<input type="radio" name="gender" value="secret"><label>秘密</label>
	</p>
	<p>
		<input type="submit" name="submit" value="提交">
		<input type="reset" name="reset" value="重填">
		<button>提交</button>
	</p>
</form>
</body>
</html>

运行实例 »

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

总结

常用的HTML标签，了解基本的功能

input标签有多种表现形式，不同的类型有不同的属性

button标签相当于<input type="submit">

ps:周末有事把作业耽搁了，趁着午休把作业搞出来

实例

实例

实例

实例

相关文章