day03软件测试基础

最新推荐文章于 2024-07-17 18:42:40 发布

小王很简单

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量48

点赞数

分类专栏：软件测试基础文章标签： html

本文链接：https://blog.csdn.net/weixin_46048780/article/details/128719418

版权

软件测试基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

学习目标：html基础

学习内容：

1.1HTML介绍。

1.11html是一种描述网页的语言。

1.web三大核心技术：html（负责网页架构）css（负责网页样式，美化）js（负责网页的行为）

2.html 单标签双标签内容

3.属性格式：属性名=“属性值” 例如（< a href=“httpqq.com”>经典 < /a>）

2.HTML 骨架标签

《!DOCTYPE HTML》

《html》

《head》

	《meat charset=“utf-8”》

《tltle》小王非常简单《/title》

《/head》

《body》

代码编写区域

《/body》

《/html》

所有标签都在《html》这个标签中。head头标签 body身体标签

ctrl+/ 注释快捷键

标题标签

《h1》–《h6》h1最大

段落标签

《p》换行

超链接标签

《a href=“http：www.baidu.com”》百度《/a》

《a href=“http：www.baidu.com” target=“_blank”》百度《/a》

属性：href ：跳转地址。target:新窗口打开默认值 _blank。

图片标签：

《img src=" 图片地址" title=" 图片名" alt=" “width=“104” height=” "》

属性：src：图片路径

title：光标移上去后显示文字

alt：图片未加载时显示文字

width：图片宽度

height：图片高度

img标签必须有src 和title标题。

空格（& nbsp; ）与换行（< br />）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 测试h1-h6 -->
		<h1>卧槽</h1>
		<h2>卧槽</h2>
		<h3>卧槽</h3>
		<h4>卧槽</h4>
		<h5>卧槽</h5>
		<h6>卧槽</h6>
		
			<p>金樽清酒斗十千，玉盘珍羞直万钱。</p>	
			<p>停杯投箸不能食，拔剑四顾心茫然。</p>	
			<p>欲渡黄河冰塞川，将登太行雪满山。</p>	
			<p><闲来垂钓碧溪上，忽复乘舟梦日边。</p>
			<p>行路难！行路难！多岐路，今安在？</p>
			<p>长风破浪会有时，直挂云帆济沧海。</p>
		
		<a href= "http:www.baidu.com"> 百度</a>
		<p></p>
		<a href= "http:wwww.baidu.com" target="_blank">百度</a>
		<img src="F:\javaphoto\1.png" title="ATM取款流程"alt="ATM取款流程图"width=" 600" height="200">
		<h1>小王很简单&nbsp;&nbsp;N1</h1>
		<br />
		<h2> 不简单 </h2>
	</body>
</html>

布局标签

div 标签独占一行

span 标签一行可以放多个

列表标签

分为两种有序：< ol >

< li> … < /li>

< /ol >

无序：< ul>

< li> … < /li>

< /ul>

input标签

属性：type=“text”文本框

type=“password”密码框

type=“radio”单选按钮

type="check"复选框

type=“submit“ 提交按钮

type=“reset“ 重复按钮

type=“button“ 普通按钮

form标签将页面输入的信息提交到后台。

属性：action：将数据提交到哪个页面

method：提交参数的方法

一般用于查询 get：参数url明文显示提交速度快提交长度有限制（与浏览器有关）

post：参数非明文显示提交速度慢提交长度无限制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.d1{background-color: red;}
			.d2{background-color: #00FFFF;}
			.c1{color: chocolate;}
		</style>
	</head>
	<body>
		<div class="d1">大盒子</div><div class="d2">小盒子</div>
		<span class="c1">span1</span> <span>span2</span>
		</span></span>
		<br />
			<br />
				<br />
					<br />
					<ol>
						<li>北京 </li>
						<li>天津 </li>
						<li>上海 </li>
						<li>江苏</li>
					</ol>
				-----------------------------------------
				<ul>
					<li>广州 </li>
					<li>武汉 </li>
					<li>长沙 </li>
					<li>重庆 </li>
				</ul>
			<form action="2.html" method="post">
			用户名:	<input type="text" /><br />
			密码:	<input type="password" /><br>
			男	<input type="radio" name="sex"/> 
			 <!-- name相同时为单选 --> 
			女  <input type="radio" name="sex"/><br>
			qq  <input type="checkbox" />
			wechat <input type="checkbox"/><br>
			<input type="button" value="登录" /><br>
			<input type="submit"/><br>
			<input type="reset"/>	
			</form>
	</body>
</html>