HTML基础
目录
- HTML基础
- CSS基础语法
- 盒子模型
- 页面布局与规划
- JavaScript基础语法
- jQuery
- vuejs" rel="external nofollow noreferrer">Vue.js
HTML5标签
doctype 标签
| HTML 版本 | doctype 声明 |
|---|---|
| HTML5 | <!doctype html> |
| XHTML1.0 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| HTML4.0 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
html标签
<html>
文件的全部内容
</html>
head标签
<html>
<head>文件头</head>
<body>文件主体</body>
</html>
meta标签
<html>
<head>
<meta charset="utf-8" />
</head>
<body>文件主体</body>
</html>
title标签
<html>
<head>
<meta charset="utf-8">
<title>窗体标题</title>
</head>
<body>文件主体</body>
</html>
body标签
<html>
<head>
<meta charset="utf-8">
<title>窗体标题</title>
</head>
<body>
body 标签里面的文本
<!--body 标签里面的文本 -->
</body>
</html>
文本和超链接标签
标题标签
<h1> 这是 h1 标签效果 </h1>
<h2> 这是 h2 标签效果 </h2>
<h3> 这是 h3 标签效果 </h3>
<h4> 这是 h4 标签效果 </h4>
<h5> 这是 h5 标签效果 </h5>
<h6> 这是 h6 标签效果 </h6>
段落标签
<p> 段落正文内容 </p>
换行标签
一行文本 <br> 另起一行
水平标签
<hr 属性 =" 属性值 ">
强调标签
<b> 要以粗体显示的文字 </b>
<strong> 要以粗体显示的文字 </strong>
图片标签与超链接标签
图片标签
<img src="路径" alt="提示信息" align="对齐方式" border="边框大小" width="宽度" height="高度"/>
| 属性 | 说明 | 默认值 |
|---|---|---|
| src | 图 片 地 址， 接 受 GIF、JPG 及 PNG 格式。若图片文件与该 html 文件处于同一目录，则只写文件名称，否则必须添加正确的相对路径或绝对路径 | left |
| width、height | 设定线条厚度。以像素作单位 | 2 |
| align | 设定线条长度。可以是绝对值（以像素为单位）或相对值 | 100% |
| alt | 设定线条颜色。#0000FF 代表蓝色，也可以采用颜色的名称，即 color="blue" | 黑色 |
| noshade | 设定线条为平面显示，若取消此项则具有阴影或立体 | — |
超链接标签
<a 属性 ="属性值"> 链接显示文本 </a>
| 属性 | 说明 | 默认值 |
|---|---|---|
| href | 链接的目标 URL | — |
| target | 在何处打开目标 URL。仅在 href 属性存在时使用 | _self |
音频标签视频标签
音频标签
<audio width="640" height="360" src="music.mp3" controls="true">
您的浏览器不支持 audio 元素！
</ audio >
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果是 autoplay，则音频在就绪后马上播放 |
| controls | controls | 如果是 controls，则向用户显示控件，如播放按钮 |
| end | 数字值 | 定义播放器在音频流中的何处停止播放。默认声音会播放到结尾 |
| loopend | 数字值 | 定义在音频流中循环播放停止的位置，默认是end 属性的值 |
| loopstart | 数字值 | 定义在音频流中循环播放的开始位置。默认是start 属性的值 |
| playcount | 数字值 | 定义音频片断播放多少次，默认是 1 |
| src | url地址 | 所播放音频的 url地址 |
| start | 数字值 | 定义播放器在音频流中开始播放的位置。默认声音在开头进行播放 |
视频标签
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 audio 元素！
</video>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果是 autoplay，则视频在就绪后马上播放 |
| src | url地址 | 所播放视频的 url地址 |
| perload | none | metadata | auto | 用于指定视频或音频数据是否预加载：none（不进行预加载）、metadata（只预加载媒体的元数据）和 auto（预加载全部视频或音频） |
| loop | loop | 用于指定是否循环播放视频或音频 |
| poster | url地址 | 视频加载时显示的图像，或者在用户点击播放按钮前显示的图像 |
| controls | controls | 如果是 controls，则向用户显示控件，如播放按钮 |
| width | 数字值 | 用于指定视频的宽度 |
| height | 数字值 | 用于指定视频的高度 |
列表、div 以及 span 标签
列表标签
一、无序列表
<ul type="项目符号类，取值为 disc（默认值，实心圆）、circle（空心圆环）和 square（正方形）">
<li> 第 1 项 </li>
<li> 第 2 项 </li>
</ul>
二、有序列表
<ol type="序列类型" start="序号起始值">
<li> 第一项 </li>
<li> 第二项 </li>
</ol>
三、自定义列表
<dl>
<dt> 名词 1<dd> 解释 1
<dt> 名词 2<dd> 解释 2
<dt> 名词 3<dd> 解释 3
</dl>
div 标签
div标签没有特定的含义，只是作为组合其他 HTML 元素的容器，默认情况下，div标签将占满一行，当存在多个div标签时，将按照从上到下的方式排列。
<div>
其他标签或内容
</div>
span标签
span 标签也没有特定的含义，可作为文本的容器。span 标签与 div 标签不同，默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。
<span> 文本 </span>
表格标签
……
| 标签 | 描述 | |
|---|---|---|
| ……
|
表格标签 | |
| 行标签 | ||
| …… | 单元格标签 |
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
<tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
<tr>
</table>
colspan 表示跨越的列数，rowspan 表示跨越的行数
<table>
<tr>
<td colspan=“所跨的列数”> 单元格内容 </td>
</tr>
</table>
其他相关标签
- 表格标题标签 *caption*，用于描述整个表格的标题。
- 表格表头 *th*，用于定义表格的表头，通常是表格的第一行数据，以粗体、居中的样式显示数据。
- 表格数据的分组标签 *thead*、*tbody* 和 *tfoot*，这 3 个标签通常配合使用，主要对表格数据进行逻辑分组。
表单标签
| 表单控件标签写法 | 说明 |
|---|---|
<input type="text"> |
单行文本输入框。使用的是 input 标签和 type 属性 |
<input type="submit"> |
将表单中的信息提交给表单中 action 属性所指向的地址 |
<input type="checkbox"> |
复选框 |
<input type="radio"> |
单选钮 |
<input type="password"> |
密码输入框（输入的文字用 * 表示） |
<select> |
下拉框 |
<textArea> |
多行文本输入框 |
<form name="表单名字" action="URL" method="get/post">
表单元素
</form>
get方式提交：使用 get 方式提交数据时，表单数据会附加在 URL 之后，由用户端直接发送至服务器，所以速度比 post 快，但缺点是数据长度不能太长。
post方式提交：使用 post 时，表单数据是与 URL 分开发送的，客户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度比 get 慢。
输入框
文本框：表单中最常用的输入元素就是文本框（text），它提供给用户输入的单行文本信息，如用户名的输入。文本框的用法很简单，只需将 input 标签的 type 属性设置为 text 即可。
<input name="表单元素名称" type="text" id="表单元素名称" value="值" />
| input标签属性 | 说明 |
|---|---|
| type | 指 定 表 单 元 素 的 类 型， 可 用 的 选 项 有 text、password、checkbox、radio、submit、reset、file、hidden、image 和button，默认为 text |
| name | 指定表单元素的名称 |
| value | 指定表单元素的初始值 |
| size | 指定表单元素的初始宽度。如果 type 为 text 或 password，则表单元素的大小以字符为单位；对于其他输入类型，宽度以像素为单位 |
| maxlength | 指定可在 text 或 password 元素中输入的最大字符串，默认无限制 |
| checked | 此属性只有一个值，为 checked，表示选中状态，如果不选中，则无须添加此属性 |
| readonly | 当文本框标签的 readonly 属性指定为 readonly 时，文本框中的值不允许更改 |
密码框： 密码框主要用于一些保密信息的输入，如密码。因为用户输入时，显示的不是输入的内容，而是“*”。
<input type="password" id="userPwd" name="userPwd" />
多行文本域：多行文本域用于显示或输入两行或两行以上的文本，它使用的标签是 textarea。
<textarea name="指定名称" cols="列数" rows="行数">
文本域的内容
</textarea>
单选按钮
<input type ="radio" name="名称" value ="值" checked="checked" />
复选框
<input type ="checkbox" name="名称" checked="checked" />
下拉框
<select name="指定列表的名称" size="行数">
<option value="可选择的值" selected="selected"> 显示项的内容 </option>
<option value="可选择的值"> 显示项的内容 </option>
</select>
表单验证
<input type="text" name="usr_name" required="required" />
required 属性可应用于大多数 input 标签上。在提交时，如果元素中的内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户该元素中必须输入内容。
类型匹配验证
| type 属性 | 说明 |
|---|---|
| 在提交表单时，会自动验证值是否符合 e-mail 格式要求 | |
| url | 在提交表单时，会自动验证值是否符合 url 格式要求 |
| number | 在提交表单时，会自动验证值是否为数字，并可以配合 min、max 以及 step 属性进行数值的限定 |
| range | 在提交表单时，会自动验证值是否在指定的范围内的数字，使用配合 min、max 以及 step 属性进行数值的限定，显示为滑动条 |
| date | 用于选取年、月、日 |
控制字符数量
验证输入范围
自定义错误消息
CSS基础语法
样式表的分类
外部样式表
1、链接外部样式： 链接外部样式表是指通过HTML的link链接标签，建立样式文件和网页的关联。
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
2、导入样式表： 在网页中，还可以使用@import方法导入样式表。
<head>
<style type="text/css">
@import "css/style.css";
</style>
</head>
内嵌样式表
<head>
<style type=”text/css”>
选择符 {样式属性：属性值;......}
选择符 {样式属性：属性值;......}
</style>
</head>
行内样式表
<标签名 style="样式属性：属性值;" >......</标签名>
<p style="color:red; font-size:30px; font-family:黑体;">
CSS基本选择器
标签选择器
<style type="text/css">
标签名 {
属性1：属性值1;
属性2：属性值2;
}
</style>
类选择器
1、定义类样式
<style type="text/css">
.类名 {
属性1：属性值1;
}
</style>
2、应用类样式
<标签名 class="类名"> 标签内容 </标签名>
ID选择器
<style type="text/css">
#ID标识名 {
属性1：属性值1;
属性2：属性值2;
}
</style>
CSS 扩展选择器
组合选择器
p,.red,#header {
color:red;
font-size:12px;
}
包含选择器（后代选择器）
#header ul li a {
color:red;
font-size:12px;
}
交集选择器
p.red {
color: red;
font-size: 23px;
}
伪类选择器
标签名:伪类名{
属性：属性值;
}
| 常用伪类 | 含义 | 应用场景 |
|---|---|---|
| a:link | 未单击访问时的超链接样式（未访问） | 常用，超链接主样式 |
| a:visited | 单击访问后的超链接样式（已访问） | 区分是否已被访问 |
| a:hover | 鼠标悬浮在超链接上的样式（鼠标悬停） | 常用，实现动态效果 |
| a:active | 鼠标单击未释放的超链接样式（正被点击） | 少用，通常与 link 一致 |
CSS的特性
CSS继承性
CSS3 的继承性，亦称为样式表的层叠性。样式表的继承规则是，所有在元素中嵌套的元素都会继承外层指定的样式，有时会将很多层样式叠加在一起，但另行更改除外。
<body>
<p>段落文字</p>
<p id="p1">段落文字</p>
</body>
body {
font-size: 12px;
font-style: italic;
}
#p1 {
font-size: 30px;
}
这里标签p中的内容会继承body定义的属性，即示例中的段落文字同样会以斜体的12像素大小的文字显示，除非定义新的样式。
CSS3 层叠性和优先级
如果多个选择器定义的样式规则不发生冲突，则元素将应用所有选择器定义的样式。
如果多个选择器定义的样式规则发生了冲突，则 CSS 按照选择器的优先级来处理，元素将应用优先级高的选择器定义的样式。
CSS 规定选择器总原则是：越特殊的样式，优先级越高。
选择符优先级从高到低：
行内样式 > ID样式 > 类样式 >元素选择符
内嵌样式 > 内部样式 > 外部样式
常用的样式属性
字体属性
| 属性名 | 说明 | 举例 |
|---|---|---|
| font | 设置字体的所有样式属性 | font:bold 12px 宋体 |
| font-family | 定义字体类型 | font-family: 宋体 |
| font-size | 定义字体大小 | font-size:12px |
| font-weight | 定义字体的粗细 | font-weight:bold |
| color | 字体颜色 | color:red;( 颜 色 取 值 可 以 为颜 色 的 英 文 单 词， 也 可 以 采 用#000000-#FFFFFF 之间的取值） |
文本属性
| 属性名 | 说明 | 应用场景 |
|---|---|---|
| line-height | 设置行高（即行间距），常用取值为 25px、28px | 布局多行文本 |
| text-align | 设 置 对 齐 方 式， 常 用 的 取 值 为left、right 以及 center | 各种元素对齐 |
| letter-spacing | 设 置 字 符 间 距， 常 用 的 取 值 为3px、8px | 加大字符间间隔 |
| text-ecoration | 设 置 文 本 修 饰， 常 用 的 取 值 为underline（下划线）、none | 加下划线，中划线等 |
边距和填充
边距是指页面中元素与元素之间的间距，margin 分为上、下、左、右 4 个方向，可以单独设置 margin-top、margin-left、margin-right、margin-bottom，也可以使用复合属性 margin 进行设置。
使用复合属性 margin 设置边距时，存在 4 种方式。
元素的填充也称为内边距，它是指元素内容与边框之间的距离，填充分为上、下、左、右四个方向，可通过padding-top、padding-left、padding-right、padding-bottom分别设置四个方向的内边距，也可以通过复合属性padding设置。
边框属性
1、border 属性
| 属性名 | 说明 | 示例 |
|---|---|---|
| border-style | 设置边框的样式，取值：none 无边框、solid 实线以及 dashed 虚线等 | border-style:solid |
| border-width | 设置边框的宽度 | border-width:1px |
| border-color | 设置边框的颜色 | border-color:redborder |
| border | 复合属性，用于设置边框宽度、样式以及颜色 | border:1px solid red |
2、border-radius
| 语法 | 说明 |
|---|---|
| border-radius：参数 1 | 参数 1：4 个角 |
| border-radius：参数 1 参数 2 | 参数 1：左上角、右下角参数 2：左下角、右上角 |
| border-radius：参数 1 参数 2 参数 3 | 参数 1：左上角参数 2：左下角、右上角参数 3：右下角 |
| border-radius：参数 1 参数 2 参数 3 参数 4 | 4个参数对应左上角、右上角、右下角和左下角 |
列表属性
| 属性名 | 说明 |
|---|---|
| list-style-type | 用于设定列表项的符号，取值：None（无）、Disc（实心圆）、Circle（空心圆）、Square（实心方块）。 |
| list-style-image | 用于设定图像作为列表项目符号，其值为图像对应的url。 |
| list-style-position | 用于设定项目符号在列表项的位置，取值：inside、outside（默认值）。 |
| list-style | 复合属性，用于设置列表属性，其顺序为：list-style-type、list-style-position、list-style-image。 |
背景和阴影属性
背景属性
| 属性 | 说明 |
|---|---|
| background-color | 用于设置元素的背景颜色 |
| background-image | 用于设置元素的背景图片 |
| background-repeat | 用于设置元素的背景图片重复方式 |
| background-position | 用于设置元素的背景图片位置 |
| background-size | 用于设置元素的背景图片大小 |
| background | 复合属性，用于设置元素的背景效果 |
| background-repeat的值 | 默认值，表示背景图像在纵向和横向上平铺 |
|---|---|
| no-repeat | 表示背景图像不平铺 |
| repeat-x | 表示背景图像只在水平方向上平铺 |
| repeat-y | 表示背景图像只在垂直方向上平铺 |
背景图片的定位
background-position: 关键字 | 百分比 | 像素值
| 取值 | 说明 |
|---|---|
| 关键字 | 水平方向：left、center、right；垂直方向：top、center、bottom。 |
| 百分比 | 使用百分比表示背景位置，常用的数值：水平方向：0%（左） 50%（中） 100%(右)垂直方向：0%（上） 50%（中） 100%(下) |
| 像素值 | 背景图片左顶点相对于元素左顶点的偏移量，当为正值时，水平向右、垂直向下偏移，当为负值时，水平向左、垂直向上偏移。 |
CSS Sprites
CSS Sprites，在国内也称之为 CSS 精灵，是一种图片网页应用处理方式。它允许将一个页面涉及到的所有零星图片均包含到一张大图中。
其实，CSS Sprites 的目的是通过整合图片，减少对服务器的请求数量以及请求的字节数，从而加快页面的加载速度。
背景的渐变
线性渐变
background: linear-gradient(<angle> || <direction>,< color_stop>, <color_stop>...);
| 取值 | 说明 |
|---|---|
<angle> |
通过角度来确定渐变的方向。角度是指水平线和渐变线之间的角度，逆时针方向计算。 |
<direction> |
通过代表方向的关键词来确定渐变的方向。 |
<color_stop> |
用于指定终止色，其中可以设置多个终止色，用于实现多种颜色之间的渐变。 |
径向渐变
background: radial-gradient (<shape> || <size> at <position>, <color_stop>, ...);
| 取值 | 说明 |
|---|---|
<position> |
主要用来定义径向渐变的圆心位置。 |
<shape> |
主要用来定义径向渐变的形状。包括两个值“circle”（圆形）和“ellipse”（椭圆形）。 |
<size> |
主要用于设置渐变半径的大小，从而用来确定径向渐变的结束形状大小。可以设置数值、百分比以及关键字。 |
<color_stop> |
径向渐变线上的终止色 |
阴影属性
文字阴影
text-shadow: h-shadow v-shadow blur color;
| 取值 | 说明 |
|---|---|
| h-shadow | 必需，阴影的水平距离。 |
| v-shadow | 必需，阴影的垂直距离。 |
| blur | 可选，阴影的模糊半径。 |
| color | 可选，阴影的颜色。 |
盒子阴影
box-shadow: h-shadow v-shadow blur spread color;
| 取值 | 说明 |
|---|---|
| h-shadow | 必需，阴影的水平距离。 |
| v-shadow | 必需，阴影的垂直距离。 |
| blur | 可选，阴影的模糊半径。 |
| spread | 可选，阴影的大小 |
| color | 可选，阴影的颜色。 |
盒子模型
标准文档流
块状标签和行内标签
在 CSS 中将 HTML 中标签分为块状标签和行内标签
1、常见的块状标签
标题（<h1>~<h6>）、
段落（<p>）、
水平线（<hr/>）、
列表（<ul>、<ol>、<li>、<dl>、<dt>、<dd>）、
表格（<table>）、
层（<div>）、
表单 (<form>)
2、常见的行内标签
图像（<img>）、范围（<span>）、换行（<br/>）、超链接（<a>）
行内标签与块状标签的区别：
1、排列方式不同
行内元素按照
从左到右的方式进行排列，多个行内元素显示在同一行，只有当一行排列完毕后，才会开始一个新行。块状元素各占据一行，则按照自上而下的方式进行排列。
2、内嵌元素不同
块状元素可以包含行内元素和块状元素。行内元素不能包含块状元素，只能包含
文本或者其他
行内元素。
3、属性设置不同
行内元素与块状元素的属性设置不同，主要体现在
盒子模型中，行内元素设置width 属性、height 属性时无效，但可以设置 line-height 属性，再设置margin 属性、padding 属性时，对于上下方向上的设置无效。
display 属性
CSS 中 display 可以隐藏 HTML 元素包括 div 层（不占用位置）
display:none | block;
visibility 属性
CSS 中 visibility 可以隐藏/显示 html 元素包括 div 层（占用位置）
visibility：hidden | visible;
盒子浮动
float属性
float : none | left | right
| 参数 | 说明 |
|---|---|
| left | 表示文本或图像会移动到父元素的左侧 |
| right | 表示文本或图像会移动到父元素的右侧 |
| none | 是默认值，表示文本或图像会显示于它在文档中出现的位置 |
清除浮动
浮动产生的原因：
一个盒子里使用了 CSS float 浮动属性，导致父级对象盒子不能被撑开，这样 CSS float 浮动就产生了。左边盒子使用左浮动，右边盒子使用右浮动，两个盒子被包在另外一个盒子中。
浮动产生的负作用：
- 背景不能显示
- 边框不能撑开
- margin padding设置值不能正确显示
清除浮动影响的方法：
1、对父级设置适合 CSS 高度
- 对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置。比如我们知道内容高度是 100px+ 上下边框为 2px，这样具体父级高度为 102px。
2、clear: both 清除浮动
- 在父级 “
</div>” 结束前加此div引入“clear:both”样式即可清除浮动。
3、父级 div 定义 overflow:hidden
- 对父级CSS选择器加
overflow: hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
盒子定位
静态定位
position 属性的默认值static表示 CSS 文档流定位，元素框正常生成。就是按照正常的布局流从上到下从左到右布局。
position: static;
相对定位
相对定位可以将指定的标签从本来应该显示的位置移动到一个相对位置。
position: relative;
固定定位
position: fixed;
绝对定位
绝对定位可以将指定的标签放置在绝对坐标位置上，绝对定位使标签的位置与文档流无关，因此不占据空间，可以浮在网页上。
position: absolute;
z-index 属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index:数字; /*数学越大层级越高*/
页面布局与规划
表格布局
- HTML5 的表格标签除了以网格形式显示数据以外，还可以被应用于对网页内容的布局。
- 传统表格布局方式实际上利用了 table 标签所具有的无边框特性，因此可以将网页中的内容按版式划分放入表格的各单元格中，从而实现复杂的排版组合。
流式布局
瀑布流布局
瀑布流布局是流式布局的一种，是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
<body>
<h1> 流式布局 </h1>
<img src="logo.jpg">
<p>
流式布局基本没有对文字图片信息的位置控制，它所遵从的是从左至右，然后从上到下的顺序
</p>
</body>
masonry 实现瀑布流布局
masonry 是一个 javascript 插件，通过该插件可以轻松实现瀑布流布局，和 CSS 中 float 的效果不太一样的地方在于 float 先水平排列，然后再垂直排列，使用 masonry 则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理 不同高度的元素在垂直方向的间隙。
<body>
<div id="grid">
<div class="grid-item a"> </div>
<div class="grid-item b"> </div>
......
<div class="grid-item d"> </div>
<div class="grid-item e"> </div>
</div>
</body>
<style type="text/css">
#grid { width: 1000px;margin: 0 auto;}
.grid-item { width: 200px; float: left;}
.a { background: lightblue; height: 200px;}
.b { background: lightcoral; height: 300px;}
.c { background: lightgreen; height: 500px;}
.d { background: lightsalmon; height: 350px;}
.e { background: lightseagreen; height: 150px;}
</style>
<script src="masonry.pkgd.min.js"></script>
<script type="text/javascript">
var msnry = new Masonry('#grid', {
itemSelector: '.grid-item',
columnWidth: 200
});
</script>
div布局
上下结构
上中下结构
上导航中下结构
左窄右宽结构
内容左中右
导航内容左中右
内容右窄左宽
内容左窄右宽
JavaScript基础语法
使用方式
<script> </Script>标签中直接编写脚本程序代码- 脚本程序代码放置在一个单独的文件中，然后在网页文件中引用这个脚本程序文件
- 将脚本程序代码作为某个 HTML 页面元素的事件属性值或超链接的 href 属性值
HTML 文件混合方式
<body>
<script type="text/javascript">
document.write("<h2> 欢迎来到 JavaScript 课堂 </h2>");
</script>
</body>
JS 文件引用方式
- 创建 JavaScript 文件，命名为demo1.js html
- 页面，在
<script>标签中引用 JavaScript 文件
<body>
<script src="../js/demo1.js" type="text/javascript"></script>
</body>
HTML代码嵌入方式
<body>
<a href="javascript:document.write('<h2> 欢迎来到 JavaScript 课堂 </h2>');">hello</a>
</body>
JavaScript核心语法
变量
三种使用方式
- 先声明再赋值 如：var message; message = "hi";
- 同时声明和赋值变量 如：var message = "hi";
- 不声明直接赋值 如：message = "hi";
变量命名规则
- 第一个字符必须是一个字母、下划线（_）或一个美元符号（$）
- 其他字符可以是字母、下划线、美元符号或数字
- 区分大小写
- 不能与关键字同名，如 while、for 和 if 等
数据类型
JavaScript 中有 5 种简单数据类型，也称为基本数据类型
- undefined
- null
- boolean
- number
- string
另外还有一种复杂数据类型——object对象类型
由于JavaScript中的变量是弱类型，可通过typeof操作符获取变量的数据类型
| 数据类型 | 数据值 | typeof |
|---|---|---|
| number类型 | 浮点数、整数 | number |
| boolean类型 | true、false | boolean |
| string类型 | 单引号或双引号引起来的若干字符 | string |
| null类型 | 只存在一个值null，表示对象不存在 | object |
| undefined类型 | 只存在一个值undefined，表示未赋值或未声明的变量 | undefined |
JavaScript注释
- 单行注释：//
- 多行注释： /* 注释内容 */
// 声明并初始化一个变量
var v = 5;
/* 使用 for 循环输出 Hello5 次 */
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
/*
这些注释不会显示在页面上，
但是可以通过页面的源代码查看到
*/
顺序结构
顺序结构，顾名思义就是程序按照语句出现的先后顺序依次执行
<body>
<script type="text/javascript">
document.write(" 程序开始执行……<br/>");
document.write(" 程序正在执行中……<br/>");
document.write(" 程序执行完毕……<br/>");
</script>
</body>
选择结构
- 选择结构：需要根据特定的条件执行不同的语句
- JavaScript中选择结构使用if语句和switch语句
- if 语句有 3 种形式：单分支、双分支和多分支
1、if 单分支语句
if( 条件表达式 ) {
语句或语句块
}
2、if 双分支语句
if( 条件表达式 ) {
语句或语句块 1
} else{
语句或语句块 2
}
3、if 多分支语句
if( 条件表达式 1){
语句或语句块 1
}
else if( 条件表达式 2){
语句或语句块 2
}......
else if( 条件表达式 n){
语句或语句块 n
}
else{
语句或语句块 n+1
}
4、switch 语句
switch（表达式）{
case 取值 1：语句或语句块 1; break;
case 取值 2：语句或语句块 2; break;
......
case 取值 n：语句或语句块 n; break;
default: 语句或语句块 n+1; break;
}
循环结构
while 循环语句
while (条件表达式){
语句或语句块
}
do-while循环语句
do {
语句或语句块
}while(条件表达式);
for循环语句
for(初始化表达式 ; 循环条件表达式 ; 循环后的操作表达式){
语句或语句块
}
break 语句和 continue 语句
JavaScript跳转语句：break语句和continue语句
break语句用于中断循环
continue语句用于跳过本次循环要执行的剩余语句，然后开始下一次循环
var i = 1;
var sum = 0;
while (i <= 20) {
if (i % 2 != 0) {
i++;
continue; // 是奇数就结束本次循环，开始下一次循环
}
sum = sum + i;
if (sum > 30) {
document.write( "当加到：" + i + "时，累加和已经超过 30");
break; // 累加和超过 30，跳出循环
}
i++;
}
自定义函数
函数的定义
- 函数就是为了完成程序中的某些特定功能而进行专门定义的一段程序代码
- 函数包括自定义函数和系统函数
- 使用函数可以实现特定的功能，在使用函数前必须对函数进行定义，代码放置在
<script></script>标签之间
function 函数名 (形式参数 1, 形式参数 2,…, 形式参数 n){
语句
}
使用 function 关键字。function 后是函数名，JavaScript 中的函数不必说明返回值的类型。
函数的命名规则与变量名的命名规则相同。
函数名后的 () 可以包含若干参数，也可以选择不带任何参数。
最后是一对 {}，包含具体实现程序中的某些特定功能的若干语句或脚本代码
<body>
<script type="text/javascript">
// 参数 width、height 表示使用此函数时，要传递所求的长方形的宽度和高度值
function getArea (width,height) {
var result = width*height;
document.write(" 面积为：+ result);
}
</script>
</body>
函数的调用
- 函数是不会自动执行的，调用一个函数的方法是使用函数名称，并且在函数名后用括号包含所需要传入的参数值
- 调用函数的语句也需要放置在
<script>和</script>里
<body>
<script type="text/javascript">
//1、函数的创建
// 参数 width、height 表示使用此函数时，要传递所求的长方形的宽度和高度值
function getArea (width, height) {
var result = width * height;
document.write(" 面积为：+ result);
}
</script>
//2、函数的使用
<h1> //宽度是：3，高度是：4 的长方形
<script type="text/javascript">getArea(3,4);</script>
</h1>
</body>
函数的参数
函数参数作用：调用函数时将数据传递给被调函数的方式
JavaScript中函数参数的特殊性
函数声明了参数，调用时也可以不传递参数，这在其他编程语言中是会出现编译错误的
不管函数声明时有多少个参数，调用函数时可以传递若干个参数值给函数，并且实际传递的参数值还可以在函数内部获得
在函数被调用时，一个 arguments 对象就会被创建，它只能使用在函数体中，以数组的形式来管理函数的实际参数
函数的返回值
函数的返回值能够将一个函数内部产生的结果返回给外部语句使用
实现函数返回值的语句是 return
return 返回值 ;
<script type="text/javascript">
// 创建有返回值的函数
function getArea(width,height) {
var result = width * height;
return result;
}
</script>
<h1> 宽度是：3，高度是：4 的长方形面积是：<br/>
<script type="text/javascript">
// 调用有返回值的函数
var area = getArea(3,4);
document.write(area);
</script>
</h1>
匿名函数
语法一：
标签：
留言评论