Selcouther

HTML超文本标记语言入门基础知识

文章目录

基本概念
- HTML 标签
- 注释
- 转义符号
HTML文档基本结构
HTML中常用标签
- 标签分类
- - 常用的布局组合标签
- 一、文本标签
- 二、图片标签
- 三、列表标签
- 四、定义描述标签及布局标签
- 五、超链接标签
- - 页面间跳转
  - 锚链接
- 六、表格标签
- - 规则表格
  - 不规则表格
  - 表格标签
表单☆

表单属性
表单
表单元素

一、元素（输入类型）☆
- 输入限制
- 标签
- 1、文本text
- 2、密码password
- 3、单选按钮radio
- 4、复选框checkbox
- 5、文件域
- 6、按钮
- - ① 提交数据至程序submit
  - ② 重置数据reset
  - ③ 普通按钮button
- 7、隐藏域
HTML5新增输入类型
- 8、数值number
- 9、滑块输入range
- 10、日期
- - ①date
  - ② datetime
  - ③ datetime-local
  - month
  - week
  - time
- 11、邮箱email
- 12、颜色color
- 13、电话tel
- 14、地址url
- 15、搜索search

二、

元素（文本域）</li> 
 <li>四、 <bottom> 元素</li> 
 <li> 
 <ul> 
 <li>① 提交数据至程序submit</li> 
 <li>② 重置数据reset</li> 
 <li>③ 普通按钮button</li> 
 </ul> </li> 
 </ul> </li> 
 <li>HTML5 新增表单元素</li> 
 <li> 
 <ul> 
 <li>datalist</li> 
 <li> 
 <ul> 
 <li> 
 <ul> 
 <li></li> 
 </ul> </li> 
 </ul> </li> 
 </ul> </li> 
 </ul> </li> 
 <li>框架</li> 
 <li>HTML5中其它新增</li> 
 <li> 
 <ul> 
 <li>语义标签</li> 
 <li>音频</li> 
 <li>视频</li> 
 </ul> </li> 
 </ul> 
 </div> 
 
 <hr> 
 <h1>基本概念</h1> 
 HTML（HyperText Markup Language），超文本标记语言，是用来描述网页的一种语言 
 HTML运行在浏览器上，通过浏览器解析，不区分大小写（建议全部小写） 
 HTML文档中包含HTML标签和纯文本，用来描述网页，因此HTML文档=网页 
 <ul> 
 <li> html文档的后缀名 .html和.htm都可以，没有区别 </li> 
 <li> HTML是用于创建网页、由标签构成的标记语言，不是编程语言 </li> 
 <li> 标记语言是一套标记标签 (markup tag) </li> 
 <li> HTML 使用标记标签来描述网页 </li> 
 </ul> 
 <h2>HTML 标签</h2> 
 HTML 标签，即HTML标记标签 
 HTML标签是由尖括号包围的关键词，比如 <html>，标签通常成对出现，比如 和 
 标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签 
 <ul> 
 <li> 标签的分类 1、围堵标签：有开始标签和结束标签，例如 <html></html> 2、自闭和标签：只有一个标签 </li> 
 <li> 标签的书写 可以嵌套，但是嵌套的语法要正确 内部可以定义属性，属性由键值对组成（值需用双引号引起来），多个属性用空格隔开 </li> 
 </ul> 
 <h2>注释</h2> 
 以<!-- 开头 ，- ->结尾 
 代码示例： 
 <pre><code class="prism language-html"><!--
这里编写HTML注释，
可以是一行，也可以是多行

标签的书写：
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
-->

<p id="p1" name="p1"> </p>
</code></pre> 
 <hr> 
 <h2>转义符号</h2> 
 <table> 
 <thead> 
 <tr> 
 <th>转移符号</th> 
 <th>描述</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td> </td> 
 <td>转义为空格</td> 
 </tr> 
 <tr> 
 <td><</td> 
 <td>转义为小于号<</td> 
 </tr> 
 <tr> 
 <td>≤</td> 
 <td>转义为小于等于号≤</td> 
 </tr> 
 <tr> 
 <td>></td> 
 <td>转义为大于号></td> 
 </tr> 
 <tr> 
 <td>≥</td> 
 <td>转义为大于等于号≥</td> 
 </tr> 
 <tr> 
 <td>©</td> 
 <td>转义为版权符号 ©</td> 
 </tr> 
 </tbody> 
 </table> 
 <hr> 
 <h1>HTML文档基本结构</h1> 
 代码示例： 
 <pre><code class="prism language-html"><!DOCTYPE html>

</html>
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/8a44e9298b834e8d81851ac49f791679.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8a44e9298b834e8d81851ac49f791679.jpg" alt="HTML超文本标记语言入门基础知识_第1张图片" width="370" height="161" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 <h1>HTML中常用标签</h1> 
 <h2>标签分类</h2> 
 html标签可以分为块状元素和行级元素两类： 
 <table> 
 <thead> 
 <tr> 
 <th>块状元素</th> 
 <th>行内元素：</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>独占一行，宽度自动填满其父元素宽度</td> 
 <td>排列到同一行里，宽度随元素的内容变化而变化</td> 
 </tr> 
 <tr> 
 <td>可以设置宽高</td> 
 <td>设置宽高无效</td> 
 </tr> 
 <tr> 
 <td>可以设置margin、padding属性</td> 
 <td>水平方向的padding会有边距效果，但是竖直方向的padding没有效果</td> 
 </tr> 
 </tbody> 
 </table> 
 <pre><code class="prism language-html">基本术语：

块状元素：独占一行，可以设置宽高
			标题标签 h1-h6,
			段落标签 p ,
			水平线标签 hr,
			有序列表标签 ol--li，
			无序列表标签 ul--li，
			定义描述标签 dl-dt-dd，
			容器标签 div：
			
	行级元素：...，不能设置宽高
			span范围标签
			img图像标签	
</code></pre> 
 <h3>常用的布局组合标签</h3> 
 <ul> 
 <li>导航布局 div-ul-li/div-ol-li</li> 
 <li>图文混编布局 div-dl-dt-dd</li> 
 <li>表单布局 div-form</li> 
 <li>局部规则数据展示布局 div-table</li> 
 </ul> 
 <hr> 
 <h2>一、 文本标签</h2> 
 <table> 
 <thead> 
 <tr> 
 <th>标签名</th> 
 <th>写法</th> 
 <th>用处</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>标题标签</td> 
 <td><h1></h1></td> 
 <td>一般用在文章的标题上，h1~h6字体逐渐缩小</td> 
 </tr> 
 <tr> 
 <td>段落标签</td> 
 <td></td> 
 <td>一般用于正文</td> 
 </tr> 
 <tr> 
 <td>换行标签</td> 
 <td> </td> 
 <td>在段落中换行</td> 
 </tr> 
 <tr> 
 <td>水平线标签</td> 
 <td><hr/></td> 
 <td>一般用来分隔内容</td> 
 </tr> 
 <tr> 
 <td>范围标签</td> 
 <td></td> 
 <td>一般为了突出部分内容、改变局部内容的时候使用，一般嵌套在其他的标签中使用</td> 
 </tr> 
 </tbody> 
 </table> 
 代码示例： 
 <pre><code class="prism language-html"><!DOCTYPE html>

<head>
		<meta charset="utf-8" />
		<title>文本标签</title>
	</head>
	
	
	<body>
		
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		
		
		<hr />
		
		
		
		<hr color="bisque" size="8" />
		
		
		<h4>段落测试</h4>
		<p>锄禾<span style="color: red;">日</span>当午</p>
		<p>汗滴禾下土</p>
		
		<p>谁知盘中餐<br />粒粒皆辛苦</p>
	
		
		<hr />
	</body>
	
</html>

</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/89ec9fcb15054a9d8eeb5a98f620b893.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/89ec9fcb15054a9d8eeb5a98f620b893.jpg" alt="HTML超文本标记语言入门基础知识_第2张图片" width="650" height="448" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 <h2>二、 图片标签</h2> 
 <pre><code class="prism language-html"><img src ="" />

src:图片的路径(推荐相对路径，即工程img包中的图片，../表示上一级目录)    
		title：[独有属性]
			鼠标移到图片上时显示文字
			图片无法显示时，显示文字
		width:宽度（以px结尾，或者设置为占屏的百分比）
		height:高度

</code></pre> 
 代码示例： 
 <pre><code class="prism language-html"><!DOCTYPE html>

<head>
		<meta charset="utf-8" />
		<title>图片标签</title>
	</head>
	
	
	<body>
			
			
		<img src ="../../img/小奶猫1.JPG" width="500px"/>
		
		
		<img src = "../../img/小奶猫2.JPG" title="嘿嘿"/ height="500px">
			
			
			
		
		<img src="../../img/思考人生的猫.JPG" width="500px" usemap="#myMap" />
		<map name="myMap">
			
			<area shape="circle" coords="300,300,300" href="文本标签.html" title="常用标签"/>
			
			<area shape="rect" coords="400,100,600,200" href="文本标签.html" title="还是常用标签" />
		</map>
		
	</body>

