HTML基础

最新推荐文章于 2024-05-14 16:51:05 发布
最新推荐文章于 2024-05-14 16:51:05 发布
阅读量358 收藏
点赞数
分类专栏： Computer 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kkoyy459/article/details/126902763
版权

根据以下学习视频，个人整理的笔记

https://www.bilibili.com/video/BV1x4411V75C?spm_id_from=333.999.0.0&vd_source=7a8946d22777450e46486d5fd60d8d4d

HTML

什么是HTML

HTML：超文本标记语言

HTML5

  • 世界知名浏览器厂商都对HTML5提供支持
  • 市场的需求
  • 跨平台

W3C:万维网联盟

http://www.w3.org/ （org代表开源的意思）

W3C标准包括

  • 结构化标准语言（HTML、XML（配置））
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

HTML

<> </> 成对的标签，分别叫开放标签和闭合标签

浏览器本身就是一个智能的IDE，它能解释我们的HTML代码

例子

<!-- DOCTYPE：告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>


<html>
	
	<!-- head标签代表网页头部 -->
	<head>
		<!-- meta描述性标签，它用来描述我们网站的一些信息 -->
		<!-- meta一般用来做SEO -->
		<meta charset="utf-8">
		<meta name="keywords" content="狂神说Java,西部开源">
		<meta name="description" content="来这个地方可以学习Java"/>
		
		
		<!-- title标签代表网页的标题-->
		<title>Title</title>
	</head>
	
	
	<!-- body标签代表网页主体 -->
	<body>
		你好！
		
	</body>
</html>

网页基本标签

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!-- 标题标签 -->
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		
	
		
		<!-- 段落标签 -->
		<p>“两只老虎，两只老虎，跑得快，跑得快，</p>
		<p>一只没有眼睛，一只没有尾巴，</p>
		<p>真奇怪！真奇怪！</p>
		<p>两只老虎，两只老虎，跑得快，跑得快，</p>
		<p>一只没有耳朵，一只没有尾巴，</p>
		<p>真奇怪！真奇怪！”</p>
		
		<!-- 水平线标签 -->
		<hr>
		
		<!-- 换行标签 -->
		两只老虎，两只老虎，跑得快，跑得快，<br>
		一只没有眼睛，一只没有尾巴，<br>
		真奇怪！真奇怪！<br>
		两只老虎，两只老虎，跑得快，跑得快，<br>
		一只没有耳朵，一只没有尾巴，<br>
		真奇怪！真奇怪！”<br>
		
		<!-- 粗体，斜体 -->
		<h1>字体样式标签</h1>
		
		<strong>粗体</strong>
		<em>斜体</em>
		
		<br>
		<!-- 特殊符号 -->
		空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
		
		<br>
		&gt;
		<br>
		&lt;
		<br>
		&copy;版权所有狂神
		
		<!-- 
		 特殊符号记忆方式
		 &	;
		 查百度
		 -->
		
		
	</body>
</html>

图像标签

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像标签</title>
	</head>
	<body>
		<!-- img标签
		 src：图片地址(必填)
				相对地址(推荐)，绝对地址
			../		代表上一级目录
			./		代表同一级目录(也可以直接写，不用加/)
			
		 alt：图片加载失败的替代文字(必填)
		 
		 -->
		<img src="Resource/image/39.jpg" alt="漫画图片"	title="悬停文字" width="1000px" height="1000px">
		
	</body>
</html>

