那些你不得不了解的HTML基础
Posted 红苹果超好吃
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了那些你不得不了解的HTML基础相关的知识，希望对你有一定的参考价值。
瞧一瞧，看一看，新鲜的html出笼了
目录
在总的介绍之前，先说明一下，以下所有内容均是由VSCode来进行实现的。
这里为大家介绍一些好用的小技巧：
1.运用快捷键！+ tab 就可以直接创建出一个新的基本框架。
2.当我们输入需要的后，再按tab的话就可以直接生成相对的键值对
3.使用lorem是可以生成随机的一段字符串的,这个可以为后面的调试起到一定作用,
一、HTML基本语法（标签）
注释
①基本格式：
<!--这里就是一个注释 -->
②结合代码：
③注意：
首先，我们可以通过ctrl+/来对选中的行列进行注释与否的切换。
其次，在写注释的时候，我们不能够乱写，不能因为是注释就写些侮辱性言语，这个样子是不好的。
标题
①格式：（标题有六级，不同的级数的大小对应是不同的）
<h1>我是一级标题</h1> <h2>我是二级标题</h2> <h3>我是三级标题</h3> <h4>我是四级标题</h4> <h5>我是五级标题</h5> <h6>我是六级标题</h6>②结果演示：
段落
①基本格式：
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem animi exercitationem saepe similique qui voluptatibus officia asperiores soluta magnam veritatis. Ut officia asperiores adipisci, expedita ad libero cupiditate quo eveniet!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos qui repellendus veritatis deleniti itaque voluptate officia nostrum ad quia placeat! Autem illo beatae non pariatur, impedit similique saepe neque in.</p>②结果展示：
这个时候，同学们不免会产生疑问，既然是段落，那为什么开始没有空两格？
这个事情HTML 是无法实现的，只能够靠CSS来实现，因为HTML更多是描述页面的内容（骨架），而CSS是描述页面的样式，即每个地方到底是怎么样的（皮相）
下面我们通过CSS来进行改进：（这里不详说，我会在后续博客中给大家介绍的）
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem animi exercitationem saepe similique qui voluptatibus officia asperiores soluta magnam veritatis. Ut officia asperiores adipisci, expedita ad libero cupiditate quo eveniet!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos qui repellendus veritatis deleniti itaque voluptate officia nostrum ad quia placeat! Autem illo beatae non pariatur, impedit similique saepe neque in.</p> <style> p text-indent: 2em; </style>产生的结果：
换行
为什么要换行？我们在编写HTML的代码时候换行不就行了吗？为什么要专门用换行符？
因为像例如我们前面讲的标题，这种是属于块级元素，块级元素是可以独占一行的，而除了块级元素还有行内元素，这就不能够独占一行。除此之外，在HTML里面换行是会被直接忽略掉的。必须要用换行对应的<br>元素
下面给大家举个例子：
那么正确操作怎么样呢？我们向下看看
①基本格式：(这是一个单标签，不需要像其他标签那样成对引用)
<p>我是用来测试HTML里是否会换行的<br> 你猜猜我会换行吗 </p>②结果展示:
所以，我们要记住，要想在网页中实现换行，是需要用<br>来实现的
特殊转义字符
由上述，我们知道了HTML需要用专门的换行符，否则在HTML中的换行将是无效的，所以，我们进一步思考，那么要是想输入空格啥的，直接在HTML中输入，有用吗？我们也举个例子给大家伙看看：
所以我们引入了特殊的转移字符
①特殊转移字符表：（这里是显示的我们日常生活中常用的）
②我们仍以空格为例，来更正上述的错误：
<p>我要空格空格，要三个空格     三个空格完了 </p>结果如下：
格式化标签
这里的格式化标签，就是我们前面提到的行内元素，也就是说在不加<br>的情况下，会排列在一行中
①格式如下：
<strong>我是加粗的</strong> <b>我也是加粗的</b> <em>我是倾斜的</em> <i>我也是倾斜的</i> <ins>我是下划线的</ins> <u>我也是下划线的</u>②结果显示：
图片
图片标签img这也是一个单标签,不需要结束标签。
img中可以写很多属性，不过最重要的当属scr，scr的作用是用来描述图片的具体所属的位置的。这里就会涉及到图片的路径问题，可以是绝对路径，可以是相对路径，也可以是网络路径。我们下面来一一进行示范
①通过绝对路径来访问一个图片:
②通过相对路径来访问一个图片:
③通过网络路径来访问一个图片:
那么其中，alt的作用是什么呢？
alt的属性是用来表示路径有问题，与否，就算有了问题，仍然会加以提示，如下：
<img src="/www.dsafdsvdgergdgd.jpg" alt="这是一个哆啦A梦">结果如下：
④除此之外，我们也可以对照片进行尺寸的设置。
通过width和high来对其宽度，高度来进行指定
（我们这里的单位用px像素来进行表示，因为我们屏幕的呈现是由一个个像素点组成的）
<img src="C:/Users/张洋洋的小布偶/Desktop/博客/哆啦A梦.webp" width=30px high=40px alt="这是一个哆啦A梦">效果如下：
要是我们仅仅对长度或宽度进行指定，那么它会根据系统来进行等比例缩放
<img src="C:/Users/张洋洋的小布偶/Desktop/博客/哆啦A梦.webp" width=300px alt="这是一个哆啦A梦">结果如下：
超链接a标签
①什么是超链接a标签中的外部链接？
就是点击之后可以跳到相应的界面
格式如下：
<p> 点击下面的链接，跳转到我的博客主页 <a href="https://blog.csdn.net/weixin_58850105?type=blog">红苹果超好吃的博客主页</a> </p>结果如下：
②内部链接：
（网站内部页面之间的连接,写相对路径即可）
<a href="Untitled-2.html">实现内部的跳转</a>结果展示：
③空链接：（#）
(空链接的作用是起到占位的作用，因为在实际开发中，有时候并没有确定跳转到哪时，常用空链接来进行占位的操作)
<a href="#">这是一个空链接</a>结果演示：
空链接点击后是不会进行跳转的哦
④下载链接：（顾名思义，点击后，会对文件进行下载，这里，我们用桌面上任意一压缩包来进行演示）
<a href="C:/Users/张洋洋的小布偶/Desktop/新冠疫情爬虫.rar">点击此进行下载的操作</a>结果演示：
表格标签
①表格标签的介绍：
它是属于一组标签。其中，table：表示整个表格；tr表示一行；td表示一列；th表示表头的一列；
②我们来用这些属性绘制一个简单的表格，代码如下：
<table> <!--首先构造第一行的表头--> <tr> <th>姓名</th> <th>年龄</th> </tr> <!--第二行进行输入张三的信息--> <tr> <!--第一列--> <td>张三</td> <!--第二列--> <td>18</td> </tr> <!--第三行进行输入李四的信息--> <tr><!--第一列--> <td>李四</td> <!--第二列--> <td>19</td> </tr> </table>结果如下:我们会发现，这只是一个简单的表格的内容，并没有任何的修饰
因此我们对它进行一些简单的设计。
我们应该怎么去设计？（在实际开发中，我们大多用CSS来实现，我们会在后续给大家详说）
border:加上边框
width/height：设置表格的尺寸
cellspacing：去掉单元格之间的间隙
text-align:使得内容居中
③修改后代码及结果：
<style> tr text-align: center; </style>//使用CSS来进行居中(使得每一行进行居中，当然切换成td列也可以) <table border="4px" width="300px" cellspacing="0"> <!--首先构造第一行的表头--> <tr> <th>姓名</th> <th>年龄</th> </tr> <!--第二行进行输入张三的信息--> <tr> <!--第一列--> <td>张三</td> <!--第二列--> <td>18</td> </tr> <!--第三行进行输入李四的信息--> <tr><!--第一列--> <td>李四</td> <!--第二列--> <td>19</td> </tr> </table>结果如下：
列表标签
①列表表单的作用：
用来罗列一组并列的数据
②列表表单的分类及实现：
a.无序列表：
ul:unordered list
无序列表如下： <ul> <li>西瓜</li> <li>蓝莓</li> <li>火龙果</li> </ul>结果如此：
b.有序列表：
ol:ordered list
有序列表如下： <ol> <li>西瓜</li> <li>蓝莓</li> <li>火龙果</li> </ol>结果如此：
c.自定义列表：
li:list item
<h3>自定义列表</h3> <dl> <dt>西瓜</dt> <dt>蓝莓</dt> <dt>火龙果</dt> </dl>结果如此：
表单标签
①什么是表单标签？
表单标签是用户和页面进行交互的过程大部分的 html 标签都是给用户"展示",表单标签,是让用户来"输入"。
②表单标签中的几个典型标签：
1.form标签：
（利用form标签就可以允许用户输入一些信息,并且交到服务器上）
2.input标签：
a.单行文本框：
b.input搭配label标签，实现点击文字，也可以等同选中选项的结果
注意！！！在一个页面中id的取值是不能够重复的。
c.input来选择文件：
<input type="file">保存运行后,打开网站,点击选择文件，就会弹出一个对话框，就可以选择本地的一个文件，紧接着浏览器就会打开这个文件进一步的就可以实现 提交/上传文件到服务器。
d.select标签：
（用来实现一个下拉菜单）
f.textarea标签：
它是一个多行编辑框的标签
无语义标签
①两种无语义标签的介绍：
div默认是一个块级元素（独占一行）
span默认是一个行内元素（不独占一行）②无语义标签的作用是什么？
这两个无语义标签的作用相当于我们上述提到的大部分有语义标签的作用，而且极端来讲，对于一个网页而言，90%的标签基本上都是（div/span）
二、基于上述实现的两个案例
下面的两个案例就是基于对上面所讲述内容的一个汇总
制作一份简历信息
①代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>简历页面</title> </head> <body> <h1>张三</h1> <h2>基本信息</h2> <p><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F12272451953%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654689908&t=b5879117d5ecb392a3bf95ce7f0b4736" alt="玫瑰" title="这是我的照片" width="200px"></p> <p>求职意向: Java测试开发工程师</p> <p>联系电话: 13778112098</p> <p>邮箱: 199877***@qq.com</p> <p><a href="https://blog.csdn.net/weixin_58850105?type=blog">我的博客主页</a></p> <h2>教育背景</h2> <ol> <li>2002 - 2005 跟斗幼儿园</li> <li>2006 - 2012 跟斗小学</li> <li>2013 - 2016 跟斗初中</li> <li>2017 - 2019 跟斗高中</li> <li>2020 - 2023 跟斗大学 英语 本科</li> </ol> <h2>专业技能</h2> <ul> <li>熟悉java，C，python等基本语言,;</li> <li>熟悉常见数据结构;</li> <li>熟悉mysql的基本操作;</li> <li>对计算机网络，操作系统，计算机组成原理有一定的了解;</li> </ul> <h2>我的项目</h2> <h3>实现了三子棋游戏</h3> <h2>个人评价</h2> <p>多次获得三好学生</p> </body> </html>②结果如下：
填写一份简历信息
①代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>简历页面 </title> <table width="500px"cellspacing="0"></table> <h3>请您填写简历信息</h3> <table> <tr> <td> 姓名 </td> <td> <input type="text"> </td> </tr> <tr> <td> 性别 </td> <td> <input type="radio" name="sex" id="male" checked="checked"> <label for="male"><img src="./image/男.png" alt="" width="20px"> 男</label> <input type="radio" name="sex" id="female"> <label for="female"><img src="./image/女.png" alt="" width="20px">女</label> </td> </tr> <tr> <td> 出生日期 </td> <td> <select> <option>--请选择年份--</option> <option>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> </select> <select> <option>--请选择月份--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select> <select> <option>--请选择日期--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option> </select> </td> </tr> <tr> <td> 毕业学校 </td> <td> <input type="text"> </td> </tr> <tr> <td> 应聘岗位 </td> <td> <input type="checkbox" id="frontend"> <label for="frontend">前端开发</label> <input type="checkbox" id="backend"> <label for="backend">后端开发</label> <input type="checkbox" id="qa"> <label for="qa">测试开发</label> <input type="checkbox" id="op"> <label for="op">运维开发</label> </td> </tr> <tr> <td>掌握的技能</td> <td> <textarea cols="30" rows="20"></textarea> </td> </tr> <tr> <td>项目经历</td> <td> <textarea cols="30" rows="20"></textarea> </td> </tr> <tr> <td></td> <td> <input type="checkbox" id="confirm"> <label for="confirm">我已仔细阅读过公司的招聘要求</label> </td> </tr> <tr> <td></td> <td> <a href="#">查看我的状态</a> </td> </tr> <tr> <td></td> <td> <h3>请应聘者确认: </h3> <ul> <li> 以上信息真实有效 </li> <li> 能够尽快去公司实习 </li> <li> 能够接受公司的加班文化 </li> </ul> </td> </tr> </table> </body>②结果如下：
今天就到这里啦，下次将会为大家带来CSS，敬请期待哦
关于测试用例编写你不得不了解的那些事...
对于一个软件测试人员来说，编写测试用例是不可或缺的一项技能，但怎么写好一个需求的测试用例却不是很容易，特别对于新手来说，更是不容易，我也是从新手一步步走过来的，下面我就把我的经验总结出来供大家参考吧。
测试用例是什么
这个问题很简单但却不能不知道，刚入行，我们会很懵，弄清楚这个问题，对我们接下来写测试用例非常有帮助。
测试用例顾名思义就是用来测试的例子，但这个例子却不是随便的，而是通过我们分析后精心设计出来的，是我们测试的一个标准。
书写结构要符合规范
测试用例不仅是我们测试的例子，还是我们软件功能的一个详细描述，一个好的测试用例，不仅仅是自己能看得懂、测试场景全面，还要能让别人看得懂，让别人通过你的测试案例能对你所测试的那个功能有一个全面的了解和认识。
所以测试用例的书写也不是随便的，它有一定的结构。一般有以下几部分组成：
- 测试用例名称
这个一般是在你写多个需求测试功能点时用它来标记你当前写的是哪个功能测试点的用例，比如你正在写登录账号的测试用例，你就可以在这一栏写上账号登录测试。
- 测试用例描述
这个一般是对你当前所写测试用例功能点进行一个简单的描述，让人一眼能看出你这个是在测试哪个点。
还拿上面的登录测试来说，我们就可以这样写：输入正确的账号、正确的密码、登录成功。
- 测试前置条件
前置条件一般就是指在你接下来的操作之前要做的准备工作。
比如有一个需求是这样的：当订单所选国家对应的是否汇总物料的字段标识为Y时，就把这个订单下的所有备件物料汇总到一起，否则不时进行汇总。
那么在我们写这个测试用例的时候，它就有一个前置条件就是所选国家是否汇总物料的标识为Y或N。
- 测试操作步骤
测试步骤这个很简单，就是把我们执行测试的操作一步步写下来，这个一定要写清楚，方便后来人查阅和学习。
- 期望结果
就是你在前置条件下执行当前测试用例步骤后得到的一个正确的结果也就是你想要的结果就是期望结果。
了解需求的背景、开发实现方案
为什么要了解需求背景和开发实现方案？了解需求背景可以帮助我们分析哪些应用场景是合理的，哪些是不合理的，哪些场景是涉及到此需求的，我们接下来的测试用例写的才能更接近实际应用。
那如何了解需求背景，一般是从需求提出人那里了解，有的是从产品经理统一了解，这个要根据不同公司的不同安排进行了解。
了解开发实现方案有助于我们从代码层面和实现逻辑上来识别一些潜在的风险问题，同时也给我们测试用例提供更清晰的思路和场景。
开发实现方案的一般是通过开发设计评审，有的公司没有这个步骤，那只有自己主动跟开发小哥沟通了，只有这个了解清楚了，你才能更清楚的知道功能的实现输入和相应的输出是否正确，才能提前识别期望结果与需求提出人的结果是否一致，你的测试用例写得场景才能更全面。
掌握必要的测试用例设计方法
测试用例设计方法也是编写测试用例不可缺少的一部分，掌握一定的测试用例设计方法有助于我们分析测试场景。
不同的需求不的功能实现点要用不同的方法进行分析设计。
一般来说有做比较判断或分类的，在比较判断这个点上常用边界值分析和等价划分方法来分析设计。
有逻辑判断的或功能较复杂的就要用因果图法，正交实验法等这些（这些方法网上都有详细的介绍我就不详细说了）。
比如一个需求功能是这样的：根据报销单中出差人员的出差的城市进行判断所提交的报销金额是否超标。
这里面有一个隐藏的信息就是出差城市和报销金额的对应的关系，这个是在后台的一张表中，这张表结构是这样的：
类别标记这个城市是一类城市还是二类城市，金额就是报销限制金额。
从上述的信息中我们可以看出这个既有分析还有比较判断，所以我们这里要用到边界值分析法和等价划分来分析设计场景。
边界值来分析金额比较的场景,等价划分来划分城市分类，所以得出的分析场景如下几个：
-
一类城市，报销金额小于给定金额
-
一类城市，报销金额大于给定金额
-
一类城市，报销金额等于给定金额
-
二类城市，报销金额小于给定金额
-
二类城市，报销金额大于给定金额
-
二类城市，报销金额等于给定金额
充分考虑功能、性能、安全问题
这个是测试用例编写一个比较重要的点，无论是你做哪个功能软件测试都要考虑这几个点，一般的话我会从这几方面考虑：
在我们了解清楚我们的需求功能以后，一般按照上面这个思路去设计我们的测试场景都是比较全面的。
比如在一个原有的网页上面新增一个查询库存产品余量的功能。
查询条件有：1.产品名称；2.产品型号。
两者可组合查询。
查询结果展示有：
产品名称、产品型号、库存余量、出库总量。
这是一个很简单的查询功能，通过分析我们知道：
01、数据存于本地数据库表中，直接取的就是一张叫产品余量表里面的数据。
02、由于产品种类型号比较多，存在单个产品名称查询时数据量比较大的情况。
03、因为是在原有网页上新增的功能，网页的安全性不需要考虑，但查询接口的安全需要考虑。
04、由于是新增功能影响到页面布局，所以要考虑易用性和兼容性。
05、查询功能可能会存在多人同时查询和一个人多次频繁查询的情况，所以性能这块要需要考虑并发，和频繁操作的场景。
基本场景分析完了，我们就可以根据我们上面所说的考虑点列我们的测试场景了，如下：
最后也给软件测试的朋友们分享一份测试资料：
以上内容，对于软件测试的朋友来说应该是最全面最完整的备战仓库了，为了更好地整理每个模块，我也参考了很多网上的优质博文和项目，力求不漏掉每一个知识点，很多朋友靠着这些内容进行复习，拿到了BATJ等大厂的offer，这个仓库也已经帮助了很多的软件测试的学习者，希望也能帮助到你。关注我公众号：程序员二黑，免费获取！
机会只垂青有准备的人，这是一个靠本事的社会。有时候，你之所以发展得不好，不是因为没有机遇，而是因为你没有准备好，导致机遇与你擦肩而过。如果你想要学习，什么时候开始都不晚，而不是瞻前顾后，你只要用尽全力，剩下的交给时间！
加油吧，测试人！路就在脚下，成功就在明天！
推荐阅读
以上是关于那些你不得不了解的HTML基础的主要内容，如果未能解决你的问题，请参考以下文章