HTML一些基础知识合集

已于 2022-09-20 15:50:20 修改
阅读量297 收藏
点赞数 1
文章标签： html 前端
于 2022-09-12 01:39:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72979912/article/details/126811733
版权

HTML初级

第一章节 表单元素

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元素属性

  1. 必须用action属性指定表单发送的地址（服务器地址）。
  2. method属性指的是表单数据发送到服务器的方法，常用的有两种：get/post,默认为 get。
  3. name属性用来为当前表单定义一个独一无二的名称，控制表单与后台程序之间的关系。
  4. novalidate属性用于设置数据提交时不进行验证，通常不会用到。
  5. 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的区别

  1. get方法提交：数据会附在网址之后提交给服务器，不安全，数据量很小。
  2. post方法提交：数据不会附在网址之后，会将表单中的所有数据进行打包发送给服务器，等待服务器读取。安全过程，数据量不受限制。是使用最多的提交方法。
  3. 本节内容发送表单位置为我要自学网首页（https://www.51zxw.net）
    以下为本节课的代码：
    get方法提交的表单:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="https://www.51zxw.net" 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="https://www.51zxw.net" method="post" name="51zxw">
			<input type="text" name="51zxw" />
			<input type="submit" value="发送" />
		</form>
	</body>
</html>

效果如下图所示：
在这里插入图片描述在这里插入图片描述更换为post发送之后，输入内容不会附带在我要自学网网址后方。

1-4 本地安装服务器环境

  1. 下载phpstudy软件，点击安装。
  2. 打开软件，启动“套件”中的前三项。
  3. 打开浏览器，地址输入“127.0.0.1"，回车。
  4. 看到站点创建成功，表示本地服务器环境创造成功。
  5. 把程序目录中的”www“文件夹发送到桌面
  6. 新建一个PHP移动到”www“文件夹中
  7. 获得一个表单接收程序： 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>

效果如下：
数字输入框：如果输入的值不在5到20之间发送提示“你必须输入介于25-20之间的值” 如果在5到20之间不是5的倍数，则提示“你必须输入有效值”

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按钮
君子不立于危墙
关注
【网络入门】详解常用的基础网络知识（面试笔试常考内容）
dvlinker的技术专栏
04-26 6万+
本文结合多年来的工作实践，来详细讲述一下作为IT从业人员要掌握的一些基础网络知识。
C++网络基础知识面试题1
dvlinker的技术专栏
09-27 1万+
本文详细总结常见的网络知识面试题。
14个HTML5实现的效果合集
li_star的专栏
03-01 602
HTML5可不是什么虚幻的概念，与其高谈阔论的讨论HTML5未来的趋势和价值，不如一起研究一下现在的HTML5可以做出哪些成果，可以让我们做出出色的产品。 　　Form Follows Function就是一個展示HTML5实现的网站，目前网站展示了14个作品，其中包括了交互操作以及视觉效果。这些效果本身并不是一个完整的产品，但是加入到产品中就能让产品生色不少。 　1、散景（Bokeh
html关键字
jtton的专栏
03-02 3417
 ...普通卷动...滑动...预设卷动...来回卷动...向下卷动...向上卷动向右卷动向左卷动...卷动次数...设定宽度...设定高度...设定背景颜色...设定卷动距离...设定卷动时间 字体效果...标题字(最大)...标题字(最小)...粗体字...粗体字(强调)...斜体字...斜体字(强调)...斜体字(表示定义)...底线...底线(表示插入文字)...横线...删除线.
