【web自动化测试】2Html基础知识

一、 什么是html?

是用来描述网页的一种语言,html指的是超文本标记语言(hyper textmarup language),

它不是一种编程语言,它是一种标记语言,html包含静态的html和动态的html

二、 html标签

例子:

<html>
<head>
<title>青空地</title>
</head>
<body>
<h1>欢迎来到青空之地</h1>
<p>茫茫大海中,找一块属于自己的青空之地</p>
<p>在这里,你可以做自己想做的事</p>
<body>
</html>

254719c936c64b3cae9a1b7f94d4f831.png 

 

安例解析:

1、<html>与</html>之间的文本是用来描述整个网页的内容

2、<htad>与</head>之间标签内容是用来定义文档的头部,它是头部元素的容器。

3、<body>与</body>之间的文本是可见的页面内容

4、<h1>与</h1>之间的文本被显示为标题

5、<p>与</p>之间的文本被显示为段落

总结:

1、 html标记标签通常被称为html标签(html tag)

2、 html标签是由尖括号包围的关键词,比如<html>

3、 html标签通常是成对的,比如<p>和</p>

4、 标签对中的第一个标签是开始标签,第二个标签是结束标签

5、开始和结束标签也被称为开放标签和闭合标签

三、 基本的html标签

1、 html标题

html标题是通过<h1><h2>…..<h6>等标签进行下定义的,分为6级,字号大小不同。

如:

<h1>这是一个标题</h1>

<h2>这是一个标题</h2>

<h3>这是一个标题</h3>

2、 head定义和用法

<head>标签用于定义文档的头部,它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表,提供元信息等等。

3、 html段落

html段落是通过<p>标签进行定义的

如:

<p>这是一个段落.</p>

<p>这又是一个段落。</p>

4、 html链接

html链接是通过<a>标签进行定义的

<a>标签定义超链接,用于从一张页面链接到另一张页面。

<a>元素最重要的属性是href属性,它指示链接的目标。

如:

<a href=https://www.baidu.com>this is 百度link</a>

案例:

<html>
<head>
<title>青空地</title>
</head>
<body>
<h1>欢迎来到青空之地</h1>
<p>茫茫大海中,找一块属于自己的青空之地</p>
<p>在这里,你可以做自己想做的事</p>
<a href=https://www.baidu.com>this is 百度 link</a>
<body>
</html>

5、 html图像

html图像是通过<img>标签进行定义的

如:<img src="timg.jpg" width="300" height="300" />

注意:引号里面放的是图片的路径,如果不在同一目录下,则应该加上绝对路径。

案例:

6c58e7f39f3e45119452dc037596bfc8.png

 

<html>
<head>
<title>青空地</title>
</head>
<body>
<img src="timg.jpg" width="300"  height="300" />
<h1>欢迎来到青空之地</h1>
<p>茫茫大海中,找一块属于自己的青空之地</p>
<p>在这里,你可以做自己想做的事</p>
<a href=https://www.baidu.com>this is 百度 link</a>
<body>
</html> 

1、 html注释

可以将注释插入html代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。注释的语法:

<!—这是一段注释-->

2、 html换行

如果希望在不产生一个新段落的情况下换行,

请使用<br/>标签:

案例:

<html>
<head>
<title>青空地</title>
</head>
<body>
<imgsrc="timg.jpg" width="300"  height="300" />
<h1>欢迎来到青空之地</h1>
<p>茫茫大海中,<br/>找一块属于自己的青空之地</p>
<p>在这里,你可以做自己想做的事</p>
<a href=https://www.baidu.com>this is 百度 link</a>
<body>
</html>

fe9ce5ed3c6f40e985e7e732b455a78f.png 

 

8、 html div

<div>可定义文档中的分区或节(division/section)。

<div>标签可以把文档分割为独立的、不同的部分,它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用id或class来标记<div>,那么该标签的作用会变

得更加有效。

案例:

f926131a24f442ea94101cd95bc79c8d.png

 

<html>
<head>
<title>青空地</title>
</head>
<body>
<imgsrc="timg.jpg" width="300"  height="300" />
<h1>欢迎来到青空之地</h1>
<p>茫茫大海中,<br/>找一块属于自己的青空之地</p>
<p>在这里,你可以做自己想做的事</p>
<a href=https://www.baidu.com>this is 百度 link</a>
<div style="background-color:red;height:100;width:100">
<p>这是一块新的区域</p>
</div>
<body>
</html> 

四、 html基础属性

1、 name属性

name属性用于指定标签元素的名称。<a>标签内必须提供href或name属性。

如:<a name=”value”>

2、 id属性

id属性规定html元素的唯一的Id

id在html文档中必须是唯一的。

Id属性可通过javascript(HTML DOM)可通过css为带有指定的id的元素改变或添加样式。

学习安排上

作为一位过来人也是希望大家少走一些弯路,如果你不想再体验一次学习时找不到资料,没人解答问题,坚持几天便放弃的感受的话,在这里我给大家分享一些自动化测试的学习资源,希望能给你前进的路上带来帮助。【保证100%免费】

5da8d2ed2cdc16092e6d65e9da00c7e5.png

d3c03de3707421aa67842e50259f37d0.gif

视频文档获取方式:

这份文档和视频资料,对于想从事【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴我走过了最艰难的路程,希望也能帮助到你!以上均可以分享,点下方小卡片即可自行领取。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值