每日分享：

不贪婪

凡事皆有度，把握好分寸，学会知足常乐。

初始常用的HTML标签
资源路径
列表标签
表格标签
表单标签
表单提交

一、初始常用的HTML标签

小结

学习html语言就是学习标签的用法
编写html标签一般用小写
html标签可以分为双标签和单标签
单标签没有标签内容，双标签可以嵌套其他标签和承载文本内容

二、资源路径

资源路径分为相对路径和绝对路径

相对路径：从当前目录算起的路径

绝对路径（一般不用）：从根目录算起的路径

E:\VSCode\网页\basic

三、列表标签

列表标签分为：有序标签和无序标签

四、表格标签

表格由行和列组成

<table>标签：表示一个表格

<tr>标签：表示表格中的一行

<td>标签：表示表格中的列

<th>标签：表示表格中的表头

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- border-collapse: collapse 表示表格的边线进行合并 --><table style="border: 1px solid black;border-collapse: collapse;"><tr><th style="border: 1px solid black;">姓名</th><th style="border: 1px solid black;">年龄</th></tr><tr><td style="border: 1px solid black;">张三</td><td style="border: 1px solid black;">18</td></tr></table>
</body>
</html>

结果：

五、表单标签

表单用于搜集不同类型的用户输入（用户输入的数据），然后可以把用户数据提交到Web服务器

表单相关标签的使用

1. <form>标签表示表单标签，定义整体的表单区域

2. <label>标签表示表单元素的文字标注标签，定义文字标注

3. <input>标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式

type属性
- type=“text” 定义单行文本输入框
- type=“password” 定义密码输入框
- type=“radio” 定义单选框
- type=“checkbox” 定义复选框
- type=“file” 定义上传文件
- type=“submit” 定义提交按钮
- type=“reset” 定义重置按钮
- type=“button” 定义一个普通按钮

4. <textarea>标签表示表单元素的多行文本输入框标签定义多行文本输入框

5. <select>标签表示表单元素的下拉列表标签定义下拉列表

<option>标签与<select>标签配合，定义下拉列表中的选项

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>蓝汐最帅</title>
</head>
<body><form><p><label>姓名：</label><input type="text"></p><p><label>密码：</label><input type="password"></p><p><label>性别：</label><input type="radio">男<input type="radio">女</p><p><label>爱好：</label><input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆</p><p><label>照片：</label><input type="file"></p><p><label>个人描述：</label><textarea></textarea></p><p><label>籍贯：</label><select><option>河北</option><option>河南</option><option>北京</option></select></p><p><input type="submit" value="提交"><input type="reset" value="重置"><button>按钮</button></p></form>
</body>
</html>

结果：

六、表单提交

1. 表单属性设置

<form>标签表示表单标签，定义整体的表单区域

action属性设置表单数据提交地址
method属性设置表单提交的方式，一般有GET和POST两种方式，不区分大小写

2. 表单元素属性设置

name属性设置表单元素的名称，该名称是提交数据时的参数名
value属性设置表单元素的值，该值是提交数据时参数名所对应的值

3. 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>蓝汐最帅</title>
</head>
<body><form action="https://www.baidu.com", method="post"><p><label>姓名：</label><input type="text", name="username"></p><p><label>密码：</label><input type="password", name="password"></p><p><label>性别：</label><input type="radio", name="sex", value="0">男<input type="radio", name="sex", value="1">女</p><p><label>爱好：</label><input type="checkbox", name="love", value="吃饭">吃饭<input type="checkbox", name="love", value="睡觉">睡觉<input type="checkbox", name="love", value="打豆豆">打豆豆</p><p><label>照片：</label><input type="file", name="picture"></p><p><label>个人描述：</label><textarea name="about"></textarea></p><p><label>籍贯：</label><select name="site"><option value="1">河北</option><option value="2">河南</option><option value="3">北京</option></select></p><p><input type="submit" value="提交"><input type="reset" value="重置"><button>按钮</button></p></form>
</body>
</html>

POST结果：

点击提交之后，我们可以在我们的表单中看到填写的信息：

GET结果：

可以直接在网址栏中看到我们填写的信息，所以get方法不安全

前端-HTML基础知识详解相关推荐

R语言基础知识详解及概括
R语言基础知识详解及概括目录 R语言基础知识详解及概括 R数据可视化示例 R语言进行数据创建
R语言可视化绘图基础知识详解
R语言可视化绘图基础知识详解图形参数:字体.坐标.颜色.标签等: 图像符号和线条: 文本属性: 图像尺寸及边界: 坐标轴.图例自定义等: 图像的组合: #install.packages(c(&qu ...
计算机网络相关知识参考博客子网掩码怎么理解网关及网关的作用路由器基础知识详解
子网掩码怎么理解 https://blog.csdn.net/farmwang/article/details/64132723 网关及网关的作用 https://blog.csdn.net/zhao ...
RabbitMQ基础知识详解
RabbitMQ基础知识详解 2017年08月28日 20:42:57 dreamchasering 阅读数:41890 标签: RabbitMQ 什么是MQ? MQ全称为Message Queue, ...
Android随机点名器,Excel基础知识-详解随机点名器
说道制作个案例纯粹意外,我多少有点选择恐惧症,为了不在"选择"上纠结,就自己小玩了一下,就用了程序做了个选择器,其实很简单,就是有小时候玩的"点兵点将",稍微变 ...
Python基础知识详解从入门到精通（八）魔法方法
目录 Python基础知识详解从入门到精通(八)魔法方法什么是魔法方法基础魔法方法(较为常用) 比较操作符算数运算符反运算(类似于运算方法) 增量赋值运算一元操作符类型转换上下文管理( ...
网络管理之基础知识详解
网络管理之基础知识详解目录 3.1 网络的特征 3.2 拓扑结构 4.1 OSI简介 4.2 数据传输过程 4.3 分层作用 4.4 PDU 5.1 单播 5.2 多播 5.3 广播 5.4 三种通 ...
工业相机基础知识详解
工业相机基础知识详解工业相机是机器视觉系统的一个最关键的组件.他的功能很简单,就是将被检测的物体拍摄下来,然后转换成电脑可以识别的图像,以便以后进行图像处理,从而完成检测任务.工业相机俗称工业摄像机 ...
小白入门！网络安全基础知识详解（附知识问答）
小白入门!网络安全基础知识详解(附知识问答) 一.引论提到网络安全,一般人们将它看作是信息安全的一个分支,信息安全是更加广义的一个概念:防止对知识.事实.数据或能力非授权使用.误用.篡改或拒绝使用所 ...

前端-HTML基础知识详解