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)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
斟一小组鸡血视频和自己一起成长
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
Dockerfile命令详解之 FROM 清风怎不知意容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
ubuntu安装opencv最快的方法 Derek重名了
最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
处理标签包裹的字符串，并取出前250字符周bro 前端 javascript 开发语言
//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
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)

四、元素