软件测试基础HTML

web前端三大核心技术

1.HTML负责页的架构
2.CSS 负责页的样式,美化
3.JS 负责页的行为

什么是HTML?

是用来描述页的一种语言，
HTML的主要作用：就是让各大浏览器都能够显示同一样的页面

HTML 是用来描述页的一种语言. 即超文本标记语言

超:超链接

文本

标记语言:是一套标记标签

HTML不是一种编程语言,而是标记语言,HTML用标签来描述页,HTML文档也称为页.

Hbuilder简介

新建一个HTML 页
1.下载 Hbuilderx 应用程序
2.新建一个写代码的文件夹
3.鼠标拖拽到工具左侧 —项目管理器界面中

骨架标签

新建的时候默认生成的那些标签

meta 标签可以设置页上的字符集

title 标签可以设置页站的标题

body标签设置页的主体内容部分

文章标题标签

h1---h6 分六级，字体依次减小的效果，每个标题都是独占一行注意：不能自己制造新标签，否则无法运行<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>		<h1>我是一级标题</h1>		<h2>我是二级标题</h2>		<h3>我是三级标题</h3>		<h4>我是四级标题</h4>		<h5>我是五级标题</h5>		<h6>我是六级标题</h6>	</body></html>

空格和回车

空格使用；
换行使用  ；其他写法也可以实现： 和

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>		<!-- 空格使用 换行使用<br /> -->	欢迎来到    hello python的世界!!!	<br />123 换行	<br />456 换行	<br />789 换行	</body></html>

p标签

负责放文章段落，可以使文本分成若干个段落

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>	 <p>一个p代表一个段落</p>     <p>语义化：即代表 标签的含义，在合适的地方使用合理的标签 可以在搜索排名中更靠前</p>	 <p>当地时间12日20时，</p>	 <p>法国议会选举首轮投票结束。出口民调显示，</p>	<p> 现任总统马克龙政党联盟和其主要对手左翼联盟支持率非常接近。</p></body></html>

代码注释

按 control+/ ：快速注释

再按：control+/ ：可以取消注释

注意：软件上线前，要删除全部注释，否则会影响加载速度

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>		<!--control+/快速注释 以下代码实现的一个段落的效果 -->		<p>我是文章段落</p>	</body></html>

文字相关标签

1.字体加粗

2.字体倾斜

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>	<!-- 普通文字 -->	<b>  hello python</b>	<br /> 	<strong>hello python</strong>	<br /> 	<!-- 文字倾斜 -->	<i>hello world</i>	<br /> 	<em>hello world</em>	</body></html>

3.字体添加删除线
<!– 添加删除线 –>
<s></s>
<del></del> 推荐优先使用

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>	<!-- 添加删除线 -->	<s>2022年6月11   原价9.98</s>	<br>	<del>2022年6月12  原价9.97</del>	<br>	6月13 今天：现价8.88	</body></html>

工具打开浏览器运行代码

方式1

方式2

键值对，KV对，属性名和属性值

1.添加图片

img src=” ” 用法

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>			插入图片步骤：	<br>	1.把图片放到和代码同一个文件夹中	<br>	2.输入img 按下tab键，在str=" " 中输入图片名称即可	<br>		<!-- 键值对，KV对，属性名和属性值 -->		<img src="25.png" alt="">	</body></html>

2.设置图片长度和宽度
width=” ” height=” “用法
<img src=”25.png” width=”200″ height=”200″>

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>			插入图片步骤：	<br>	1.把图片放到和代码同一个文件夹中	<br>	2.输入img 按下tab键，在str=" " 中输入图片名称即可	<br>	3.在第一个键值对后 按空格键 输入宽度和高度即可	<br>		<!-- 键值对，KV对，属性名和属性值 -->		<img src="25.png" width="200" >	</body></html>

4.在图片上添加鼠标悬停操作

title用法
<img src=”25.png” width=”200″ title=”鼠标悬停出现文字”>

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>			插入图片步骤：	<br>	1.把图片放到和代码同一个文件夹中	<br>	2.输入img 按下tab键，在str=" " 中输入图片名称即可	<br>	3.在第一个键值对后 按空格键 输入宽度和高度即可	<br>		<!-- 键值对，KV对，属性名和属性值 -->		<img src="25.png" width="200" title="鼠标悬停 出现文字">	</body></html>

5.设置图片未正常加载的情况下会显示内容

alt=”描述此张图片的信息 ” 用法
1.当图片未正常加载的时候，文字才会被别人看到
2. 页阅读器读取此内容给视障用户听，提升用户体验

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>		<img src="5.png" width="200" title="鼠标悬停 出现文字" alt="图片未正常加载">	</body></html>

超链接基础语法

1.打开址

<a href=” 址 “> 文本</a>

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>		<!-- 超链接用法 -->		<a href="https://www.baidu.com/">点击我 可以百度一下</a>		</body></html>

2.打开本地页面：输入文件名.扩展名

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>				<!-- 超链接用法 -->		步骤：		输入a回车,添加 址即可		<br>		<a href="文章标题.html">点击我 可以百度一下</a>		</body></html>

超链接基础语法进阶

<!– 新窗口打开链接 –>
target=”_blank”

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>	</head>	<body>	<!-- 新窗口打开链接 target="_blank" -->		<a href="http://www.baidu.com" target="_blank">点击我，跳转到新窗口打开百度</a>			</body></html>

空连接

暂时不知道点击之后跳转到哪里，使用空链接占位

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！