关键词：
关注公众号：自动化测试实战
-
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这里就没什么问题啦~
大家想学就得加把劲，自己不努力谁也教不会。
零基础学html5和css3前端开发第一课(代码片段)
...L5进行网站布局使用CSS3进行网站美化开发精美的商业网站第一章HTML5基础概念：网页：互联网的基础，网络页面,网页：文字、图片、声音、视频、VR虚幻等；网站：淘宝网、京东、亚马逊、腾讯、新浪、网... 查看详情
零基础学html5和css3前端开发第一课(代码片段)
...L5进行网站布局使用CSS3进行网站美化开发精美的商业网站第一章HTML5基础概念：网页：互联网的基础，网络页面,网页：文字、图片、声音、视频、VR虚幻等；网站：淘宝网、京东、亚马逊、腾讯、新浪、网... 查看详情
第一课：网络爬虫准备
本课知识路线 Requests框架：自动爬取HTML页面与自动网络请求提交 robots.txt:网络爬虫排除标准 BeautifulSoup框架：解析HTML页面 Re框架：正则框架，提取页面关键信息 Scrapy框架：网络爬虫原理介绍，专业爬虫框架介... 查看详情
重学java基础第一课:解决大家的疑问
重学java基础第一课:解决大家的疑问
javascript第一课
今天进入到了js的阶段，了解到了JavaScript是一个很重要的阶段，所以要好好的理清每一个知识点 JavaScript的使用： 在<head>标签里应用<script><!DOCTYPEhtml><html><head&g 查看详情
html第一课
<标签名属性>内容</标签名><标签/>静态网页与动态网页的区别：是否从数据库提取数据相对路径跟绝对路径../代表高一级的 牛逼的空格<fontface="微软雅黑"color="#000000"size="7">变换字体</font><strong>加... 查看详情
行人重识别计算机视觉进阶系列第一课基础知识
【行人重识别】🖐计算机视觉进阶系列🖐第一课基础知识概述行人重识别rank-1mAP损失函数交叉熵TripletLossHardNegative概述行人重识别(PersonRe-Identification)是利用计算机视觉技术判断图片或视频中是否存在特定行人的技术.行... 查看详情
html5——自学第一课
1、心得 首先遇见问题要寻根源，而不是将问题抛出；其次要经常查看参考文档、参考示例；学会百度。2、技能需求 HTML5、XHTML、CSS3、JavaScript、jQuery(jQuery-UI/jQuery-Mobile)3、HTML5基本标签 <!DOCTYPEhtml> //申明 &l... 查看详情
萌新接触前端的第一课——html
HTMLweb服务本质（好吧这个先不用知道也可以）importsocketdefmain():sock=socket.socket(socket.AF_INET,socket.SOCK_STREAM)sock.bind((‘localhost‘,8081))sock.listen(5)whileTrue:print("serverisworking.....")conn,address=sock. 查看详情
python基础2022最新第一课安装&环境配置(代码片段)
【Python基础2022最新】第一课安装&环境配置概述自我介绍安装环境配置Python的历史Python的前景概述从今天开始,小白我将带领大家学习一下Python零基础入门的内容.本专栏会以讲解+练习的模式,带领大家熟悉Python的语法,应用,... 查看详情
python基础2022最新第一课安装&环境配置(代码片段)
【Python基础2022最新】第一课安装&环境配置概述自我介绍Python的历史Python的前景安装环境配置PyCharm安装第一个程序概述从今天开始,小白我将带领大家学习一下Python零基础入门的内容.本专栏会以讲解+练习的模式,带领大家熟... 查看详情
javaweb第一课
了解javawebJavaWeb应用由一组Servlet、HTML页、类、以及其他可以被绑定的资源构成。它可以在各种供应商提供的实现Servlet规范的Servlet容器中运行。JavaWeb包含如下内容：ServletJsp实用类静态文档如HTML、图片等描述Web应用的信息（web.xm... 查看详情
第一课mongodb概述与安装
1.课程大纲本次课主要介绍MongoDB背景知识和MongoDB的安装与配置，让大家对MongoDB有一个初认识。其基本的知识点包含：NoSQL数据库概述MongoDB数据库简单介绍Linux下安装MongoDB数据库Mac和Windows下安装MongoDB数据库2.课程简单介绍MongoDB... 查看详情
大数据spark学习：scala基础第一课
计划：阶段1：精通Spark内核阶段2：精通千万级的项目阶段3：机器学习JAVA本身不是伟大的语言，伟大的是JVM，构件分布式平台什么的，依赖的是JVM，不一定要JAVA语言可认为Scala是JAVA的升级语言，JAVA是支持面向对象的语言，而非... 查看详情
第一课jenkins的环境的配置
以前断断续续接触jenkins，这次系统学习一下，发现还是有很多以前不熟悉的地方，和以前的知识串联起来很有必要。《Jenkins权威指南》这本书很好，以前只是了解到jenkins客户端的一些基础配置，没有结合代码端的配置，这次系... 查看详情
beautifulsoup第一课
fromurllib.requestimporturlopenfromurllib.errorimportHTTPErrorfrombs4importBeautifulSoupdefgetTitle(url): try: html=urlopen(url)&n 查看详情
第一课
5个目标点（知识点）环境说明，连接实例，hash运算dbs目录文件解释参数文件解释启动过程三阶段实战演练本次课程目标是讲解oracle实例的启动过程首先了解一下本次实验环境 之前已经创建好了一个数据库-... 查看详情