HTML部分知识汇总（1）常用标签、表单标签

那年遇见了你

于 2022-07-24 19:44:58 发布

阅读量368

点赞数 1

分类专栏：编程语言文章标签： html 前端

本文链接：https://blog.csdn.net/Z1711582538/article/details/125939735

版权

编程语言专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.常用标签

1.1 单标签

br----换行标签

hr----水平线标签

img----图片标签

1.2 双标签

p----段落标签

ul、li、ol----列表标签

h1~h6----文本标题标签

a----超链接标签

b、strong----文本加粗标签

i、em----文本倾斜标签

u----文本下划线标签

font----字体标签

s、del----文本删除线标签

div----盒子（块元素）标签

span----块标签（类似于div标签）

2.表单标签-----form

用法：表单标签一般会和 input标签连用

form的属性：

action ---- 取值：文件路径 ---- 表单提交后处理的表单文件相对路径和绝对路径
相对路径：当前源文件和目标文件的相对路径的位置 ,建议使用----->../Demo1.html

绝对路径：从盘符开始依次找到想要找到的文件的文件路径，路径+文件名----->D:\...\...

name ---- 取值：字符串 ---- 表单的名称

method -- -- 取值：请求方式 get post -----用来明确表示表单提交的方式

get和post请求的区别：http协议
get请求会将用户名和密码暴露在地址栏上，不安全
post请求相较于比较安全
共同点：都是可以让后台接收数据的表单标签一般会和input标签、textarea标签、select标签连用

2.1 intput表单

语法格式：<input type = "元素类型" name = "元素名称" value = "元素值" id = "客户唯一标识符">

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" --- 进度条

input的属性：

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

<!DOCTYPE html>
<html>
<head>
<title>type属性</title>
</head>
<body>
<div align="center">
<h1>用户注册</h1>
2.3.2 select标签
select标签表示下拉选择框
会和option标签连用 option表示的下拉选择框中的选项
属性：
value ---- 选项的值
name ---- 下拉框的名称
selected ----- 默认被选中的选项
multiple ----- 以列表的形式显示
<form>
用户名：<input type="text" name="username" id="username"
value="zhangsan" readonly="readonly" disabled="disabled"><br>
密码：<input type="password" name="password" autofocus><br>
确认密码：<input type="password" name="password" required><br>
请选择你的性别：<input type="radio" value="男" name="gender" checked>男
<input type="radio" value="女" name="gender">女<br>
<p>
<input type="checkbox" value="跳舞" name="dance">跳舞
<input type="checkbox" value="跳舞" name="dance">唱歌
<input type="checkbox" value="跳舞" name="dance">打篮球
<input type="checkbox" value="跳舞" name="dance">看书
<input type="checkbox" value="跳舞" name="dance">说唱
</p>
<input type="submit" value="提交">
<input type="reset" value="复位">
<input type="button" value="按钮"><br>

<input type="file">
<input type="hidden">
请您输入您的邮箱：<input type="email">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="time">
<input type="range">
</form>
</div>
</body>
</html>

2.2 select表单

定义：select标签表示下拉选择框会和option标签连用 option表示的下拉选择框中的选项

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

<!DOCTYPE html>
<html>
<head>
<title>select</title>
</head>
<body>
<form>
请选择您所在的城市：
<select multiple="multiple">
<option value="北京">北京</option>
<option>上海</option>
2.3.3 textarea标签
语法结构：
cols ---- 多少列表示的是文本域的宽度
rows --- 多少行表示的文本域的高度
2.4 常用的一些属性
常用属性（以body标签为例）
Text --- 文本颜色
link ------ 超链接文本的颜色
vlink --- 访问过的超链接的文本颜色
Alink --- 激活超链接文本的颜色
bgcolor ---- 背景颜色
background --- 背景图片一般不建议背景使用图片
背景图片和背景颜色同时存在时候要注意优先级的问题（自己下来看）
<option>广州</option>
<option selected="selected">重庆</option>
</select>
</form>
</body>
</html>

2.3 textarea标签

语法结构：<textarea name = "" cols = "" rows = "">内容</textarea>

属性：

cols ---- 多少列表示的是文本域的宽度
rows --- 多少行表示的文本域的高度
<!DOCTYPE html>
<html>
<head>
<title>select</title>
</head>
<body>
<form>
<textarea cols="20" rows="5">这家伙很懒，什么都没有留下！！！！</textarea>
</form>
</body>
</html>