链接标签

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链接标签</title>
	</head>
	<body>
		<!-- 使用name作为锚标记 -->
		<a href="" name="top">顶部</a>
		
		<!-- 链接标签
		 href：必填，表示要跳转到哪个页面
		 target：表示窗口在哪里打开
			_blank 		在新标签中打开
			_self 		默认的，在自己的网页中打开
		 -->
		<a href="图像标签.html" target="_blank">点击我跳转</a>
		<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
		
		<br>
		
		<!-- 图像超链接 -->
		<a href="我的第一个网页.html">
			<img src="Resource/image/39.jpg" alt="漫画图片"	title="悬停文字" width="1000px" height="1000px">
		</a>
		<a href="我的第一个网页.html">
			<img src="Resource/image/39.jpg" alt="漫画图片"	title="悬停文字" width="1000px" height="1000px">
		</a>
		<a href="我的第一个网页.html">
			<img src="Resource/image/39.jpg" alt="漫画图片"	title="悬停文字" width="1000px" height="1000px">
		</a>
		<a href="我的第一个网页.html">
			<img src="Resource/image/39.jpg" alt="漫画图片"	title="悬停文字" width="1000px" height="1000px">
		</a>
		<a href="我的第一个网页.html">
			<img src="Resource/image/39.jpg" alt="漫画图片"	title="悬停文字" width="1000px" height="1000px">
		</a>
		<a href="我的第一个网页.html">
			<img src="Resource/image/39.jpg" alt="漫画图片"	title="悬停文字" width="1000px" height="1000px">
		</a>
		<a href="我的第一个网页.html">
			<img src="Resource/image/39.jpg" alt="漫画图片"	title="悬停文字" width="1000px" height="1000px">
		</a>
		<a href="我的第一个网页.html">
			<img src="Resource/image/39.jpg" alt="漫画图片"	title="悬停文字" width="1000px" height="1000px">
		</a>
		<a href="我的第一个网页.html">
			<img src="Resource/image/39.jpg" alt="漫画图片"	title="悬停文字" width="1000px" height="1000px">
		</a>
		<a href="我的第一个网页.html">
			<img src="Resource/image/39.jpg" alt="漫画图片"	title="悬停文字" width="1000px" height="1000px">
		</a>
		
		<!-- 锚链接 
		1.需要一个锚标记
		2.可以跳转到锚标记（不同页面也可以实现，href需要先填写要跳转的页面，再添加#标记）
		#
		-->
		
		<a href="#top">回到顶部</a>
		
		<!-- 功能性链接
		 
		 邮件链接：mailto
		 QQ链接：
		 -->
		
		<a href="mailto:qq398156587@163.com">点击联系我</a>
		
		<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好加我领取小电影" title="你好加我领取小电影"/></a>
		
	</body>
</html>

行内元素和块级元素

块级元素

  • 无论内容多少，该元素独占一行
  • （div、p、h1~h6。。。）

行内元素

  • 内容撑开宽度，左右都是行内元素的可以排在一行
  • （span、img、a、strong、em。。。）

行内元素可以被包含在块级元素中，反之，则不可以~

列表标签

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表标签</title>
	</head>
	<body>
		
		<!-- 有序列表 -->
		<ol>
			<li>Java</li>
			<li>Python</li>
			<li>运维</li>
			<li>前端</li>
			<li>C/C++</li>
		</ol>
		
		<hr >
		<!-- 无序列表 -->
		<ul>
			<li>Java</li>
			<li>Python</li>
			<li>运维</li>
			<li>前端</li>
			<li>C/C++</li>
		</ul>
		
		<!-- 自定义列表
		 dl：标签
		 dt：列表名称
		 dd：列表内容
		 -->
		<dl>
			<dt>学科</dt>
			
			<dd>Java</dd>
			<dd>Python</dd>
			<dd>运维</dd>
			<dd>C/C++</dd>
			<dd>前端</dd>
			
			
			<dt>位置</dt>
			
			<dd>北京</dd>
			<dd>深圳</dd>
			<dd>上海</dd>
			<dd>珠海</dd>
			<dd>杭州</dd>
		</dl>
		
	</body>
</html>

表格标签

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>
	<body>
		<!-- 表格table
		 行 tr
		 列	td
		 
		 -->
		
		<table border="1px" >
			<tr>
				<!-- colspan 跨列 -->
				<td colspan="4">1-1</td>
			</tr>
			<tr>
				<!-- rowspan 跨行 -->
				<td rowspan="2">2-1</td>
				<td>2-2</td>
				<td>2-3</td>
				<td>2-4</td>
			</tr>
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<td>3-3</td>
			</tr>
		</table>
		
		
		
	</body>
