超链接标签
<a href="" target="_blank">text</a>,此类标签通常是超链接。其中href后面跟进的是超链接的地址,target代表打开新页面的方式,_blank代表在新的标签页打开。
- 通过超链接“text”跳转到百度首页。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http:www.baidu.com">text</a> </body> </html>
- 通过超链接跳转到需要查看的位置。通过id来判断跳转的位置,在href中必须加上’#‘,而且,id不能重复,否则会报错。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a> <div id="1" style="height:600px;">第一章的内容</div> <div id="2" style="height:600px;">第二章的内容</div> <div id="3" style="height:600px;">第三章的内容</div> </body> </html>
插入图片和列表
- 插入图片通常用img,具体使用方法很简单。可以通过嵌套实现图片的超链接,通过title显示图片的标识,当找不到图片的路径时,可以通过alt来实现对其描述。说也说不明白,贴段代码自己研究吧。
- 插入列表更简单,有三种表现形式:ul-li, ol-li, dl-dt/dd,具体的表现形式自己可以研究,分别以点、数字和标题形式存在。同时可以插入<a href=""></a>来实现超链接。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="s1.html"> <img src="aa.jpg" style="height:200px;width:200px;" alt="beauty" title="大美女"> </a> <ul> <li>姓名</li> <li>张钊</li> <li>陈狗</li> </ul> <ol> <li>姓名</li> <li>张钊</li> <li>陈狗</li> </ol> <dl> <dt>姓名</dt> <dd>张钊</dd> <dd>陈狗</dd> </dl> </body> </html>
插入表格
- 一个规范的表格结构-:table-----thead-----tr-----th(代表标题)/ -----tbody-----tr-----td(代表表格内容)。
- 如果想要合并单元格,可以通过colspan="num"或者rowspan="num"来合并。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>张钊</td> <td>18</td> <td><a href="#">查询信息</a></td> </tr> </tbody> <tbody> <tr> <td>陈狗</td> <td>28</td> <td><a href="https:www.baidu.com">查询信息</a></td> </tr> </tbody> </table> </body> </html>
lable标签和fieldset标签
- label标签运用场景较少,通常是输入用户名或密码时,不仅仅可以通过点击text部分,通过点击用户名或密码也可以进入文本框的光标。通过和text的id绑定使用。
- fieldset标签应用的场景更少,只是构造某个边框时候才会使用,可以稍微对照着就能搞明白。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <fieldset> <legend> 登录 </legend> <label for="1"> 用户名: </label> <input id="1" type="text" name="user"/> <label for="2"> 密码: </label> <input id="2" type="text" name="password"/> </fieldset> </body> </html>