</html>
</code></pre> 
 页面显示： 
 此时点击第三张图的以（100,100）为圆心，100位半径的圆形区域或者以（400,100）（600,200）围成的矩形区域，会跳转到文本标签.html 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/6c72abe391c5440f9d9172fba9373eb6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6c72abe391c5440f9d9172fba9373eb6.jpg" alt="HTML超文本标记语言入门基础知识_第3张图片" width="650" height="246" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 <h2>三、 列表标签</h2> 
 一般用在导航上 
 有序标签： 
 <pre><code class="prism language-html"><ol>
	<li>标签1</li>
	<li>标签2</li>
	<li>标签3</li>
	<li>标签4</li>
	<li>标签5</li>
</ol>
</code></pre> 
 无序标签： 
 <pre><code class="prism language-html"><ul>
	<li>标签1</li>
	<li>标签2</li>
</ul>
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html"><!DOCTYPE html>

<head>
		<meta charset="utf-8" />
		<title>列表标签</title>
	</head>
	
	
	<body>
			
		<h1>无序列表</h1>
		
		<ul>
			<li>无序标签1</li>
			<li>无序标签2</li>
			<li>无序标签3</li>
			<li>无序标签4</li>
			<li>无序标签5</li>
		</ul>
		
		
		<h1>有序列表</h1>
		
		<ol>
			<li>有序标签1</li>
			<li>有序标签2</li>
			<li>有序标签3</li>
			<li>有序标签4</li>
			<li>有序标签5</li>
		</ol>
		
	</body>
</html>

</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/9026aa20fd0c410e823602e21d4eba04.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9026aa20fd0c410e823602e21d4eba04.jpg" alt="HTML超文本标记语言入门基础知识_第4张图片" width="650" height="413" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 <h2>四、 定义描述标签及布局标签</h2> 
 定义描述标签： 
 一般用于图文的描述中 
 <pre><code class="prism language-html"><dl>
	<dt>标题</dt>
	<dd>描述1</dd>
	<dd>描述2</dd>
</dl>
</code></pre> 
 布局标签： 
 一般作为容器，盛放其他标签 
 <pre><code class="prism language-html"><div></div>
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html"><!DOCTYPE html>

</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/fa8dc70be52b4ac7a83a0af80748e505.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fa8dc70be52b4ac7a83a0af80748e505.jpg" alt="HTML超文本标记语言入门基础知识_第5张图片" width="650" height="422" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 <h2>五、 超链接标签</h2> 
 <ul> 
 <li>作用 实现页面间的跳转 实现锚链接</li> 
 </ul> 
 <h3>页面间跳转</h3> 
 <pre><code class="prism language-html"><a href="" target=""></a>
	href:路径、网址均可
	target：目标		
		self：当前页面打开（默认）
		blank：新页面打开
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html"><!DOCTYPE html>

</body>
</html>

</code></pre> 
 页面显示： <a href="http://img.e-com-net.com/image/info8/72d7deb30aeb4434825bd271af58a207.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/72d7deb30aeb4434825bd271af58a207.jpg" alt="HTML超文本标记语言入门基础知识_第6张图片" width="650" height="214" style="border:1px solid black;"></a> 
 <hr> 
 <h3>锚链接</h3> 
 当一个页面长度超过一屏时，跳转到指定位置 
 这个定位可以实现本页面间的锚链接也可以实现不同页面间的锚链接 
 <pre><code class="prism language-html">目标位置，定义锚点：
<a name = "锚点名称"></a>

超链接跳转到定义的目标位置：
<a href = "锚点名称" target = "">自定义锚链接名称</a>
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html"><!DOCTYPE html>

<head>
		<meta charset="utf-8" />
		<title>锚链接</title>
	</head>
	
	
	<body>
		
		
		
		
		<a href = "#point3" target="_self">跳转至本网页的模块3</a>
		<br />
		<br />
		<a href = "超链接标签2.html#point3" target="_self">跳转至另一网页的模块333</a>
		
		
		<div style="height: 300px; background: lavender;">
			模块1
		</div>
		<div style="height: 300px; background: peachpuff;">
			模块2
		</div>
		<div style="height: 300px; background: lemonchiffon;">
			<a name = "point3"></a>
			模块3
		</div>

</body>

</html>

</code></pre> 
 页面显示： 
 当点击第一个超链接时，网页进度条下拉，模块3完全显示 
 另一网页与当前页面一模一样，点击第二个超链接时跳转到另一网页并进度条下拉至模块3 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/a405cfbd53e140358daf6d5edfe03815.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a405cfbd53e140358daf6d5edfe03815.jpg" alt="HTML超文本标记语言入门基础知识_第7张图片" width="650" height="345" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 浏览器显示的内容都在body编写，因此之后的代码块仅为body部分 
 <h2>六、 表格标签</h2> 
 <h3>规则表格</h3> 
 <pre><code class="prism language-html"><table>
	<tr>行
		<th></th>列（一般表头单元格）
	</tr>	
	<tr>行
		<td></td>列（一般内容单元格）
	</tr>		
</table>
------------------------------------------			
			table:
				如果没有设置宽高，大小则按内容来定
				border:边框
				width：%占据页面的比例；实际高度px
				cellpadding：内容距边线的距离
				cellspacing：单元格与单元格之间的距离
			tr：（行）
				align:文本水平方向的位置left、center、right
				valign:文本垂直
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html">				
		<h1>规则表格</h1>
		<table border="1" width="100%" height="200px" bgcolor="papayawhip" cellpadding="10" cellspacing="">
			<tr align="center" valign="">
				<th>序号</th><th>商品名称</th><th>价格</th>
			</tr>	
			<tr>
				<td>1</td><td>曲奇</td><td>100</td>
			</tr>	
			<tr>
				<td>2</td><td>饼干</td><td>200</td>
			</tr>	
		</table>	
		
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/73bc5b09cef3457d8eb02589144549ac.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/73bc5b09cef3457d8eb02589144549ac.jpg" alt="HTML超文本标记语言入门基础知识_第8张图片" width="650" height="269" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 <h3>不规则表格</h3> 
 在规则表格的基础上添加行列的合并 
 <pre><code class="prism language-html">不规则表格（跨行跨列等，即合并单元格）
	colspan:跨列，即合并后面的表格
	rowspan：跨行
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html">		<h1>不规则表格</h1>
		
		<table border="1" width="100%" height="200px" bgcolor="papayawhip" cellpadding="10" cellspacing="">
			<tr>
				<td colspan="3" align="center">个人简历</td>
			</tr>		
			<tr>
				<td>姓名</td><td>憨憨</td><td rowspan="3" align="center">照片</td>
			</tr>
			<tr>
				<td>性别</td><td>女</td>
			</tr>
			<tr>
				<td>年龄</td><td>20</td>
			</tr>
		</table>	
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/02610211ee3847b8910145a0e31b2453.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/02610211ee3847b8910145a0e31b2453.png" alt="HTML超文本标记语言入门基础知识_第9张图片" width="701" height="303" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 <h3>表格标签</h3> 
 标题标签、逻辑分区标签 
 <pre><code class="prism language-html">标题标签：<caption></caption>

逻辑分区标签：方便区分和整体控制
			<thead></thead>表的标题
			<tbody></tbody>表的内容
			<tfoot></tfoot>表的总结内容
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html">		<h1>高级标签</h1>
		<p>标题标签和逻辑分区标签</p>
		
		<table border="1" width="100%" height="200px" bgcolor="papayawhip" cellpadding="10" cellspacing="">
			<caption>资产负债表</caption>
			<thead style="background: papayawhip;">
				<tr align="center" valign="">
					<th>月份</th><th>负债</th>
				</tr>	
			</thead>

<tbody style="background: peachpuff;">
				<tr>
					<td>1月</td><td>1w</td>
				</tr>	
				<tr>
					<td>2月</td><td>4w</td>
				</tr>	
			</tbody>
			
			<tfoot style="background: plum;">
				<tr>
					<td>总计</td><td>5w</td>
				</tr>
			</tfoot>
	
		</table>
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/f153d62be6f9409e9f708527e6583edd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f153d62be6f9409e9f708527e6583edd.jpg" alt="HTML超文本标记语言入门基础知识_第10张图片" width="650" height="272" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 <h1>表单☆</h1> 
 <ul> 
 <li>作用 用于采集用户输入的数据 用于与服务器进行交互 （例如账号密码的输入）</li> 
 </ul> 
 <h2>表单属性</h2> 
 所有 <form> 属性的列表 
 <table> 
 <thead> 
 <tr> 
 <th>属性</th> 
 <th>描述</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>accept-charset</td> 
 <td>规定用于表单提交的字符编码</td> 
 </tr> 
 <tr> 
 <td>action</td> 
 <td>规定提交表单时发送到指定的url</td> 
 </tr> 
 <tr> 
 <td>enctype</td> 
 <td>规定将表单数据提交到服务器时应如何编码（表单中有上传的文件时使用,取值为multipart/form-data）</td> 
 </tr> 
 <tr> 
 <td>method</td> 
 <td>规定发送表单数据时要使用的 HTTP 方法，默认为GET</td> 
 </tr> 
 <tr> 
 <td>name</td> 
 <td>规定表单名称</td> 
 </tr> 
 <tr> 
 <td>rel</td> 
 <td>规定链接资源和当前文档之间的关系</td> 
 </tr> 
 <tr> 
 <td>target</td> 
 <td>规定提交表单后在何处显示接收到的响应</td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>HTML5新增</td> 
 <td>------------------------------------------------------------</td> 
 </tr> 
 <tr> 
 <td>autocomplete</td> 
 <td>规定表单或输入字段是否应该自动填写（设置为 on or off）</td> 
 </tr> 
 <tr> 
 <td>novalidate</td> 
 <td>规定提交时不应验证表单</td> 
 </tr> 
 </tbody> 
 </table> 
 GET与POST 
 <table> 
 <thead> 
 <tr> 
 <th>get</th> 
 <th>post</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>提交的表单数据会在地址栏url中显示，会封装到请求行中</td> 
 <td>请求参数不会在地址栏url中显示，会封装到请求体中</td> 
 </tr> 
 <tr> 
 <td>请求参数大小有限制，URL 的长度最大2048 个字符</td> 
 <td>请求参数的大小没有限制，可发送大量数据</td> 
 </tr> 
 <tr> 
 <td>不太安全，适用于非安全数据</td> 
 <td>较为安全，表单数据包含敏感信息或个人信息，请务必使用 POST</td> 
 </tr> 
 </tbody> 
 </table> 
 <hr> 
 <h2>表单 <form></h2> 
 <pre><code class="prism language-html"><form>
	...(内容)
