web前端(1)：了解html和常见标签(表单+表格+文本+列表)

已于 2022-03-03 16:37:59 修改
阅读量2.7k 收藏 46
点赞数 9
分类专栏： # -- [WEB前端基础教程] 文章标签： web前端 html 表单、表格
于 2019-08-13 13:53:26 首次发布
侵权必究
本文链接：https://blog.csdn.net/qq_40558166/article/details/99424867
版权

在这里插入图片描述

文章目录

一、html的基本结构

1.前端的主要构成

名字介绍
html搭建网站的结果
css规定网站的样式
JavaScript规定网站的行为
jQuery另一种JavaScript，代码少，做的多
Bootstrap，easyUI等等前端框架，别人搭建好的样式，我们直接调用

2.基本结构

<!-- 声明html -->
<!DOCTYPE html>
<html>
<head>
	<!-- 我是头部 -->
	<meta charset="utf-8">
	<title>我是标题</title>
</head>
<body>
	<!-- 我是注释 -->
</body>
</html>

二、列表标签

1.无序列表

标签/属性含义
ul声明一个无序列表（ul标签里的子元素必须是li）
li列表项
type默认li标签样式是【disc圆形】，可以修改为【square 方块】，【circle 空心圆】
<body>
	<ul type="square">
		<li>无序列表项1</li>
		<li type="circle">无序列表项2</li>
		<li>无序列表项3</li>
	</ul>
</body>

在这里插入图片描述
2.有序列表

标签/属性含义
ol声明一个有序列表（ul标签里的子元素必须是li）
li列表项
type默认1为数字开头，a为小写字母排序，A为大写字母排序，i为小写罗马数字， I为大写罗马数字
start以列表开头符号的第几个开始,只能写数字
<body>
	<ol type="I" start="3">
		<li>有序列表项1</li>
		<li>有序列表项2</li>
		<li>有序列表项3</li>
	</ol>
</body>

在这里插入图片描述
3.自定义列表

标签/属性含义
dl声明一个自定义列表
dt列表的标题，无缩进
dd是对当前dd的描述，有缩进
<body>
	 <dl>
	 	<dt>我是第一个标题</dt>
	 	<dd>我是第一的说明</dd>
	 	<dd>我也是第一的说明</dd>
	 	<dt>我是第二个标题</dt>
	 	<dd>我是第二的说明</dd>
	 	<dd>我也是第二的说明</dd>
	 </dl>
</body>

在这里插入图片描述

三、图片标签img

1. img标签 ：（单标签）在网页当中插入一张图片

属性介绍
src图片地址
title鼠标移入时候显示的提示信息
alt替代信息，当资源加载失败显示的信息

2. 关于图片src属性路径使用的3种方式

  • 网络图片路径
  • 本地图片 绝对路径：在本地存盘上完整位置
  • 本地相对路径：目标文件相对于当前文件的位置

./代表当前目录
…/返回上一级目录
/代表根目录

<body>
	<!-- 网络图片的地址 -->
	<img src="http://dingyue.nosdn.127.net/ZOyGgR8kH7tFRJLNjo6qmpf8Qd69HzkTX02nWq1L43CiC1553128854967.jpeg">
	
	<!-- 本地图片绝对路径 -->
	<img src="C:\Users\Administrator\Desktop\图片\1gif.gif" title='本地图片：我是蔡徐坤' alt='当资源加载失败时候，会显示我'>

	<!-- 本地图片相对路径 -->
	<img src="./img/徐坤篮球图.jpg">
</body>

在这里插入图片描述

四、常用文本标签

1.标题标签:h1到h6

标签意义
h1一级标题
h2二级标题
<body>
		<!--h1-h6六级标题，依次减小字体，加粗，自动换-->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>	
</body>

在这里插入图片描述
2.转义标签

标签意义
&nbsp;换行
&lt;小于号<
$gt;大于号>

3.其他标签

标签意义
i标签字体倾斜
em标签倾斜，表示强调 给搜索引擎使用
u标签下划线
hr标签水平线，单标签
b标签字体加粗
strong标签加粗 表示强调 关键字
<body>	 	 
	<hr>
	<p><h2><strong>蔡徐坤（KUN）</strong>，NBA篮球大使。</h2></p>
	<p><em><li>2012年4月，蔡徐坤因参加综艺节目《向上吧！少年》进入全国200强 ；同年8月，参演个人首部偶像剧《童话二分之一》。<li>2014年3月，参演个人首部电影《完美假妻168》。2018年1月，参加偶像男团竞演养成类真人秀《偶像练习生》，并于同年4月6日获得最高票数，以NINE PERCENT九人男团C位出道并担任队长 ；<li>同年8月，发行个人首张EP《1》;随后获得出道后首个个人音乐类奖项亚洲新歌榜2018年度盛典“最受欢迎潜力男歌手”;<li>同年12月，获第十二届音乐盛典咪咕汇年度“最佳彩铃销量歌手”、年度十大金曲《Wait Wait Wait》、搜狐时尚盛典“年度人气男明星”以及今日头条年度盛典“年度偶像人物”。2019年2月，首登北京台春晚便包揽词曲，为其创作歌曲《那年春天》。<li>2月18日，发布单曲《没有意外》。3月22日，发布海外公演主题曲《Bigger》。<li>4月19日，发布单曲《Hard To Get》。</em></p>
