html从入门到放弃(8)-html常见标签及使用案例
程序员文章站
2022-04-30 22:09:44
...
<!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
上一篇： 基于 DHT 网络的磁力链接和BT种子的搜索引擎架构 DHT
下一篇： 绝对定位和相对定位