</form>

常用属性
			action:指定提交数据的url
			method:指定提交方式，7种
					get：(没有敏感数据)
						1、请求参数会在地址栏中显示，会封装到请求行中
						2、请求参数大小有限制
						3、不太安全
					post：
						1、请求参数不会在地址栏中显示，会封装到请求体中
						2、请求参数的大小没有限制
						3、较为安全
			enctype:表单中有上传的文件时使用，且取值为multipart/form-data	
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html"><form action="常用标签.html" method="get" enctype="multipart/form-data">

</form>
</code></pre> 
 <hr> 
 <h2>表单元素</h2> 
 表单元素，即不同类型的 input 元素、复选框、单选按钮、提交按钮等等 
 HTML表单包含表单元素，即 <form></form>中的内容 
 下文有关表单元素的代码都默认写在<form>和</form>之间 
 表单元素的属性： 
 <table> 
 <thead> 
 <tr> 
 <th>属性名称</th> 
 <th>描述</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>id</td> 
 <td>元素的唯一表示，不重复</td> 
 </tr> 
 <tr> 
 <td>name</td> 
 <td>表单项元素的名称，数据想要提交，必须指定，提交数据到服务器之后，服务器通过name获取数据</td> 
 </tr> 
 <tr> 
 <td>value</td> 
 <td>表单项元素的值，服务器获取数据通过name获取到的就是value</td> 
 </tr> 
 <tr> 
 <td>type</td> 
 <td>表示表单项元素的input的呈现形式（不是all都有）</td> 
 </tr> 
 <tr> 
 <td>class</td> 
 <td>表示样式名称</td> 
 </tr> 
 <tr> 
 <td>readonly</td> 
 <td>表示只读，只能看不能改</td> 
 </tr> 
 <tr> 
 <td>disabled</td> 
 <td>表示禁用，不能改而且背景是灰色</td> 
 </tr> 
 </tbody> 
 </table> 
 <hr> 
 <h3>一、 <input> 元素（输入类型）☆</h3> 
 最重要的表单元素是<input>元素，根据不同的 type 属性可以变化为多种形态 
 <hr> 
 <h4>输入限制</h4> 
 写在开始标签 
 （一部分为HTML5新增） 
 有些属性不需要值，例如disabled，等同于 disabled=“disabled” 
 <table> 
 <thead> 
 <tr> 
 <th>属性</th> 
 <th>描述</th> 
 <th>适用于</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>disabled</td> 
 <td>输入字段是禁用的，被禁用的元素是不可用和不可点击的，被禁用的元素不会被提交</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>maxlength</td> 
 <td>规定输入字段的最大长度</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>readonly</td> 
 <td>规定输入字段为只读（无法修改）</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>size</td> 
 <td>规定输入字段的宽度（以长度计）</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>value</td> 
 <td>规定输入字段的初始值</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td></td> 
 <td></td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>HTML5新增</td> 
 <td>--------------------------------------------------------------------------------</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>max</td> 
 <td>规定输入字段的最大值</td> 
 <td>number、range、date、datetime、datetime-local、month、time 、 week</td> 
 </tr> 
 <tr> 
 <td>min</td> 
 <td>规定输入字段的最小值</td> 
 <td>number、range、date、datetime、datetime-local、month、time 、 week</td> 
 </tr> 
 <tr> 
 <td>pattern (regexp)</td> 
 <td>规定通过其检查输入值的正则表达式</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>required</td> 
 <td>规定输入字段是必需的（必需填写）</td> 
 <td>text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file</td> 
 </tr> 
 <tr> 
 <td>step</td> 
 <td>规定输入字段的合法数字间隔</td> 
 <td>number、range、date、datetime、datetime-local、month、time 、week</td> 
 </tr> 
 <tr> 
 <td>height</td> 
 <td>高度</td> 
 <td>image</td> 
 </tr> 
 <tr> 
 <td>width</td> 
 <td>宽度</td> 
 <td>image</td> 
 </tr> 
 <tr> 
 <td>autocomplete</td> 
 <td>规定表单或输入字段是否应该自动填写（设置为 on or off）</td> 
 <td>text、search、url、tel、email、password、datepickers、range 、 color</td> 
 </tr> 
 <tr> 
 <td>autofocus</td> 
 <td>布尔属性，如果设置则当页面加载时 <input> 元素自动获得焦点</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>form</td> 
 <td>规定 <input> 元素所属的一个或多个表单，如需引用一个以上的表单，使用空格分隔的表单 id 列表</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>formaction</td> 
 <td>规定当提交表单时处理该输入控件的文件的 URL，属性覆盖 <form> 元素的 action 属性</td> 
 <td>submit、image</td> 
 </tr> 
 <tr> 
 <td>formenctype</td> 
 <td>规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）,覆盖 <form> 元素的 enctype 属性</td> 
 <td>submit、image</td> 
 </tr> 
 <tr> 
 <td>formmethod</td> 
 <td>定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法,覆盖<form> 元素的 method 属性</td> 
 <td>submit、image</td> 
 </tr> 
 <tr> 
 <td>formnovalidate</td> 
 <td>布尔属性,如果设置则在提交表单时不对<input> 元素进行验证，覆盖 <form> 元素的 novalidate 属性</td> 
 <td>submit</td> 
 </tr> 
 <tr> 
 <td>formtarget</td> 
 <td>规定的名称或关键词指示提交表单后在何处显示接收到的响应,覆盖 <form> 元素的 target 属性</td> 
 <td>submit、image</td> 
 </tr> 
 <tr> 
 <td>list</td> 
 <td>list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项</td> 
 <td></td> 
 </tr> 
 <tr> 
 <td>multiple</td> 
 <td>布尔属性,如果设置则允许用户在 <input> 元素中输入一个以上的值</td> 
 <td>email 、 file</td> 
 </tr> 
 <tr> 
 <td>pattern</td> 
 <td>用于检查 <input> 元素值的正则表达式</td> 
 <td>text、search、url、tel、email、 password</td> 
 </tr> 
 <tr> 
 <td>placeholder</td> 
 <td>文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）</td> 
 <td>text、search、url、tel、email 、 password</td> 
 </tr> 
 </tbody> 
 </table> 
 <hr> 
 <h4>标签</h4> 
 <pre><code class="prism language-html"><label for = "">标签名称</label>
	<input type="text" id = "" name = "" placeholder=""/>

id：元素的唯一标识，不推荐重复
	name：表单元素的名称，数据提交时服务器通过name获取value
	placeholder：文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）
	lable中的for与input中的id对应，加了lable之后页面点击用户名后输入框会出现光标

</code></pre> 
 代码示例： 
 <pre><code class="prism language-html"><label for = "username">用户名：</label>
	<input type="text" id = "username" name = "uername" placeholder="请输入用户名"/>
	

			
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/a51c7d6f730146b087464a8799b98689.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a51c7d6f730146b087464a8799b98689.png" alt="在这里插入图片描述" width="231" height="44"></a> 
 </blockquote> 
 <hr> 
 <h4>1、 文本text</h4> 
 <input type=“text”> 定义供文本输入的单行输入字段 
 <pre><code class="prism language-html"><input type="text" id = "" name = "" placeholder=""/>

id：元素的唯一标识，不推荐重复
name：表单元素的名称，数据提交时服务器通过name获取value
placeholder：文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html">用户名：<input type="text" id = "username" name = "uername" />
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/e56192decb6442ed9854483e390c3545.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/e56192decb6442ed9854483e390c3545.png" alt="在这里插入图片描述" width="235" height="40"></a> 当输入内容“用户1”后placeholder中的内容被覆盖 <a href="http://img.e-com-net.com/image/info8/80b7f1f2e50c42c08e8674ce5e7c54b9.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/80b7f1f2e50c42c08e8674ce5e7c54b9.png" alt="在这里插入图片描述" width="229" height="37"></a> 
 </blockquote> 
 <hr> 
 <h4>2、 密码password</h4> 
 <input type=“password”> 定义密码字段 
 <pre><code class="prism language-html"><input type="password" id = "" name = "" placeholder=""/>