</body>

在这里插入图片描述

五、超链接标签:a标签

1.普通页面跳转

标签意义
href跳转的地址（不写值默认还是跳转本页面）
target_blank 新打开一个窗口加载跳转的网页
title鼠标移入的提示信息
<body>
	<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>

在这里插入图片描述

2.锚点跳转

跳转到当前页面的指定位置
给指定标签添加id属性，a标签的href属性的值为#指定元素id属性值

<body>
	<a href="#item1" id='top'>跳转到1楼</a>
	<a href="#item2">跳转到2楼</a>
	<a href="#item3">跳转到3楼</a>
	<a href="#item4">跳转到4楼</a>
	<a href="#item5">跳转到5楼</a>

	<p id='item1' style="height: 500px;background-color: pink">1楼</p>
	<p id='item2' style="height: 500px;background-color: red">2楼</p>
	<p id='item3' style="height: 500px;background-color: green">3楼</p>
	<p id='item4' style="height: 500px;background-color: blue">4楼</p>
	<p id='item5' style="height: 500px;background-color: yellow">5楼<a href="#top">回到顶部</a></p>
</body>

在这里插入图片描述

在这里插入图片描述

六、表格标签

1.基本标签

标签意义
table声明一个表格
th声明一个表头（通常表格第一行）
tr声明一个行
td声明一个列

2.table标签属性

属性意义
border边框
cellspacing设置表格和表格之间的默认间距
cellpadding设置表格中内容距离当前表格边框之间的间距
width宽
height高

3.对其方式

属性意义
align对齐方式 默认【靠左对齐left】 ,【靠右right】，【center：居中】
valign垂直方式 默认垂直居中，【top：默认靠上居中】，【bottom：靠下居中】

4.单元格合并

属性意义
跨行合并rowspan设置当前列 占几个行的高度，需要把挤出去的注释掉
跨列合并colspan设置当前列 占几个列的宽度

5.举例：个人简历

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>个人简历</title>
</head>
<body>
	<h1 align="center">个人简历</h1>
	<table align="center" border="1" cellspacing="0" cellpadding="10" >
		<tr>
			<td>姓名</td>
			<td style="width: 120px"></td>
			<td >性别</td>
			<td style="width: 120px"></td>
			<td>民族</td>
			<td style="width: 120px"></td>
		</tr>
		<tr>
			<td>政治面貌</td>
			<td></td>
			<td>户籍</td>
			<td colspan="3"></td>
		</tr>
		<tr>
			<td>出生年月</td>
			<td></td>
			<td>婚姻状况</td>
			<td></td>
			<td>工作时间</td>
			<td></td>
		</tr>
		<tr>
			<td>技术职称</td>
			<td></td>
			<td>文化程度</td>
			<td></td>
			<td>主修专业</td>
			<td></td>
		</tr>
		<tr>
			<td>毕业学校</td>
			<td colspan="3"></td>
			<td>毕业时间</td>
			<td></td>
		</tr>
		<tr>
			<td>英语水平</td>
			<td></td>
			<td>计算机水平</td>
			<td></td>
			<td>薪资要求</td>
			<td></td>
		</tr>
		<tr>
			<td rowspan="2">本人要求</td>
			<td>现从事工作</td>
			<td colspan="4"></td>
		</tr>
		<tr>
			<!-- <td></td> -->
			<td>欲从事工作</td>
			<td colspan="4"></td>
		</tr>
		<tr>
			<td rowspan="2" >联系方式</td>
			<td>联系电话</td>
			<td colspan="2"></td>
			<td>邮政编码</td>
			<td></td>
		</tr>
		<tr>
			<td>通信地址</td>
			<td colspan="4"></td>
		</tr>
		<tr style="height: 100px">
			<td>工作简历</td>
			<td colspan="5"></td>
		</tr>
		<tr style="height: 100px">
			<td>自我评价</td>
			<td colspan="5"></td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

七、表单标签

1.表单标签

