1. a标签
- 超链接，可以跳转
- 锚 href='#某个标签的ID' 标签的ID不允许重复
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>百度跳转</title> 6 </head> 7 <body> 8 <div> 9 <a href="http://www.baidu.com" target="_blank">百度</a> 10 </div> 11 <div> 12 <a href="#i1">第一章</a> 13 <a href="#i2">第二章</a> 14 <a href="#i3">第三章</a> 15 <a href="#i4">第四章</a> 16 </div> 17 18 <div id="i1" style="height:400px;">第一章的内容</div> 19 <div id="i2" style="height:400px;">第二章的内容</div> 20 <div id="i3" style="height:400px;">第三章的内容</div> 21 <div id="i4" style="height:400px;">第四章的内容</div> 22 23 </body> 24 </html>
2. img 标签
src，title，alt，style
3. 列表
ul-li
ol-li
dl-dt大标题
dd小标题
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <img src="1.jpeg"> 9 <ul> 10 <li>qwer</li> 11 <li>tyuii</li> 12 <li>ahdfhaj</li> 13 <li>adhsh</li> 14 </ul> 15 <ol> 16 <li>asdfq</li> 17 <li>hhhjk</li> 18 <li>sfhhh</li> 19 <li>ddddd</li> 20 </ol> 21 <dl> 22 <dt>111</dt> 23 <dd>aaa</dd> 24 <dd>bbb</dd> 25 <dd>ccc</dd> 26 <dt>222</dt> 27 <dd>qqq</dd> 28 <dd>www</dd> 29 <dd>eee</dd> 30 </dl> 31 </body> 32 </html>
4.表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <tr> <td>主机名</td> <td>端口</td> <td>操作</td> </tr> <tr> <td>1.1.1.1</td> <td>80</td> <td> <a href="1.html">查看详细</a> <a href="#">修改</a> </td> </tr> </table> </body> </html>
标准写法
table
thead
tr
th
tbody
tr
td
colspan
rowspan
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan="2">a</td> <td>b</td> </tr> <tr> <td>qqq</td> <td rowspan="2">rrr</td> </tr> </tbody> </table> </body> </html>