关注公众号:自动化测试实战
-
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
属性是用来给搜索引擎用的,以便你写的页面可以被搜索引擎搜索到。此外它还有width
和height
属性,比如刚才的图片比较大,我们现在修改图片的大小,只需要:
<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>
tbody
和caption
等这些都不用记。
合并表格:
<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
这里就没什么问题啦~
大家想学就得加把劲,自己不努力谁也教不会。