</html>

媒体元素

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>媒体元素</title>
	</head>
	<body>
		<!-- 音频和视频 
		src 资源路径
		controls控制条
		autoplay 自动播放
		-->
		
		<video src="./Resource/video/c336626706ed2eb760c69de02bda6b4a.mp4" controls="" autoplay=""></video>
		
		
		<audio src="./Resource/audio/天門%20-%20桜花抄%20(樱花抄).mp3" controls="" autoplay=""></audio>
		
		
	
	</body>
</html>

页面结构分析

  • header
  • footer
  • section
  • article
  • aside
  • nav （导航类辅助内容）

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面结构分析</title>
	</head>
	<body>
		<header>
			<h2>网页头部</h2>
		</header>
		
		
		<section>
			<h2>网页主体</h2>
		</section>
		
		
		
		<footer>
			<h2>网页脚部</h2>
		</footer>
		
		
	</body>
</html>

iframe内联框架

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内联框架</title>
	</head>
	<body>
		<!-- iframe内联框架
		 src 地址
		 width 宽
		 height 高
		 name 框架标识名
		 -->
		
		<iframe src="https://www.qqmusic.com" width="1000px" height="1000px"></iframe>
		
		
		<iframe src="" name="hello" width="1000px" height="1000px"></iframe>
		<a href="图像标签.html" target="hello">点击跳转</a>
		
		
		
		<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
		
	</body>
</html>

初识表单post和get提交

表单form提交方式

  • get提交方式：我们可以在url中看到我们提交的信息，不安全，但高效
  • post提交方式：比较安全，可以传输大文件

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置，可以是网站，也可以是一个请求处理地址
		 
		 -->
		<form action="我的第一个网页.html" method="post">
			<!-- input type="text" 文本输入框 -->
			<p>名字：<input type="text" name="username" id="" value="" /></p>
			<!-- input type="password" 密码框 -->
			<p>密码：<input type="password" name="pwd" id="" value="" /></p>
			
			
			
			<input type="submit" />
			<input type="reset" />
			
		</form>
		
		
	</body>
</html>

文本框和单选框

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置，可以是网站，也可以是一个请求处理地址
		 
		 -->
		<form action="我的第一个网页.html" method="get">
			<!-- input type="text" 文本输入框
			value 初始值
			maxlength 最大字符长度
			size 文本框长度
			-->
			<p>名字：<input type="text" name="username" id="" value="狂神好帅" maxlength="8" size="30"/></p>
			<!-- input type="password" 密码框 -->
			<p>密码：<input type="password" name="pwd" id="" value="" /></p>
			
			<!-- 单选框 radio 
				name 一样代表同一个组
				value 单选框的值
			 -->
			<p>性别：
			<input type="radio" name="sex" id="" value="boy" />男
			<input type="radio" name="sex" id="" value="girl" />女
			</p>
			
			
			<p>
			<input type="submit" />
			<input type="reset" />
			</p>
		</form>
		
		
	</body>
</html>

按钮和多选框

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置，可以是网站，也可以是一个请求处理地址
		 
		 -->
		<form action="我的第一个网页.html" method="get">
			<!-- input type="text" 文本输入框
			value 初始值
			maxlength 最大字符长度
			size 文本框长度
			-->
			<p>名字：<input type="text" name="username" id="" value="狂神好帅" maxlength="8" size="30"/></p>
			<!-- input type="password" 密码框 -->
			<p>密码：<input type="password" name="pwd" id="" value="" /></p>
			
			<!-- 单选框 radio 
				name 	name一样代表同一个组
				value 单选框的值
			 -->
			<p>性别：
			<input type="radio" name="sex" id="" value="boy" />男
			<input type="radio" name="sex" id="" value="girl" />女
			</p>
			
			<!-- 多选框	checkbox
				name 	name一样代表同一个组
			 -->
			<p>爱好：
				<input type="checkbox" name="hobby" id="" value="sleep" />睡觉
				<input type="checkbox" name="hobby" id="" value="code" />敲代码
				<input type="checkbox" name="hobby" id="" value="chat" />聊天
				<input type="checkbox" name="hobby" id="" value="game" />打游戏
			</p>
			
			<!-- 按钮 
			type="button"	普通按钮
			type="image"	图片按钮
			type="submit"	提交按钮
			type="reset"	重置按钮
			-->
			<p>按钮：
				<input type="button" name="btn1" id="" value="点击变长" />
				<!-- 图片按钮 -->
				<input type="image" src="./Resource/image/39.jpg" />
			</p>
			
			
			
			<p>
			<input type="submit" />
			<input type="reset" />
			</p>
		</form>
		
		
	</body>
