前端--HTML，常用标签学习

最新推荐文章于 2024-06-02 15:15:42 发布

望山。

最新推荐文章于 2024-06-02 15:15:42 发布

阅读量217

点赞数 1

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_53244569/article/details/119321918

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一.HTML

1. 概述

专门用来制作网页的技术，是超文本标记语言
超文本：比文本的功能更强大，网页中可以插入图片，音频，视频等
标记：也叫做标签用<???> ,不同的标签有不同的功能
结构
文档声明，用来声明HTML文档所遵循的HTML规范。
头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
体部分，用来存放网页要显示的数据。
声明网页标题
用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。

2.入门案例

<!doctype html>
<html>
	<head></head>
	<body>
		he&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;llo html~ 
		hello html~
		hello html~ <br>
		hello html~
		hello html~
		hello html~
	</body>
</html>

3.使用HBuilder

新建项目-选中项目-新建-XX.html文件

二.常用标签

1.概述

使用不同的标签,实现在网页中插入不同类型的元素

HTML属性
HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。
如：<a href="" target="" name="" id=""></a>
注意：不能交叉嵌套！

如何在网页中做空格和换行
换行：\&lt;br/\&gt;
空格：在HTML中，多个空格会被当成一个空格来显示。

2. 常用标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>	
		<!-- 1.标题标签:在网页中插入标题 h1~h6 -->
			<h1>风雨有我在 人民请放心</h1>
			<h2>国家有力量 人民有希望</h2>
			<h3>国家有力量 人民有希望</h3>
			<h4>国家有力量 人民有希望</h4>
			<h5>国家有力量 人民有希望</h5>
			<h6>国家有力量 人民有希望</h6>
			<!--列表标签：ul（unorderlist）+li    ol（orderlist）+li-->
			<!--2.ul（unorderlist）+li 无序列表-->
			<ul>
				<li>北京严控中高风险地区</li>
				<li>北京严控中高风险地区</li>
				<li>北京严控中高风险地区</li>
				<li>北京严控中高风险地区</li>
				<li>北京严控中高风险地区</li>
				<li>北京严控中高风险地区</li>				
			</ul>
			<!--3.ol（orderlist）+li有序列表 -->
			<ol>
				<li>北京严控中高风险地区</li>
				<li>北京严控中高风险地区</li>
				<li>北京严控中高风险地区</li>
				<li>北京严控中高风险地区</li>
				<li>北京严控中高风险地区</li>
				<li>北京严控中高风险地区</li>				
			</ol>
			<!--4.图片标签img:通过src属性指定图片的位置
			 width：修饰图片的宽度
			 height：修饰图片的高度（单位是像素）
			 -->
			<img src ="a.jpg" width="192px" height="108px">		
			<img src ="a.jpg" width="192px" height="108px">			
			<!--5.超链接指定标签a
			href：指定跳转到哪个网站
			target：是以什么方式打开，(默认是_self当前窗口打开),_blank是新窗口打开-->
			<a href="https://www.baidu.com/" target="_blank">百度一下</a>
			<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=31%E7%9C%81%E5%8C%BA%E5%B8%82%E6%96%B0%E5%A2%9E%E6%9C%AC%E5%9C%9F%E7%A1%AE%E8%AF%8A55%E4%BE%8B&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">31省区市新增本土确诊55例</a>
			
			<a name="top">顶部</a>
			<h2>广东富婆通讯录</h2>
			<h2>广东富婆通讯录</h2>
			<h2>广东富婆通讯录</h2>
			<h2>广东富婆通讯录</h2>
			<h2>广东富婆通讯录</h2>
			<h2>广东富婆通讯录</h2>		
			<h2>广东富婆通讯录</h2>
			<h2>广东富婆通讯录</h2>
			<h2>广东富婆通讯录</h2>
			<h2>广东富婆通讯录</h2>
			
			<!--锚定:回到一个固定位置-->
			<a href="#top">点我，回顶部</a><br><!--获取top的位置，像书签-->
			<!-- 6.输入框-->
			账户：<input type="text" /><br>
			密码：<input type="password" /><br />
			
			单选框：<input type="radio" />男
			多选框：<input type="checkbox" />杨幂<br />
						<input type="checkbox" />冯绍峰<br />
						<input type="checkbox" />范彬彬<br />
						
			邮箱：<input type="email" />
			
			数字值：<input type="number" /><br />
			日历：<input type="date" /><br />
				
			周：<input type="week" /><br />
				<input type="datetime" /><br />	
			按钮：<input type="button" value="点我"/><br />
			提交按钮：<input type="submit" /><br />			
			<input type="text"  placeholder="手机号"/>
			
	</body>
