欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

3. 1 WEB自动化 --- WEB前端知识简介

程序员文章站 2022-07-03 11:42:46
...

前端

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页和界面。

前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，

  • HTML：页面结构：可以把他看成一个文档，定义展示页面的内容结构。
  • CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果。
  • JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

一、HTML

HTML: 超文本标记语言，是 网页制作必备的编程语言**“**[超文本]
HTML 版本

  • **HTML 2.0 ：**是 1996 年由 Internet 工程工作小组的 HTML 工作组开发的。

  • **HTML 3.2 ：**作为 W3C 标准发布于 1997 年 1 月 14 日。HTML 3.2 向 HTML 2.0 标准添加了被广泛运用的特性，诸如字体、表格、applets、围绕图像的文本流，上标和下标。

  • **HTML 4.0 ：**被发布于 1997 年 12 月 18 日。而仅仅进行了一些编辑修正的第二个版本发布于 1998 年 4 月 24 日。HTML 4.0 最重要的特性是引入了样式表（CSS）。

  • **HTML 4.01 ：**发布于 1999 年 12 月 24 日。

  • XHTML 1.0 ： 发布于 2000 年 1 月 20 日，使用 XML 对 HTML 4.01 进行了重新地表示

  • **HTML 5：**W3C 于 2008 年 1 月 22 日发布 HTML 5 工作草案。

1、HTML页面结构

超文本标记语言的结构包括“头"部分**（Head）、和“主体”部分（Body）**，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<!-- 头部信息  不会再页面显示-->
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<!-- 主体部分 页面中显示内容-->
	<h1>第一个网页页面</h1>
</body>
</html>

1.1 文档声明

DOCTYPE声明该html文件使用的HTML版本

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

1. 2、页面头部

第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang="zh-CN“。 “”标签和“”标签是它的第一层子元素，

<head>:标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏。

1.3 页面内容

<body>:元素定义文档的主体，也就是页面显示的内容。

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等)，。

2、常见的HTML标签

2.1 注释:

定义和用法

注释标签用于在源代码中插入注释。注释不会显示在浏览器中。

您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。

例：

<!--这是一段注释。注释不会在浏览器中显示。-->

<p>这是一段普通的段落。</p>

2.2 标题标签：

定义和用法

-

标签可定义标。

定义最大的标题。

定义最小的标题。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小

<h1>这是标题 H1</h1>
<h2>这是标题 H2</h2>
<h3>这是标题 H3</h3>
<h4>这是标题 H4</h4>
<h5>这是标题 H5</h5>
<h6>这是标题 H6</h6>

2.3 段落和换行标签

定义和用法

  • p : 标签定义段落。元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定.
<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
  • br: 插入一个简单的换行符。标签是空标签，意味着它没有结束标签，

错误的用法：

<p>元素会自动在其前后创建一些空白。<br>浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
  • **hr：**标签在 HTML 页面中创建一条水平线。水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分，在 HTML 中，
    标签没有结束标签。
<hr>

2.4 块标签

  • div标签:标签块元素，表示一块内容，没有具体的语义。

    div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

    div中的部分会显示为红色

    	<div style="color:red">
		<h5>这是标题 H5</h5>
		<h6>这是标题 H6</h6>
	</div>

  • span标签 行内元素，表示一行中的一小段内容，没有具体的语义。

    pan 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化,

    	<p>
        元素会自动在其前后创建一些空白。浏览器会自动添加这些空间
        <span style="color: cyan">span中的内容</span>
        您也可以在样式表中规定。
	</p>

2.5 含样式和语义的行内标签

标签 含义
行内元素，字体斜体。
行内元素，语义为强调内容，表示重要（倾斜效果）
行内元素，字体加粗
行内元素，语义为强调内容，表示非常重要（效果加粗） 
<em>这个是em标签</em>
<i>这个是i标签</i>
<strong>这个是strong</strong>
<b>这个是b标签</b>