</html>

列表框文本域和文件域

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置，可以是网站，也可以是一个请求处理地址
		 
		 -->
		<form action="我的第一个网页.html" method="get">
			<!-- input type="text" 文本输入框
			value 初始值
			maxlength 最大字符长度
			size 文本框长度
			-->
			<p>名字：<input type="text" name="username" id="" value="狂神好帅" maxlength="8" size="30"/></p>
			<!-- input type="password" 密码框 -->
			<p>密码：<input type="password" name="pwd" id="" value="" /></p>
			
			<!-- 单选框 radio 
				name 	name一样代表同一个组
				value 单选框的值
			 -->
			<p>性别：
			<input type="radio" name="sex" id="" value="boy" checked=""/>男
			<input type="radio" name="sex" id="" value="girl" />女
			</p>
			
			<!-- 多选框	checkbox
				name 	name一样代表同一个组
			 -->
			<p>爱好：
				<input type="checkbox" name="hobby" id="" value="sleep" />睡觉
				<input type="checkbox" name="hobby" id="" value="code" checked=""/>敲代码
				<input type="checkbox" name="hobby" id="" value="chat" />聊天
				<input type="checkbox" name="hobby" id="" value="game" />打游戏
			</p>
			
			<!-- 按钮 
			type="button"	普通按钮
			type="image"	图片按钮
			type="submit"	提交按钮
			type="reset"	重置按钮
			-->
			<p>按钮：
				<input type="button" name="btn1" id="" value="点击变长" />
				<!-- 图片按钮 -->
				<input type="image" src="./Resource/image/39.jpg" />
			</p>
			
			<!-- 下拉框，列表框
			 -->
			<p>国家：
				<select name="列表名称">
					<option value ="china">中国</option>
					<option value ="us">美国</option>
					<option value ="ruishi" selected="">瑞士</option>
					<option value ="yindu">印度</option>
				</select>
			</p>
			
			<!-- 文本域
			 -->
			<p>反馈：
				<textarea name="textarea" rows="10" cols="50">文本内容</textarea>
			</p>
			
			<!-- 文件域 -->
			<p>
				<input type="file" name="files" id="" value="" />
				<input type="button" name="upload" value="上传"/>
			</p>
			
			
			
			
			
			<p>
			<input type="submit" />
			<input type="reset" />
			</p>
		</form>
		
		
	</body>
</html>

