HTML标签的使用2（续上）

最新推荐文章于 2024-05-21 21:36:17 发布

阿瑶带我飞

最新推荐文章于 2024-05-21 21:36:17 发布

阅读量187

点赞数

分类专栏： JavaEE初阶 HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/C_TQH/article/details/130446133

版权

JavaEE初阶同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

3.5 无语义标签（div & span）

一、表格标签（对上篇文章的补充）

在做表格的时候，有些时候会碰到相邻的几行或者是几列，他们的数值是一样的，这样我们就可以将他们通过一些操作合并起来

合并单元格

跨行合并:rowspan="n"

跨列合并: colspan="n"

思路：

先确定到底是合并行(rowspan)还是合并列(colspan)
找对单元格，如果是行合并，那么去找最上面的行信息；如果是列合并，那么先去找最左侧的列信息
删除后面合并的行或者是列

二、列表标签

主要用于布局的，整齐好看

无序列表 ul（unorderedlist）li（list）
有序列表 ol（orderedlist）li（list）
自定义列表 dl dt dd

三、表单标签（组合标签）

表单是让用户来输入信息的

表单域（重点是form标签）
若干个表单控件（重点是input标签）

3.1 form标签

描述了要把数据按照什么方式，提交到哪个页面中

3.2 input标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

文本框 <input type="text">
密码框 <input type="password">
单选框 <input type="radio">

注意：具有相同的 name 才能多选一

🍔name和id有什么区别？

数量:name可以重复，而id不能重复
作用:id给JS用的，name给后端用的

复选框 <input type="checkbox">

普通按钮(需要搭配JS来使用) <input type="button" value="我是一个按钮">

提交按钮 <input type="submit" value="提交">

清空按钮 <input type="reset" value="清空">

清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置

选择文件 <input type="file">

点击选择文件, 会弹出对话框, 选择文件.

3.3 select标签（下拉框）

3.4 textarea标签

3.5 无语义标签（div & span）

通过下面两个案例就能了解了

四、HTML特殊字符

有些特殊的字符在 html 文件中是不能直接表示的, 例如:

空格： 
小于号：<
大于号：>
按位与：&

五、综合案例

5.1 展示简历信息

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>个人简历</title>
	</head>
	<body>
	<h1>瑶瑶</h1>
	<!-- 基本信息 -->
	<h2>基本信息</h2>
	<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F6ebc99f1-64eb-4e62-9573-805c3dde29a5%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685411492&t=f147bf3a516cbe4ae102a32f05900a36" 
    alt="头像" title="瑶瑶" height="100px"/>
	<p>
		<span>求职信息：</span>
		<span>Java开发工程师</span>
	</p>
	<p>
		<span>职系电话：</span>
		<span>136-6666-6666</span>
	</p>
	<p>
		<span>邮箱：</span>
		<span>123456@qq.com</span>
	</p>
	<p>
		<a href="https://gitee.com/tong-qihan">我的gitee</a>
	</p>
	<p>
		<a href="https://blog.csdn.net/C_TQH?spm=1000.2115.3001.5343">我的博客</a>
	</p>
	
	<!-- 教育背景 -->
	<h2>教育背景</h2>
	<ol>
		<li>2005-2007 清华幼儿园</li>
		<li>2007-2012 清华附小</li>
		<li>2012-2017 清华附中</li>
        <li>2017-2019 清华大学本科</li>
        <li>2019-2021 清华大学硕士</li>
        <li>2021-2023 清华大学博士</li>
	</ol>
	
	<!-- 专业技能 -->
	<h2>专业技能</h2>
	<ul>
		<li>Java 基础语法扎实，已经刷了800道LeetCode题；</li>
		<li>常见数据结构都可以独立实现并熟练应用；</li>
		<li>熟知计算机网络理论，并且可以独立排查常见问题；</li>
		<li>掌握Web开发能力，并且独立开发了学校的留言墙功能。</li>
	</ul>
	
	<!-- 我的项目 -->
	<h2>我的项目</h2>
	<ol>
		<li>
			<h3>留言墙</h3>
			<p>开发时间：2017年3月 到 2017年9月</p>
			<p>功能介绍：</p>
			<ul>
				<li>支持留言发布</li>
				<li>支技匿名留言</li>
			</ul>
		</li>
		<li>
			<h3>学习小助手</h3>
			<p>开发时间：2019年5月 到 2019年9月</p>
			<p>功能介绍：</p>
			<ul>
				<li>支持错检索</li>
				<li>支持同学探讨</li>
			</ul>
		</li>
	</ol>
	
	<!-- 个人评价 -->
	<h2>个人评价</h2>
	<p>自我感觉非常优秀，不在乎别人的看法，我就是自己的王 ☆*: .｡. o(≧▽≦)o .｡.:*☆</p>
	</body>
</html>

效果展示：