</html>

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

在这里插入图片描述

3.表格标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 表格标签</title>
	</head>
	<body>
		<!--1.table向网页中插入表格
		tr：表示表格里的行元素
		td：表示行里的列元素/
		th：跟td一样，只不过加粗，居中
		width/height ：宽度/高度 
		border：边框 
		bgcolor：背景颜色
		colspan：跨列（合并列）column
		rowspan：跨行(合并行)row0
		cellspacing：单元格间距
		align:设置对齐方式（位置）
		-->
		<table border="3px" bgcolor="pink" align="center" width="300px" height="40px" cellspacing="0px">
			<tr>
				<td colspan="2">11</td>
				
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				
			</tr>
			
			
		</table>
		<table border="3px" width="300px" height="50px" cellsapcing="0px" align="center">
			<tr>
				<th align="center" colspan="4">流量调查表</th>
			</tr>
				
			<tr>
				<th>总页面流量</th>
				<th>共计来访</th>
				<th>会员</th>
				<th>游客</th>				
			</tr>
			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
				<td>101</td>				
			</tr>
			<tr>
				<td>012</td>
				<td>322</td>
				<td>456</td>
				<td>123</td>				
			</tr>
			<tr>
				<td>456</td>
				<td>789</td>
				<td>123</td>
				<td>456</td>				
			</tr>
			<tr>
				<td>平均每人浏览量</td>
				<td colspan="3">456</td>			
			</tr>						
		</table>			
	</body>
</html>

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

4.表单标签form

本质就是一个表格,表单比表格多了数据提交的功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 表单标签</title>
	</head>
	<body>
		<!--表单标签form
		本质就是一个表格 表单 比表格多了数据提交的功能-->
		<!--创建表单
		下拉框：select(下拉)+option（选项）
			select name="city">
				<option >北京</option>
				<option >上海</option>
			</select>
			文件上传：<input type="file" />
		文本信息;<textarea >描述信息~</textarea></td>
		
		-->
		<form >
			<!-- <h1 align="center">注册表单</h1> -->
			<table border="1px" cellspacing="0px" bgcolor="azure">
				<tr align="center" ><th colspan="2">注册表单</th></tr>
				<tr>
					<td align="center" >用户名</td>
					<td ><input type="txt"  name="user"/></td>
				
				</tr>
				<tr>
					<td align="center">密码</td>
					<td><input type="password" name="pwd"/></td>
				</tr>
				<tr>
					<td align="center">确认密码</td>
					<td><input type="password" name="repwd"/></td>
				</tr>
				<tr>
					<td align="center">昵称</td>
					<td><input type="text" name="nick"/></td>
				</tr>
				<tr>
					<td align="center">邮箱</td>
					<td><input type="email" name="mail"/></td>
				</tr>
				<tr>
					<td align="center">性别</td>
					<td>
						<!-- 想单选就必须设置name属性，而且值必须相同 -->
						<input type="radio" name="sex" value="1"/>男
						<input type="radio"  name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td align="center">爱好</td>
					<td>
						<input type="checkbox" name="hobby" value="lq"/>篮球
						<input type="checkbox"name="hobby" value="zq"/>足球
						<input type="checkbox"name="hobby"value="ppq"/>乒乓球
						</td>
				</tr>
				<tr>
					<td align="center">城市</td>
					<td>
						<!--加value提高效率-->
						<select name="city">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">南京</option>
							<option value="4">广州</option>
							<option value="5">深圳</option>
						</select>						
					</td>					
				</tr>
				<tr>
					<td align="center">头像</td>
					<td >
						<input type="file" name="pictures" value="file" />
					</td>					
				</tr>
				<tr>
					<td align="center">验证码</td>
					<td >
						<input type="text"  name="t" placeholder="请输入验证码:"/>
						<input type="image"  src="imgs/b.png" width="100px" height="50px"/>
						<input type="button" value="点我换一张" align="center"/>						
					</td>
				</tr>
				<tr >
					<td align="center" >自我描述</td>
					<td name="message"><textarea placeholder="描述信息~" ></textarea></td>
				</tr>
				<tr align="center">
					<td colspan="2">
						<input type="submit"value="提交" />
						<input type="submit" value="重置" />
					</td>					
				</tr>				
			</table>									
			
		</form>
	</body>
</html>

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

5,无法提交的问题