搜索框滑块和简单验证

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置，可以是网站，也可以是一个请求处理地址
		 
		 -->
		<form action="我的第一个网页.html" method="get">
			<!-- input type="text" 文本输入框
			value 初始值
			maxlength 最大字符长度
			size 文本框长度
			-->
			<p>名字：<input type="text" name="username" id="" value="狂神好帅" maxlength="8" size="30"/></p>
			<!-- input type="password" 密码框 -->
			<p>密码：<input type="password" name="pwd" id="" value="" /></p>
			
			<!-- 单选框 radio 
				name 	name一样代表同一个组
				value 单选框的值
			 -->
			<p>性别：
			<input type="radio" name="sex" id="" value="boy" checked=""/>男
			<input type="radio" name="sex" id="" value="girl" />女
			</p>
			
			<!-- 多选框	checkbox
				name 	name一样代表同一个组
			 -->
			<p>爱好：
				<input type="checkbox" name="hobby" id="" value="sleep" />睡觉
				<input type="checkbox" name="hobby" id="" value="code" checked=""/>敲代码
				<input type="checkbox" name="hobby" id="" value="chat" />聊天
				<input type="checkbox" name="hobby" id="" value="game" />打游戏
			</p>
			
			<!-- 按钮 
			type="button"	普通按钮
			type="image"	图片按钮
			type="submit"	提交按钮
			type="reset"	重置按钮
			-->
			<p>按钮：
				<input type="button" name="btn1" id="" value="点击变长" />
				<!-- 图片按钮 -->
				<input type="image" src="./Resource/image/39.jpg" />
			</p>
			
			<!-- 下拉框，列表框
			 -->
			<p>国家：
				<select name="列表名称">
					<option value ="china">中国</option>
					<option value ="us">美国</option>
					<option value ="ruishi" selected="">瑞士</option>
					<option value ="yindu">印度</option>
				</select>
			</p>
			
			<!-- 文本域
			 -->
			<p>反馈：
				<textarea name="textarea" rows="10" cols="50">文本内容</textarea>
			</p>
			
			<!-- 文件域 -->
			<p>
				<input type="file" name="files" id="" value="" />
				<input type="button" name="upload" value="上传"/>
			</p>
			
			
			<!-- 邮件验证 -->
			<p>邮箱：
				<input type="email" name="email" id="" value="" />
			</p>
			
			<!-- URL验证 -->
			<p>URL：
				<input type="url" name="url" id="" value="" />
			</p>
			
			<!-- 数字验证 -->
			<p>数字：
				<input type="number" name="num" max="100" min="0" step="10" id="" value="" />
			</p>
			
			<!-- 滑块 -->
			<p>滑块：
				<input type="range" name="voice" max="100" min="0" step="10" id="" value="" />
			</p>
			
			<!-- 搜索框 -->
			<p>搜索：
				<input type="search" name="search" id="" value="" />
			</p>
			
			
			<p>
			<input type="submit" />
			<input type="reset" />
			</p>
		</form>
		
		
	</body>
</html>

表单的应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置，可以是网站，也可以是一个请求处理地址
		 
		 -->
		<form action="我的第一个网页.html" method="get">
			<!-- input type="text" 文本输入框
			value 初始值
			maxlength 最大字符长度
			size 文本框长度
			readonly 只读
			-->
			<p>名字：<input type="text" name="username" id="" value="狂神好帅" readonly="" maxlength="8" size="30"/></p>
			<!-- input type="password" 密码框 
			hidden 隐藏域
			-->
			<p>密码：<input type="password" name="pwd" id="" value="" hidden=""/></p>
			
			<!-- 单选框 radio 
				name 	name一样代表同一个组
				value 单选框的值
				disabled 禁用
			 -->
			<p>性别：
			<input type="radio" name="sex" id="" value="boy" checked="" disabled=""/>男
			<input type="radio" name="sex" id="" value="girl" />女
			</p>
			
			<!-- 多选框	checkbox
				name 	name一样代表同一个组
			 -->
			<p>爱好：
				<input type="checkbox" name="hobby" id="" value="sleep" />睡觉
				<input type="checkbox" name="hobby" id="" value="code" checked=""/>敲代码
				<input type="checkbox" name="hobby" id="" value="chat" />聊天
				<input type="checkbox" name="hobby" id="" value="game" />打游戏
			</p>
			
			<!-- 按钮 
			type="button"	普通按钮
			type="image"	图片按钮
			type="submit"	提交按钮
			type="reset"	重置按钮
			-->
			<p>按钮：
				<input type="button" name="btn1" id="" value="点击变长" />
				<!-- 图片按钮 -->
				<input type="image" src="./Resource/image/39.jpg" />
			</p>
			
			<!-- 下拉框，列表框
			 -->
			<p>国家：
				<select name="列表名称">
					<option value ="china">中国</option>
					<option value ="us">美国</option>
					<option value ="ruishi" selected="">瑞士</option>
					<option value ="yindu">印度</option>
				</select>
			</p>
			
			<!-- 文本域
			 -->
			<p>反馈：
				<textarea name="textarea" rows="10" cols="50">文本内容</textarea>
			</p>
			
			<!-- 文件域 -->
			<p>
				<input type="file" name="files" id="" value="" />
				<input type="button" name="upload" value="上传"/>
			</p>
			
			
			<!-- 邮件验证 -->
			<p>邮箱：
				<input type="email" name="email" id="" value="" />
			</p>
			
			<!-- URL验证 -->
			<p>URL：
				<input type="url" name="url" id="" value="" />
			</p>
			
			<!-- 数字验证 -->
			<p>数字：
				<input type="number" name="num" max="100" min="0" step="10" id="" value="" />
			</p>
			
			<!-- 滑块 -->
			<p>滑块：
				<input type="range" name="voice" max="100" min="0" step="10" id="" value="" />
			</p>
			
			<!-- 搜索框 -->
			<p>搜索：
				<input type="search" name="search" id="" value="" />
			</p>
			
			
			<p>
				<!-- 增强鼠标可用性 -->
				<label for="mark">你点我试试</label>
				<input type="text" name="" id="mark" value="" />
			</p>
			
			
			
			<p>
			<input type="submit" disabled=""/>
			<input type="reset" />
			</p>
		</form>
		
		
	</body>
