HTML基础之标签篇（三）-优快云博客

本文链接：https://blog.youkuaiyun.com/lxjstudyIT/article/details/52219886

对于html的标签，要自由运用还是要多实践。本篇讲的主要是表格和图片有关的标签，以放图和代码作为总结复习演示
这里写图片描述

代码示例：

<html>
    <head>
        <title>标签</title>
        <meta charset="utf-8">
    </head>
    <body>
        <table width="960" height="350" border="1" align="center" cellspacing="10" cellpadding="20" frame="box">
            <caption>表格</caption>
            <tr align="center" bgcolor="green" valign="top">
                <td bgcolor="red"  align="left">年级班级</td>
                <td>年龄</td>
                <td>姓名</td>
                <td>成绩</td>
            </tr>
            <tr>
                <th>初一七班</th>
                <th>16</th>
                <th>张三</th>
                <th>85</th>
            </tr>
            <tr>
                <th>初二八班</th>
                <th>17</th>
                <th>李四</th>
                <th>90</th>
            </tr>
            <tr>
                <th>初三一班</th>
                <th>18</th>
                <th>小明</th>
                <th>95</th>
            </tr>
            <tr>
                <th>初三二班</th>
                <th>18</th>
                <th>小强</th>
                <th>80</th>
            </tr>
        </table>
    </body>
</html>

运行效果：
这里写图片描述

代码示例（我先在所编辑的html文件同一个文件夹下放一张760*760的吉他图片）：

<html>
    <head>
        <title>img标签</title>
        <meta charset="utf-8">
    </head>
    <body>
        <img src="guitar.jpg"  width="400px"   height="400px" border="4px" title="吉他"  alt="吉他图片"> 
    </body>
</html>

运行效果：
这里写图片描述