2.6 图像标签和链接标签

  • img标签

    img 元素向网页中嵌入一幅图像。

    请注意，从技术上讲，3. 1 WEB自动化 --- WEB前端知识简介 标签并不会在网页中插入图像，而是从网页上链接图像。3. 1 WEB自动化 --- WEB前端知识简介 标签创建的是被引用图像的占位空间。

    3. 1 WEB自动化 --- WEB前端知识简介 标签有两个必需的属性：src 属性 和 alt 属性。

    <img src="http://www.lemonban.com/images/upload/image/20190219/1550546293631.jpg"  alt=柠檬班"" />
    属性 描述
    alt 规定图像的替代文本。
    src 规定显示图像的 URL。
    height 定义图像的高度。
    width 设置图像的宽度

  • a标签：标签定义超链接，用于从一张页面链接到另一张页面

    元素最重要的属性是 href 属性，它指示链接的目标。

    <a href="http://www.baidu.com">点击链接跳转到百度</a>

  • link标签(放在头部中)

    链接到一个外部样式，即链接外部的css文件

2.7 列表

  • 有序列表

在网页上定义一个有编号的内容列表可以用

    、
  1. 配合使用来实现，代码如下：

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。

  • 无序列表

在网页上定义一个无编号的内容列表可以用

    、
  • 配合使用来实现，代码如下：

<ul>
    <li><a href="#">标题一</a></li>
    <li><a href="#">标题二</a></li>
    <li><a href="#">标题三</a></li>
</ul>

在网页上生成的列表，每条项目上会有一个小图标.

  • 定义列表

    dl :标签定义了定义列表（definition list）。标签用于结合dt定义列表中的项目和dd描述列表中的项目

    <dl>
   <dt>python</dt>
   <dd>解释性语言</dd>
   <dt>java</dt>
   <dd>编译型语言</dd>
</dl>

2.8 表格

  • table ：tabel标签定义 HTML 表格。

    简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

    tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

<table border="1" >
  <tr>
  	<th>name</th>
    <th>java</th>
    <th>python</th>
  </tr>
  <tr>
  	<td>小明</td>
    <td>精通</td>
    <td>熟悉</td>
  </tr>
  <tr>
  	<td>小张</td>
    <td>不会</td>
    <td>不会</td>
  </tr>
</table>

3、HTML表单

3.1 form标签

  • form: 标签用于为用户输入创建 HTML 表单，表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

    form标签的属性：

    属性 描述
    action 定义表单数据提交地址
    method 定义表单提交的方式（常见的有get和post）

  • form表单中包含的元素

    元素标签 作用
    为表单元素定义文字标注
    标签 定义通用的表单元素
    标签 定义多行文本输入框
    标签 定义下拉表单元素
    标签 与标签配合，定义下拉表单元素中的选项

3.2 input标签

  • value属性： 定义表单元素的值
  • name属性 ：定义表单元素的名称，此名称是提交数据时的键名
	<form>
	  账号：<input type="text" name="username" id="user" />
	  <br />
	  密码：<input type="password" name="password" id="pw" />
	</form>

  • type属性

    值 作用
    text 定义单行文本输入框
    password 定义密码输入框
    radio 定义单选框
    checkbox 定义复选框
    file 定义上传文件
    submit 定义提交按钮
    button 定义一个普通按钮
    reset 定义重置按钮
    image 定义图片作为提交按钮，用src属性定义图片地址
    hidden 定义一个隐藏的表单域，用来存储值

3.3 label标签

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

属性 对应值的描述
for for 属性应当与相关元素的 id 属性相同

案例：

	<form>
	  <label for="user">账号:</label>
	  <input type="text" name="username" id="user" />
	  <br />
	  <label for="pw">密码:</label>
	  <input type="password" name="password" id="pw" />
	</form>

3.4 textarea标签

textarea标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，更好的办法是使用 CSS 的 height 和 width 属性。

	<form action="11111" method="get" id='fo'>
		<textarea  name="text"></textarea>
		<input type="submit" name="" value="提交" >
	</form>

textarea的属性

