HTML学习之href属性、表格、表单实践操作 0404
href属性
- 超链接文本跳转
- 文件下载
- 拨打电话
- 邮件发送
- 锚点跳转
演示文件的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>这是href属性的一些用法展示</title>
</head>
<body>
<h3>展示一些href中超链接的用法</h3>
<h4>第一:跳转网页</h4>
<a href="http://www.16ak.cn/" target="_blank"> 艾克资源博客</a>
<h4>第二:下载文件</h4>
<a
href="https://down.115z.com/azdtbqdrj_20200402152602.apk"
download="ruanjian.apk"
>点我下载
</a>
<h4>第三:邮件的发送</h4>
<a href="mailto:981077525@qq.com">
点我联系博主发送邮件
</a>
<h4>第四:电话的拨打</h4>
<a href="tel:1325****702">点击这里打电话给我</a>
<h4>第五:锚点跳转展示</h4>
<a href="#maodian1">点我跳转至第一锚点</a>
<a href="#maodian2">点我跳转至第二锚点</a>
<a href="#maodian3">点我跳转至第三锚点</a>
<a href="#maodian4">点我跳转至第四锚点</a>
<div id="maodian1" style="margin-top: 1000px;">我是第一锚点</div>
<div id="maodian2" style="margin-top: 1000px;">我是第二锚点</div>
<div id="maodian3" style="margin-top: 1000px;">我是第三锚点</div>
<div id="maodian4" style="margin-top: 1000px;">我是第四锚点</div>
</body>
</html>
代码演示地址:演示地址
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>这是我的表格元素代码文件</title>
</head>
<body>
<table
border="1"
cellpadding="5"
cellspacing="0"
width="500"
height="300"
align="center"
>
<!-- 对列统一设置,colgroup中设置的属性对所有列均有效 -->
<colgroup bgcolor="lightpink">
<!-- 如果不想自定义某一列属性,只写元素不写属性 -->
<col />
<!-- 第二列个性化定制: 背景为浅绿色 -->
<col bgcolor="lightgreen" />
<!-- 第三列背景为黄色,并跨越2列都有效 -->
<col bgcolor="yellow" span="2" />
<!-- 第四列,使用第3列的样式 -->
<col />
<!-- 最后一列无特殊样式,采用父级样式 -->
<col />
</colgroup>
<!-- 表格标题 -->
<caption style="font-size: 1.5rem; margin-bottom: 10px;">
员工信息表
</caption>
<!-- 表格页眉 -->
<thead bgcolor="lightblue">
<th>部门</th>
<th>ID</th>
<th>姓名</th>
<th>职务</th>
<th>手机</th>
</thead>
<!-- 表格主体1 -->
<tbody>
<tr>
<td rowspan="3" align="center">开发部</td>
<td>101</td>
<td>小王</td>
<td>主管</td>
<td>188345****</td>
</tr>
<tr>
<!-- <td>开发部</td> -->
<td>102</td>
<td>小张</td>
<td>程序员</td>
<td>158123****</td>
</tr>
<tr>
<!-- <td>开发部</td> -->
<td>103</td>
<td>小李</td>
<td>实习生</td>
<td>13399*****</td>
</tr>
</tbody>
<!-- 表格主体2 -->
<tbody>
<tr>
<td rowspan="3" align="center">销售部</td>
<td>104</td>
<td>小马</td>
<td>主管</td>
<td>135345****</td>
</tr>
<tr>
<!-- <td>开发部</td> -->
<td>105</td>
<td>小刘</td>
<td>客服</td>
<td>157123****</td>
</tr>
<tr>
<!-- <td>开发部</td> -->
<td>106</td>
<td>小朱</td>
<td>实习生</td>
<td>138349*****</td>
</tr>
</tbody>
<!-- 表格页脚 -->
<tfoot>
<tr bgcolor="wheat">
<td align="center">备注:</td>
<td colspan="4">所有员工离职必须提交30天提交书面申请</td>
</tr>
</tfoot>
</table>
<h2 align="center" style="color:blue ;font-size:2rem">这是我自己制作的演示表格</h2>
<table
align="center"
width="500"
height="300"
border="1"
cellpadding="5"
cellspacing="0"
bgcolor="red"
>
<colgroup >
<col bgcolor="blank" />
<col bgcolor="lightgreen" />
<col bgcolor="yellow" span="1" />
<col bgcolor="lightgreen" span="2"/>
<col />
</colgroup>
<caption style="font-size: 1.5rem;">
小学生上课日程表
</caption>
<tr bgcolor="lightpink">
<td></td>
<td align="center">
周一
</td>
<td align="center">
周二
</td>
<td align="center">
周三
</td><td align="center">
周四
</td><td align="center">
周五
</td>
</tr>
<tr>
<td align="center">第一节</td>
<td>
语文
</td>
<td>
英语
</td>
<td>
数学
</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td align="center">
第二节
</td>
<td>
语文
</td>
<td>
英语
</td>
<td>
数学
</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td align="center">
第三节
</td>
<td>
语文
</td>
<td>
英语
</td>
<td>
数学
</td>
<td>语文</td>
<td rowspan="2">语文</td>
</tr>
<tr>
<td align="center">
第四节
</td>
<td rowspan="2">
语文
</td>
<td>
英语
</td>
<td>
数学
</td>
<td>语文</td>
</tr>
<tr>
<td align="center" >
第五节
</td>
<td>
英语
</td>
<td>
数学
</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr><td align="center">
第六节
</td>
<td rowspan="2">
作文
</td>
<td>
英语
</td>
<td>
数学
</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr><td align="center">
第七节
</td>
<td>
英语
</td>
<td>
数学
</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr><td align="center">
备注:
</td>
<td colspan="5">
这是我的课程表的备注信息
</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>表单之input</title>
<style>
form {
padding: 20px;
width: 350px;
box-shadow: 0 0 8px #888;
border-radius: 10px;
box-sizing: border-box;
margin: auto;
background-color: lightskyblue;
display: grid;
gap: 15px;
}
form > section {
display: grid;
grid-template-columns: 60px 1fr;
}
h3 {
text-align: center;
}
input[type="image"] {
justify-self: center;
}
</style>
</head>
<body>
<h3>用户注册</h3>
<form
action="handle.php"
method="post"
enctype="application/x-www-form-urlencoded"
id="register"
>
<!-- 单行文本输入框 -->
<section>
<label for="username">用户名:</label>
<!-- 必选且自动获取焦点 -->
<input
type="text"
name="username"
id="username"
maxlength="20"
placeholder="不少于6位"
required
autofocus
/>
</section>
<!-- 密码输入框 -->
<section>
<label for="password">密码:</label>
<input
type="password"
name="password"
id="password"
size="10"
placeholder="不少于8位"
required
/>
</section>
<!-- 单选框 -->
<section>
<label for="secret">性别:</label>
<div>
<!-- 只允许返回一个值,多个input的name属性值必须相同 -->
<input type="radio" name="gender" id="male" value="male" /><label
for="male"
>男</label
>
<input type="radio" name="gender" id="female" value="female" /><label
for="male"
>女</label
>
<!-- checked: 默认选项 -->
<input
type="radio"
name="gender"
id="secret"
value="female"
checked
/><label for="secret">保密</label>
</div>
</section>
<!-- 复选框 -->
<section>
<label for="programme">兴趣:</label>
<div>
<!-- 允许返回多个值,属性名采用数组格式,便于后端处理 -->
<input type="checkbox" name="hobby[]" id="game" checked /><label
for="game"
>游戏</label
>
<input type="checkbox" name="hobby[]" id="travel" checked /><label
for="travel"
>旅游</label
>
<input
type="checkbox"
name="hobby[]"
value="shoot"
id="shoot"
/><label for="shoot">摄影</label>
<input
type="checkbox"
name="hobby[]"
value="programme"
id="programme"
checked
/><label for="programme">编程</label>
</div>
</section>
<!-- 文件域 -->
<section>
<label for="userpic">头像:</label>
<!-- 设置<form enctype="multipart/form-data">,且为POST提交 才有效-->
<input type="file" name="user_pic" id="userpic" />
<!-- 隐藏域: 限制上传文件大小不超过8M -->
<input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
</section>
<!-- 预定义复合框 -->
<section>
<label for="course">课程:</label>
<input type="text" name="course" list="course" />
<datalist id="course">
<!-- 此<option>使用单标签,与<select>中不同 -->
<option value="HTML/CSS开发与实战"> </option>
<option value="JavaScript基础与实战"> </option>
<option value="PHP开发基础"> </option>
<option value="Laravel基础与实战"> </option>
</datalist>
</section>
<!-- 表单控件元素不一定必须写到<form>标签内 -->
<!-- 表单控件使用form属性,将它与所属表单绑定 -->
<section>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email" form="register" />
</section>
<section>
<label for="age">年龄:</label>
<input
type="number"
name="age"
id="age"
form="register"
min="18"
max="60"
step="1"
value="22"
/>
</section>
<!-- 图像域: 提交按钮为图像 -->
<!-- 返回点击图片的x/坐标,推荐加上name属性,返回有语义坐标 -->
<!-- 测试提交,启动一个本地Web服务器: php -S localhost:8888 -->
<input
type="image"
src="https://ae01.alicdn.com/kf/H109350428f9c441e94c63b44eec253b1N.png"
alt="submit"
name="submit"
width="100"
/>
</form>
<hr />
<h2 align="center" style="font-size: 2rem; color: blue;">
接下来是我的代码片段
</h2>
<h3 style="font-size: 1.17rem;">用户信息修改</h3>
<form
action="handle.php"
method="post"
enctype="application/x-www-form-urlencoded"
id="register"
>
<!-- 单行文本输入框 -->
<section>
<label for="username">原账号:</label>
<!-- 必选且自动获取焦点 -->
<input
type="text"
name="username"
id="username"
maxlength="20"
placeholder="不少于6位"
required
autofocus
/>
</section>
<!-- 密码输入框 -->
<section>
<label for="password">原密码:</label>
<input
type="password"
name="password"
id="password"
size="10"
placeholder="不少于8位"
required
/>
</section>
<section>
<label for="password">新密码:</label>
<input
type="password"
name="password"
id="password"
size="10"
placeholder="不少于8位"
required
/>
</section>
<!-- 单选框 -->
<section>
<label for="secret">性别:</label>
<div>
<!-- 只允许返回一个值,多个input的name属性值必须相同 -->
<input type="radio" name="gender" id="male" value="male" /><label
for="male"
>男</label
>
<input type="radio" name="gender" id="female" value="female" /><label
for="male"
>女</label
>
<!-- checked: 默认选项 -->
<input
type="radio"
name="gender"
id="secret"
value="female"
checked
/><label for="secret">保密</label>
</div>
</section>
<!-- 复选框 -->
<section>
<label for="programme">兴趣:</label>
<div>
<!-- 允许返回多个值,属性名采用数组格式,便于后端处理 -->
<input type="checkbox" name="hobby[]" id="game" checked /><label
for="game"
>游戏</label
>
<input type="checkbox" name="hobby[]" id="travel" checked /><label
for="travel"
>旅游</label
>
<input
type="checkbox"
name="hobby[]"
value="shoot"
id="shoot"
/><label for="shoot">摄影</label>
<input
type="checkbox"
name="hobby[]"
value="programme"
id="programme"
checked
/><label for="programme">编程</label>
</div>
</section>
<!-- 文件域 -->
<section>
<label for="userpic">头像:</label>
<!-- 设置<form enctype="multipart/form-data">,且为POST提交 才有效-->
<input type="file" name="user_pic" id="userpic" />
<!-- 隐藏域: 限制上传文件大小不超过8M -->
<input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
</section>
<!-- 预定义复合框 -->
<section>
<label for="course">课程:</label>
<input type="text" name="course" list="course" />
<datalist id="course">
<!-- 此<option>使用单标签,与<select>中不同 -->
<option value="HTML/CSS开发与实战"> </option>
<option value="JavaScript基础与实战"> </option>
<option value="PHP开发基础"> </option>
<option value="Laravel基础与实战"> </option>
</datalist>
</section>
<!-- 表单控件元素不一定必须写到<form>标签内 -->
<!-- 表单控件使用form属性,将它与所属表单绑定 -->
<section>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email" form="register" />
</section>
<section>
<label for="age">年龄:</label>
<input
type="number"
name="age"
id="age"
form="register"
min="18"
max="60"
step="1"
value="22"
/>
</section>
<!-- 图像域: 提交按钮为图像 -->
<!-- 返回点击图片的x/坐标,推荐加上name属性,返回有语义坐标 -->
<!-- 测试提交,启动一个本地Web服务器: php -S localhost:8888 -->
<input
type="image"
src="https://ae01.alicdn.com/kf/H109350428f9c441e94c63b44eec253b1N.png"
alt="submit"
name="submit"
width="100"
/>
</form>
</body>
</html>
演示地址:跳转链接