标签属性及其意义
form声明一个表单域，属性【action:提交的地址，不写提交到当前页面】，【method:指定提交数据的方式，默认get，可以修改为post】
input通常为文本输入框
checkbox多选框,name值也必须相同。必须设置默认值【checked：默认选择属性,可以设置多个】
select下拉选框（必须添加name）。【option：选项（必须添加value）】【selected:默认选择一个地址，只可以选择一个】
textarea文本域/多行文本输入框 ，双标签
<button></button>提交按钮

2.表单标签的部分属性
表单的数据是要提交给后台的，提交数据的格式一般是键值对

属性意义
name必须存在，作为提交数据的key
value代表值（写了就是默认值）
hidden藏域,不会对用户显示，有些时候有些数据不想让用户看到和修改，但是后台需要使用
disabled可以使各个控件不能用

3.input标签的type属性类型

type标签值意义
text明文输入
password密文输入
file文件传输
button普通按钮
submit会将表单内容交给action或者后端
reset重置按钮
image图片按钮

4.举例：注册个人信息的表格

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
	</head>
	<body>
		<form method="post" action="练习2.html">
		<table border="1" cellspacing="0" cellpadding="20" align="center" width="600">
			<th colspan="2">注册</th>
			<tr>
				<td>姓名：</td>
				<td><input type="text" name="name" placeholder="请输入用户名"></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="pwd" placeholder="请输入密码"></td>
			</tr>
			<tr>
				<td>年龄：</td>
				<td><input type="text" name="age"></td>
			</tr>
			<tr>
				<td>性别：</td>
				<td>
					<input type="radio" name="gender" value="0">男
					<input type="radio" name="gender" value="1">女
					<input type="radio" name="gender" value="2" checked>保密
				</td>
			</tr>
			<tr>
				<td>爱好：</td>
				<td>
					<input type="checkbox" name="like" value="0">唱歌
					<input type="checkbox" name="like" value="1">跳舞
					<input type="checkbox" name="like" value="2">运动
					<input type="checkbox" name="like" value="3" checked>写代码
				</td>
			</tr>
			<tr>
				<td>地址：</td>
				<td>
					<select name="address">
						<option selected>--北京市-五方桥--</option>
						<option>--河北--</option>
						<option>--山西--</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>头像：</td>
				<td>
					<input type="file" name="photo" >
				</td>
			</tr>
			<tr>
				<td>个人简介：</td>
				<td>
					<textarea name="info"></textarea>
				</td>
			</tr>

			<tr>
				<td colspan="2" align="center">
					<input type="submit"  value="提交" style="width: 70px;height: 30px">
				</td>
			</tr>
		</table>
		</form>
	</body>
</html>

在这里插入图片描述

