Day3

mac2024-01-25  38

任何WEB页面都离不开标签,不同的标签有不同的定义和功能,最终目的都是呈现完整的丰富的web页面

为什么要学习html标签?因为自动化脚本必须依赖于标签,通过标签对界面元素进行定位

HTML标题

  HTML标题(Heading)是通过<h1>~<h6>等标签进行定义的。

  标题一共有六个级别,不同的数字代表不同的级别

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

head定义和用法

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

<html>

 

<head>

<title>文档的标题</title>

</head>

 

<body>

文档的内容

</body>

</html>

HTML段落

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

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

HTML链接

HTML标签是通过<a>标签进行定义的。<a>标签定义超链接,用于从一张页面链接到另一张页面。<a>元素最重要的属性是href属性,他指示链接的目标。

<a href="http://www.51zxw.net">This is a 51zxw link</a>

HTML图像

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

<img src="w3school.jpg"width="104"height="142" />

注意引用图像的位置,路径是相对的,如果图片和网页在一个文件夹里面,可以直接写图片的名称;如果不在同一个文件夹,要写清楚引用路径,要写绝对路径。

HTML注释

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

<! -- This is a comment -->

HTML换行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用<br/>标签:

<p>This is <br/>a para<br/>graph with link breaks</p>

HTML Div(非常重要非常常用的标签)

<div>可以定义文档中的分区或节(division/section).<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用id或class来标记<div>,那么该标签的作用会变得更加有效。

<html>

 

<head>

<title>我要自学网</title>

</head>

 

<body>

 

<h1>自学网口号</h1>

<p>自学成才,快速成功!!增加收入,改变命运</p>

<p>这是一个神奇的网站,你值得拥有!</p>

 

<!--DIV --->

<div style="background-color:yellow;height:100;width:400">

<h3>This is a div block </h3>

<p>hello 51zxw!</p>

</div>

 

</body>

 

</html>

更多标签请见:http://www.w3school.com.cn/tags/index.asp   

在写自动化测试脚本的时候,HTML方面有不懂的地方,都可以参考这个网站

最新回复(0)