</html>

表单初级验证

  • placeholder 提示信息
  • required 非空判断
  • pattern 正则表达式（可以上网查找常用正则表达式，不用自己写）

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置，可以是网站，也可以是一个请求处理地址
		 
		 -->
		<form action="我的第一个网页.html" method="get">
			<!-- input type="text" 文本输入框
			value 初始值
			maxlength 最大字符长度
			size 文本框长度
			readonly 只读
			placeholder 提示消息
			required 非空判断
			-->
			<p>名字：<input type="text" name="username" placeholder="请输入用户名" required=""/></p>
			<!-- input type="password" 密码框 
			hidden 隐藏域
			-->
			<p>密码：<input type="password" name="pwd" id="" value="" hidden=""/></p>
			
			<!-- 单选框 radio 
				name 	name一样代表同一个组
				value 单选框的值
				disabled 禁用
			 -->
			<p>性别：
			<input type="radio" name="sex" id="" value="boy" checked="" disabled=""/>男
			<input type="radio" name="sex" id="" value="girl" />女
			</p>
			
			<!-- 多选框	checkbox
				name 	name一样代表同一个组
			 -->
			<p>爱好：
				<input type="checkbox" name="hobby" id="" value="sleep" />睡觉
				<input type="checkbox" name="hobby" id="" value="code" checked=""/>敲代码
				<input type="checkbox" name="hobby" id="" value="chat" />聊天
				<input type="checkbox" name="hobby" id="" value="game" />打游戏
			</p>
			
			<!-- 按钮 
			type="button"	普通按钮
			type="image"	图片按钮
			type="submit"	提交按钮
			type="reset"	重置按钮
			-->
			<p>按钮：
				<input type="button" name="btn1" id="" value="点击变长" />
				<!-- 图片按钮 -->
				<input type="image" src="./Resource/image/39.jpg" />
			</p>
			
			<!-- 下拉框，列表框
			 -->
			<p>国家：
				<select name="列表名称">
					<option value ="china">中国</option>
					<option value ="us">美国</option>
					<option value ="ruishi" selected="">瑞士</option>
					<option value ="yindu">印度</option>
				</select>
			</p>
			
			<!-- 文本域
			 -->
			<p>反馈：
				<textarea name="textarea" rows="10" cols="50">文本内容</textarea>
			</p>
			
			<!-- 文件域 -->
			<p>
				<input type="file" name="files" id="" value="" />
				<input type="button" name="upload" value="上传"/>
			</p>
			
			
			<!-- 邮件验证 -->
			<p>邮箱：
				<input type="email" name="email" id="" value="" />
			</p>
			
			<!-- URL验证 -->
			<p>URL：
				<input type="url" name="url" id="" value="" />
			</p>
			
			<!-- 数字验证 -->
			<p>数字：
				<input type="number" name="num" max="100" min="0" step="10" id="" value="" />
			</p>
			
			<!-- 滑块 -->
			<p>滑块：
				<input type="range" name="voice" max="100" min="0" step="10" id="" value="" />
			</p>
			
			<!-- 搜索框 -->
			<p>搜索：
				<input type="search" name="search" id="" value="" />
			</p>
			
			
			<p>
				<!-- 增强鼠标可用性 -->
				<label for="mark">你点我试试</label>
				<input type="text" name="" id="mark" value="" />
			</p>
			
			<p>自定义邮箱：
				<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" id="" value="" />
			</p>
			
			<p>
			<input type="submit" disabled=""/>
			<input type="reset" />
			</p>
		</form>
		
		
	</body>