属性 值 描述
autofocus autofocus 规定在页面加载后文本区域自动获得焦点。
cols number 规定文本区内的可见宽度。
disabled disabled 规定禁用该文本区。
form form_id 规定文本区域所属的一个或多个表单。
maxlength number 规定文本区域的最大字符数。
name name_of_textarea 规定文本区的名称。
placeholder text 规定描述文本区域预期值的简短提示。
readonly readonly 规定文本区为只读。
required required 规定文本区域是必填的。
rows number 规定文本区内的可见行数。

3.5 select标签

select 元素可创建单选或多选菜单,也可以用于选择数据提交表单。

` 元素中的 标签用于定义列表中的可用选项。

	<form>
	<select name='skill'>
	  <option value ="py">python</option>
	  <option value ="ht">html</option>
	  <option value="css">css</option>
	  <option value="java">javascript</option>
	</select>
	<input type="submit" name="">
	</form>

3.6 option标签

option 元素定义下拉列表中的一个选项（一个条目）。

浏览器将 标签中的内容作为 标签的菜单或是滚动列表中的一个元素显示。

option 元素位于 select 元素内部。

4、内联框架

4.1 iframe

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

例子：将登录页面的内容链接到当前页面

<iframe src="http://02form.html" height="200" width="400" >

二、css

1、css介绍和引用

1.1、CSS 概述

​ CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mRWvhquV-1599558996681)(C:\Users\MUJI\AppData\Roaming\Typora\typora-user-images\1553651370397.png)]

1.2、css的基本语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

3. 1 WEB自动化 --- WEB前端知识简介

1.3、css引入方法：

1、外联式：通过link标签，链接到外部样式表到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

3、内联式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; color:red ">......</div>

2、css背景

2.1、设置背景色

background-color 设置背景色。这个属性接受任何合法的颜色值。

这条规则把元素的背景设置为红色：

p {background-color: red;}

2.2、设置背景图像

background-image：要把图像放入背景， 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多数背景都应用到 body 元素，不过并不仅限于此。

  • 背景图平铺

    如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

    属性值 ：

    • repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样

    • repeat-x ：图像只在水平上重复，

    • repeat-y ：图像在垂直方向上重复

    • no-repeat ：不允许图像在任何方向上平铺。

    默认地，背景图像将从一个元素的左上角开始。请看下面的例子：

    body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

2.3、背景定位

可以利用 background-position 属性改变图像在背景中的位置。

定位方式：位置关键字、百分比、

下面的例子在 body 元素中将一个背景图像居中放置：

  • 位置关键字：
body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }
单一关键字 等价的关键字
top top center 或 center top
bottom bottom center 或 center bottom
center center center
right right center 或 center right
left left center 或 center left
  • 百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }
  • 长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

2.4、背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

background-attachment 属性：声明图像相对于可视区是固定的，因此不会受到滚动的影响：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

3、颜色表示法

颜色三种表示方法：

  • 颜色名表示，比如：red ，cyan gold

  • rgb表示，比如：rgb(255,0,0)表示红色

  • 16进制数值表示，比如：#FFFF00 表示黄色

颜色对照表地址：http://tool.oschina.net/commons?type=3

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-he4utuEG-1599558996716)(C:\Users\MUJI\AppData\Roaming\Typora\typora-user-images\1553653444168.png)]

4、css文本样式

常用的应用文本的css样式：

  • color 设置文字的颜色，

    • color:red;

  • font-size 设置文字的大小

    • font-size:12px;

  • font-family 设置文字的字体

    • font-family:‘微软雅黑’;

  • font-style 设置字体是否倾斜：

    • 不倾斜: font-style:‘normal’;
    • 倾斜: font-style:‘italic’;

  • font-weight 设置文字是否加粗，

    • font-weight:bold 设置加粗
    • font-weight:normal 设置不加粗

  • line-height 设置文字的行高 (行高相当于在每行文字的上下同时加间距)，

    • line-height:30px;

  • 设置文字的几个属性，顺序如下： font：是否加粗 字号 /行高 字体；

    • font:normal 12px/36px ‘微软雅黑’;

  • text-indent 设置文字首行缩进

    • text-indent:24px; 设置文字首行缩进24px

  • text-align 设置文字水平对齐方式

    • 如text-align:center 设置文字水平居中

5、css选择器

5.1、标签选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

<h1>h1标题</h1>
<h2>h2标题</h2>

h1 {color:blue;}
h2 {color:silver;}

5.2、id选择器

首先，ID 选择器前面有一个 # 号

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，一个ID只能在文档中使用一次，id名一般给程序使用，所以不推荐在css设置样式时使用id作为选择器

<input type="test" name="uname" id="user">
#user {font-weight:bold;}

5.3、类选择器

必须将 class 指定为一个适当的值，类名前有一个点号（.）,通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

<div class="menu"></div>

.menu {color:red;}

5.4、属性选择器

通过元素的属性进行选择，

选择带name属性的a标签

<a href="" name="nb"></a>
<a href=""></a>
<a href=""></a>

a[name] {color:red;}

5.5、包含选择器（层级选择器）

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

<div class="menu">
	<div>
		<p>p标签</p>
	</div>
</div>

.menu div p{color:cyan}

5.6、组选择器

多个选择器，，每个选择器之间用逗号隔开如果有同样的样式设置，可以使用组选择器。

h1, h2, h3 {color:blue;}

5.7、伪类及伪元素选择器

伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

属性 描述 CSS
:active 向被**的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1

6、css模型框

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

3. 1 WEB自动化 --- WEB前端知识简介

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

6.1 边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。border 属性允许你规定元素边框的样式、宽度和颜色。

border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式

CSS 边框属性

属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

除了以上四种，还可以对四个方向单独设种子

border的样式类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pgi4ll0W-1599558996722)(C:\课件\images\1557566475613.png)]

solid    # 实线
dotted   # 点线
dashed   # 线
double   # 双线

6.2 内边距

padding 属性定义元素边框与元素内容之间的空白区域。

CSS 内边距属性

属性 描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。

设置的时候可以通过像素，也可以按元素的百分比进行设置。

h1 元素的各边都有 10 像素的内边距，只需要这样：

h1 {padding: 10px;}

也可以给四个方向设置不同值，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：

margin: top right bottom left

另外

把段落的内边距设置为父元素 width 的 10%：

p {padding: 10%;}

6.3 外边距

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

外边距属性

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距

7、浮动和定位

7.1 CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

通过使用 position 属性，我们可以选择不同类型的定位。

7.2 相对定位

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

7.3 绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

#box {
  position: absolute;
  left: 30px;
  top: 20px;
}

7.4 固定位置

  • 需要设置position:fixed;，直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化

7.5 浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

在 CSS 中，我们通过 float 属性实现元素的浮动。

img{
  float:right;
  }
值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

7.6 display属性

display属性是用来设置元素的类型及隐藏的，常用的属性有：

  • none 元素隐藏

  • block 元素以块元素显示

三、javascript

1、介绍和基本使用

1.1、javascript概述

  • JavaScript历史

    要了解JavaScript，我们首先要回顾一下JavaScript的诞生。在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。

1.2、嵌入页面的方式

HTML 中的脚本必须位于 标签之间。脚本可被放置在 HTML 页面的 和 部分中。

1、行间事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

2、页面script标签嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

3、外部引入

<script type="text/javascript" src="js/index.js"></script>

2、基本语法

2. 1 注释

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

  • 单行注释：以 // 开头。
  • 多行注释：以 /* 开始，以 */ 结尾。

2.2 变量

变量命名：
  • 变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）
  • 驼峰式命名
变量声明

javaScript中变量可以先声明后赋值，

var x;
x = 20;

也可以在声明的时候赋值。

var y=3;

同时给多个变量赋值

var a = 100;b = 200,c = 300;

2.3 数据类型：

字符串、数字、布尔、Null、Undefined、数组

  • number 数字类型

    var y=3;

  • string 字符串类型

    var st='python'

  • boolean 布尔类型

    • 只有 true 或 false两个值

  • undefined 类型，

    • 变量声明未初始化，它的值就是undefined
    var unde

  • null类型，

    • 表示空对象，类似于python中的None
    var tr = null

  • arry 数组

    • 数值类似于python中的列表，可以通过下标取值

      //创建数组
var skill= Array("html","css","js");
alter(skill[0]);

    • length属性：获取数组长度：

      alter(skill.length)

    • pop() 方法从数组中删除最后一个元素

    skill.pop()
    • push() 方法（在数组结尾处）向数组添加一个新的元素
    skill.push('jquery')

    1

2.4 运算符

算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
赋值运算符：=、 +=、 -=、 *=、 /=、 %= 、++
条件运算符：、=、>、>=、<、<=、!=、
逻辑运算符：&&(而且 )、||(或者 )、!(否 )

2.5 条件语句

通过条件来控制程序的走向，就需要用到条件语句。

if 语句
 	var a = 199;
    if(a>200){
        alert('大于200');
    }
else 语句
 var a = 199;
    if(a>200){
        alert('大于200');
    }
    else {
        alert(a);
    }
else if 语句
类似python中的 elif
var a = 199;
    if(a>200){
        alert('大于200');
    }
    else if(a>100){
        alert('大于100')
    }
    else {
        alert(a);
    }
switch语句
switch(表达式) {
     case n1:
        代码块
        break;
     case n1:
        代码块
        break;
     default:
        默认代码块
}

  • 计算一次 switch 表达式

  • 把表达式的值与每个 case 的值进行对比

  • 如果存在匹配，则执行关联代码

  • 遇到 break 关键词，它会跳出 switch 代码块。

  • case 匹配不存在时，运行default 的代码：

案例
```javascript
var a =0 ;
var b = 1;
switch (a+b) {
    case 1:
        alert(1);
        break;
    case 2:
        alert(2);
        break;
    default:
        alert(3)
}
```

2. 6、函数

函数定义：
  • 定义函数的关键词 function，函数内的代码块，包裹在花括号中：
```javascript
    // 函数的定义 使用function
    function func() {
    	alter(999)
    }
    // 函数调用
    func()
