从菜鸟到大神之自动化测试（HTML）

最新推荐文章于 2024-06-24 21:24:30 发布

VisKing.

最新推荐文章于 2024-06-24 21:24:30 发布

阅读量322

点赞数

分类专栏：自动化测试

本文链接：https://blog.csdn.net/qq_44992750/article/details/106498326

版权

自动化测试专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了Web的基础知识，包括Web的定义、网站和网页的概念。深入讲解了HTML，阐述了HTML的基本概念、发展历史及常用开发工具，特别是HBuilder的使用。还详细讨论了HTML标签的语法、常见标签的运用，强调了标签的语义化对于网页优化的重要性。

摘要由CSDN通过智能技术生成

一.Web的介绍

什么是web

web（World Wide Web）即全球⼴域⽹，也称为万维⽹. 它是基于超⽂本和HTTP的、跨平台的分布式图形信息系统. 简单理解就是⽹站服务

什么是网站

使⽤HTML 展示特定内容相关⽹⻚的集合

什么是网页

就是⼀个包含HTML标签的纯⽂本⽂件, ⾥⾯包含⽂字、图⽚、链接等内容
浏览器能打开⽹⻚, 浏览器承担着解析、展示渲染的⻆⾊

网页的组成

HTML
CSS
JavaScript(简称JS)
https://www.w3school.com.cn/h.asp 学习参考⽹站

浏览器

五大浏览器厂商

IE
⾕歌(Chrome)
苹果浏览器 (Safari)
⽕狐 (Firefox)
欧朋(Opera)

二.HTML

基本概念

HTML(Hyper Text Markup Language, 超⽂本标记语⾔), 是为了发送Web 上的超⽂本开发的标记语⾔。
其实它就是⽂本，由浏览器负责将它解析成具体的⽹⻚内容

发展历史

在互联⽹最初的时候是没有HTML的，我们只能通过⽹络传输最简单的⽂字内容
随着互联⽹的发展和技术的更新，就出现了⼀种可以表达⽂字内容之外的语⾔HTML
HTML最初的版本是html1.0，⽬前流⾏使⽤的版本是html5。由⼀个W3C 组织负责制定Html语⾔的标准

前端非常常见的h5框架(H5框架与之前版本的区别在于将写好的框架在移动端打开可以兼容)
https://www.bootcss.com/

开发工具

Hbuilder X (HX): 国产的
Sublime Text: ⾮常强⼤(安装各种框架) Dreamweaver(DW): 美⼯⽤得⽐较多WebStrom: ⾃带各种插件
PyCharm
…

Hbuilder工具介绍

Hbuilder是⼀款⽀持HTML5的web开发IDE，是⼀款⽤来写HTML的代码编辑器.
免安装软件，可以在官⽹上下载相应的版本
将压缩包解压后, 直接放置到⾃已习惯的软件安装⽬录下将启动项发送到桌面⽣成快捷⽅式

在这里插入图片描述

HTML骨架

HTML由标签(节点、元素、标记)组成
- 双标签书写规则: <双标签名称></双标签名称>
- 单标签 <签名称 />
- 严格的HTML语法要求，⽆论是单标签还是双标签都必须要正确关闭，单标签通过/关闭，双标签通过/标签名关闭
- HTML标签可以嵌套使⽤，但是不能出现交叉嵌套现象

正确写法

	<标签名称1>
		<标签名称2></标签名称2>
	</标签名称1>

错误写法

	<标签名称1>
		<标签名称2></标签名称1>
	<标签名称2>

⽐如，浏览器会将左边的HTML代码转换为右边的⽹⻚内容

在这里插入图片描述 |

正常格式：
在这里插入图片描述

三.HTML标签

html标签内容换行和空格

在HTML源代码编写格式中，⼿动输⼊换⾏在浏览器上不会有效果
在HTML源代码中⼿动多个空格, 在浏览器上只会显示⼀个空格的效果
在HTML中想要实现换⾏可以通过定义单标签br.语法是<br/>，想要添加空格可以通过实体符号&nbsp,如果采⽤的是utf8编码，那么三个&nbsp相当于一个汉字

标题和段落标签和文字标签

⽂字标签有很多, 在做⽹⻚的时候, ⽂字的外在样式⼀般通过CSS来设置

<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
	<h1>我是标题标签,最⼤的</h1>
	<h2>我是标题标签,⽐h1标签⼩⼀点</h2>
	<p>我是段落标签</p>
	</body>
</html>

标签的语义化

在合适的地⽅使⽤合适的标签, 就算符合标签的语义化. 符合语义化的⽹站可以在搜索引擎中排名更靠前, 让你的⽹站获得更多点击。

弱语义：
	<b>⽂字加粗</b>
	<i>倾斜⽂字</i>
强语义:
	<strong>⽂字加粗</strong>
	<em>倾斜⽂字</em>

常见标签整理

标题标签: h1, h2, h3, h4, h5…
段落标签: p
换⾏标签: br
容器标签: div, span (⽤来容纳其它标签)
图⽚标签: img (单标签)
可以通过属性 src 来插⼊图⽚, 属性写在标签 <> ⾥⾯, 格式:属性名=属性值
, 如:

	src="01.jpg"

绝对路径: ⽬录下的绝对位置，直接到达⽬标位置，通常是从盘符开始的路径. 不推荐使⽤，如：

D:\所有软件\python⽤的软件\必备软件

相对路径: 由当前⽂件所在的路径为起点, 去找对应的资源.如：

/images/image2/tupian.jpg

链接标签:a
href属性来链接, 新窗⼝打开⻚⾯使⽤target属性来完成
表单标签:from
在web⽹⻚上, ⽤来与⽤户交互并提交数据的，在HTML⾥form标签，是表单域, 相当于是个容器.
action属性: ⽤户写好数据后, 点提交, 数据提交到的⽬标地址, 就写在action中
method属性: 提交⽅法. get, post
⽂本: input, textarea
下拉框: select
列表标签: ul, ol, li

VisKing.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从菜鸟到大神之自动化测试（HTML）

从菜鸟到大神之自动化测试（HTML）一.Web的介绍什么是web什么是网站什么是网页网页的组成浏览器二.HTML基本概念发展历史开发工具Hbuilder工具介绍HTML骨架三.HTML标签html标签内容换行和空格标题和段落标签和文字标签标签的语义化常见标签整理一.Web的介绍什么是webweb（World Wide Web）即全球⼴域⽹，也称为万维⽹. 它是基于超⽂本和HTTP的、跨平台的分布式图形信息系统. 简单理解就是⽹站服务什么是网站使⽤HTML 展示特定内容相关⽹⻚的集合什么是网页
复制链接

扫一扫

专栏目录