id：元素的唯一标识，不推荐重复
name：表单元素的名称，数据提交时服务器通过name获取value
placeholder：文本框中显示的文字（在还没有输入内容的时候显示，输入内容后被覆盖）
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html">密码：<input type="password" id = "password" name = "password" placeholder="请输入密码"/>
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/638dae073e6a4559a4cada2b8e578243.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/638dae073e6a4559a4cada2b8e578243.png" alt="在这里插入图片描述" width="228" height="48"></a> 当输入密码后placeholder中的内容被覆盖 由于是密码，密码内容不会显示 <a href="http://img.e-com-net.com/image/info8/25bcd56e80fb4776b9af18049d49295b.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/25bcd56e80fb4776b9af18049d49295b.png" alt="在这里插入图片描述" width="224" height="37"></a> 
 </blockquote> 
 <hr> 
 <h4>3、 单选按钮radio</h4> 
 <input type=“radio”> 定义单选按钮 
 <pre><code class="prism language-html">

<input type="radio" name = "" value="" />选项名称1
<input type="radio" name = "" value="" />选项名称2

单选按钮：
		一般都是成组出现，name相同表示一组，只能选一个
			name：表单元素的名称，数据提交时服务器通过name获取value
			value：服务器通过name获取到的值
			checked 表示默认选中(一般默认选第一个选项)
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html">性别：<input type="radio" name = "gender" value="男" />男
	<input type="radio" name = "gender" value="女" />女
	<input type="radio" name = "gender" value="未知" checked=""/>未知
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/8dd4522e8aa245d4ab42be54fd54a536.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/8dd4522e8aa245d4ab42be54fd54a536.png" alt="在这里插入图片描述" width="214" height="39"></a> 
 </blockquote> 
 <hr> 
 <h4>4、 复选框checkbox</h4> 
 <input type=“checkbox”> 定义复选框。 
 复选框允许用户在有限数量的选项中选择零个或多个选项 
 <pre><code class="prism language-html"><input type = "checkbox" name = "" value = "" />选项名称1
<input type = "checkbox" name = "" value = "" />选项名称2

复选框 type = "checkbox"
		复选框都是成组出现，name相同表示一组，可以选多个
		value：服务器通过name获取到的值
		checked 表示默认选中(一般默认选第一个选项)
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html">爱好：<input type = "checkbox" name = "hobby" value = "swim" />游泳
	<input type = "checkbox" name = "hobby" value = "sing" />唱歌
	<input type = "checkbox" name = "hobby" value = "dance" />跳舞
	<input type = "checkbox" name = "hobby" value = "read" />看书
	<input type = "checkbox" name = "hobby" value = "sleep" />睡觉
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/ad28d59f7fc341e69dbd492d90bcad55.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/ad28d59f7fc341e69dbd492d90bcad55.png" alt="在这里插入图片描述" width="360" height="42"></a> 
 </blockquote> 
 <hr> 
 <h4>5、文件域</h4> 
 <pre><code class="prism language-html">头像：<input type = "file" name = "" />

头像：<input type = "file" name = "" multiple="multiple"/>

复选框 type = "file"
		name：表单元素的名称，数据提交时服务器通过name获取value
		multiple:允许多选，即同时上传多个文件
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html">头像：<input type = "file" name = "headImg" multiple="multiple"/>
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/b6f5c4bf4a7b49f1b0c883c3cfe8e2f6.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/b6f5c4bf4a7b49f1b0c883c3cfe8e2f6.png" alt="在这里插入图片描述" width="225" height="39"></a> 选择单个文件 <a href="http://img.e-com-net.com/image/info8/c72912f80d414b18a7452bc657d47d02.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c72912f80d414b18a7452bc657d47d02.png" alt="在这里插入图片描述" width="230" height="46"></a> 选择多个文件 <a href="http://img.e-com-net.com/image/info8/d5bcc9c3315c43eb97c5eb16f7076111.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/d5bcc9c3315c43eb97c5eb16f7076111.png" alt="在这里插入图片描述" width="229" height="44"></a> 
 </blockquote> 
 <hr> 
 <h4>6、 按钮</h4> 
 与<button>元素作用相同 
 <h5>① 提交数据至程序submit</h5> 
 <ul> 
 <li>定义提交表单数据至表单处理程序的按钮 <input type=“submit”> <button type=“submit”></button></li> 
 </ul> 
 <h5>② 重置数据reset</h5> 
 <ul> 
 <li>定义重置数据按钮 <input type=“reset”> <button type=“reset”></button></li> 
 </ul> 
 <h5>③ 普通按钮button</h5> 
 <ul> 
 <li>定义按钮 <input type=“button”> <button type=“button”></button></li> 
 </ul> 
 <pre><code class="prism language-html"><input type = "submit" value="" />		
<input type = "reset" value="" />			
<input type = "button" value="" />

value：服务器通过name获取到的值

<button type="submit">按钮名称</button>
<button type="reset">按钮名称</button>
<button type="button">按钮名称</button>

src：图片路径
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html">			<input type = "submit" value="注册" />
			<input type = "reset" value="刷新" />	
			<input type = "button" value="按钮" />	
			
			<input type = "image" src="../../img/下帝视角.jpg" width="100px" />
			<br />
			
			<button type="submit">注册</button>
			<button type="reset">刷新</button>
			<button type="button">按钮</button>
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/9367a093b3aa4a5990ef59f6c0e5916c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9367a093b3aa4a5990ef59f6c0e5916c.jpg" alt="HTML超文本标记语言入门基础知识_第11张图片" width="341" height="157" style="border:1px solid black;"></a> 
 </blockquote> 
 <h4>7、隐藏域</h4> 
 隐藏起来了，不影响用户看，但是程序员又能获取到数据 
 <pre><code class="prism language-html"><input type="hidden" name = "" value=""/>

隐藏域
		name：表单元素的名称，数据提交时服务器通过name获取value
		value：服务器通过name获取到的值
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html"><input type="hidden" name = "hanhan" value="66666666666666666"/>
</code></pre> 
 页面显示： 
 <blockquote> 
 无显示效果 
 </blockquote> 
 <hr> 
 <hr> 
 <h3>HTML5新增输入类型</h3> 
 <table> 
 <thead> 
 <tr> 
 <th>序号</th> 
 <th>名称</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>1</td> 
 <td>color</td> 
 </tr> 
 <tr> 
 <td>2</td> 
 <td>date</td> 
 </tr> 
 <tr> 
 <td>3</td> 
 <td>datetime</td> 
 </tr> 
 <tr> 
 <td>4</td> 
 <td>datetime-local</td> 
 </tr> 
 <tr> 
 <td>5</td> 
 <td>email</td> 
 </tr> 
 <tr> 
 <td>6</td> 
 <td>month</td> 
 </tr> 
 <tr> 
 <td>7</td> 
 <td>number</td> 
 </tr> 
 <tr> 
 <td>8</td> 
 <td>range</td> 
 </tr> 
 <tr> 
 <td>9</td> 
 <td>search</td> 
 </tr> 
 <tr> 
 <td>10</td> 
 <td>tel</td> 
 </tr> 
 <tr> 
 <td>11</td> 
 <td>time</td> 
 </tr> 
 <tr> 
 <td>12</td> 
 <td>url</td> 
 </tr> 
 <tr> 
 <td>13</td> 
 <td>week</td> 
 </tr> 
 </tbody> 
 </table> 
 <h4>8、 数值number</h4> 
 <input type=“number”> 用于应该包含数字值的输入字段 
 对输入数字给定限制 
 代码示例： 
 <pre><code class="prism language-html">请输入1~5范围内的一位数：
<input type="number" name="quantity" min="1" max="5">
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/1d16839cf745439f8dbf4c7f1959fe0a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1d16839cf745439f8dbf4c7f1959fe0a.jpg" alt="在这里插入图片描述" width="443" height="54"></a> 
 </blockquote> 
 <hr> 
 <h4>9、 滑块输入range</h4> 
 <input type=“range”> 用于包含一定范围内的值的输入字段 
 根据浏览器支持，输入字段能够显示为滑块控件 
 代码示例： 
 <pre><code class="prism language-html">Points（0~10）:
<input type="range" name="points" min="0" max="10">
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/89255027942440488be3de8ffb90cd87.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/89255027942440488be3de8ffb90cd87.jpg" alt="在这里插入图片描述" width="433" height="62"></a> 
 </blockquote> 
 <hr> 
 <h4>10、 日期</h4> 
 <h5>①date</h5> 
 <input type=“date”> 用于应该包含日期的输入字段 
 根据浏览器支持，日期选择器会出现输入字段中 
 可以为日期添加限制 
 代码示例： 
 <pre><code class="prism language-html">birthday:
<input type="date" name="birthday">

