合集"/>
HTML一些基础知识合集
HTML初级
- 第一章节 表单元素
- 1-1 创建表单
- 1-2 form元素属性
- 1-3 get和post的区别
- 1-4 本地安装服务器环境
- 1-5 表单发送
- 1-6 type和name属性
- 1-7 value和placeholder属性
- 1-8 maxlength和disable属性
- 1-9 autofocus和autocomplete属性
- 1-10 单行文本输入框和密码输入框
- 1-11 提交按钮和重置按钮
- 1-12 普通按钮和隐藏域
- 1-13 数字输入框和活动条
- 1-15 单选框
- 1-16 复选框
- 1-17 电子邮箱和网络
- 1-18 表单验证属性
- 1-19 多行文本输入框
- 1-20 下拉列表
- 1-21 下拉列表分组
- 1-22 button按钮
第一章节 表单元素
1-1 创建表单
1. form标签用于创建一个表单，会将里面的内容一起发送到服务器，结构类似于表格。2. 表单中的其他元素都要包含在form标签中。
以下代码为表单的代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form action="" method="post"><input type="submit" value=""/></form></body>
</html>1-2 form元素属性
- 必须用action属性指定表单发送的地址（服务器地址）。
- method属性指的是表单数据发送到服务器的方法，常用的有两种：get/post,默认为 get。
- name属性用来为当前表单定义一个独一无二的名称，控制表单与后台程序之间的关系。
- novalidate属性用于设置数据提交时不进行验证，通常不会用到。
- target属性设置目标窗口打开方式，通常不会利用到。
以下为代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form action="服务器地址" method="get" name="51zxw" novalidate="novalidate"><!--novalidate属性 ：用于设置数据提交时不进行验证，通常不会用到（属性名和属性值一样，可以不写属性值）--></form><form action="服务器地址" method="get" name="51zxw" target="_blank"><!--target属性：指定在哪里打开目标页面，设置目标窗口打开方式，通常不会用到 属性值：_blank 在新窗口打开目标页面 默认当前页面打开（_self）--> </form> </body>
</html>1-3 get和post的区别
- get方法提交：数据会附在网址之后提交给服务器，不安全，数据量很小。
- post方法提交：数据不会附在网址之后，会将表单中的所有数据进行打包发送给服务器，等待服务器读取。安全过程，数据量不受限制。是使用最多的提交方法。
- 本节内容发送表单位置为我要自学网首页（）
以下为本节课的代码：
get方法提交的表单:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form action="" method="get" name="51zxw"><input type="text" name="51zxw" /><input type="submit" value="发送" /></form></body>
</html>效果如下图所示：
发送之后，网址发生变化，输入内容被附带显示在了我要自学网网址后方。
post方法提交的表单：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form action="" method="post" name="51zxw"><input type="text" name="51zxw" /><input type="submit" value="发送" /></form></body>
</html>效果如下图所示：
更换为post发送之后，输入内容不会附带在我要自学网网址后方。
1-4 本地安装服务器环境
- 下载phpstudy软件，点击安装。
- 打开软件，启动“套件”中的前三项。
- 打开浏览器，地址输入“127.0.0.1"，回车。
- 看到站点创建成功，表示本地服务器环境创造成功。
- 把程序目录中的”www“文件夹发送到桌面
- 新建一个PHP移动到”www“文件夹中
- 获得一个表单接收程序： 51zxw.php
1-5 表单发送
注意：
表单接收程序放在服务器环境当中。(51zxw.php放到www的文件夹里）表单发送地址一定要填写完整，加上“http://“
以下为本节课的代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表单发送</title></head><body><form action="http://127.0.0.1/51zxw.php" method="post"><input type="text" name="uname" id="uname" value="" /><input type="submit" value="发送"/></form></body>
</html>51zxw.php（www文件夹中的表单接收程序）如下：
<?php$username = $_POST['uname'];echo "我输入的是：".$username;
?>
效果如下：
点击发送后的效果：
1-6 type和name属性
input元素：
1.input元素是最常见的表单控件
2.input元素可以在表单之外使用
input元素的type属性：（必须要有，可以不写属性值，但必须要有）
1.指定输入内容的类型
2.默认为text，单行文本框；password，密码输入框（输入内容为小圆点的状态）
单行文本框和密码输入框：
input元素的name属性：（必须要有，可以不写属性值，但必须要有）
1.传递参数时的参数名称（数据名称）
2.表单接收找的是name属性值
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>name和type属性</title></head><body>单行文本输入框：<input type="text" name="abc" /><br/>密码文本输入框：<input type="password" name="abc" /></body>
</html>效果如下：
1-7 value和placeholder属性
input元素的value属性值：
1.输入框的默认值
2.value值会发送到服务器
input元素的placeholder属性值：
1.输入框的默认值，当文本获得焦点时被清空
2.placeholder中的值会不发送到服务器
以下为本节课的代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>value和placeholder属性</title></head><body>value属性：<input type="text" name="" value="请输入..." /><br/>placeholder属性：<input type="text" name="" placeholder="请输入..."/></body>
</html>效果如下：
1-8 maxlength和disable属性
input元素的maxlength属性：
1.控制输入的最大字数
2.包括数字，英文，汉字等
input元素的disable属性：
1.设置为不可用，不可操作，不能修改，不提交到服务器
2.用于格式提醒
以下本本节课的代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>maxlength和disabled属性</title></head><body>电话号码：<input type="text" name="abc" placeholder="请输入电话号码" maxlength="11" /><br/>格式提示：<input type="text" name="abc" placeholder="xx省xx市xx区xx号" disabled/><br/>输入地址：<input type="text" name="abc" placeholder="请输入地址..." /></body>
</html>
效果如下：
1-9 autofocus和autocomplete属性
input元素的autofocus属性：
1.让输入框自动获得焦点（点击后的编辑状态）
2.打开页面后，光标自动处于编辑状态
input元素的autocomplete属性：
1.属性值：on/off
2.定义是否开启浏览器的自动记忆功能（默认为打开状态）
以下为本节课的代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>autofocus属性：<input type="text" name="abc" placeholder="请输入..." autofocus/><!--autofocus属性：打开页面后，光标自动处于编辑状态--><br/>autocomplete属性：<input type="text" name="abc" placeholder="请输入..." autocomplete="off" /><!--autocomplete属性：定义是否开启浏览器自动记忆功能（默认为开启状态）--><input type="submit" value="发送"/></body>
</html>效果如下：
1-10 单行文本输入框和密码输入框
单行文本框：
1.type：“text”
2.可以输入任何类型的文本，汉字，数字，字母
3.输入的内容以单行文本输入框的形式显现
密码输入框：
1.type：“password”
2.输入的字符会以圆点或星号显现
3.输入的内容会被隐藏
以下为本节课代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>单行文本框：<input type="text" name="abc" placeholder="请输入..." /><br/>密码输入框：<input type="password" name="abc" placeholder="请输入..." /></body>
</html>效果如下：
1-11 提交按钮和重置按钮
提交按钮和重置按钮的代码：
1.提交按钮：提交文本框里边的内容到数据库
2.重置按钮：重置文本框中的内容。
以下代码为重置按钮和提交按钮的代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><form action="http://127.0.0.1/he.php" method="post"><input type="text" name="abc" id="abc" /><input type="reset" value="重写"/><!--重置按钮 type="reset" 用于清空输入框中的内容，可以用value改变名称。--><br /><input type="text" name="abc" id="abc" /><input type="submit" value="提交" /></form> <!--提交按钮 type="submit" 用于将数据发送到服务器，可以用value改变名称。--></body>
</html>
效果如下：
1-12 普通按钮和隐藏域
普通按钮：
1.type=“button”
2.定义的是一个可以点击的按钮，但是没有任何的行为，没有任何的样式
3.可以用value改变按钮的名称
4.常用于点击按钮时来启动js程序
隐藏域：
1.type=“hidden”
2.隐藏域不会显示在页面中，一般是网页设计者设置好的数据
3.表单提交时隐藏域中的value会提交到服务器
以下为本节课的代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>普通按钮：<input type="button" name="abc" value="普通按钮" /><br />隐藏域：<input type="hidden" name="xjd" value="小家电" /></body>
</html>效果如下：
1-13 数字输入框和活动条
数字输入框：
1.type=“number”
2.专门用来输入数字，其他类型不能输入
3.min：允许输入的最小值
4.max：允许输入的最大值
5.step：步长（每次增加的值）
活动条：
1.type=“range”
2.专门用来输入数字，其他类型不能输入
3.min：允许输入的最小值
4.max：允许输入的最大值
5.step：步长（每次增加的值）
以下为本节课的代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>数字输入框和活动条</title></head><body><form>数字输入框：<input type="number" name="abc" value="10" min="5" max="20" step="5"/><!--数字输入框 ：默认：10 最小：5 最大：20 步长:5(每次增加的值)--><input type="submit" value="发送" /><br />活动条:<input type="range" name="abc" value="10" min="10"max="100" step="10"/><!--活动条：默认：10 最小：10 最大：100 步长：10（每次增加的值）--><input type="submit" value="发送" /></form></body>
</html>效果如下：
14 时间输入框和文件域
时间输入框：1.type=“time/datetime/datetime-local/date/month/week”
颜色选择器：1.type=“color”
文件域：1.type=“file”
2.用于文件上传
3.accept：规定选取文件类型
4.multiple：规定一次允许选择多个文件
以下为本节课代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>时间输入框和文件域</title></head><body><form>时间输入框：<input type="datetime-local" name="abc" /><br />颜色选择器：<input type="color" name="abc" /><br />文件域：<input type="file" name="abc" accept="image/jpeg" multiple/><!--multiple属性：规定一次允许选择多个文件（多选）--></form></body>
</html>效果如下：
1-15 单选框
单选框：
1.type=“radio”
2.name属性值必须设置成相同的属性值（很关键）
3.向服务器发送的是value值
4.可以通过checked设置默认选取状态，再次单击取消选取
以下为本节课的代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>单选框</title></head><body>性别：<input type="radio" name="xb" value="1" />男<input type="radio" name="xb" value="0" />女<input type="radio" name="xb" value="10" checked/>人妖<!--checked属性：设置默认选取状态--></body>
</html>效果如下：
1-16 复选框
复选框：
1.type:“checkbox”
2.name属性值必须设置成相同属性值，在属性值后面加上中括号（很关键）
3.向服务器发送的是value值
4.可以通过checked设置默认选取状态，再次单击取消选取
以下为本节课代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>单选框</title></head><body>喜欢的水果：<input type="checkbox" name="sg[]" value="pg" />苹果<input type="checkbox" name="sg[]" value="xj" />香蕉<input type="checkbox" name="sg[]" value="pt" checked/>葡萄<!--checked属性：设置默认选取状态--></body>
</html>效果如下：
1-17 电子邮箱和网络
电子邮箱输入框：1.type="email"2.会对输入的内容进行验证，符合可以发送，不符合弹出提示框
网址输入框：1.type="url"2.会对输入的内容进行验证，符合可以发送，不符合弹出提示框3.输入的网址一定要包含协议（http://或者https://）
1-18 表单验证属性
pattern属性：1.规定输入字符的模式2.模式指的是正则表达式
required属性：规定必须在提交前输入字段，不填写不能提交
1-19 多行文本输入框
多行文本输入框：1.textarea标签2.文本输入区域可以容纳无限数量的文本3.多行文本输入框和单行文本输入框的属性差不多4.不要使用rows和cols设置多行文本输入框的行数和列数，应该使用css来设置宽高5.多行文本输入框可以在表单之外使用
1-20 下拉列表
select标签：表示创建下拉列表，可以通过size属性来设置下拉列表中显示多少个列表
option标签：表示每一个下拉列表项，往服务器发送的是value值
1-21 下拉列表分组
select标签：multiple属性可以定义多选，多选时，name属性值后应加上"[]"（属性名和属性值一样，可以只写属性名）
optgroup标签：1.用来对option进行分组2.label设置分组名称
1-22 button按钮
button按钮：1.type属性可以设置三个值，submit/reset/button，含义和input按钮一样2.name/value/disable属性，与input的用法一样3.button标签是双标签，进行更加复杂的样式设计4.注意：表单中请使用input按钮，表单外使用button按钮
更多推荐
HTML一些基础知识合集
发布评论