一、HTML
HTML介绍:用来描述网页的一种语言。
web前端三大核心技术:
- HTML:负责网页的架构
- CSS:负责网页的样式、美化
- JS:负责网页的行为
二、常见HTML标签
1、骨架标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2、注释
国际通用快捷键:ctrl+/
项目上线(发布)之前,必须检查并删除。
3、标题与段落
- 标题标签 <h1>-<h6>
说明:不常用。前端界面编写时主要通过CSS控制字体大小。
- 段落标签<p></p>
<p>标签独占一行,可做换行使用。
4、超链接标签<a></a>
属性:
href:跳转地址
target:新窗口打开,target="_blank"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 注释 -->
<a href="http://www.baidu.com" target="_blank">点我去百度</a>
</body>
</html>
5、图片标签<img>
测试点:必须要title属性(体验感好)
属性:
src:加载图片的路径
title:图片加载时,鼠标悬停显示信息,图片未加载时图片处显示信息(优先级低于alt)
width:宽100px px:像素
height:高
alt:图片未加载时,显示信息
图片路径:
1、相对路径:相对于当前执行文件所在路径
当前位置(同级):./(可忽略不写)
上一级:../
2、绝对路径:不能使用C:\Users\items\01.png
6、空格和换行
- 换行:<br />或<br>
- 空格:
7、布局标签<div></div>
作用:用于排版。
- 大盒子:<div>,独占一行
- 小盒子:<span>,一行可以放多个
8、列表标签
- 有序列表
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
- 无序列表
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
9、input标签
属性:
name:元素名称
value:按钮测试点,统一使用value来赋值。
placeholder:输入框提示文字
style:设置CSS样式
maxlength:可输入最长字符数
- 文本框:<input type="text">
- 密码框:<input type="password">
- 单选框:<input type="radio">,需要value值相等才能实现单选功能。
- 复选框:<input type="checkbox">
- 按钮:
<input type="button" name="anniu" id="anniu"value="普通按钮"><br>
<input type="submit" name="tijioa" id="tijioa" value="提交按钮"><br>
<input type="reset" name="chz" id="chz" value="重置按钮"><br>
10、文本域和下拉框
- 文本域<textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
- 下拉框
地址:
<select>
<option value="">上海</option>
<option value="">北京</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
11、form标签
作用:提交页面输入的数据到指定页面或后台。
属性:
action: 指定将数据提交到那个页面。
method:提交参数的方法(get、post)
get:查询使用 。1、参数url明文显示;2、提交速度快 ;3、提交参数有长度限制
post:提交数据、登录、注册 。1、非明文显示 ;2、提交速度慢 ;3、提交参数的长度无限制
使用场景:1、get:查询使用。2、post:提交数据时使用(登陆、注册)。
自己编写的表单页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="xxx.html" method="post" name="name1">
<!-- text 文本框 用户可以输入任何文字 -->
<label for="user">用户名:</label><input type="text" id="user"><br>
<!-- password 密码字段 -->
密码:<input type="password"><br>
<!-- radio 单选按钮 -->
<!-- name是表单元素的名字,单选框和复选框必须要有相同的name属性,每一个表单元素都应该有自己的name属性 -->
<!-- value 规定input元素的值,首次加载时就显示显示文字 -->
<!-- checked 首次加载时应当被选中 -->
<!-- maxlength 规定输入字段的最大长度 -->
<!-- label 标注标签,当点击<label>中的文字时,浏览器会自动对焦相应的表单元素,for属性的值应与对应的表单元素的id属性值相同-->
性别:<input type="radio" name="sex" value="男" checked="checked" id="nan" ><label for="nan">男</label>
<input type="radio" name="sex" value="女" id="nv" ><label for="nv">女</label><br>
<!-- checkbox 复选框 -->
爱好:<input type="checkbox" name="hobby">吃饭 <input type="checkbox" name="hobby">睡觉 <input type="checkbox" name="hobby">玩游戏<br>
<!-- select 下拉列表 -->
籍贯:<select name="adress" id="jiguan">
<option value="四川">四川</option>
<option value="北京">北京</option>
<option value="湖南">湖南</option>
<option value="湖北">湖北</option>
<option value="新疆">新疆</option>
</select><br>
<!-- textarea 文本域,可以输入大量文字 -->
个人简介:<br><textarea name="jianjie" id="" cols="30" rows="10"></textarea><br>
<!-- submit 提交按钮 -->
<!-- file 文件域 上传文件使用 -->
上传头像:<input type="file" ><br>
<input type="submit" value="提交">
<!-- reset 重置按钮 -->
<input type="reset" value="重新填写">
<!-- button 普通按钮 后期结合js -->
<input type="button" value="获取验证码">
</form>
</body>
</html>
12、抓包
抓客户端发送服务器的数据包或服务器响应客户端的数据包。
13、补充
<script>js语句</script>
<style>css样式</style>
<link rel="stylesheet" href="" src="http://www.xxx.xxx/xx.css">css
三、总结
1、HTML对测试的作用:解决测试web项目,认识web项目基本标签。
2、HTML常用标签属性和使用