`

张烫麻辣亮。
关注
  • 9
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Html基础学习四：列表，超链接，表格，层，框架，表单
AllinShang的专栏
07-13 1588
1.      列表 定义列表dl(Definition List)无序列表ul(Unordered List)有序列表ol(Order List)目录列表dir菜单列表menu (1)    定义列表dl*************************************
1+Xweb资格考试.zip
12-28
"1+X Web资格考试"是一项针对Web前端开发技能的认证考试，旨在衡量和提升学员在HTML、CSS、JavaScript等关键技术领域的理论知识和实践能力。这个压缩包文件包含了丰富的学习资源，包括初中高级的试题以及实操代码，...
web_表单标签
zhu_fangyuan的博客
08-04 466
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form> <input type="text"/> <br /> <input type="password" id="pwd"/> <
HTML常用标签-表单标签
最新发布
weixin_44201223的博客
05-14 915
表单标签
html中表单及其其他标签
学子的博客
04-13 146
1、什么是表单 表单就是html页面中，用来收集用户信息的所有元素的集合，然后把这些信息发送给服务器。 2、一个表单例子 <div align="left"> <form > 用户名：<input type="text" value="请输入你的名称"/><br/> 密码:<input type="password" valu...
web基础之表单标签
xuehan_126的博客
06-03 594
表单标签主要用来搜集用户信息主要语法：&lt;form method="get|post" action="login"&gt;...&lt;/form&gt;表单控件主要有一下内容，其都放在form标签之间    1）文本框         &lt;input type="text" name="value"/&gt;  value 用来获取文本框的值     2）密码框    
web html表单标签(输入)
廷益_飞鸟的博客
10-22 375
实际参考代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <form action="#"> <div> <!-- for 与input关联 --> &.
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)课时授课计划.docx
12-18
学生需要掌握如何美化文本、图像、表格、表单、链接、列表和创建导航菜单。具体知识点包括字体样式、文本样式、图像样式、表格样式、表单样式、链接样式、列表样式和导航菜单的创建。通过这些，学生将能制作出具有...
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)学期授课计划.docx
12-15
这份学期授课计划是针对《HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)》课程的，旨在培养学生的Web前端开发技能。课程涵盖了从基础的HTML5语法到复杂的JavaScript交互，以及CSS美化和布局的各个方面，以下是...
头歌教学实践平台 Web前端开发基础 HTML基本标签
01-20
7. **列表标签**：`<ul>`和`<ol>`分别表示无序列表和有序列表，`<li>`则定义列表项。`<dl>`、`<dt>`和`<dd>`用于定义描述列表。 8. **区块元素与内联元素**：`<div>`是块级元素，常用于分组其他元素；`<span>`为...
Web前端开发基础：制作旅游文本网页.ppt
06-06
第二单元 HTML部分 前端开发基础精品课程》 《Web 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能够设置简单的文本网页 能力目标 熟练设置的属性 知识目标 HTML教程 参考资料 2 教学内容 1 单元目标 3 ...
【web前端】表单标签
m0_62608983的博客
01-17 833
表单就是为了收集用户信息 以下所有标签都要包含在<form></form>标签中 表单组成 表单域 表单控件（表单元素） 提示信息 表单域 包含表单元素的区域 <form>用于定于表单域，会把他范围内的表单元素信息提交给服务器 表单控件（表单元素） 1.input输入表单元素 <input>标签 用于收集用户信息 input输入 单选按钮和复选框必须有相同的name，name是表单元素的名
html---表单标签
weixin_46218101的博客
08-13 179
web前端入门之html（12） 表单标签 form标签 ⦁ < form>标签代表一个表单，表单用于向服务器传输数据。 ⦁ < form>标签能够包含< input>，可以是文本字段，复选框，单选框或提交按钮等。还可以包含< textarea> < select>等。 ⦁ < form>常用属性: ⦁ name:用于定义表单的名称 ⦁ action:用于规定提交表单时向何处发送表单数据。 ⦁ method:用于规定提交的方式。一般
【Web前端】HTML—6.表单标签
weixin_41806595的博客
06-09 332
表单标签 一、表单的功能 使用表单目的是为了收集用户信息。 二、表单的组成 在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）、提示信息3个部分构成。 1、表单域 表单域是一个包含表单元素的区域。 在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集与传递。 <form>会把它范围内的表单元素信息提交给服务器。 <!--表单域的语法--> <form action="url地址" method="提交方式" name="
零基础学习WEB前端开发(十一)：表单标签
陶小桃Blog
10-29 826
一、什么是表单？ 什么是表单？像下面这种就叫做表单，有点问卷的那种： 表单的目的就是为了收集信息。最常见与注册界面。 一个完整的表单有三部分，分别为表单域、表单控件和提示信息。 二、表单域 表单域就是包含表单的区域。 在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。 会把它范围内的表单元素信息提交给服务器。 2.1 表单域语法 <form action=“url地址” method=“提交方式” name = “表单域的名...
web前端基础知识:表单标签
m0_62181310的博客
04-01 2485
一.input系列标签 语法:<form action="http://www.com"></form> form 表单 用来收集用户信息的 input 输入 type 类型 type 属性值: text 文本 password 密码框 radio 单选框 checkbox 多选框 file
使用HTML制作网页
qq_44013482的博客
09-05 561
1.1什么是HTML HTML-->Hyper Text MarkupLanguage（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等。 1.2HTML的发展史 超文本标记语言（第一代） 1993年6月 HTML2.0 1995年11月 HTML3.2 1996年1月14日 HTML4.0 1997年12月18日 HTML4.01 1999年12月24日 HTML1.0 2000年1月26日 HTML...
html能够定义表单元素的是,HTML5 表单元素
weixin_34072296的博客
06-18 147
HTML5 表单元素(包含在标签内)一、input新类型1. email类型 - 验证是否包含 '@'2. url类型 - 验证是否包含 'http://'3. tel类型 - 在移动端显示 调出数字输入4. number类型5. range类型6. date类型7. color类型 - 点击弹出颜色选择8. search类型 - 可以清除文本内容9. date - 日期类型10. week - ...
web程序设计——基本标签（一）
IT_moshang的博客
09-05 885
标签—基本语法的单元 一般形式：                  &lt;tagname 属性1=”属性1”  属性2=”属性2” ……&gt; 内容…… &lt;/tagname&gt; 注释语句 &lt;!—注释语句，可以是多行--&gt; HTML5文档的基本结构 第一行必须是&lt;!DOCTYPE html&gt;  主要包括的标签有&lt;html&gt; &lt;hea...
web前端笔记.docx
11-18
基本语法包括标签的开启和闭合，常见的HTML标签如、、、 、、、字符实体、、文本格式化元素、列表元素、超链接元素、和等，它们共同构建了网页的骨架。 在HTML的进阶部分，笔记讨论了表格和框架的使用。表格由行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张烫麻辣亮。

谢谢老板支持！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值