Web测试基础-Html基础知识

Html基础知识

一、 什么是html?

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

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

二、 html标签

例子:

<html>

<head>

<title>青空地</title>

</head>

<body>

<h1>欢迎来到青空之地</h1>

<p>茫茫大海中,找一块属于自己的青空之地</p>

<p>在这里,你可以做自己想做的事</p>

<body>

</html>

安例解析:

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" />

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

案例:

<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>

6、 html注释

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

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

7、 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>

 bdf878bc14c9428c9e84a9fae8c4e723.png

8、 html  div

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

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

得更加有效。

案例:

 457720dc45d0439eab7533d3901d3305.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的元素改变或添加样式。(来源:千锋软件测试)

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值