HTML第一课——基础知识普及【2】

关注公众号:自动化测试实战

  • img标签

 

我们先看一下文档结构:

 

这里我们文件当前位置就是lesson.html,所以现在我们img属性src给的值要进入imgs文件夹,所以我们可以用相对路径来表示,看代码:

<!DOCTYPE html>
<html>    <head>        <title>第一节课</title>        <meta charset="UTF-8"/>    </head>    <body>        <a href="https://www.baidu.com" target="_blank">百度</a>        <img src="imgs/0.png">    </body>
</html>

上面src后面跟的就是相对路径。

页面显示:

src除了用来设置图片路径以外,还用来设置alt属性,alt属性是用来给搜索引擎用的,以便你写的页面可以被搜索引擎搜索到。此外它还有widthheight属性,比如刚才的图片比较大,我们现在修改图片的大小,只需要:

<img src="imgs/0.png" width="5%" height="5%">

如果你希望自己的图片是网络上的图片,那只需要粘贴你希望放上去的图片地址,比如,放百度的背景,那么只需要看一下百度的地址:

然后复制这个地址,粘贴到你的src路径里:

<img src="https://www.baidu.com/img/bd_logo1.png" width="50%" height="50%">

但是要注意,如果图片写的是网络上的图片,要必须确定有网,不然图片是不显示的。

 

  • ul li标签

 

这两个标签是列表

<!DOCTYPE html>
<html>    <head>        <title>第一节课</title>        <meta charset="UTF-8"/>    </head>    <body>        <a href="https://www.baidu.com" target="_blank">百度</a>        <img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">        <ul>            <li>第一行</li>            <li>第二行</li>            <li>第三行</li>        </ul>    </body>
</html>

显示:

你可能会说除了ul li还有ol li,不用管那么多,记住这个就够了。
记住,只要页面中有固定样式的列表,那就用ul li,比如:

不信大家就去天猫看一下。

 

  • table

 

表格。之前说过了,以今天的为准。tr代表行,td代表列。

<table>
    <tr>
        <td>第1行1列</td>
        <td>第1行2列</td>
    </tr>
    <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
    </tr>
</table>

显示:

如果想显示边框,可以加个border属性:

<table border="1">...</table>

还要知道,table已经用的很少了,因为存在浏览器的兼容性,很多时候都被ul li代替了。大家会想到上次还说的tbody现在却没有写,其实即使我们不写浏览器也会帮我们加上:

 

上图中的tbody就是浏览器默认给我们加上的。此外,如果是表的第一行,需要加粗显示的话,可以将tr改为th

<table border="1">
    <tr>
        <th>第1行1列</th>
        <th>第1行2列</th>
    </tr>
    <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
    </tr>
</table>

th用来做表头,默认字体居中显示。
还有caption作为表格的标题:

<table border="1">
    <caption>表格标题</caption>
    <tr>
        <th>第1行1列</th>
        <th>第1行2列</th>
    </tr>
    <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
    </tr>
</table>

tbodycaption等这些都不用记。

合并表格:

<table border="1">
    <caption>表格标题</caption>
    <tr>
        <th>第1行1列</th>
        <th>第1行2列</th>
        <th>分数</th>
    </tr>
    <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
        <td>10</td>
    </tr>
    <tr>
        <td colspan="2">总成绩</td>                        
        <td>20</td>
    </tr>
</table>

我们给td标签加了colspan="2",就可以合并两行了:

最后给大家看一个例子,图片来自https://nba.hupu.com/teams:

<!DOCTYPE html>
<html>    <head>        <title>第一节课</title>        <meta charset="UTF-8"/>    </head>    <body>        <a href="https://www.baidu.com" target="_blank">百度</a>        <img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">        <ul>            <li>第一行</li>            <li>第二行</li>            <li>第三行</li>        </ul>        <table border="1">            <caption>表格标题</caption>            <tr>                <th>第1行1列</th>                <th>第1行2列</th>                <th>分数</th>                <th>一整行</th>            </tr>            <tr>                <td><img src="imgs/0.png"></td>                <td><img src="imgs/1.png"></td>                <td><img src="imgs/2.png"></td>                <td rowspan="3"><img src="imgs/logo.png"></td>            </tr>            <tr>                <td><img src="imgs/3.png"></td>                <td><img src="imgs/4.png"></td>                <td><img src="imgs/5.png"></td>            </tr>            <tr>                <td><img src="imgs/6.png"></td>                <td><img src="imgs/7.png"></td>                <td><img src="imgs/8.png"></td>            </tr>        </table>    </body>
</html>

显示:

写会了上面这个例子,table这里就没什么问题啦~

大家想学就得加把劲,自己不努力谁也教不会。

posted @ 2018-04-28 11:46  孟船长  阅读(269)  评论(0编辑  收藏  举报