html从入门到放弃(8)-html常见标签及使用案例

来源：互联网发布：民族政策知乎编辑：程序博客网时间：2024/06/04 01:06
<!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 /> 密码：<inputtype="password" name="password" /> <br /><!-- 复选框 -->是不是智障：<input type="checkbox" name="zhizhang" value="yes" /> 是不是单身狗：<inputtype="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> <ahref="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> <labelfor="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
阅读全文
0 0