请输入 1980-01-01 之前的日期：<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
请输入 2000-01-01 之后的日期：<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit"> 
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/a2ca067b21c64993bd1cd58baefffeb3.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a2ca067b21c64993bd1cd58baefffeb3.png" alt="在这里插入图片描述" width="368" height="62"></a> 添加限制的日期显示： <a href="http://img.e-com-net.com/image/info8/2844e3715d6c4976bf5532f8a0488db3.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/2844e3715d6c4976bf5532f8a0488db3.png" alt="HTML超文本标记语言入门基础知识_第12张图片" width="423" height="177" style="border:1px solid black;"></a> 
 </blockquote> 
 <h5>② datetime</h5> 
 <input type=“datetime”> 允许用户选择日期和时间（有时区） 
 根据浏览器支持，日期选择器会出现输入字段中（本文使用谷歌，不支持，因此只能手动输入） 
 代码示例： 
 <pre><code class="prism language-html"> 请输入日期和时间：
 <input type="datetime" name="bdaytime">
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/5ddd6dc778fb4b3e97db0865de982c3e.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/5ddd6dc778fb4b3e97db0865de982c3e.png" alt="在这里插入图片描述" width="514" height="61"></a> 
 </blockquote> 
 <hr> 
 <h5>③ datetime-local</h5> 
 <input type=“datetime-local”> 允许用户选择日期和时间（无时区） 
 根据浏览器支持，日期选择器会出现输入字段中 
 代码示例： 
 <pre><code class="prism language-html"> 请选择日期和时间：
 <input type="datetime-local" name="bdaytime">
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/769b32935e474814ac84d3079c99cff3.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/769b32935e474814ac84d3079c99cff3.png" alt="在这里插入图片描述" width="520" height="52"></a> 
 </blockquote> 
 <hr> 
 <h5>month</h5> 
 <input type=“month”> 允许用户选择月份和年份 
 代码示例： 
 <pre><code class="prism language-html">选择月和年：
<input type="month" name="bdaymonth">
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/a23ad44db9dd40058fe173ce064395e3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a23ad44db9dd40058fe173ce064395e3.jpg" alt="HTML超文本标记语言入门基础知识_第13张图片" width="515" height="336" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 <h5>week</h5> 
 <input type=“week”> 允许用户选择周和年。 
 根据浏览器支持，日期选择器会出现输入字段中 
 代码示例： 
 <pre><code class="prism language-html">选择年和周：
<input type="week" name="year_week">
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/644b1aa24ec243e0be1df23a2b9aa0c0.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/644b1aa24ec243e0be1df23a2b9aa0c0.png" alt="在这里插入图片描述" width="427" height="64"></a> 
 </blockquote> 
 <hr> 
 <h5>time</h5> 
 <input type=“time”> 允许用户选择时间（无时区） 
 根据浏览器支持，时间选择器会出现输入字段中 
 代码示例： 
 <pre><code class="prism language-html">请选取一个时间：
<input type="time" name="usr_time">
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/96094164c01b4c78a971ce4bd70f37fc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/96094164c01b4c78a971ce4bd70f37fc.jpg" alt="HTML超文本标记语言入门基础知识_第14张图片" width="387" height="445" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 <h4>11、 邮箱email</h4> 
 <input type=“email”> 用于应该包含电子邮件地址的输入字段 
 根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证 
 某些智能手机会识别 email 类型，并在键盘增加 “.com” 以匹配电子邮件输入 
 <pre><code class="prism language-html"><input type = "email" name = "" />

格式必须为email型，否则会报错
	
	name：表单元素的名称，数据提交时服务器通过name获取value
	require：提交前必须填写，不能为空
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html">邮箱:<input type = "email" name = "email" required="required"/>
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/1806356ad7614947aa32fb5209daa7a5.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/1806356ad7614947aa32fb5209daa7a5.png" alt="在这里插入图片描述" width="237" height="41"></a> 提交时未填写，提交时报错 <a href="http://img.e-com-net.com/image/info8/a22b9908dce94bb09706b8ef831a8925.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a22b9908dce94bb09706b8ef831a8925.png" alt="在这里插入图片描述" width="309" height="99"></a> 填入文本非email格式，提交时报错 <a href="http://img.e-com-net.com/image/info8/6b0852a0cf6146ef810cee12a2102fe6.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/6b0852a0cf6146ef810cee12a2102fe6.png" alt="在这里插入图片描述" width="450" height="97"></a> 
 </blockquote> 
 <hr> 
 <h4>12、 颜色color</h4> 
 <input type=“color”> 用于应该包含颜色的输入字段 
 代码示例： 
 <pre><code class="prism language-html"> Select your favorite color:
 <input type="color" name="favcolor" value="#ff0000">
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/921ca2db1ade426082faaef1924495d3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/921ca2db1ade426082faaef1924495d3.jpg" alt="HTML超文本标记语言入门基础知识_第15张图片" width="650" height="432" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 <h4>13、 电话tel</h4> 
 <input type=“tel”> 用于包含电话号码的输入字段 
 目前只有 Safari 8 支持tel类型 
 代码示例： 
 <pre><code class="prism language-html"> Telephone:
 <input type="tel" name="telephone">
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/7d5907ad62ba463abfd84734dc8ee8a6.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/7d5907ad62ba463abfd84734dc8ee8a6.png" alt="在这里插入图片描述" width="423" height="58"></a> 
 </blockquote> 
 <hr> 
 <h4>14、 地址url</h4> 
 <input type=“url”> 用于包含 URL 地址的输入字段 
 根据浏览器支持，在提交时能够自动验证 url 字段 
 某些智能手机识别url类型，并向键盘添加 “.com” 以匹配 url 输入 
 代码示例： 
 <pre><code class="prism language-html"> 请输入url：
 <input type="url" name="homepage">
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/f7c424c5360b42279ffc961276a75357.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f7c424c5360b42279ffc961276a75357.jpg" alt="在这里插入图片描述" width="417" height="51"></a> 
 </blockquote> 
 <hr> 
 <h4>15、 搜索search</h4> 
 <input type=“search”> 用于搜索字段（搜索字段的表现类似常规文本字段） 
 代码示例： 
 <pre><code class="prism language-html"> 搜索CSDN：
 <input type="search" name="scdn">
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/6abe418a889543e08e38fd61d89de6c1.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/6abe418a889543e08e38fd61d89de6c1.png" alt="在这里插入图片描述" width="429" height="52"></a> 
 </blockquote> 
 <hr> 
 <h3>二、 <select> 元素（下拉列表）</h3> 
 <select> 元素定义下拉列表 
 <option> 元素定义待选择的选项 
 列表通常会把首个选项显示为被选选项，也通过添加 selected 属性来定义预定义选项 
 <pre><code class="prism language-html"><select name="">
	<option value = "属性值1">属性值1</option>
	<option value = "属性值2">属性值2</option>
</select>

下拉列表框
		通过select自行选择，option给出选项
		value：服务器通过name获取到的值
		selected表示默认选中
</code></pre> 
 代码示例： 
 <pre><code class="prism language-html">选择日期：
<select name="month">
	<option value = "1">1</option>
	<option value = "2">2</option>
	<option value = "3">3</option>
	<option value = "4">4</option>
	<option value = "5">5</option>
	<option value = "6">6</option>
	<option value = "7">7</option>
	<option value = "8">8</option>
	<option value = "9">9</option>
	<option value = "10">10</option>
	<option value = "11">11</option>
	<option value = "12">12</option>
</select>				
</code></pre> 
 页面显示： 
 <blockquote> 
 <a href="http://img.e-com-net.com/image/info8/9fd1915462b9414d8a33bd66910012df.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9fd1915462b9414d8a33bd66910012df.jpg" alt="HTML超文本标记语言入门基础知识_第16张图片" width="206" height="351" style="border:1px solid black;"></a> 
 </blockquote> 
 <hr> 
 <h3>三、 <textarea> 元素（文本域）</h3> 
 <textarea>

定义多行输入字段（文本域）

<textarea rows=""  readonly=""  disabled="">		
	...		
textarea>


文本域
		<textarea>textarea>
		rows:行高，默认多少行
		cols：指定列数，每行多少字
		readonly：只读
		disabled：禁用，央视呈现灰色

代码示例：

协议：<textarea rows="10"   readonly="readonly"  disabled="disabled">
	条款说明：
	1.必须遵守......
	2.......
	...		
textarea>

页面显示：

四、元素

① 提交数据至程序submit

定义提交表单数据至表单处理程序的按钮

② 重置数据reset

定义重置数据按钮

③ 普通按钮button

定义按钮

<input type = "submit" value="" />		
<input type = "reset" value="" />			
<input type = "button" value="" />			

		value：服务器通过name获取到的值


<button type="submit">按钮名称button>
<button type="reset">按钮名称button>
<button type="button">按钮名称button>

	
<input type = "image" src="" width="" />		

		src：图片路径

代码示例：

			<input type = "submit" value="注册" />
			<input type = "reset" value="刷新" />	
			<input type = "button" value="按钮" />	
			
			<input type = "image" src="../../img/下帝视角.jpg" width="100px" />
			<br />
			
			<button type="submit">注册button>
			<button type="reset">刷新button>
			<button type="button">按钮button>

页面显示：

HTML5 新增表单元素

标签	描述
datalist	input标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值
keygen	规定用于表单的密钥对生成器字段
output	标签定义不同类型的输出，比如脚本的输出

datalist

元素为元素规定预定义选项列表

用户在输入数据时能够看到预定义选项的下拉列表

元素的 list 属性必须引用元素的 id 属性

代码示例：

<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
datalist>

页面显示：

点击准备输入数据时：

框架

HTML5中已移除

<iframe name = "" src="" >iframe>

			name：名称
			src：url，显示不同的网页
			frameborder：边框  0和no都代表没有
			width：宽
			heigh：高