```
  • 提示：JavaScript 对大小写敏感。关键词 function 必须是小写的
函数参数：
    function addNumber(var1,var2) {
        alert(var1 + var2;);    
    }
    addNumber(11,22)
函数返回值：
  • 使用 return 来返回值。在使用 return 语句时，函数会停止执行，并返回指定的值。
```javascript
function addNumber(var1, var2) {
    return var1 + var2;
}
var res = addNumber(11,222);
alert(res)
```

2. 7 对象

创建对象

对象由花括号分隔。在括号内部，

方式一：
objA = new Object();
方式二：类式于python中的字典，
var objA={};
对象属性
  • 对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
    var objA={name : "python",age  : 18,id :123};
  • 创建对象属性声明可横跨多行：
    var objA={
name : "python",
age  : 18,
id :123
};
对象方法
  • 对象方法是作为属性来存储的函数。
  • var objC = {                // 创建对象 ：方式3
    name: 'abc',
    age: 19,
    fun: function (var1,var2) {
        alert(var1);
        alert(var2);
        alert(this.age * 2);
    }
};
objC.fun(111,222)

2. 8、循环

while循环
while（条件语句){
    循环体
}
  • 案例循环弹出1-5
    var 1 =0;
while (i<=5){
    alert(i);
    i++
}
  • a++ ：的含义等价——> a+=1
for 循环
for (语句1,语句2，语句3 ){
    循环体代码
}
  • 语句1：在循环开始之前执行
  • 语句2：循环条件（成立则执行循环体）
  • 语句3：每一轮循环之后执行的语句
  • 案例：遍历数组
    var aList = Array(11, 22, 33);

for (var a = 0; a < aList.length; a++) {
   alert(aList[a])
}
for in 循环
for (x in arrayr){
    循环体代码
}
  • 遍历数组，x为数组的下标
  • 遍历对象，x为对象的属性
  • 案例:遍历数组
var aList = Array(11, 22, 33);
    for (x in aList) {
        alert(aList[x]);
    }
  • 案例：遍历对象
var objC = {name: 'abc', age: 19};
// 遍历对象
for (x in objC){
    alert(x);
    alert(objC[x]);
}

3、JS操作页面

DOM简介

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

3. 1 WEB自动化 --- WEB前端知识简介

  • 节点树中的节点彼此拥有层级关系。
    • 父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • 如何改变 HTML 元素的内容 (innerHTML)
  • 如何改变 HTML 元素的样式 (CSS)
  • 如何对 HTML DOM 事件对做出反应
  • 如何添加或删除 HTML 元素

1、获取页面标签

1、1 获取标签的方式

通常，通过 JavaScript操作 HTML 元素,可以使用内置对象document的方法来找到该标签。。

  • 通过 id 找到 HTML 元素（常用）
    • document.getElementById（）
  • 通过标签名找到 HTML 元素
    • 获取出来的是列表

    • getElementsByTagName()

  • 通过类名找到 HTML 元素（通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。）
    • 取出来的是列表

    • getElementsByClassName()

1、2 获取标签注意问题

的getElementById方法来获取页面上设置了id属性的元素，

<script type="text/javascript">
    var bo = document.getElementById('box');
    //box对应的div这个元素定义在下面，此时获取不到，就会出错
</script>

<div id="box">这是div元素</div>

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，

解决方法：

  • javascript放到页面最下边
<div id="box">这是div元素</div>

<script type="text/javascript">
    var bo = document.getElementById('box');
</script>
</body>

  • 放入window.onload触发的函数里面

    window.onload函数在页面加载完后才执行，就不会出错了。

<script type="text/javascript">
    window.onload = function(){
        var bo = document.getElementById('box');
    }
</script>

<div id="box">这是div元素</div>

1

2、操作标签内容

innerHTML 属性
  • 获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
读取节点文本
var odv1 = document.getElementById('box');
var content1 = odv1.innerHTML;
alert(content1)
写入节点文本
var odv1 = document.getElementById('box');
odv1.innerHTML = 哈哈哈;

3、修改标签属性

操作属性的方法
  • 1、“.” 操作
  • 2、“[ ]”操作
读取属性
<input type="text" id="input_user" name="user" value="python">  
//   读取属性
var odv1 = document.getElementById('input_user');
var idValue = odv1.id;
var nameValue = odv1['name'];
alert(idValue);
alert(nameValue);
修改属性
<a href="" id="a1" >柠檬班</a>

// 修改属性
a1 = document.getElementById('a1');
// a1.href = 'http://www.lemonban.com';
a1['href'] = 'http://www.lemonban.com';
注意点：操作class属性的时候，要将属性名字改为className
a1.className = 'hied';
修改css样式
  • 方式一：节点.style.样式名
  • 方式二：节点.style[‘样式名’]
<div class="dv1" id="dv01" >这个是div1</div>

 //修改css样式
var odv1 = document.getElementById('dv01');

odv1.style.width = '300px';
odv1.style['height'] = '200px';
odv1.style.background = 'cyan';

4、onclick事件

onclick事件：点击了该 HTML 元素
事件属性添加 JavaScript 代码：
// 给div定义一个onclick事件，触发该事件的时候，调用该事件指定的函数
<div class="dv1" id="dv01" onclick="tank()">这个是div1</div>

// 定义一个函数，负责弹框
function tank() {
    alert('hello')
}

四、jquery

1、jquery介绍和引用

jQuery是目前使用最广泛的javascript函数库。

jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。

jquery的口号和愿望 Write Less, Do More（写得少，做得多）

  • 官方网站：http://jquery.com/
  • 在线手册：https://www.runoob.com/manual/jquery/

  • 下载

  • 引入页面

  • jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

2、jquery选择器

  • jquery用法思想一
    选择某个网页元素，然后对它进行某种操作

jquery基本的选择器

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

// id选择器
$('#btn1') 
// 类选择器
$('.box1') 
// 标签选择器
$('li') 
// 层级选择器
$('#ul li span') 
 // 属性选择器
$('input[name=user]')

选择同胞和父辈元素

//选择div元素前面紧挨的同辈元素
$('div').prev(); 
//选择div元素之前所有的同辈元素
$('div').prevAll();

//选择div元素后面紧挨的同辈元素
$('div').next(); 
//选择div元素后面所有的同辈元素
$('div').nextAll(); 

//选择div的父元素
$('div').parent();
//选择div的所有子元素 
$('div').children(); 
//选择div的同级元素
$('div').siblings(); 

//选择div内的class等于cs的元素
$('div').find('#cs li');

选择过滤

// 选择包含p元素的div元素
$('div').has('p'); 

//选择class不等于cs的div元素
$('div').not('.cs'); 

//选择class等于cs的div元素
$('div').filter('.cs'); 

//选择第6个div元素
$('div').eq(5);

获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

3、jquery操作样式

获取元素样式

// 获取div的样式
$("div").css("width");
$("div").css("color");

  • 修改元素样式

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

  • 添加或者移除class属性

// 添加class属性
$("#div1").addClass("cs2") 
// 移除class属性
$("#div1").removeClass("cs2")  

// 重复切换样式
$("#div1").toggleClass("cs2")

4、绑定click事件

给元素绑定click事件，可以用如下方法：

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

  • jquery链式调用：

    jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写

    $(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();

5、jquery操作属性

方法 描述
attr() 设置或返回匹配元素的属性和值。
removeAttr() 从所有匹配的元素中移除指定的属性。

6、jquery操作元素

获取文本内容：

  • text() - 设置或返回所选元素的文本内容

  • html() - 设置或返回所选元素的内容（包括 HTML 标记）

  • val() - 设置或返回表单字段的值

  • 添加新的 HTML 内容

    • append() - 在被选元素的结尾插入内容
    • prepend() - 在被选元素的开头插入内容
    • after() - 在被选元素之后插入内容
    • before() - 在被选元素之前插入内容

  • 删除元素/内容

    • remove() - 删除被选元素（及其子元素）
    • empty() - 从被选元素中删除子元素

7、jquery效果函数

方法 描述
animate() 对被选元素应用“自定义”的动画
fadeIn() 逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut() 逐渐改变被选元素的不透明度，从可见到隐藏
hide() 隐藏被选的元素
show() 显示被选的元素
slideDown() 通过调整高度来滑动显示被选元素
slideToggle() 对被选元素进行滑动隐藏和滑动显示的切换
slideUp() 通过调整高度来滑动隐藏被选元素
stop() 停止在被选元素上运行动画
toggle() 对被选元素进行隐藏和显示的切换

8、jquery事件


click()       // 鼠标单击
change()      // 元素改变
mouseover()   // 鼠标进入（进入子元素也触发）
mouseout()    // 鼠标离开（离开子元素也触发）
mouseenter()  // 鼠标进入（进入子元素不触发）
mouseleave()  // 鼠标离开（离开子元素不触发）
hover()       // 同时为mouseenter和mouseleave事件指定处理函数
ready()       // DOM加载完成
resize()      // 浏览器窗口的大小发生改变
scroll()      // 滚动条的位置发生变化
submit()      // 用户递交表单

9、ajax

ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

同步和异步
现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。

局部刷新和无刷新
ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

同源策略
ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：

$.ajax使用方法
常用参数：
1、url 请求地址
2、type 请求方式，默认是’GET’，常用的还有’POST’
3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是’true’，表示异步

以前的写法：

$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
    success:function(data){
        alert(data.name);
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});

  • jsonp

jsonp
ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，只需要将dataType:设置为jsonp,就可以跨域请求数据(前提是服务器允许跨域请求)

    // 跨域请求
     $('#dl').click(function () {
        //获取账号密码
        var user = $('#username').val();
        var pwd = $('#password').val();
        $.ajax({
            url: 'http://test.lemonban.com/futureloan/mvc/api/member/login',
            dataType: 'jsonp',
            method: 'POST',
            data: {"mobilephone": user, "pwd": pwd},
        }).done(function (data) {
            console.log(data);
            alert('登录成功')
        }).fail(function () {
            alert('登录失败')

        })
    })
相关标签： JAVA自动化测试 Python自动化测试 web前端基础知识 web基础知识

上一篇： iOS开发--UIKit控件之UIButton(按钮)

下一篇： 希捷LaCie Rugged Secure 2TB移动硬盘开箱图赏：不怕汽车碾压

推荐阅读