HTML简单总结-CSDN博客

本文链接：https://blog.csdn.net/qq_59180100/article/details/125979042

本文介绍了HTML的基础知识，包括HTML的结构、常用标签如<b>、<i>、<p>等，以及表单元素如<form>、<input>的使用，详细讲解了<input>的各种类型和<form>的属性。此外，还提到了<select>下拉列表和<texterea>多行文本输入框的运用。

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

1.HTML介绍

HTML 全称为 HyperText Markup Language （超文本标签语言）。 HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。 HTML 文本是由 HTML 标签组成的描述性文本， HTML 文本可以说明文字、图形、动画、声音、表格、链接等。

HTML 的结构包括头部（ Head ）、主体（ Body 两大部分，其中头部描述浏览器所需的息，而主体则包含所要说明的具体内容。需要说明的是 HTML 不是编程语言，而是一种描述性的语言，用于描述超文本中内容的显示方式。比如，文字以什么颜色、大小显示，图片以什么尺寸、位置来显示等。这些描述都是用 HTML 标签来描述的

HTML 的特点：简单灵活，可扩展性，平台无关性

2.常用标签

常用标签
<strong></strong>	字体加粗
<b></b>	字体加粗
<i></i>	斜体
<em></em>	斜体
<u></u>	文字下面加下划线
<del></del>	删除线
<hr>(单标签)	水平分割线(可以设置宽度(size)和长度(width):长度单位可以是像素（px）可以是百分比（%）)
<p></p>	段落标签 align 属性的取值 left center right, 默认的位置是居左
<font></font>	修饰字体 color 字体的颜色颜色的表示法：第一种 : 单词第二种：三原色rrggbb(red green blue) 十六进制 #0000ff
<sub></sub>	下标
<sup></sup>	上标
<pre></pre>	原样输出内容
<span></span>	标准的行内标签，用来修饰文本行内标签的特点：只占据内容的部分，不会自动换行，直到铺满一行才会换行
<hn></hx>	标题标签 n可取1~6，字体大小从大到小加粗换行（h1最大）
<div></div>	盒子
<br>(单标签)	自动换行

<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8">
	<title>我的第一个网页</title>
</head>
<body>
	你好，欢迎来到我的世界！
	<strong>strang你好!</strong>
	<b>b也是粗体！</b>
	<i>i斜体字</i>
	<u>u文字加上下划线</u><br>
	<del>删除线del</del>
	换行字符br<br>
	<hr width="10%"  size="50">
	<p align="center">段落标签 align left center right</p>
	<p align="center"><font color="red">font改变字体颜色</font></p>
	<!--zhushi -->
	二的三次幂(上标)<sup>3</sup><br>
	log(下标)<sub>10</sub>
	<pre>iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</pre>
	<span></span>
	<h1>hnn的取值在1~6</h1>
	<div>盒子</div>
</body>
</html>

3.表单标签

form------表单标签（常与input标签连用）

form标签常用属性
action	提交表单时要执行的操作（用户点击“提交”按钮时，表单数据将发送到服务器上的文件中）
name	规定表单名称
method	指定提交表单数据时要使用的 HTTP 方法，请求方式：get ospf（提交表单数据时，默认的 HTTP 方法是 GET）。 get 请求会将用户名和密码暴露在地址栏上，不安全 post请求相较于get比较安全，ospf将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）

<!DOCTYPE html>
<html>
<head>
	<title>表单标签</title>
</head>
<body>
	<form action="demo01.html"</form>
	用户名：<input type="text" ><br>
	<input type="submit" value="提交">
</body>
</html>

4.input标签

语法格式：

type属性的取值
text	供文本输入的单行输入字段
password	密码字段
submit	提交表单数据至表单处理程序的按钮
radio	单选按钮
CheckBox	复选框
button	按钮
number	包含数字值的输入字段
date	包含日期的输入字段
color	包含颜色的输入字段
range	进度条
mouth	允许用户选择月份和年份
week	允许用户选择周和年
time	允许用户选择时间（无时区）
datetime	允许用户选择日期和时间（有时区）
datetime-local	允许用户选择日期和时间（无时区）
email	包含电子邮件地址的输入字段
hidden	隐藏域用户在页面上不可见用于提交一些用户不可以看见的信息
file	上传文件
reset	复位按钮
image	图像按钮

input属性
checked	默认选择
readonly	字段只读不可改
disable	禁用input 不可点击
autofocus	默认光标的位置
required	input不能为空白提交
size	规定输入字段的尺寸（以字符计）
maxlength	规定输入字段允许的最大长度

<!DOCTYPE html>
<html>
<head>
	<title>form-----表单标签</title>
</head>
<body>
<div align="center">
	<form action="demo01.html" name="name" method="post">
	用户名：<input type="text" name="username"><br>
	密&nbst码：  <input type="text" name="username"><br>
	<input type="submit" value="提交"><br>
	请选择你的性别:<input type="radio" value="男" name="gender">男
	<input type="radio" value="女" name="gender">女<br>
	<p>
		<input type="checkbox" value="看书" name="打游戏" value="聊骚">看书<br>
		<input type="checkbox" value="看书" name="打游戏" value="聊骚">打游戏<br>
		<input type="checkbox" value="看书" name="打游戏" value="聊骚">聊骚<br>
	</p>
	<input type="submit" value="提交"><br>
	<input type="reset" value="复位"><br>
	<input type="button" value="按钮"><br>
	<input type="image" value="图片" src="..\前端\按钮.jpg"><br>
	<input type="file" value="选择文件"><br>
	<input type="hidden"><br>
	 请你输入你的邮箱<input type="email"><br>
	 <input type="color">颜色<br>
	 <input type="date">日期<br>
	 <input type="datetime-local">日期加时间<br>
	<input type="time">时间<br>
	<input type="range">进度条<br>
	<input type="checked">默认选择<br>
	<input type="readonly">只读不能修改<br>
	<input type="diabled">input禁用<br>
	<input type="autofocus">默认光标的位置
	<input type="required">input不能为空白提交
	size字符串长度
	maxlenth 字符串最大长度
	</form>
	</div>
</body>
</html>

5.select标签（下拉列表）

一般会与option标签连用。option标签可用于表示下拉列表中的选项。

select标签常用属性
value	选项的值
name	下拉列表的名字
selected	默认被选中的选项
multiple	以列表形式显示

<!DOCTYPE html>
<html>
<head>
	<title>select</title>
</head>
<body>
<form>
	<select>
		<option value="广州">广州</option>
		<option selected="selected">重庆</option>
		<option>上海</option>
		</select>
</form>
</body>
</html>

6.textarea标签

定义一个多行的文本输入控件

语法结构：

<textarea name = "" cols = "" rows = ""> 内容 </textarea>

textarea标签常用属性
cols	规定文本域的宽度
rows	规定文本域的高度
name	规定文本域的名字
readonly	规定文本域为只读
disabled	规定禁用文本域

<!DOCTYPE html>
<html>
<head>
	<title>select</title>
</head>
<body>
<form>
		<textarea cols="5" rows="5">
			这家伙很懒，什么都没留下！！！
		</textarea>
</form>
</body>
</html>