HTML HTML基础各种标签及表单的使用方法

本文链接：https://blog.youkuaiyun.com/Gzzsk1/article/details/127249702

这篇博客详细介绍了HTML的基础知识，包括标题标签、文本属性、form表单的input标签及其类型、a标签、img标签、table表格、列表标签的使用，以及框架的介绍。内容覆盖了从简单的HTML页面架构到高级的交互元素，为初学者提供了全面的指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`<meta>` 元素可提供有关页面的元信息`（meta-information）`，比如针对搜索引擎和更新频度的描述和关键词。

设置网站关键字
`meta name="keywords" content="网络安全，WEB渗透，数据安全，渗透测试，安全培训"` />
`<link> `标签定义文档与外部资源的关系。
`<script>` 引入js文件
```html
注释
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>

2.2.标题标签

由大到小

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>6</h6>
</br> 换行标签
<hr>换行线标签

2.3.文本属性

<strong>加粗</strong>
<b></b>加粗
<i></i>斜体
<u></u> 下划线
<sup></sup>上标
<sub></sub>下标
<del></del> 删除线
<font></font> 规定字体属性
   size 字体的大小
   color 字体颜色
   

代码样式原样输出
<pre></pre>

2.4.form表单

指令	用处	属性
method	提交	方法有 get、post
enctype	发送表单数据之前如何对其进行编码	编码有 `application/x-www-form-urlencoded` `multipart/form-data` `text/plain`
form	表单	规定当提交表单时向何处发送表单数据

2.4.1.input标签

指令	用处
name	表示的该文本输入框名称
size	输入框的长度大小
maxlength	输入框中的默认值
value	输入框中的默认值
readonly	表示该框中只能显示，不能添加修改

2.4.2.input的类型

引用方式 type=代码

代码	类型
password	密码输入框
file	文件上传
hidden	隐藏域
button	按钮
checkbox	复选框
radio	单选框
submit	提交按钮
reset	重置按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form action="" method="post" enctype="">
			<label >用户名:</label><input type="text" name="username" size="30px" maxlength="3" value="123" readonly><br>
			<label for="email">邮箱</label><input type="text" name="email" id="email"><br>
			<label>密&nbsp;码:</label><input type="password"><br>
			<label>技&nbsp;能:</label>安全开发<input type="checkbox" >渗透测试<input type="checkbox" ><br>
			<label>性&nbsp;别:</label>男<input type="radio" value="1" name="qwe">女</label><input type="radio" value="2" name="qwe">
			<input type="hidden" value="3"><br>
			<input type="submit" value="提交">
			<input type="reset" value="重置">
			<input type="button" value="button">
		</form>
		<hr>
		<form method="post" enctype="multipart/form-data">
			<input type="file" name="file">
			/1242442
			<input type="submit">
		</form>
	</body>
</html>

2.5.a标签、img标签、table标签

a标签的作用：就是用于控制界面与页面之间的跳转
默认就是self

self：用于在当前选项卡中跳转，也就是不新建页面跳转

_blank ：用于在新的选项卡中跳转，也就是新建页面跳转

<a href="http://www.baidu.com" target="self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

代码	类型
_blank	在新窗口中打开被链接文档
_self	默认。在相同的框架中打开被链接文档
_parent	在父框架集中打开被链接文档
_top	在整个窗口中打开被链接文档

2.6.锚文本

<a href="#2">锚点</a>		点击#2页面移动到2
<a name="2">锚点</a>

2.7.img 标签

img 元素向网页中嵌入一幅图像

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

代码	类型
alt	规定图像的替代文本
src	规定显示图像的url
width	规定图片的高度
height	规定图片的宽度

2.8.table 表格

<caption>我的标题</caption>表格带标题

代码	类型
border	边框
width	宽度
height	高度
colspan	行
rowspan	竖
cellpadding	单元边与内容的空白
cellspacing	单元格的空白

<table border="1" cellpadding='10'>
	<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
	<tr><td>1</td><td>刘备</td><td rowspan='2'>30</td></tr>
	<tr><td>2</td><td>鲁班</td></tr>
	<tr><td>3</td><td>马超</td><td>15</td></tr>
	<tr><td>4</td><td>鲁班大师</td><td rowspan='2'>40</td></tr>
	<tr><td>5</td><td>典韦</td></tr>
	<tr><td>总数</td><td colspan="2">6</td></tr>
</table>

2.9.列表标签

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

2.9.1.无序列表

	项目符号 square circle disc
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

2.9.2.有序列表

    数字列表 默认 数字
	小写字母列表 
	大写字母列表 A
	罗马字母列表  I
	小写罗马字母列表 i
<ol type="1"> <!--有序列表-->
			<li>暗月实战项目九 不出网的情况下的内网多域控渗透</li>
			<li>xp/2003开关3389指令</li>
			<li>一条命令修改windows注册表</li>
</ol>

2.10.框架的使用

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。
每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。
您必须使用 cols 或 rows 属性。|

代码	类型
frameset	在一个页面中设置一个或多个框架不能嵌套在body标签里
iframe	是在html页面内嵌入框架框架内可以连接另一个页面
frameset	不能在body内使用
frame	一般都是在frameset中使用
cols	定义框架集中列的数目和尺寸
rows	定义框架集中行的数目和尺寸
scrolling	滚动条
auto	在需要的情况下出现滚动条（默认值）
yes	始终显示滚动条（即使不需要）
no	从不显示滚动条（即使需要）

<frameset rows="50%,50%" >
	<frame src="http://www.baidu.com" scrolling="no"/>
	<frame src="http://www.sogou.com" />
</frameset>

总结

本章节共学习了HTML的基础，下一章将学习div css基础。

HTML HTML基础各种标签及表单的使用方法

目录

1.简单的HTML页面架构

2.HTML常见标签

2.1 meta标签

2.2 标题标签

2.3 文本属性

2.4 form表单

2.4.1 input标签

2.4.2 input的类型

2.5 a标签、img标签、table标签

2.6 锚文本

2.7 img 标签

2.8 table 表格

2.9 列表标签

2.9.1 无序列表

2.9.2 有序列表

2.10 框架的使用

总结

2.2.标题标签

2.3.文本属性

2.4.form表单

2.4.1.input标签

2.4.2.input的类型

2.5.a标签、img标签、table标签

2.6.锚文本

2.7.img 标签

2.8.table 表格

2.9.列表标签

2.9.1.无序列表

2.9.2.有序列表

2.10.框架的使用

总结

HTML HTML基础 各种标签及表单的使用方法

目录

2.2.标题标签

2.3.文本属性

2.4.form表单

2.4.1.input标签

2.4.2.input的类型

2.5.a标签、img标签、table标签

2.6.锚文本

2.7.img 标签

2.8.table 表格

2.9.列表标签

2.9.1.无序列表

2.9.2.有序列表

2.10.框架的使用

总结

HTML HTML基础各种标签及表单的使用方法