一、超链接高级用法

打开本地页面(本地跳转)
href的值为本地的html文件地址
本页面跳转（当前页面内容定位）
href的值为目标标签对应的id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<a href="03文本相关标签.html">文本相关标签</a>
		<a href="04图片和超链接.html" target="_blank">图片和超链接</a>
		
		
	
		<br>
		<!-- 自动定位到id属性值为h2的标签 -->
		<a href="#h2">标题2</a>			
		<br>
		<a href="#h3">标题3</a>
		<br>
		<a href="#img1">一人之下</a>
		
		<h1 id="h1">我是标题1</h1>
		<p>图片1</p>
		<img src="./img/bizi.png" alt="">
		<h2 id="h2">我是标题2</h2>
		<br>
		<img src="img/hua.png" alt="">
		<h2 id="h3">我是标题3</h2>
		
		<img id="img1" src="https://img1.baidu.com/it/u=2757022492,1966091646&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="">
		
		<a href="#h1">标题1</a>
	</body>
</html>

在这里插入图片描述

二、列表标签

1.无序列表: ul标签、li标签
ul标签 - 代表整个列表(容器)
li标签 - 列表中的元素

2.有序列表：ol标签、li标签
ol标签 - 代表整个列表(容器)
li标签 - 列表中的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1>千锋成都校区学科设置：</h1>
		<ul>
			<li>Python数据分析</li>
			<li>Java服务器开发</li>
			<li>前端开发</li>
			<li>UI\UE设计</li>
			<li>物联网</li>   
		</ul>
		
		
	
		<h1>香椒牛肉的做法：</h1>
		<ol>
			<li>将牛肉煮成7分熟(放料酒、盐、姜、花椒)</li>
			<li>切片</li>
			<li>油炸</li>
			<li>放调料</li>
		</ol>
		
		
		<h1>千锋成都校区学科设置：</h1>
		<ul>
			<li>
				<p>Python数据分析</p>
				<img width="200" src="https://img1.baidu.com/it/u=1679507727,998603233&fm=253&fmt=auto&app=120&f=GIF?w=935&h=699" alt="">
				<p>数据分析是指用适当的统计分析方法对收集来的大量数据进行分析，将它们加以汇总和理解并消化，以求最大化地开发数据的功能，发挥数据的作用。数据分析是为了提取有用信息和形成结论而对数据加以详细研究和概括总结的过程。数据分析的数学基础在20世纪早期就已...</p>
			</li>
			
			<li>
				<p>Java服务器开发</p>
				<img width="200" src="https://img0.baidu.com/it/u=1631308703,1294262332&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=278" alt="">
				<p>后端开发的工作太单一了/后端不是一个综合的领域; 这些误解有时候会劝退一些有意从事后端开发的同学,我们现在就来澄清一下这些误解: 1. 我不否认很多简单的Web应用确实就是C...</p>
			</li>
			
			<li>
				<p>前端开发</p>
				<img width="200" src="https://img0.baidu.com/it/u=3798992166,541786885&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=336" alt="">
				<p>web前端就是前端网络编程，也被认为是用户端编程，是为了网页或者网页应用，而编写HTML，CSS以及JS代码，所以用户能够看到并且和这些页面进行交流。前端网络编程的挑战在于用于实现...</p>
			</li>
				 
		</ul>
		
		
	</body>
</html>

在这里插入图片描述

三、input标签

input标签：input标签的功能和type属性值有关。

不同的type对应的功能：
1）text(默认) - 普通文本输入框
value - 表示输入框内容
placeholder - 输入框占位符(输入提示信息)
maxlength - 最大输入长度

password - 密码输入框
value - 表示输入框内容
placeholder - 输入框占位符(输入提示信息)
maxlength - 最大输入长度

3)radio - 单选按钮
name - 对内容进行分类。（多个单选按钮的name属性值一致的时候才可能做到多个选项中只能选一个）
checked - 将checked属性值设置为"checked"，让对应的按钮处于选中状态(只要添加checked属性)

4）checkbox - 复选按钮
name - 多个相同事物对应选项需要设置成相同的name属性
checked - 将checked属性值设置为"checked"，让对应的按钮处于选中状态(只要添加checked属性)

label标签
label标签和通过for属性来和id属性值为指定值的input标签进行绑定，
绑定成功，点击label标签后，点击效果会直接作用于与它关键的input标签上

6)button - 普通按钮(只能实现文字按钮的功能)
value - 按钮上的文字内容

7）button标签
8) reset - 重置
重置按钮可以将指定范围内的所有的标签(表单相关标签)的状态还原到初始状态
指定范围内 - 和重置按钮在同一个form标签中所有的标签
9) 其他type值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<form action="">
		<label for="user">用户名:</label>
		<input type="text" value="小明" placeholder="请输入用户名" maxlength="5" id="user">
		<br><br>
		

		<span>密&emsp;码:</span>
		<input type="password" placeholder="密码" value="123456", maxlength="8">
		<br><br>
		

		<span>性别：</span>
		<input type="radio" name="gender" id="g1"><label for="g1">男</label>
		<input type="radio" name="gender" checked="checked" id="g2"><label for="g2">女</label>
		<br><br>
		<span>是否已婚:</span>
		<input type="radio" name="married" id="m1"><label for="m1">已婚</label>
		<input type="radio" name="married" id="m2"><label for="m2">未婚</label>
		<input type="radio" name="married" checked="checked" id="m3"><label for="m3">保密</label>
		<br><br>
		

		<span>兴趣爱好：</span>
		<input type="checkbox" name="interest" checked id="i1"><label for="i1">跑步</label>
		<input type="checkbox" name="interest" checked id="i2"><label for="i2">篮球</label>
		<input type="checkbox" name="interest" id="i3"><label for="i3">看电影</label>
		<input type="checkbox" name="interest" id="i4"><label for="i4">游泳</label>
		<br><br>

		 <input type="button" value="确定">
		 <input type="button" value="取消">
		 <br><br>
		 

		<button>确定</button>
		
		<button style="background-color: rgba(0, 0, 0, 0);border: none;" >
			<img src="./img/相机.png" alt="">
		</button>
		
		<button>
			<img src="./img/相机.png" alt="">
			<p style="padding: 0; margin: 0;">相机</p>
		</button>
		<br><br>
		

		<input type="reset">
		
		</form>
		
		<br><br>
		
		<form action="">
			<input type="text">
			<input type="checkbox">
			<input type="reset" value="还原">
		</form>
		<br><br>
		
	
		<input type="color">
		<input type="date">
		<input type="file">
		
	</body>