</html>
喝口茶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础知识
12-20
HTML前端网页设计的一些小知识，非常适合初学者学习，
html网页基本信息
m0_62422087的博客
05-16 242
HTML基础笔记和代码【观看自狂神说】自己写的
1.HTML基础
SinceSpringOnU的博客
02-14 543
一、基本语法 1.HTML（超文本标记语言） 2.HTML特点 1.不需要编译，直接由浏览器执行 2.HTML是一个文本文件 3.HTML文件必须使用html或者htm为文件名后缀 4.HTML大小写不敏感 二、基本结构 <html> <head> <title>标题</title> </head...
HTML5学习（三）
jule_zhou的博客
06-30 200
二、十七个表单元素 1、文本框： 2、密码框： 3、单选框： 4、使用场景：多个选项最多只能选择一项 5、复选框： 6、使用场景：多个选项可以选择多个 7、文件域： 8、邮件框： 备注：若输入内容，当提交表单时，会自动校验内容是否符合邮箱格式 10、数字框： 11、滑块： 使用场景：进度展示、长度展示 使用场景：多个选项组合为一个结果时，使用下拉列表，如：年月日、地址、级联菜单等联合选项 13、日期框： 年月日： 年月日时分秒 14、文本域： 三、按钮 1、普通按钮： 备注：
web、css、HTML学习笔记
gosickkiss的博客
11-01 240
WEB WEB Basic :HTML + CSS + JavaScript Django： =========================================================================================== 1.WEB 1. 什么是WEB web就是互联网上的一种应用程序 -网页 典型的应用： 1. C/S Client：客户端 Server：服务端 2.B/S Browser：浏.
HTML5高级之多媒体（视频、音频）
maoye的博客
09-29 534
  视频处理  Video     Video  元素 --Video元素可以进行简单的视频播放功能，这个元素只有几个属性，包括属性和默认设置 --Video元素中可以包含source元素，这些元素为浏览器提供了不同是视频源，浏览器根据source标签，然后根据所支持的格式，选择播放的文件 语法： &lt;video id = "medios" width = "300"&gt; ...
