HTML总结1(常用标签，表单标签为主）

左水水%

已于 2022-07-25 16:57:56 修改

阅读量432

点赞数 1

文章标签： html 前端

于 2022-07-24 11:14:52 首次发布

本文链接：https://blog.csdn.net/weixin_63970667/article/details/125955464

版权

一、HTML简介

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

其主要html主要格式为

<!DOCTYPE html>
<html>
<head>
	<title>网页的标题</title>
</head>
<body>
	内容主体部分
</body>
</html>

html的内容主要在body标签里面写,主要写一些标签内容

二、常用标签

简单介绍一下一些小标签常用来修饰文本以及一些网页的布局

<!DOCTYPE html>
<html>
<head>
	<title>常用标签</title>
</head>
<body>
	hello world!
	<!-- strong和b标签加粗 -->
	<strong>hello world!</strong>
	<!-- i和em是斜体 -->
	<i>是斜体</i>
	<!-- <br>为换行 -->
	<u>下划线</u><br>
	<del>删除线</del>
	<!-- 分割线 width单位 "100px"像素  20%-->
	<hr width="20%" size="100">
	<!-- 段落 <font>是用来修饰字体颜色-->
	<p><font color="red">这是一段话</font></p>
	<p align="center"><font color="#00ff">这是一段话</font></p>
	<p>这是一段话</p>	
	下标  a<sub>2</sub><br>
	2的3次幂2<sup>3</sup>
	<!-- pre 不会换行显示的是一行 -->
	<pre>学校心理咨询是增进学生心理健康、伏化心理素质的重要途径,也是心理素质教育的重要组成部分。随着时间的推移,心理咨询被越来越多的人承认和接受,越来越多的大学院校,甚至中学开始设置心理咨询机,心理咨询可以指导学生减轻内心矛盾和冲突,排解心中忧难,于发身心能,还能帮学生正确认识自己,把握自己,有效地适应外界环境。近年来,理机构不断完善,增设了多种形式的服务,已成为大学生心理素质教育最有效途径</pre>
	<!-- span一行满了会换行 -->
	<span>这是一个标准的行内标签</span>
	<span>学校心理咨询是增进学生心理健康、伏化心理素质的重要途径,也是心理素质教育的重要组成部分。随着时间的推移,心理咨询被越来越多的人承认和接受,越来越多的大学院校,甚至中学开始设置心理咨询机,心理咨询可以指导学生减轻内心矛盾和冲突,排解心中忧难,于发身心能,还能帮学生正确认识自己,把握自己,有效地适应外界环境。近年来,理机构不断完善,增设了多种形式的服务,已成为大学生心理素质教育最有效途径</span>
<!--标题分为一级标题二级标题等级别标题-->
	<h1>这是一个标题</h1>
	<h2>这是一个标题</h2>
	<h3>这是一个标题</h3>
	<h4>这是一个标题</h4>
	<h5>这是一个标题</h5>
	<h6>这是一个标题</h6>
	<!-- div自动换行 -->
	<div>这是以一个盒子</div>
    <a> ---- 超链接
    <a href="https://www.baidu.com/">点击我</a>
</body>
</html>

三、表单标签

表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器。
表单标签是<form>标签(用于定义表单域，form会把范围内的表单元素信息提交给服务器)
常用的表单元素标签有: <label>、<input>、 <textarea>、<select> 等标签

3.1form表单的常用属性

<form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件</form>

action主要取的是文件地址（有相对路径和绝对路径，通常使用相对路径）

methon常用的方式有get、post(get请求会将用户名和密码暴露在地址栏上，不安全。post请求相较于比较安全）

3.2input标签

input常用的属性：

<input type="属性值" name="元素名称" value="元素值" >

其他还有：

disabled ----- 表示input禁用不可点击	readonly --- 字段只读不能修改
disabled ----- 表示input禁用不可点击	autofocus --- 默认光标的位置
required---- input不能为空白提交

主要着重介绍一下type里的相关属性：

标签中，包含一个type属性，根据不同的type属性值，输入字段有很多种形式（可以是文本字段、复选框、掩码后的文本空间、单选按钮、按钮等）

type = "text" ---- 文本框(单行)	type = "password" ---- 密码框	type = "radio" ---- 单选按钮
type = "chexbox" ---- 多选按钮	type = "submit" --- 提交按钮	type = "reset" ---- 重置按钮
type = "button" ---- 普通的按钮	type = "image" ---- 图像按钮	type = "file" ----- 上传文件
type = "hidden" ----隐藏域用户在页面上不可见的内容提交用户不可以看见的一些信息	type = "email" ----- 邮箱	type = "color" ----颜色
type = "date" ---- 日期	type="datetime-local" --- 日期+时间	type="time"----- 时间
type="range" --- 进度条

3.3select标签

select主要表示下拉选择框常与option标签连用

其主要属性有

value ---- 选项的值	name ---- 下拉框的名称
selected ----- 默认被选中的选项	multiple ----- 以列表的形式显示

那就简单写一个例子描述描述：

<!DOCTYPE html>
<html>
<head>
	<title>select</title>
</head>
<body>
	<form>
		请选择您所在的城市：
		<select multiple="multiple">
			<option value="北京">北京</option>
			<option>上海</option>
			<option>江苏</option>
			<option>重庆</option>
	</form>
</body>
</html>

其结果如下：

3.4textarea标签

其格式为

<textarea name = "" cols = "文本域的宽度" rows = "文本域的高度">内容</textarea>

简单举个例子：

<!DOCTYPE html>
<html>
<head>
	<title>textarea</title>
</head>
<body>
	<textarea name="" cols="2" rows="6">今天天气真好!!!</textarea>
</body>
</html>

其结果如下：主要用与网页中留言框

3.5表单标签练习

最后用一个例子描述一下表单主要内容：

<!DOCTYPE html>
<html>
<head>
	<title>表单标签练习</title>
</head>
<body>
	<div align="center">
		<h2 >用户注册</h2>
		<form>
		<label>用户名：</label><input type="text" name="username" value="张三"id="username" ><br>
		<input type="text" name="username" id="username" value="张三"disabled="disabled"><br>
		密&nbsp&nbsp&nbsp码：<input type="password" name="password" autofocus><br>
		请选择你的性别：<input type="radio" value="男" name="gender"checked=
		"checked">男<input type="radio" value="女" name="gender">女<br>
		请选择您的爱好：<input type="checkbox" value="足球">足球
		<input type="checkbox" value="篮球">篮球
		<input type="checkbox" value="LOL">LOL
		<input type="checkbox" value="韩剧">韩剧
		<input type="checkbox" value="王者荣耀">王者荣耀<br>
		邮箱：<input type="email" name="email" placeholder="请输入你的邮箱"><br>
		用户头像：<input type="file"><br>
		您的家庭住址是：
		<select name="address">
			<option value="北京">北京</option>
			<option>上海</option>
			<option>江苏</option>
			<option selected="selected">重庆</option>
		</select><br>
		您的收货地址:
		<select multiple="multiple">
			<option >南京</option>
			<option>扬州</option>
			<option>无锡</option>
			<option>苏州</option>
		</select><br>
		请留下您的意见或者建议：<br>
		<textarea name="" cols="20" rows="6" placeholder="您的建议或意见">您的意见或建议</textarea><br>
		请选择您喜欢的颜色：<input type="color">
		注册时间：<input type="datetime-local"><br>
		<input type="submit" value="注册">
		<input type="reset" value="重置">
		<input type="range" value="注册用户">
		</form>
	</div>
</body>
</html>

结果如下：