</html>

四、多文本域和下拉菜单

textarea - 多行文本域（多行输入框）
1）标签内容 - 输入框内容
2）placeholder属性 - 输入提示信息
3)maxlength - 最多输入的字符个数
4)rows - 可见的行数
5)cols - 每一行的列数(不精确，但是它的值可以影响输入框默认长度)
下拉菜单(下拉列表): select标签、option标签
select标签 - 代表整个下拉列表(容器)
option标签 - 列表中的选项
下拉菜单中选项分组: optgroup

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<textarea placeholder="请输入你的建议..." maxlength="200" rows="3" cols="40">你好！</textarea>
		<br><br>
		

		<select>
			<option value="四川省">四川省</option>
			<option value="广东省">广东省</option>
			<option value="广西省">广西省</option>
			<option value="辽宁省">辽宁省</option>
		</select>
		

		<br><br>
		<select id="c1">
			<optgroup label="四川省">
				<option value="成都">成都市</option>
				<option value="绵阳">绵阳市</option>
				<option value="德阳">德阳市</option>
				<option value="乐山">乐山市</option>
				<option value="达州">达州市</option>
			</optgroup>
			<optgroup label="辽宁省">
				<option value="沈阳市">沈阳市</option>
				<option value="铁岭市">铁岭市</option>
				<option value="大连市">大连市</option>
				<option value="盘锦市">盘锦市</option>
			</optgroup>
		</select>
		
	</body>
</html>

在这里插入图片描述

五、表格标签

1. 表格相关标签：table、tr、td
1)table标签 - 表示表格整体
2)tr标签 - 表示一行
3)td标签 - 单元格

2.table标签相关属性
1)border属性 - 表格外边框宽度
2)cellspacing属性 - 设置单元格和单元格之间的间隙
3)width属性 - 设置整个表格的宽度
4)height属性 - 设置整个表格的高度
5)bgcolor属性 - 设置整个表格的背景颜色(颜色值直接给颜色对应的英文单词)
6)align属性 - 设置整个表格在其父标签中对齐方式（left、right、center）

3.tr标签相关属性
1)height属性 - 设置指定行的高度
2)bgcolor属性 - 设置指定行中所有单元格的背景颜色
3)align属性 - 设置指定行中所有单元格内容的对齐方式

4.td标签相关属性
1)width属性 - 设置指定单元格所在的列的宽度
2)bgcolor属性 - 设置指定单元格的背景颜色
3)align属性 - 设置指定单元格内容的对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<table border="1" cellspacing="0" width="800" height="200" bgcolor="LightSkyBlue" align="center">
			<!-- 第1行 -->
			<tr height="40" bgcolor="LightPink" align="center">
				<td>姓名</td>
				<td>年龄</td>
				<td>电话</td>
			</tr>
			
			<!-- 第2行 -->
			<tr height="50">
				<td width="150">张三</td>
				<td>18</td>
				<td bgcolor="GreenYellow">110</td>
			</tr>
			
			<!-- 第3行 -->
			<tr>
				<td align="right">小明</td>
				<td>19</td>
				<td>119</td>
			</tr>
		</table>
		
		
		
	</body>
</html>

在这里插入图片描述

六、单元格合并

单元格合并:单元格合并操作主要是设置td的rowspan和colspan两个属性值
rowspan - 行合并
colspan - 列合并
下面以这一个表格的建立表现单元格合并. 在这里插入图片描述
在那之前要先认识表格的定位，即认识哪一格是第一行，第二行等，其实主要看他上面那条横线是第几条横线
以上图为例，分析结果为下图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		 
		 <table border="1" cellspacing="0" width="800" height="400">
			 <tr>
				 <td></td>
				 <td></td>
				 <td></td>
				 <td colspan="2"></td>
			 </tr>
			 
			 <tr>
				 <td></td>
				 <td></td>
				 <td></td>
				 <td colspan="2"></td>
			 </tr>
			 
			 <tr>
				 <td></td>
				 <td colspan="2"></td>
				 <td rowspan="2"></td>
				 <td rowspan="2"></td>
			 </tr>
			 
			 <tr>
				 <td></td>
				 <td colspan="2"></td>
			 </tr>
			 
			 <tr>
				 <td rowspan="2"></td>
				 <td colspan="2"></td>
				 <td colspan="2"></td>
			 </tr>
			 
			 <tr>
				 <td colspan="2"></td>
				 <td colspan="2"></td>
			 </tr>
			 
			 
			 
		 </table>
	</body>
</html>

运行结果如下：
在这里插入图片描述

本文含有隐藏内容，请开通VIP 后查看

HBuilderX前端html功能拓展应用

一、超链接高级用法

二、列表标签

三、input标签

四、多文本域和下拉菜单

五、表格标签

六、单元格合并

网站公告

今日签到

热门文章

最新发布