1.开发环境的搭建
(1)编辑器:编写代码的地方
vscode
sublime (体积小、运行速度快)
文本编辑器 (没有代码提示以及插件)
(2)浏览器:代码执行的地方
例如:火狐浏览器、谷歌浏览器、IE浏览器
(3)部署环境:代码部署的地方
apache
(4)三拨人:
W3C => 制定规范(标准)
浏览器厂商
程序员
2.html介绍
(1)超文本标记语言
(2)作用:搭建页面的骨架
(3)后缀名:.html或.htm
3.html文档的结构
注释含义
4.语法
(1)注释:<!--注释内容-->
注释内容不会被浏览器解析
作用: 1.记录编程思路
2.便于后期代码的维护
3.增加代码量
(2)元素
双标签元素
元素 = 开始标签 + 结束标签 + 内容 + 属性
单标签元素
开始标签 + 内容 + 属性
(3)属性
分类:核心属性:每一个元素都可以拥有的属性
title:提示信息
id:元素的唯一值(js)
class:类名(css选择器)
style:定义一些样式
特有属性:某些元素特有的属性
charset:字符集
src:引用图像文件的URL
alt:指定图片的替换文字
href:指定超链接目标的URL
注:属性写在开始标签中
属性 = 属性名 + 属性值
属性名和属性值之间使用等号分隔,属性值使用引号(双引号或单引号)包起来
(4)空白、实体
空白:无论有多少空格,浏览器都会按照一个空格来处理
实体: ; => 空格
<>; => < >
5.块级元素
作用:搭建页面的骨架
特点:1)独占一行空间
2)默认宽度为父元素的100%,高度由内容或者子元素决定
3)可以设置宽高
div:无意义的块级元素(没有任何的默认样式)
p:段落(默认有一个margin-top、margin-bottom)
h1~h6:标题(默认有字体大小和字体宽度,外边距margin)
ul:无序列表
子元素:li
ol:有序列表
子元素:li
dl:列表
子元素:dt(标题)、dd(列表项)
6.行内元素
作用:装饰
特点:1)共享一行空间,如果放不下则换行显示
2)默认宽高都由内容决定
3)默认不能设置宽高
span:无意义的行内元素
a:超链接。超链接的作用:1.超链接(绝对路径、相对路径);2.锚点。为目标元素定义一个id值,写一个<a>标签,给a标签的href属性写 上目标元素的 # + id值;3.发送邮件。href: mailto:邮箱地址
strong:加粗、强调
i :斜体
img 图片
src 图片的路径
alt 当图片加载失败的时候,替代图片的文字
width 宽度
height 高度
7.元素的使用策略
(1)使用块级元素搭建页面的骨架,使用行内元素装饰
(2)不知道使用什么块级元素的时候就用div,不知道用什么行内元素的时候就用span
8.h5新增的语义化标签
作用:1.能够更好的阅读代码
2.有助于搜索引擎搜索
例:<header>:头部标签
<nav>:导航标签
<article>:内容标签
<section>:块级标签
<aside>:侧边栏标签
<footer>:尾部标签
9.表格
作用:用来展示数据、表格布局
table 表格
border边框、width宽度、cellspacing单元格和单元格之间的距离、cellpadding单元格和内容之间的距离、bgcolor背景颜色
thead 表头
tr 行
th 单元格
tbody 表体
tr 行
td 单元格 colspan跨列数 rowspan跨行数 <td colspan="4"> <td rowspan="2">
10.表单
(1)作用:用来收集用户信息,与后台交互
(2)http超文本传输协议
基于请求和响应的这种模式
(3)报文分为:请求报文和响应报文
请求报文:请求行、请求头、请求体
请求行:请求方式、请求的地址(URL)、协议的版本
请求头:一个一个的键值对
请求体:请求参数
注:get请求的请求参数不放在请求体中,拼接的URL上(一般用作请求数据)
post请求参数放在请求体中(一般用作提交数据)
请求方式:
1.options(预检请求,探路请求)
返回服务器针对特定资源所支持的HTTP请求方法,也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
2.head
向服务器索与GET请求相一致的响应,只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下,就可以获取包含在响应小消息头中的元信息。
3.get(请求参数有大小的限制)
向特定的资源发出请求。它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现数据(如HTML文本,或者图片或者视频等)返回给客户端。GET请求中,永远不会包含呈现数据。
4.post(没有对请求参数的限制)
向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
Loadrunner中对应POST请求函数:web_submit_data,web_submit_form
5.put
向指定资源位置上传其最新内容
6.delete
请求服务器删除Request-URL所标识的资源
......
响应报文:响应行、响应头、响应体
响应行:协议的版本、状态码
响应头:一个一个的键值对
响应体:响应的内容
(4)form(输入框、单选按钮、多选按钮、下拉菜单)
表单控件
input表单控件
type属性,用于设定控件类型,取值如下:
text | 单行文本框 |
password | 密码框,输入的内容将会被遮挡。 |
checkbox | 复选框,必须使用value属性来描述该组件所提交的值,使用checked属性默认选中。 |
radio | 单选按钮,必须使用value属性来描述该控件所提交的值,使用checked属性默认选中。一个单选按钮组中所有控件都应该具有相同的name值,这样,每次只能选中按钮组中的某一个控件。 |
submit | 提交按钮 |
reset | 重置按钮 |
file | 文件按钮,该控件用于选中文件系统中的某个文件 |
hidden | 隐藏域,该控件不显示在页面中,但是其值会被提交。 |
image | 图像按钮,必须使用src来加载图片,使用alt来声明替换文本。 |
button | 普通按钮 |
Input控件用于接受来自用户的数据,其他可用属性如下:
name | 用于设定控件名和提交数据的属性名 |
value | 用于控件值初始化,可选,涉及到用户输入时,当涉及到选择时,必须选 |
checked | 单选框,复选框默认选中属性 |
disabled | 表示禁用组件,禁用组件的值也不能被提交 |
size | 当前控件的初始宽度,这个宽度以像素为单位。除非控件类型是text, password,这时宽度是整数值,表示字符的数目,默认为20 |
maxlength | 指定可以输入的字符的最大值。适用于控件类型为text,password。 |
表单控件:input控件
select 下拉菜单
option 每一项
textarea 文本域
button 按钮
label 用于表示某一表单控件的标题