代码示例：

		<iframe name = "baidu" src="https://www.baidu.com/" width=100% height="300px" >iframe>
		<br />
		<hr color="antiquewhite" size="4"/>
		<iframe name = "CSDN" src="https://www.csdn.net/" width=100% height="300px" frameborder="0">iframe>

页面显示：

HTML5中其它新增

语义标签

标签	描述
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含 details 元素的标题
header	定义了文档的头部区域
footer	定义 section 或 document 的页脚
nav	定义导航链接的部分
progress	定义任何类型的任务的进度
section	定义文档中的节（section、区段）
time	定义日期或时间
wbr	规定在文本中的何处适合添加换行符

音频

使用

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

视频

使用

Format	MIME-type
MP4	video/mp4
Ogg	audio/ogg
WebM	video/webm

你可能感兴趣的:(JavaEE,前端,html,html5)

深度解析智能问答系统：如何打造精准、高效的AI对话架构？和老莫一起学AI 人工智能架构自然语言处理产品经理语言模型学习 ai
在人工智能的飞速发展中，智能问答系统（QA系统）逐渐成为了企业内部管理、客户服务、搜索引擎等多个领域中的关键技术。今天，我们将深入探讨一个基于大模型、自然语言处理、知识检索的智能问答系统的架构，详细介绍其技术原理、流程以及未来应用前景。一、系统整体概览在这个智能问答系统中，整个流程可以大致划分为两大部分：前端问答生成与后端离线数据处理。前端部分是用户交互的核心，通过用户的输入、关键词提取、检索和问
python多进程编程实例_Python多进程编程multiprocessing代码实例 weixin_39791386 python多进程编程实例
在多线程与多进程的比较这一篇中记录了多进程编程的一种方式.下面记录一下多进程编程的别一种方式,即使用multiprocessing编程importmultiprocessingimporttimedefget_html(n):time.sleep(n)print('subprocess%s'%n)returnnif__name__=='__main__':#多进程编程process=multipr
《中型 Vue 项目：挑战与成长》计算机毕设定制辅导-无忧学长 #Vue vue.js flutter 前端
一、引言在当今的前端开发领域，Vue作为一款渐进式JavaScript框架，以其强大的功能和灵活性备受开发者青睐。对于中型Vue项目而言，其重要性不言而喻。中型Vue项目通常在功能复杂度和规模上介于小型项目和大型项目之间，既需要应对一定的业务需求挑战，又要考虑开发效率和可维护性。中型Vue项目面临着诸多挑战与机遇。挑战方面，随着项目规模的扩大，代码的复杂性增加，如何进行有效的状态管理、组件化开发以
httpslocalhostindex 配置的nginx，一刷新就报404了 m0_74824112 nginx 运维
当你的Nginx配置导致页面刷新时报404错误时，通常是由于以下几个原因造成的：静态文件路径配置错误：Nginx没有正确地指向静态文件的目录。前端路由问题：如果是SPA（单页应用），刷新页面时Nginx没有正确地将请求重定向到入口文件（如index.html）。反向代理配置错误：如果Nginx作为反向代理，后端服务可能没有正确处理请求。检查和解决步骤1.检查静态文件路径配置确保Nginx配置文件中
【YashanDB知识库】关于表空间压缩数据库
本文内容来自YashanDB官网，原文内容请见https://www.yashandb.com/newsinfo/7106886.html?templateId=171...实现方法1、YashanDB的表空间压缩通过文件打洞(HolePunching)实现。2、“文件打洞”简单地说，如果文件中有连续字节0x00出现，只需要记录0字节数据块开始出现位置和块长度，而不需要实际保存原数据块。3、表空间
HTML＜form＞标签新生派 html 前端 javascript
例子具有两个输入字段和一个提交按钮的HTML表单：Firstname:Lastname:下面有更多“自己尝试”的示例。定义和用法标签用于创建供用户输入的HTML表单。元素可以包含下列一个或多个表单元素：浏览器支持属性全局属性标签支持HTML中的全局属性。事件属性标签支持HTML中的事件属性。更多示例例子带有复选框的HTML表单：IhaveabikeIhaveacarIhaveaboat例子带有单选
HTML＜blockquote＞标签新生派 html 前端
例子引用自其他来源的部分：For50years,WWFhasbeenprotectingthefutureofnature.Theworld'sleadingconservationorganization,WWFworksin100countriesandissupportedby1.2millionmembersintheUnitedStatesandcloseto5millionglobal
HTML＜!DOCTYPE＞声明新生派 html 前端 javascript
例子TitleofthedocumentThecontentofthedocument......定义和用法所有HTML文档都必须以声明开始。声明不是HTML标签。它是向浏览器提供的有关预期文档类型的“信息”。在HTML5中，声明很简单：浏览器支持较旧的HTML文档在较旧的文档（HTML4或XHTML）中，声明更为复杂，因为声明必须引用DTD（文档类型定义）。HTML4.01：XHTML1.1：提
深度解析 React 合成事件：机制、作用及与 Vue 事件机制的对比前端vue.jsreact
在前端开发领域，React与Vue作为两款备受瞩目的框架，凭借独特的设计理念和技术架构，为开发者打造出截然不同的开发体验。React的合成事件是其核心亮点之一，Vue则采用了别具一格的事件处理机制，二者的差异背后蕴藏着多方面的考量。一、React合成事件的底层剖析（一）事件创建与封装细节当DOM事件触发，React会第一时间在内部事件池中检索对应的合成事件实例。若未找到，便依据原生事件类型，像cl
告别代码堆砌！AI生成前端页面，让开发效率飞升前端
在当今快节奏的数字世界中，前端开发效率至关重要。面对日益增长的市场需求和复杂的项目，开发者们常常面临着巨大的压力。而一款优秀的AI生成前端页面工具，无疑能成为提升效率的利器。本文将深入探讨谷歌Gemini的强大功能，并结合ScriptEcho——一款基于大模型AI技术的前端代码生成工具，展现如何将AI技术应用于前端开发，从而实现效率的显著提升。谷歌Gemini：AI赋能的未来谷歌Gemini的出现
零售业的AI赋能与前端开发效率革命：ScriptEcho 的助力前端
零售业正经历着前所未有的数字化转型，但同时也面临着巨大的挑战。库存管理混乱、个性化客户体验不足等问题，严重制约着零售企业的盈利能力。而人工智能（AI）的兴起，为解决这些问题提供了新的思路。通过AI驱动的实时库存管理和客户行为分析，零售企业可以显著提升运营效率和客户满意度。然而，构建这些AI赋能的零售应用，需要强大的前端开发能力，这正是AI代码生成器ScriptEcho能够发挥关键作用的地方。AI赋
AI时代的前端开发：技能提升与职业发展之路前端
在瞬息万变的科技时代，个人职业发展的重要性日益凸显。提升技能，不断学习，已经不再是锦上添花，而是立足之本，是我们在竞争激烈的职场中脱颖而出的关键。而人工智能（AI）技术的快速发展，为我们提供了前所未有的机遇，特别是对于前端开发领域，AI正以前所未有的速度改变着我们的工作方式和学习方式。AI赋能前端开发：个性化学习路径前端开发领域的技术栈庞大而复杂，涵盖HTML、CSS、JavaScript、各种框
HTML＜img＞标签新生派 html 前端
例子如何插入图片：下面有更多“自己尝试”的示例。定义和用法该标签用于在HTML页面中嵌入图像。从技术上讲，图像并非插入网页；图像链接到网页。标签为引用的图像创建了一个保存空间。该标签具有两个必需属性：src——指定图像的路径alt-如果图像由于某种原因无法显示，则指定图像的替代文本注意：另外，请务必指定图像的宽度和高度。如果未指定宽度和高度，则图像加载时页面可能会闪烁。提示：要将图像链接到另一个文
为AI聊天工具添加一个知识系统之54 为事务处理设计基于DDD的一个 AI操作系统来处理维度一水鉴天人工语言软件智能智能制造大数据开发语言
本文要点要点Architecture程序它被设计为一个双面神结构的控制器，它的两侧一侧编译执行另一侧解释执行，自已则是一个翻译器--通过提供两个不同取向之间的结构映射的显示器（带图形用户接口GUI和命令行接口CLI两种接口）。一个Architecture模型（表面模型接口类）一个Architecture模型采用“本”“迹”二分法，对应一个html模板。该模板中提供三个动态区划>>>代表html占位
出海工具集 web前端进阶者前端
群聊分享的一个工具集合，看了几个，感觉有点子用，收藏一波，下面有GitHub的地址；吃水不忘挖井人；GitHub地址分类目录导航Web开发框架或模板Chrome插件开发前端开发后端开发数据库管理对象关系映射（ORM）样式与UI框架原型设计认证与授权支付集成邮件服务网站分析在线客服和反馈服务部署与托管网站管理域名注册文档管理协议生成图标资源字体资源图片视频素材图片视频处理工具屏幕录制短链或长链信息渠
QWebEngineView之加载html打印PDF 学习，学习，在学习笔记前端 html qt5
QWebEngineView通过QWebEngineView加载html文件打印pdf相比自己手动绘制pdf简单的多，制作好对应的html文件，然后Qfile读取html文件模板，替换函数需要替换的value，存成html文件，然后QWebEngineView加载，就直接能够打印成对应格式的pdf了。//读取html文件QFileoutFile(QStringLiteral("C://Users/
Arch - 架构安全性_验证（Verification）小小工匠【凤凰架构】架构验证 Verification
文章目录OverView导图1.引言：数据验证的重要性概述2.数据验证的基本概念3.数据验证的层次前端验证后端验证4.数据验证的标准做法5.自定义校验注解6.校验结果的处理7.性能考虑与副作用8.小结OverView即使只限定在“软件架构设计”这个语境下，系统安全仍然是一个很大的话题。接下来我们将对系统安全架构的各个方面进行详细分析，包括认证、授权、凭证、保密、传输安全和验证，结合案例实践，展示如
MYSQL数据类型 jay丿 mysql 数据库
数据类型结构化数据、例如关系型数据库半结构化数据、HTML、XML、JSON非结构化数据SQL（结构化查询语言）命令关系型数据库擅长处理结构化数据、可以通过结构化查询语言对数据进行CRUD(增删改查)DDL(数据定义语言)：主要包含的命令有create、drop、alter、truncate、showDML(数据操纵语言):主要包含的命令有insert,update,deleteDQL(数据查询语
如何利用 Dexie.js 管理前端状态或持久化复杂数据 maply Node.js vue 前端 javascript 状态模式 Dexie.js 前端状态管理前端状态持久化 vue.js
使用Dexie.js管理前端状态或持久化复杂数据Dexie.js是一个功能强大的IndexedDB封装库，不仅适用于简单的离线存储，还非常适合管理前端状态和持久化复杂数据。以下是如何利用Dexie.js管理前端状态或持久化复杂数据的详细介绍：1.Dexie.js管理前端状态的优势数据持久化：将应用状态存储在浏览器中，即使刷新页面或关闭浏览器，状态仍然存在。异步数据操作：支持异步读取和写入，提高性能
SpringBoot3使用Swagger3 m0_74825260 java
SpringBoot3使用Swagger3项目中的后端接口进行简单的前端展示一、依赖引入二、快速启动1.在application.yml中配置2.或者properties文件,则配置3.启动项目访问swagger三、使用注解标注接口Swagger配置文件Swagger注解迁移举例五种常用@Api@ApiOperation@ApiImplicitParam@ApiModel@ApiModelProp
【新人系列】Python 入门（十六）：正则表达式 Pandaconda #Python 新人系列 python 正则表达式开发语言后端笔记面试
✍个人博客：https://blog.csdn.net/Newin2020?type=blog专栏地址：https://blog.csdn.net/newin2020/category_12801353.html专栏定位：为0基础刚入门Python的小伙伴提供详细的讲解，也欢迎大佬们一起交流~专栏简介：在这个专栏，我将带着大家从0开始入门Python的学习。在这个Python的新人系列专栏下，将会
【新人系列】Python 入门（十七）：类与对象 Pandaconda #Python 新人系列 python 开发语言后端笔记面试面向对象类
✍个人博客：https://blog.csdn.net/Newin2020?type=blog专栏地址：https://blog.csdn.net/newin2020/category_12801353.html专栏定位：为0基础刚入门Python的小伙伴提供详细的讲解，也欢迎大佬们一起交流~专栏简介：在这个专栏，我将带着大家从0开始入门Python的学习。在这个Python的新人系列专栏下，将会
【新人系列】Python 入门（十一）：控制结构 Pandaconda #Python 新人系列 python 开发语言后端笔记面试控制结构经验分享
✍个人博客：https://blog.csdn.net/Newin2020?type=blog专栏地址：https://blog.csdn.net/newin2020/category_12801353.html专栏定位：为0基础刚入门Python的小伙伴提供详细的讲解，也欢迎大佬们一起交流~专栏简介：在这个专栏，我将带着大家从0开始入门Python的学习。在这个Python的新人系列专栏下，将会
JavaScript详解十三 ——节点操作遇见~未来 JavaScript JavaScript详解 javascript 开发语言 ecmascript
目录节点操作1、创建节点2、创建文本3、添加节点(先有父母才能生孩子)4、替换节点5、删除节点6、克隆节点7、创建节点另外几种方式（1）、element.innerHTML（2）、element.innerText（3）、document.write()（4）、insertAdjacentHTML()节点操作1、创建节点docment.createElement('节点')参数：标签名字符串这些元
【新人系列】Python 入门（二十七）：Python 库 Pandaconda #Python 新人系列 python 开发语言后端笔记面试 python库库
✍个人博客：https://blog.csdn.net/Newin2020?type=blog专栏地址：https://blog.csdn.net/newin2020/category_12801353.html专栏定位：为0基础刚入门Python的小伙伴提供详细的讲解，也欢迎大佬们一起交流~专栏简介：在这个专栏，我将带着大家从0开始入门Python的学习。在这个Python的新人系列专栏下，将会
Microi 吾码与 JavaScript：前端低代码平台的强大组合小周不想卷 javascript
目录一、引言二、Microi吾码概述三、JavaScript在Microi吾码前端开发中的应用（一）前端V8引擎与JavaScript（二）接口引擎与JavaScript四、JavaScript在Microi吾码后端开发中的协同（一）与C#后端框架的交互（二）利用gRPC实现跨语言通信五、Microi吾码中JavaScript与数据库的交互六、Microi吾码中JavaScript在表单与模板引擎
Node.js 能做什么 yqcoder node.js
一、服务器端开发1.构建Web服务器使用内置的`http`模块或流行的框架（如Express、Koa等）创建Web服务器，处理HTTP请求和响应。可以处理各种类型的请求，如GET、POST、PUT、DELETE等，并返回相应的HTML、JSON或其他数据类型。consthttp=require("http");constserver=http.createServer((req,res)=>{ r
Mysql运维篇（五）部署MHA--主机环境配置努力的兜 mysql 运维数据库
一路走来，所有遇到的人，帮助过我的、伤害过我的都是朋友，没有一个是敌人。如有侵权，请留言，我及时删除！大佬博文https://www.cnblogs.com/gomysql/p/3675429.htmlMySQL高可用（MHA）-知乎一、MHA简介：MHA（MasterHighAvailability）目前在MySQL高可用方面是一个相对成熟的解决方案，它由日本DeNA公司youshimaton（
stm32+w5500实现web服务_【NodeJS】简单静态WEB服务器实现 weixin_39711441
说明利用HTTP模块URl模块Path模块Fs模块创建在项目文件夹下，创建文件夹static,下面创建index.html//引入http模块var http=require('http');//fs模块var fs=require('fs');http.createServer(function(req,res){ //http://localhost:8001/news.html/new
一款前端开源的，在线电子表格univer介绍
Univer是一款颠覆性的在线电子表格解决方案，为数据输入和协作带来了全新的方式。作为一款开源、免费的平台，Univer专注于在线电子表格管理，为用户提供了处理数据、创建动态报告和高效协作的无缝体验。具体可以看他们的官网univer.ai.Excel作为广受欢迎的电子表格软件，Univer的兼容性和功能性使其成为Excel爱好者的理想选择。用户可以体验到与Excel相关的功能，并且能够轻松使用带公
HQL之投影查询归来朝歌 HQL Hibernate 查询语句投影查询
在HQL查询中，常常面临这样一个场景，对于多表查询，是要将一个表的对象查出来还是要只需要每个表中的几个字段，最后放在一起显示？针对上面的场景，如果需要将一个对象查出来： HQL语句写“from 对象”即可 Session session = HibernateUtil.openSession();
Spring整合redis bylijinnan redis
pom.xml <dependencies>  <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redi
org.hibernate.NonUniqueResultException: query did not return a unique result: 2 0624chenhong Hibernate
参考：http://blog.csdn.net/qingfeilee/article/details/7052736 org.hibernate.NonUniqueResultException: query did not return a unique result: 2 在项目中出现了org.hiber
android动画效果不懂事的小屁孩 android动画
前几天弄alertdialog和popupwindow的时候，用到了android的动画效果，今天专门研究了一下关于android的动画效果，列出来，方便以后使用。 Android 平台提供了两类动画。一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。第二类就是 Frame动画，即顺序的播放事先做好的图像，与gif图片原理类似。
js delete 删除机理以及它的内存泄露问题的解决方案换个号韩国红果果 JavaScript
delete删除属性时只是解除了属性与对象的绑定，故当属性值为一个对象时，删除时会造成内存泄露（其实还未删除）举例： var person={name:{firstname:'bob'}} var p=person.name delete person.name p.firstname -->'bob' // 依然可以访问p.firstname，存在内存泄露
Oracle将零干预分析加入网络即服务计划蓝儿唯美 oracle
由Oracle通信技术部门主导的演示项目并没有在本月较早前法国南斯举行的行业集团TM论坛大会中获得嘉奖。但是，Oracle通信官员解雇致力于打造一个支持零干预分配和编制功能的网络即服务（NaaS）平台，帮助企业以更灵活和更适合云的方式实现通信服务提供商（CSP）的连接产品。这个Oracle主导的项目属于TM Forum Live!活动上展示的Catalyst计划的19个项目之一。Catalyst计
spring学习——springmvc（二） a-john springMVC
Spring MVC提供了非常方便的文件上传功能。 1，配置Spring支持文件上传： DispatcherServlet本身并不知道如何处理multipart的表单数据，需要一个multipart解析器把POST请求的multipart数据中抽取出来，这样DispatcherServlet就能将其传递给我们的控制器了。为了在Spring中注册multipart解析器，需要声明一个实现了Mul
POJ-2828-Buy Tickets aijuans ACM_POJ
POJ-2828-Buy Tickets http://poj.org/problem?id=2828 线段树，逆序插入 #include<iostream>#include<cstdio>#include<cstring>#include<cstdlib>using namespace std;#define N 200010struct
Java Ant build.xml详解 asia007 build.xml
1,什么是antant是构建工具2,什么是构建概念到处可查到，形象来说，你要把代码从某个地方拿来，编译，再拷贝到某个地方去等等操作，当然不仅与此，但是主要用来干这个3,ant的好处跨平台 --因为ant是使用java实现的，所以它跨平台使用简单--与ant的兄弟make比起来语法清晰--同样是和make相比功能强大--ant能做的事情很多，可能你用了很久，你仍然不知道它能有
android按钮监听器的四种技术百合不是茶 android xml配置监听器实现接口
android开发中经常会用到各种各样的监听器,android监听器的写法与java又有不同的地方; 1,activity中使用内部类实现接口 ,创建内部类实例使用add方法与java类似创建监听器的实例 myLis lis = new myLis(); 使用add方法给按钮添加监听器
软件架构师不等同于资深程序员 bijian1013 程序员架构师架构设计
本文的作者Armel Nene是ETAPIX Global公司的首席架构师，他居住在伦敦，他参与过的开源项目包括 Apache Lucene,，Apache Nutch， Liferay 和 Pentaho等。如今很多的公司
TeamForge Wiki Syntax & CollabNet User Information Center sunjing TeamForge How do Attachement Anchor Wiki Syntax
the CollabNet user information center http://help.collab.net/ How do I create a new Wiki page? A CollabNet TeamForge project can have any number of Wiki pages. All Wiki pages are linked, and
【Redis四】Redis数据类型 bit1129 redis
概述 Redis是一个高性能的数据结构服务器，称之为数据结构服务器的原因是，它提供了丰富的数据类型以满足不同的应用场景，本文对Redis的数据类型以及对这些类型可能的操作进行总结。 Redis常用的数据类型包括string、set、list、hash以及sorted set.Redis本身是K/V系统，这里的数据类型指的是value的类型，而不是key的类型，key的类型只有一种即string
SSH2整合-附源码白糖_ eclipse spring tomcat Hibernate Google
今天用eclipse终于整合出了struts2+hibernate+spring框架。我创建的是tomcat项目，需要有tomcat插件。导入项目以后，鼠标右键选择属性，然后再找到“tomcat”项，勾选一下“Is a tomcat project”即可。具体方法见源码里的jsp图片，sql也在源码里。补充1：项目中部分jar包不是最新版的，可能导
[转]开源项目代码的学习方法 braveCS 学习方法
转自： http://blog.sina.com.cn/s/blog_693458530100lk5m.html http://www.cnblogs.com/west-link/archive/2011/06/07/2074466.html 1）阅读features。以此来搞清楚该项目有哪些特性2）思考。想想如果自己来做有这些features的项目该如何构架3）下载并安装d
编程之美-子数组的最大和（二维） bylijinnan 编程之美
package beautyOfCoding; import java.util.Arrays; import java.util.Random; public class MaxSubArraySum2 { /** * 编程之美子数组之和的最大值（二维） */ private static final int ROW = 5; private stat
读书笔记-3 chengxuyuancsdn jquery笔记 resultMap配置 ibatis一对多配置
1、resultMap配置 2、ibatis一对多配置 3、jquery笔记 1、resultMap配置当<select resultMap="topic_data"> <resultMap id="topic_data">必须一一对应。 (1)<resultMap class="tblTopic&q
[物理与天文]物理学新进展 comsci
如果我们必须获得某种地球上没有的矿石,才能够进行某些能量输出装置的设计和建造,而要获得这种矿石,又必须首先进行深空探测,而要进行深空探测,又必须获得这种能量输出装置,这个矛盾的循环,会导致地球联盟在与宇宙文明建立关系的时候,陷入困境怎么办呢?
Oracle 11g新特性:Automatic Diagnostic Repository daizj oracle ADR
Oracle Database 11g的FDI（Fault Diagnosability Infrastructure）是自动化诊断方面的又一增强。 FDI的一个关键组件是自动诊断库（Automatic Diagnostic Repository-ADR）。在oracle 11g中，alert文件的信息是以xml的文件格式存在的，另外提供了普通文本格式的alert文件。这两份log文
简单排序:选择排序 dieslrae 选择排序
public void selectSort(int[] array){ int select; for(int i=0;i<array.length;i++){ select = i; for(int k=i+1;k<array.leng
C语言学习六指针的经典程序，互换两个数字 dcj3sjt126com c
示例程序，swap_1和swap_2都是错误的，推理从1开始推到2，2没完成，推到3就完成了 # include <stdio.h> void swap_1(int, int); void swap_2(int *, int *); void swap_3(int *, int *); int main(void) { int a = 3; int b =
php 5.4中php-fpm 的重启、终止操作命令 dcj3sjt126com PHP
php 5.4中php-fpm 的重启、终止操作命令: 查看php运行目录命令：which php/usr/bin/php 查看php-fpm进程数：ps aux | grep -c php-fpm 查看运行内存/usr/bin/php -i|grep mem 重启php-fpm/etc/init.d/php-fpm restart 在phpinfo()输出内容可以看到php
线程同步工具类 shuizhaosi888 同步工具类
同步工具类包括信号量（Semaphore）、栅栏（barrier）、闭锁（CountDownLatch）闭锁（CountDownLatch） public class RunMain { public long timeTasks(int nThreads, final Runnable task) throws InterruptedException { fin
bleeding edge是什么意思 haojinghua DI
不止一次，看到很多讲技术的文章里面出现过这个词语。今天终于弄懂了——通过朋友给的浏览软件，上了wiki。我再一次感到，没有辞典能像WiKi一样，给出这样体贴人心、一清二楚的解释了。为了表达我对WiKi的喜爱，只好在此一一中英对照，给大家上次课。 In computer science, bleeding edge is a term that
c中实现utf8和gbk的互转 jimmee c iconv utf8&gbk编码
#include <iconv.h> #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <fcntl.h> #include <string.h> #include <sys/stat.h> int code_c
大型分布式网站架构设计与实践 lilin530 应用服务器搜索引擎
1.大型网站软件系统的特点？ a.高并发，大流量。 b.高可用。 c.海量数据。 d.用户分布广泛，网络情况复杂。 e.安全环境恶劣。 f.需求快速变更，发布频繁。 g.渐进式发展。 2.大型网站架构演化发展历程？ a.初始阶段的网站架构。应用程序，数据库，文件等所有的资源都在一台服务器上。 b.应用服务器和数据服务器分离。 c.使用缓存改善网站性能。 d.使用应用
在代码中获取Android theme中的attr属性值 OliveExcel android theme
Android的Theme是由各种attr组合而成, 每个attr对应了这个属性的一个引用, 这个引用又可以是各种东西. 在某些情况下, 我们需要获取非自定义的主题下某个属性的内容 (比如拿到系统默认的配色colorAccent), 操作方式举例一则: int defaultColor = 0xFF000000; int[] attrsArray = { andorid.r.
基于Zookeeper的分布式共享锁 roadrunners zookeeper 分布式共享锁
首先，说说我们的场景，订单服务是做成集群的，当两个以上结点同时收到一个相同订单的创建指令，这时并发就产生了，系统就会重复创建订单。等等......场景。这时，分布式共享锁就闪亮登场了。共享锁在同一个进程中是很容易实现的，但在跨进程或者在不同Server之间就不好实现了。Zookeeper就很容易实现。具体的实现原理官网和其它网站也有翻译，这里就不在赘述了。官
两个容易被忽略的MySQL知识 tomcat_oracle mysql
1、varchar(5)可以存储多少个汉字，多少个字母数字？　　相信有好多人应该跟我一样，对这个已经很熟悉了，根据经验我们能很快的做出决定，比如说用varchar(200)去存储url等等，但是，即使你用了很多次也很熟悉了，也有可能对上面的问题做出错误的回答。　　这个问题我查了好多资料，有的人说是可以存储5个字符，2.5个汉字（每个汉字占用两个字节的话），有的人说这个要区分版本，5.0
zoj 3827 Information Entropy(水题) 阿尔萨斯 format
题目链接：zoj 3827 Information Entropy 题目大意：三种底，计算和。解题思路：调用库函数就可以直接算了，不过要注意Pi = 0的时候，不过它题目里居然也讲了。。。limp→0+plogb(p)=0，因为p是logp的高阶。 #include <cstdio> #include <cstring> #include <cmath&

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

HTML超文本标记语言入门基础知识

文章目录

四、 元素

① 提交数据至程序submit

② 重置数据reset

③ 普通按钮button

HTML5 新增表单元素

datalist

框架

HTML5中其它新增

语义标签

音频

视频

你可能感兴趣的:(JavaEE,前端,html,html5)

四、元素