第二篇 Html(13章节）-a标签，img标签，列表，表格

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>

 

posted @ 2018-12-25 15:09  四叶草134  阅读(248)  评论(0)  编辑  收藏  举报