步骤:
1.把提交的按钮必须改成submit类型
2.给标签加name属性
3.当提交数据时,会把用户输入的信息jack提交给服务器
http://127.0.0.1:8848/cgb2106/test03.html?user=jack
http://127.0.0.1:8848/cgb2106/test03.html?user=12&abc=123&age=18
4.改造网页文件
作业
1.完善现在的form表单,能够提交数据
2.练习学生管理系统的表单
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试学生管理系统</title>
	</head>
	<body>
		<h1>学生信息管理系统MIS</h1>
		<form >
			<b>姓名：</b><br />
			<input type="text" placeholder="请输入姓名……" name="user" /><br />
			<b>年龄：</b><br />
			<input type="text"  placeholder="请输入年龄……" name="age"/><br />
			<b>性别：</b>
			<input type="radio" name="sex" value="1" />男
			<input type="radio" name="sex" value="0"/>女<br />
			<b>爱好：</b>
			<input type="checkbox" name="hobby1"/>乒乓球
			<input type="checkbox" name="hobby2" />爬山
			<input type="checkbox" name="hobby3" />唱歌<br />
			<b>学历：</b>
			<select name="education">
				<option value="1">本科</option>
				<option value="2">大专</option>
				<option value="3">硕士</option>
				<option value="4">博士</option>
			</select><br />
			<b>入学日期：</b>
			<input type="date" name="datetime"  /><br />
			<input type="submit"value="保存" style="background: skyblue;"/>
			<input type="submit" value="取消"style="background: hotpink;"/>
		</form>
	</body>
</html>

6.练习表单标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习表单标签</title>
	</head>
	<body>
		<!--其他标签-->
		<div>大家好</div>
		<div>大家好</div>
		<div>大家好</div>
		<p>NICE</p>
		<p>NICE</p>
		<p>NICE</p>
		<span>hello</span>
		<span>hello</span>
		<span>hello</span>
		
		<!--form可以提交数据，而且数据默认采用get方式，就在此地址栏中展示的
		http://127.0.0.1:8848/cgb2106/HTML/test04.html?user=tarena&age=45&sex=0&hobby=1&edu=2&datetime=2021-07-29#
		不好：长度受限，不安全
		可以改成post提交数据，而且可以指定，交给哪段程序处理数据action
		面试题：get和post提交数据的区别
		get方式：是默认的提交方式，但是不安全（都展示在地址栏），长度受限
		post方式：安全，数据不在地址栏展示，看不见，提高安全性
		
		-->
		<form method="post" action="#">
			<table>
				<tr>
					<td>
						<h1>学生信息管理系统MIS</h1>
					</td>
					
				</tr>
				<tr>
					<td>姓名：</td>
				</tr>
				<tr>
					<td>
						<input type="text" name="user" placeholder="请输入姓名……" />
					</td>
				</tr>
				<tr>
					<td>年龄：</td>
				</tr>
				<tr>
					<td>
						<input type="text" name="age" placeholder="请输入年龄……" />
					</td>
				</tr>
				<tr>
					<td>
						性别：(单选框)
								 <input type="radio" name="sex"value="1" />男
								 <input type="radio" name="sex"value="0" />女
					</td>
				</tr>
				<tr>
					<td>
						爱好：（多选）
								 <input type="checkbox" name="hobby"  value="1" />乒乓球
								 <input type="checkbox" name="hobby"  value="2" />爬山
								 <input type="checkbox" name="hobby"  value="3" />唱歌
						
					</td>
				</tr>
				<tr>
					<td>
						学历：(下拉框)
						<select name="edu">
							<option value="1">本科</option>
							<option value="2">专科</option>
							<option value="3">硕士</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						入学日期：<br>
						<input type="date" name="datetime"  />
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="保存" style="background-color: blue;"/>
						<input type="button" value="取消" style="background-color: pink;"/>
					</td>
				</tr>
			</table>
			
		</form>

		<!--使用h5的播放音频 视频-->
		<form  >
			<audio controls="controls">
				<source src="res/a.mp3"></source>
			</audio><br>
			
			<video controls="controls"loop="loop">
				<source src="res/c.mkv"></source>
			</video>
			
		</form>
		
		
	</body>
</html>

注：前端–CSS选择器，盒子模型学习

望山。

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端--HTML，常用标签学习

一.HTML1. 概述专门用来制作网页的技术，是超文本标记语言超文本：比文本的功能更强大，网页中可以插入图片，音频，视频等标记：也叫做标签用<???> ,不同的标签有不同的功能2.入门案例<!doctype html><html> <head></head> <body> he&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;llo html~
复制链接

扫一扫