html 入门（合集）
快乐程序猿的博客
02-11 323
一、静态页面和动态页面 判断页面是否动态页面或静态页面的标准在于：是否与服务器进行交互，不是具有“会动”的元素（如视频、Flash等）的页面就叫动态页面。 静态页面绝大部分由4类元素组成：文本、图形、多媒体文件（视频音频）和超链接。 二. 段落与文字1. 标题标签h1~h6 A. 一个页面中只能有一个h1，但可以有多个h2到h6。从h1到h6，级别越来越低，也就是字体越来越小。2. ...
html多个class,仅显示其中一个的
兔老大的胡萝卜
03-14 956
$("#rotation_chart").show();//默认显示的部分 $(".leftmenu").click(function() {//点击的位置 var index = $(".leftmenu").index(this) //使用索引 $...
前端-Html
qq_60021049的博客
11-13 604
文章目录HBuilderX介绍安装网站HTML静态页面HTML介绍结构语法常用标签标题标签列表标签：图片标签：超链接标题Input标签表格标签表单标签其他标签 HBuilderX 介绍 HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby，本身主体是由Java编写。 安装网站 官网：https://www.dcloud.io/hbuilderx.html ps：HBuilderX只是前端编写工具 HTML 介绍 H
HTML5基础知识
qq_46485137的博客
02-13 5724
一、初识HTML HTML：Hyper Text Markup Language（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等 HTML5的优势： 跨平台、 W3C标准 World Wide Web Consortium（万维网联盟） 成立于1994年，Web及时领域最权威和具影响力的国际中立性技术标准机...
HTML基础知识点
qq_40046544的博客
07-27 8830
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
Python基础知识点总结
热门推荐
Python全栈系列
08-25 7万+
本文包括python基本知识：简单数据结构，数据结构类型（可变：列表，字典，集合，不可变：数值类型，字符串，元组），分支循环和控制流程，类和函数，文件处理和异常等等。
信息安全技术基础知识-经典题目
数据知道的博客
06-19 4661
①消息摘要算法是将任意长度的输入，产生固定长度的伪随机输出的算法，例如应用MD5算法摘要的消息长度为128位，SHA-1算法摘要的消息长度为160位，SHA-1的变体可以产生192位和256位的消息摘要。②消息摘要算法针对不同的输入会产生不同的输出，用相同的算法对相同的消息求两次摘要，其结果是相同的。因此消息摘要算法是一种“伪随机”算法。③输入不同，其摘要消息也必不相同；但相同的输入必会产生相同的输出。即使两条相似的消息的摘要也会大相径庭。
HTML基础知识总结 2021新版
覃仔的博客
02-01 2870
第一章 HTML 基础知识 1、 HTML 简介 Hypertext Markup Language （超文本标记语言） 简写：HTML HTML 利用各种标记来标识文档的结构以及标识超链接的信息。 HTML是通过标签来标记要显示的网页中的各个部分。网页也是文件本身一种文本文件，通过在文本文件中添加标记符，告诉浏览器应该如何显示其内容（比如：文字的处理、网页的排版、图片的显示等） 图为HTML文本 2、 HTML 的标记组成 HTML 用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“ &
2020-06-29
u014552307的博客
06-29 65
在本地安装服务器环境成功了 在学html5中遇到问题 html代码如下 〈body〉 〈form action=“http://127.0.0.1/lx1.php“ method = “post”〉 〈input type =“text” name=“uname” /〉 〈input type =“submit”/〉 〈/form〉 〈/body〉 php代码如下 〈?php username=username=username=_post［‘uname’］; echo “我输入的是：”.$username
HTML各种标签合集
痞子王的博客
04-13 2605
HTML 快速入门： ​ * 语法： ​ 1. html文档后缀名 .html 或者 .htm ​ 2. 标签分为 ​ 1. 围堵标签：有开始标签和结束标签。如 ​ 2. 自闭和标签：开始标签和结束标签在一起。如 3. 标签可以嵌套： 需要正确嵌套，不能你中有我，我中有你 错误：<a><b></a></b>...
HTML标签详解
weixin_30918415的博客
09-16 84
--HTML标签详解 HTML指令详解 结构 ＜html＞ ＜head＞ ＜title＞标题＜title＞ ＜/head＞ ＜body＞..........文件内容.......... ＜/body＞ ＜/html＞ 1.文件标题 ＜title＞..........＜/title＞ 2.文件更新--＜meta＞ 　【1】10秒后自动更新一次 　　＜metahttp...
前端用html写excel文件直接打开
全易
09-10 554
html文件直接用excel打开
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 328
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
水平垂直居中的几种方法（总结）
致未来的你。的博客
09-11 1095
水平垂直居中的几种方法（总结）
HTML中的文字与分区标记
最新发布
qq_74861982的博客
09-11 417
HTML中的文字与分区标记
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值