5.2 填写简历信息（表单的使用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在线填写简历</title>
	</head>
	<body>
		<table width="500px" cellspacing="0">
			<thead>
				<h2>请填写简历信息</h2>
			</thead>
			<!-- 姓名 -->
			<tr>
				<td>
					<label for="name">姓名：</label>
				</td>
				<td>
					<input type="text" id="name">
				</td>
			</tr>
			<!-- 性别 -->
			<tr>
				<td><label for="">性别：</label></td>
				<td>
					<input type="radio" name="gender" id="male">
					<label for="male"><img src="image/male.png" alt="" width="20px">男</label>
					<input type="radio" name="gender" id="female" />
					<label for="female"><img src="image/female.png" alt="" width="20px">女</label>
				</td>
			</tr>
			<!-- 出生日期 -->
			<tr>
				<td>
					<label for="">出生日期:</label>
				</td>
				<td>
					<select name="" id="">
						<option value="0">--请选择年份--</option>
						<option value="1990">1990</option>
						<option value="1991">1991</option>
						<option value="1992">1992</option>
						<option value="1993">1993</option>
						<option value="1994">1994</option>
						<option value="1995">1995</option>
						<option value="1996">1996</option>
						<option value="1997">1997</option>
						<option value="1998">1998</option>
						<option value="1999">1999</option>
						<option value="2000">2000</option>
						<option value="2001">2001</option>
						<option value="2002">2002</option>
						<option value="2003">2003</option>
						<option value="2004">2004</option>
						<option value="2005">2005</option>
					</select>
					<select name="" id="">
						<option value="0">--请选择月份--</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
					</select>
					<select name="" id="">
						<option value="0">--请选择日期--</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
						<option value="13">13</option>
						<option value="14">14</option>
						<option value="15">15</option>
						<option value="16">16</option>
						<option value="17">17</option>
						<option value="18">18</option>
						<option value="19">19</option>
						<option value="20">20</option>
						<option value="21">21</option>
						<option value="22">22</option>
						<option value="23">23</option>
						<option value="24">24</option>
						<option value="25">25</option>
						<option value="26">26</option>
						<option value="27">27</option>
						<option value="28">28</option>
						<option value="29">29</option>
						<option value="30">30</option>
						<option value="31">31</option>
					</select>
				</td>
			</tr>
			<!-- 出生日期 -->
			<tr>
				<td><label for="school">就读学校：</label></td>
				<td>
					<select name="" id="">
                        <option value="0">--请选择你的毕业院校--</option>
                        <option value="清华大学">清华大学</option>
                        <option value="北京大学">北京大学</option>
                        <option value="国防科技大学">国防科技大学</option>
                        <option value="中国人民大学">中国人民大学</option>
                        <option value="上海交通大学">上海交通大学</option>
                        <option value="复旦大学">复旦大学</option>
                        <option value="浙江大学">浙江大学</option>
                        <option value="中国科学技术大学">中国科学技术大学</option>
                        <option value="南京大学">南京大学</option>
                    </select>
				</td>
			</tr>
			<!-- 应聘岗位 -->
			<tr>
				<td>
					<label for="position">应聘岗位:</label>
				</td>
				<td>
					<input type="checkbox" id="front">
					<label for="front">前端开发</label>
					<input type="checkbox" id="backend">
					<label for="backend">后端开发</label>
					<input type="checkbox" id="qa">
					<label for="qa">测试开发</label>
					<input type="checkbox" name="" id="op">
					<label for="op">运维开发</label>
				</td>
			</tr>
			<!-- 掌握技能 -->
			<tr>
				<td>
					<label>掌握技能：</label>
				</td>
				<td>
					<textarea cols="50" rows="10"></textarea>
				</td>
			</tr>
			<!-- 项目经历 -->
			<tr>
				<td>
					<label>项目经历：</label>
				</td>
				<td>
					<textarea cols="50" rows="10"></textarea>
				</td>
			</tr>
			<!-- 条款 -->
			<tr>
				<td></td>
				<td>
					<input type="checkbox" id="policy">
					<label for="policy">我已仔细阅读过公司的招聘要求</label>
				</td>
			</tr>
			<!-- 查看我的状态 -->
			<tr>
				<td></td>
				<td>
					<a href="#">查看我的状态</a>
				</td>
			</tr>
			<!-- 其他 -->
			<tr>
				<td></td>
				<td>
					<h3>请招聘者确认</h3>
					<ul>
						<li>以上信息真实有效</li>
						<li>能够尽早去公司实习</li>
						<li>能够接受公司的加班文化</li>
					</ul>
				</td>
			</tr>
		</table>
	</body>
</html>

效果展示：

阿瑶带我飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签的使用2（续上）

在做表格的时候，有些时候会碰到相邻的几行或者是几列，他们的数值是一样的，这样我们就可以将他们通过一些操作合并起来。清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置。清空按钮 <input type="reset" value="清空">各种输入控件, 单行文本框, 按钮, 单选框, 复选框.复选框 <input type="checkbox">选择文件 <input type="file">点击选择文件, 会弹出对话框, 选择文件.注意：具有相同的 name 才能多选一。
复制链接

扫一扫