<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 设置需要链接的基础url,类似与网络请求时的域名,后面的资源会自动拼接上这个域名,如图片:本来还需要些/项目名/图片名,可以吧公用的/项目名/这 -->
<base href="/Practice_Project/"></base>
<base target="_blank"></base>
</head>
<body>
<pre>1.base标签:定义的位置和style的位置一样,在head中:
设置需要链接的基础url,类似与网络请求时的域名,后面的资源会自动拼接上这个域名,如图片:本来还需要些/项目名/图片名,可以吧公用的/项目名/
注:这里使用的是pre标签,这个标签可以保留输入时候的格式,比如空格、换行等。使用P标签的话,这些空格和换行会不被记录
</pre>
<p>2.我是P标签</p>
<b>3.我是B标签</b>
<p>4.我是a标签和img标签</p>
<a href="www.baidu.com" target="_blank"> <img alt="图片显示不出来"
src="www.ii.png"></a>
<br />
<p>5.表示缩写的标签abbr</p>
我
<abbr title="是个abbr标签,这个标签表示缩写">abbr</abbr>打钱!
<p>6.给图片设置可点击区域的标签:map和area;先定义map,再在map中写area,再给图片关联map</p>
<img src="desk.png" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href="http://www.baidu.com"
alt="Venus" />
<area shape="circle" coords="129,161,10" href="Html_1.html"
alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href="Html_2.html" alt="Sun" />
</map>
<p>7.audio标签</p>
<audio src="Audio.wav" controls="controls" autoplay="autoplay"></audio>
<p>8.canvas标签-用JavaScript绘制图形</p>
<canvas style="background-color: black;" id="mycanvas" width="100"
height="100"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 80, 100);
</script>
<p>9.table标签、tr(表示一行)、td、th(表项目,文字大写的)caption标签:给表格设置名字;对于多行或者多列使用一个标题,使用rowspan</p>
<table border="1">
<caption>表格名字</caption>
<tr>
<th>选项1</th>
<th>选项2</th>
</tr>
<tr>
<td>111</td>
<td>222</td>
</tr>
</table>
<p>10.datalist标签:类似于输入提示:在输入框下面提示可以选的,也可以手动输入,可以做已登录用户名的提示</p>
<input list="list"></input>
<datalist id="list">
<option value="用户名1">
<option value="用户名2">
<option value="用户名3">
</datalist>
<br />
<del>11.我是del标签</del>
<br />
<ins>12.我是ins标签</ins>
<p>13.form标签:指定需要传输到的jsp地址,点击提交后会把数据自动提交.type表示它的类型,name表示提交form表单时的key,value表示提交时的value
如果你只需要一个普通的button,type选button就好,逻辑通过JavaScript来做</p>
<form action="MyServlet" method="get" accept-charset="utf-8"
target="_blank">
用户名:<input type="text" name="username" /> <br /> 密码:<input
type="password" name="password" /> <br />
<!-- 复选框 -->
是不是智障:<input type="checkbox" name="zhizhang" value="yes" /> 是不是单身狗:<input
type="checkbox" name="danshen" value="yes" /> <br />
<!-- 单选框 -->
性别: <br /> 男:<input type="radio" checked="checked" name="sex"
value="man" /> 女:<input type="radio" name="sex" value="woman" /> <br />
<!-- 下拉选择框 -->
年龄:<select name="age">
<option value="15">15</option>
<option value="18">18</option>
<option value="16">16</option>
<!-- 默认选择17 -->
<option value="17" selected="selected">17</option>
</select> <br />
<!-- 多类型的下拉选择框 -->
游戏水平:<select name="danwei">
<optgroup label="菜鸡">
<option value="青铜">青铜</option>
<option value="塑料">塑料</option>
<option value="废柴">废柴</option>
</optgroup>
<optgroup label="大神">
<option value="钻石">钻石</option>
<option value="星耀">星耀</option>
<option value="王者">王者</option>
</optgroup>
</select> <br />
<!-- 文本域 -->
<textarea style="width: 500px; height: 50px" name="beizhu">我是一个多行文本输入框
</textarea>
<br />
<!-- 提交按钮 -->
<input type="submit" value="登录" /> <input type="reset" value="清空"
style="padding-left: 10px" />
</form>
<p>14.fileset标签:一个栏目,这个栏目下存在多个可以输入内容的项目</p>
<form>
<fieldset>
<legend>项目1</legend>
选项1:<input type="text" /> 选项2:<input type="text" />
</fieldset>
</form>
<input type="button" value="我是一个按钮" />
<p>15.dir标签,和列表类似ol/ul/dl</p>
<dir>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</dir>
<p>16.figcaption标签,插图</p>
<figure>
<figcaption>下面请看我差的图</figcaption>
<img alt="图片显示错误" src="aa1.png">
</figure>
<p>17.hr:分割线</p>
<hr />
<p>18.mark:内容加标记颜色</p>
<p>
要准备加颜色了:
<mark>变色</mark>
好了
</p>
<p>19.nav:导航,点击之后触犯跳转</p>
<nav>
<a href="Html_1.html">去实例1</a> <a href="Html_2.html">去实例2</a> <a
href="Html_3.html">去实例3</a>
</nav>
<p>20.progress:进度条</p>
<progress value="40" max="100"></progress>
<p>21.lable:实现点击文字就使后面的chebox处于选择状态:对checkbox和radio都有效;radio是个特殊的checkbox,可以当checkbox使用,只是不能有两个相同name的radio</p>
<form action="">
<label for="i1">王者荣耀</label> <input type="radio" name="game" id="i1"
checked="checked" value="wang"></input> <br /> <label for="i2">英雄联盟</label>
<input type="radio" name="game" id="i2" value="ying"></input> <label
for="i3">二逼青年</label> <input type="checkbox" name="erbi" value="erbi"
id="i3"></input>
</form>
<br />
<p>测试下pre标签套标签加空格</p>
<pre>
<del>删除了</del>啥的 大杀四方</pre>
<video src="test.mp4" controls="controls"></video>
<p>NA.footer页脚</p>
<footer>
<p>Create By ShiBo In 11.08.17</p>
</footer>
</body>
</html>
实际效果:
地址:http://114.67.143.206:8080/Practice_Project/Html_8.html