html基础
02-20
html基础
如何配置HTML5标签来播放音频（手工翻译学习资料，含javascript脚本示例）
weixin_41881671的博客
08-31 379
将音频添加到网页的主要方法是使用音频元素。与许多新的HTML5支持一样，音频元素使您能够使用错误消息或另一种回放技术返回，如果用户的浏览器不支持HTML5音频元素，就像旧浏览器的情况一样。您可以在音频标记之间放置一条错误消息，如下面的例子所示，或者为外部播放器控件插入代码，比如Silverlight浏览器插件。下面的代码示例展示了一个播放音频文件的简单网页。 &lt;!DOCTYPE HTML&...
HTML常用知识点
qq_48984634的博客
04-04 154
实体 Document 今天         天气不错 ## 第一个test
HTML入门学习 -- HTML5 视频与音频
weixin_30679823的博客
11-10 104
HTML5教程参见 http://www.w3school.com.cn/html5/index.asp HTML5对视频音频提供了原生支持，对图形图像也大大加强（除了IE10明确不支持WebGL以外，其它新的浏览器基本都支持Canvas、SVG、WebGL三种图形渲染方法) <!doctypehtml><html><head><tit...
HTML5基础
qq_731445005的博客
09-27 823
HTML介绍 什么是HTML HTML(Hyper Text Markup Language):超文本标记语言，一种纯文本类型的语言 用该语言编写的文件，以.html或者.htm为后缀，由浏览器解释执行 HTML页面上，可以嵌套用脚本语言编写的程序段，如：JAVASCRIPT Web浏览器 主要功能：代理访问者提供请求，作为HTML解释器和内嵌脚本程序执行器，用图形化的方式显示HTML...
Java Web之html讲解(1)一些基础标签html,head,body,meta,title,script,div,ul,ol,li,a的用法和class,href,charset,src简讲
ITxiaoangzai的博客
11-09 1727
    一：&lt;!DOCTYPE html&gt;,&lt;html&gt;,&lt;head&gt;,&lt;body&gt;,&lt;meta&gt;,&lt;title&gt;,&lt;script&gt;,&lt;div&gt;,&lt;ul&gt;,&lt;li&gt;与&lt;a&gt;标签的使用 1.&am
html中的标签介绍
weixin_49722641的博客
08-14 153
新建html文件 <!DOCTYPE html> <!--以最新规范解析--> <!--标签可以嵌套,但是不可以交叉嵌套,属性可以加在开始标签内<h1 id="xiaofeng">用于定位--> <html lang="en"> <head> <!--页面看不到的东西--> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"&gt
HTML 5 文本标记语言
ZXY_Hobby的博客
09-12 306
formdata对象 FormData对象就是一张虚拟的表单，我们可以在FormData对象中添加一些键值对进去，然后将整个FormData作为表单提交到服务器。优点是实现异步上传二进制文件。 1. 创建formdata对象， 2. 传递参数 方式一： Ajax传输数据时，formdata对象的append方法添加键值对 方式二： XMLHttpRequest的send()方法发送表单数据v
前端---HTML基础知识（详细）---基本常用标签
weixin_51351637的博客
07-07 703
B/S架构： Browser/Server 浏览器/服务器交互形式 Browser支持HTML、css、JS Server支持C、C++、Java 优点： 升级方便，只升级服务器代码即可； 维护成本低 缺点： 速度慢；体验不好；界面不炫酷例如：百度页面，各种网站C/S架构： Client/Server 客户端/服务器端交互形式 优点：虚度快，体验好，界面炫酷 缺点：升级麻烦，维护成本高例如：
HTML常见标签-换行标签-水平线标签
最新发布
weixin_44201223的博客
05-14 29
换行标签 水平线标签
html基础手册下载
12-31
你可以在网上找到很多关于HTML基础手册的下载资源。可以在搜索引擎上输入关键词“HTML基础手册下载”，然后浏览搜索结果找到适合自己的下载链接。同时，你也可以在一些知名的学术网站或者技术论坛上寻找HTML基础手册的下载资源，通常这些网站提供的资源更加权威和可靠。 另外，一些在线教育平台也会提供HTML基础手册的下载服务，如果你愿意在线学习，可以考虑在这些平台上搜索相关资源。此外，你还可以直接访问一些技术社区或者开发者论坛，这些地方通常都会有人分享HTML基础手册的下载链接。 当然，如果你更喜欢实体书籍，可以考虑购买一本关于HTML基础的书籍，这样不仅可以得到手册的内容，还可以拥有实体书的收藏价值。总的来说，无论是在线资源还是实体书籍，都有很多途径可以获取到HTML基础手册的下载或购买信息，希望你能找到适合自己的方式获取这份资料，加油！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值