HTML 文档结构标签

2023-10-30 杨亦涛浏览量: 205

HTML 文档结构标签

<html>
- 用于定义整个HTML文档。
- 示例：
  
  html
  
  <html> <head>...</head> <body>...</body> </html>
<head>
- 包含文档的元数据，如标题、字符集、样式表、脚本等。
- 示例：
  
  html
  
  <head> <meta charset="UTF-8"> <title>Page Title</title> </head>
<body>
- 页面主体内容，包含网页的可见内容。
- 示例：
  
  html
  
  <body> <h1>Welcome</h1> <p>This is a simple webpage.</p> </body>
<meta>
- 提供网页的元信息，如字符集、描述、关键字等。
- 示例：
  
  html
  
  <meta charset="UTF-8"> <meta name="description" content="This is a webpage.">
<title>
- 定义网页的标题，显示在浏览器标签栏中。
- 示例：
  
  html
  
  <title>My Webpage</title>

文本和结构标签

<h1> to <h6>
- 定义不同级别的标题，<h1>为最高级，<h6>为最低级。
- 示例：
  
  html
  
  <h1>This is a Main Title</h1> <h2>This is a Subheading</h2>
<p>
- 定义段落。
- 示例：
  
  html
  
  <p>This is a paragraph of text.</p>
<br>
- 插入换行符。
- 示例：
  
  html
  
  This is the first line.<br>This is the second line.
<hr>
- 插入一条水平线。
- 示例：
  
  html
  
  <hr>
<strong>
- 表示重要的文本，通常以加粗显示。
- 示例：
  
  html
  
  <strong>This is important text.</strong>
<em>
- 表示强调的文本，通常以斜体显示。
- 示例：
  
  html
  
  <em>This is emphasized text.</em>
<blockquote>
- 用于引用一段文字，通常会有缩进。
- 示例：
  
  html
  
  <blockquote cite="https://example.com"> This is a quoted text. </blockquote>
<pre>
- 用于预格式化文本，保留文本中的空格和换行符。
- 示例：
  
  html
  
  <pre> This is a preformatted text. Line breaks and spaces are preserved. </pre>
<code>
- 用于定义代码片段。
- 示例：
  
  html
  
  <code>let x = 10;</code>
<span>
- 用于定义行内元素，通常用于小范围内的格式化。
- 示例：
  
  html
  
  <span style="color: red;">This is a red text.</span>
<div>
- 用于定义块级元素，常用于布局。
- 示例：
  
  html
  
  <div style="background-color: lightblue;"> This is a div container. </div>

超链接和图像

<a>
- 定义超链接。
- 示例：
  
  html
  
  <a href="https://www.example.com">Click here</a>
<img>
- 用于插入图片。
- 示例：
  
  html
  
  <img src="image.jpg" alt="Image description">
<iframe>
- 用于嵌入其他网页或外部资源。
- 示例：
  
  html
  
  <iframe src="https://www.example.com"></iframe>

列表标签

<ul>
- 定义无序列表。
- 示例：
  
  html
  
  <ul> <li>Item 1</li> <li>Item 2</li> </ul>
<ol>
- 定义有序列表。
- 示例：
  
  html
  
  <ol> <li>First Item</li> <li>Second Item</li> </ol>
<li>
- 定义列表项，通常用于无序或有序列表中。
- 示例：
  
  html
  
  <ul> <li>List Item 1</li> <li>List Item 2</li> </ul>

表格标签

<table>
- 定义表格。
- 示例：
  
  html
  
  <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </table>
<tr>
- 定义表格的行。
- 示例：
  
  html
  
  <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr>
<th>
- 定义表格的标题单元格。
- 示例：
  
  html
  
  <th>Header</th>
<td>
- 定义表格的普通单元格。
- 示例：
  
  html
  
  <td>Row 1, Cell 1</td>

表单标签

<form>
- 定义表单，用于收集用户输入。
- 示例：
  
  html
  
  <form action="/submit_form" method="post">  </form>
<input>
- 用于定义表单输入字段。
- 示例：
  
  html
  
  <input type="text" name="username">
<button>
- 用于定义按钮。
- 示例：
  
  html
  
  <button type="submit">Submit</button>
<textarea>
- 定义多行文本输入区域。
- 示例：
  
  html
  
  <textarea rows="4" cols="50">Enter text here...</textarea>
<select>
- 定义下拉菜单。
- 示例：
  
  html
  
  <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </select>
<option>
- 定义下拉菜单中的选项。
- 示例：
  
  html
  
  <option value="volvo">Volvo</option>

脚本和样式

<script>
- 用于嵌入或引用JavaScript。
- 示例：
  
  html
  
  <script src="script.js"></script>
<style>
- 用于嵌入CSS样式。
- 示例：
  
  html
  
  <style> body { background-color: lightblue; } </style>
<link>
- 用于链接外部资源，如CSS样式表。
- 示例：
  
  html
  
  <link rel="stylesheet" href="styles.css">

网络和协议相关

Network [netwɜːk] – 网络
General ['dʒen(ə)r(ə)l] – 一般的，大体的
Request [rɪ'kwest] – 请求
Response [rɪ'spɒns] – 响应
Headers ['hedəz] – 标题
HyperText ['haɪpətekst] – 超文本
Transfer [træns'fɝ] – 传递
Protocol ['prəʊtəkɒl] – 协议
HyperText Transfer Protocol (HTTP) – 超文本传输协议

文档和类型

Document ['dɒkjʊm(ə)nt] – 文件
Title ['taɪt(ə)l] – 标题
Type [taɪp] – 类型
DOCTYPE – 文档类型
Meta ['metə] – 变化，元数据
Body ['bɒdɪ] – 身体，主体内容
Notepad ['nəʊtpæd] – 笔记本；记事手册

页面结构和布局

Heading ['hedɪŋ] – 标题
- <h1>, <h2>, …, <h6> 标签：标题标签
Paragraph ['pærəgrɑːf] – 段落
- <p> 标签：段落标签
Line [laɪn] – 行，排
Break [breɪk] – 打破，换行
- <br> 标签：换行
- Line Break (换行)：在文本中插入换行
Horizontal [hɒrɪ'zɒnt(ə)l] – 水平的
- Horizontal Line (水平线)：常用于分隔内容
- <hr> 标签：水平线

图像和链接

Image ['ɪmɪdʒ] – 图片
- <img> 标签：用于插入图片
Anchor ['æŋkə] – 锚
- <a> 标签：超链接标签
Target ['tɑːgɪt] – 目标
- target="_blank"：在新标签页中打开链接
Background ['bækgraʊnd] – 背景
- background 属性：设置页面或元素的背景

列表相关

Unordered [ʌn'ɔːdəd] – 无序的
- <ul> 标签：无序列表
Ordered ['ɔːdəd] – 有序的
- <ol> 标签：有序列表
Item ['aɪtəm] – 项目
- <li> 标签：列表项
- Unordered Lists (无序列表)：<ul>
- Ordered Lists (有序列表)：<ol>
Definition [defɪ'nɪʃ(ə)n] – 定义
- <dl> 标签：定义列表
- <dt> 标签：定义术语
- <dd> 标签：定义描述

表单和输入

Form [fɔːm] – 表单
- <form> 标签：定义表单
Text [tekst] – 文本
- <input type="text"> 标签：文本输入框
Password ['pɑːswɜːd] – 密码
- <input type="password"> 标签：密码输入框

表格相关

Table ['teɪb(ə)l] – 表格
- <table> 标签：定义表格
Row [rəʊ] – 排，行
- <tr> 标签：表格行
Cell [sel] – 单元格
- <td> 标签：表格数据单元格
- <th> 标签：表格标题单元格
Data ['deɪtə] – 数据
- <td> 标签：数据单元格
Table Header ['teɪbəl 'hedər] – 表头
- <th> 标签：表格表头单元格

其他常用标签

Meta (<meta>)
- 用于在网页中提供元数据，如字符集、网页描述等
Textarea (<textarea>)
- 用于多行文本输入

CSS 基础概念

Cascading [kæ'skeɪdɪŋ] – 层叠
- 描述了CSS样式如何继承和覆盖的规则。
Style [staɪl] – 样式
- 用于定义网页元素的外观。
Sheets [ʃiːts] – 表单
- CSS (Cascading Style Sheets) 层叠样式表。

字体和文本样式

Size [saɪz] – 大小
- font-size：定义字体的大小。
Color ['kʌlɚ] – 颜色
- color：文本的颜色。
Content ['kɑntɛnt] – 内容
- content：定义伪元素的内容。
Description [dɪ'skrɪpʃ(ə)n] – 描述
- 用于描述文本或内容的样式。
Element ['elɪm(ə)nt] – 元素
- HTML中的单一组件，如标签。
Font [fɒnt] – 字体
- font-family：定义字体类型。
Font-size – 字体大小
- font-size：设置字体的大小。
Font-weight [weɪt] – 字体加粗
- font-weight：设置字体的粗细（如 bold）。
Weight [weɪt] – 重量
- font-weight：字体的重量，常用值如 normal 或 bold。
Bold [bəʊld] – 加粗的，黑体
- font-weight: bold：设置字体加粗。
Line-height – 行高
- line-height：控制行与行之间的间距。
Letter-spacing – 字符间距
- letter-spacing：调整字符之间的距离。
Word [wɜːd] – 单词
Word-break [breɪk] – 打破
- word-break：设置长单词是否换行，通常设置为 break-word。

布局和显示

Display [dɪ'spleɪ] – 显示
- display：设置元素的显示类型（如 block、inline）。
Block [blɒk] – 块级元素
- display: block：将元素设置为块级元素。
Inline ['ɪn,laɪn] – 行内元素
- display: inline：将元素设置为行内元素。
Inline-block – 行内块级元素
- display: inline-block：元素具有块级元素的特性，但又能与其他元素在同一行显示。
Indent [ɪn'dent] – 缩进
- text-indent：设置段落的首行缩进。
Text-indent – 首行缩进
- text-indent：设置文本段落的首行缩进量。

定位和布局控制

Position [pə'zɪʃ(ə)n] – 位置
- position：指定元素的定位方式（如 relative、absolute）。
Top [tɒp] – 顶部
- top：设置元素相对定位的上边距。
Right [raɪt] – 右边
- right：设置元素相对定位的右边距。
Bottom ['bɒtəm] – 底部
- bottom：设置元素相对定位的下边距。
Left [left] – 左边
- left：设置元素相对定位的左边距。
Z-index ['z-ɪndeks] – 堆叠顺序
- z-index：控制元素在Z轴上的堆叠顺序。较大的值会覆盖较小的值。
Absolute ['æbsəluːt] – 绝对定位
- position: absolute：将元素从文档流中移除，并根据其最近的定位祖先元素进行定位。
Relative ['relətɪv] – 相对定位
- position: relative：将元素相对于其正常位置进行定位。

边框和间距

Border – 边框
- border：定义元素的边框样式（如 solid、dotted）。
Border-color – 边框颜色
- border-color：设置元素的边框颜色。
Border-style – 边框样式
- border-style：设置边框的样式，如 solid、dashed、dotted。
Border-width – 边框宽度
- border-width：设置边框的宽度。
Margin ['mɑːdʒɪn] – 外边距
- margin：定义元素与其他元素之间的空白区域。
Padding ['pædɪŋ] – 内边距
- padding：定义元素内部与内容之间的空间。
Collapse [kə'læps] – 塌陷
- border-collapse：设置表格边框是否合并。
Outline ['aʊtlaɪn] – 轮廓
- outline：设置元素的外边框，通常用于聚焦状态下。
Outline-style – 外边线样式
- outline-style：设置轮廓线的样式。

溢出与滚动

Overflow [əʊvə'fləʊ] – 溢出
- overflow：定义溢出内容的处理方式（如 hidden、scroll）。
Resize [riː'saɪz] – 调整大小
- resize：控制元素是否可以调整大小。
Overflow: hidden – 隐藏溢出内容
- overflow: hidden：隐藏超出容器的内容。

鼠标和光标

Cursor ['kɜːsə] – 光标
- cursor：设置鼠标指针的样式。
Pointer ['pɒɪntə] – 指针
- cursor: pointer：鼠标悬停时显示为小手，通常用于链接或按钮。

浮动与清除

Float – 浮动
- float：使元素向左或向右浮动，并且脱离文档流。
Clear – 清除浮动
- clear：清除浮动元素对其他元素的影响，常用于布局调整。
*{margin: 0; padding: 0;} – 清除浏览器默认的边距
- 通过通配符选择器来清除所有元素的默认边距和内边距。

链接伪类

Link – 连接
- :link：用于设置未访问的链接的样式。
Visited – 访问过的
- :visited：用于设置已访问链接的样式。
Hover – 悬停
- :hover：用于设置鼠标悬停在元素上的样式。
Active ['æktɪv] – 激活
- :active：用于设置鼠标点击时元素的样式。

JavaScript 基本概念

Java ['dʒɑ:və] – Java语言；爪哇岛（位于印尼）
- 用于编写平台独立的应用程序。
Script [skrɪpt] – 脚本
- 编写的指令集合，通常用于自动化任务或网页交互。
JavaScript ['dʒɑ:və,skrɪpt] – 基于对象和事件驱动的客户端脚本语言
- 动态类型的编程语言，用于网页交互和操作DOM。

数据类型

Variable ['veərɪəb(ə)l] – 变量
- 用于存储数据的容器。
Console [kən'səʊl] – 控制台
- 浏览器或开发者工具中用于输出调试信息的区域。
Log [lɒg] – 记录
- console.log() 用于输出信息到控制台。
Alert [ə'lɜːt] – 警报
- alert() 用于弹出提示框。
Prompt [prɒm(p)t] – 提示
- prompt() 用于获取用户输入。
Number ['nʌmbə] – 数字
- 数据类型，表示数字值。
String [strɪŋ] – 字符串

数据类型，表示一系列字符。

Boolean ['bʊlɪən] – 布尔值

数据类型，只有两个值：true 或 false。

Null [nʌl] – 空

数据类型，表示没有任何值。

Undefined [ʌndɪ'faɪnd] – 未定义

数据类型，表示变量未赋值。

Math [mæθ] – 数学对象

用于执行数学运算的内建对象。

数学方法

Round [raʊnd] – 四舍五入

Math.round()：将数字四舍五入到最接近的整数。

Ceiling ['siːlɪŋ] – 向上取整

Math.ceil()：返回大于或等于给定数字的最小整数。

Floor [flɔː] – 向下取整

Math.floor()：返回小于或等于给定数字的最大整数。

Absolute ['æbsəluːt] – 绝对值

Math.abs()：返回数字的绝对值。

Maxima ['mæksəmə] – 最大值

Math.max()：返回给定数字中的最大值。

Minimum ['mɪnɪməm] – 最小值

Math.min()：返回给定数字中的最小值。

Random ['rændəm] – 随机

Math.random()：返回一个0到1之间的随机数。

控制流

Parse [pɑrs] – 解析

parseInt()：将字符串解析为整数。
parseFloat()：将字符串解析为浮点数。

Integer ['intidʒə] – 整数

parseInt() 用于将字符串转换为整数。

False [fɔːls] – 错误的

布尔值，表示逻辑上的假。

True [truː] – 真实的

布尔值，表示逻辑上的真。

If [ɪf] – 如果

条件语句，用于执行不同的代码块。

Else [els] – 其他

用于定义if语句条件不成立时的执行部分。

While [waɪl] – 当……的时候

while 循环，在条件为真时执行代码块。

Break [breɪk] – 中断

break 用于跳出循环或switch语句。

Continue [kən'tɪnjuː] – 继续

continue 用于跳过当前循环的剩余部分，继续下一轮循环。

Switch [swɪtʃ] – 转换

switch 用于多条件判断，替代多个if语句。

数组

Array [ə'reɪ] – 数组

存储多个值的数据结构。

Length [leŋθ] – 长度

array.length 返回数组中的元素数量。

Push [pʊʃ] – 推进

array.push()：将一个或多个元素添加到数组的末尾。

Pop [pɒp] – 删除最后一项

array.pop()：删除数组最后一个元素，并返回该元素。

Shift [ʃɪft] – 删除第一项

array.shift()：删除数组的第一个元素，并返回该元素。

Unshift [ʌn'ʃɪft] – 将元素插入到数组开头

array.unshift()：将一个或多个元素添加到数组的开头。

Reverse [rɪ'vɜːs] – 翻转

array.reverse()：颠倒数组中元素的顺序。

Sort [sɔːt] – 排序

array.sort()：按字母或数值排序数组元素。

Concat ['kɒn:kæt] – 拼接

array.concat()：将多个数组合并成一个新数组。

Slice [slaɪs] – 截取

array.slice()：从数组中提取出一部分，返回新的数组。

Splice [splæs] – 删除或替换

array.splice()：删除或替换数组中的元素。

IndexOf ['ɪndeks] – 查找索引

array.indexOf()：返回指定元素在数组中的索引。

LastIndexOf – 查找倒数第一个索引

array.lastIndexOf()：从数组的末尾查找元素并返回其索引。

Filter ['fɪltə] – 过滤

array.filter()：根据条件过滤数组中的元素。

CharAt [tʃɑː] – 获取字符

string.charAt()：返回指定位置的字符。

CharCodeAt – 获取字符的ASCII码

string.charCodeAt()：返回指定位置字符的ASCII码。

Trim [trɪm] – 去除空白

string.trim()：去除字符串两端的空白字符。

ToUpperCase ['ʌpəkeɪs] – 转换为大写

string.toUpperCase()：将字符串转换为大写。

ToLowerCase [ləʊə'keɪs] – 转换为小写

string.toLowerCase()：将字符串转换为小写。

Join [dʒɔɪn] – 连接

array.join()：将数组中的元素连接成一个字符串。

Split [splɪt] – 分割

string.split()：将字符串分割成一个数组。

JS高级中的单词 User Interface 用户界面，我们所看到的浏览器 Browser engine 浏览器引擎，用来查询和操作渲染引擎 [‘braʊzə] [‘endʒɪn] Rendering engine [‘rend(ə)rɪŋ] 用来显示请求的内容，负责解析HTML、CSS，并把解析的内容显示出来 Networking 网络，负责发送网络请求 JavaScript Interpreter(解析者) [ɪn’tɜːprɪtə] JavaScript解析器，负责执行JavaScript的代码 UI Backend [‘bæk,ɛnd] UI后端，用来绘制类似组合框和弹出窗口 Data Persistence(持久化) [pə’sɪst(ə)ns] 数据持久化，数据存储 cookie、HTML5中的sessionStorage sessionStorage 本地存储/全局对象/会话存储 Object Oriented Programming 面向对象编程
[‘ɒbdʒɪkt][‘ɔːrɪentɪd][‘prəʊɡræmɪŋ] constructor [kənˈstrʌktə(r)] 构造函数 prototype [‘prəʊtətaɪp] 原型 bind [baɪnd] 绑定，装订，结合 keycode [kiːkəʊd] 键码 json (JavaScript Object Notiation) 基于JavaScript语言的轻量级的数据交换格式 extend [ɪk’stend] 延伸；扩大；伸展 triangle [‘traɪæŋg(ə)l] 三角形 ellipse [ɪ’lɪps] 椭圆形 uniform [‘juːnɪfɔːm] 统一的；一致的；相同的 scale [skeɪl] 规模 closure [‘kləʊʒə] 闭包 factorial [fæk’tɔːrɪəl] 阶乘

JQ中的单词: add [æd] 增加; event [ɪ’vent] 事件; empty [’em(p)tɪ] 成为空的; remove [rɪ’muːv] 移动; prepend [pri:’pend] 预先考虑; prop [prɒp] 支撑；维持 toggle [‘tɒg(ə)l] 开关，切换 fadeIn [feɪdɪn] 平淡的进入 fadeOut [feɪdaʊt] 平淡的出去 fadeToggle [feɪd’tɒg(ə)1] 淡入淡出 fadeTo [feɪdto] 选元素的不透明度逐渐地改变为指定的值 slideDown [slaɪddaʊn] 向下滑动 slideUp [slaɪdʌp] 向上滑动 slideToggle [slaɪd’tɒg(ə)l] 滑动切换 target [‘tɑrɡɪt] 目标 delegate [‘delɪgət] 代表 delegateTarget [‘delɪgət] [‘tɑrɡɪt] currentTarget [‘kʌr(ə)nt] [‘tɑrɡɪt] prevAll [priv] [ɔːl] prev 上一个 all 全部 hover [‘hɒvə] 盘旋 repeat [rɪ’piːt] 重复 style [staɪl] 设计式样 strict [strɪkt] 严格的 trigger [‘trɪgə] 触发 triggerHandler [‘trɪgə] [‘hændlə] 触发事件响应方法，不触发浏览器行为 noConflict [‘kɒnflɪkt] 多库共存
spellCheck = ‘false’ [spel] 取消拼写检测（css）

H5C3中的单词 fullpage 整版，全屏 mousewheel [wiːl] 滚轮滑动事件 anchorlink [‘æŋkə] 锚链接 afterLoad [ləʊd] 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算 onLeave 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down
afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数 onSlideLeave 某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数 github 下载fullPage.js的官网 Keyframes [kay] [frems] 声明函数用 scrollingSpeed 滚动速度，单位为毫秒 navigation [nævɪ’geɪʃ(ə)n] 是否显示项目导航 loopBottom [luːp] [‘bɒtəm] 滚动到最底部后是否滚回顶部 loopTop 滚动到最顶部后是否滚底部 keyboardScrolling [‘kiːbɔːd] 是否使用键盘方向键导航 animation-fill-mode
设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态 forwards:[‘fɔːwədz]会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态 backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态 both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态*/ background: linear-gradient 线性渐变(方向，开始颜色位置，颜色2 位置，颜色3 位置…) [‘greɪdɪənt] 其中方向：to position background: radial-gradient 径向渐变 [‘reɪdɪəl] (形状大小坐标,颜色1，颜色2…) 其中坐标：at position closest-side [kləusɪst] 最近边 farthest-side [‘fɑːðɪst] 最远边 closest-corner 最近角 farthest-corner 最远角 backgroundPositionX / backgroundPositionY 背景位置设定 Skew [skjuː] 斜的，歪斜固定滚动和跟随滚动 (background-attachment：fixed/scroll)
fixed滚动窗口的滚动条图片不会随着滚动条滚动但是图片被盖住 scroll滚动窗口的滚动条图片会随着滚动条滚动 local和scroll的区别 local：滚动内容的滚动条背景图片会跟随内容一起滚动 scroll：滚动内容的滚动条背景图片不会跟随内容一起滚动 stellar [‘stelə] 视差滚动效果 ratio [‘reɪʃɪəʊ] 比率，比例 data-stellar-ratio=”” 设置元素滚动速度 data-stellar-background-ratio=”” 设置背景滚动速度 ruquestFullScreen() 开启全屏 cancelFullScreen() 退出全屏 fullscreenElement 全屏模式 FileReader(）文件读取 onabort [ə’bɔrt] 读取文件中断片时触发 onerror 读取错误时触发 onload 文件读取成功完成时触发 onloadend 读取完成时触发，无论成功还是失败 onloadstart 开始读取时触发 onprogress 读取文件过程中持续触发 readAsDataURL() 读取后会把文件存在文件读取对象的result中，且是转码的 draggable [dræg] 可拖拽的 ondrag 应用于拖拽元素，整个拖拽过程都会调用–持续 ondragstart 应用于拖拽元素，当拖拽开始时调用 ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用 ondragend 应用于拖拽元素，当拖拽结束时调用 ondragenter 应用于目标元素，当拖拽元素进入时调用 ondragover 应用于目标元素，当停留在目标元素上时调用 ondrop [drɒp] 应用于目标元素，当在目标元素上松开鼠标时调用 ondragleave 应用于目标元素，当鼠标离开目标元素时调用 dataTransfer [træns’fɜː] 数据转换 sessionStorage [‘seʃ(ə)n] [‘stɔːrɪdʒ] 会话存储 localStorage [‘ləʊk(ə)l] 本地存储 setItem(key,value) [‘aɪtəm] 存储数据，以键值对的方式存储 getItem(key) 获取数据，通过指定名称的key获取对应的value值 removeItem(key) 删除数据，通过指定名称key删除对应的值 clear() 清空所有存储的内容 manifest [‘mænɪfest] 明显的 play() 播放 pause() 暂停 [pɔːz] paused 视频播放的状态. currentTime [‘kʌr(ə)nt] 视频播放的当前进度、 duration [djʊ’reɪʃ(ə)n] 视频的总时间
oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。 ontimeupdate [ʌp’deɪt] 通过该事件来报告当前的播放进度. onended 播放完时触发—重置

移动web中的单词 PPI（Pixels Per Inch） [‘piksəls] 像素密度 viewport [‘vju:pɔ:t] 视口 layout [‘leɪaʊt] 布局，设计 layout viewport 布局视口 ideal viewport [aɪ’dɪəl] 理想视口 device-width [dɪ’vaɪs] [wɪtθ] 设备宽度 initial-scale [ɪ’nɪʃəl] [skeɪl] 初始缩放值 maximum-scale [‘mæksɪməm] 最大缩放值 minimum-scale [‘mɪnɪməm] 最小缩放值 onresize [riː’saɪz] 改变屏幕大小时
touchstart [tʌtʃ] 触摸开始 touchmove 触摸滑动时 touchend 触摸结束 targetTouches [‘tɑːgɪt] 目标触摸对象 changedTouches 最后一次变化的触摸对象 display: flex; [fleks] 伸缩布局 flex-direction: column || row [‘kɒləm] 变换主轴（纵轴||横轴） justify-content: [‘dʒʌstɪfaɪ] 水平方向偏移设置 flex-start || space-between || center || space-around || flex-end [speɪs] [bɪ’twiːn]
flex-start：弹性盒子元素将向行起始位置对齐。 flex-end：弹性盒子元素将向行结束位置对齐。 center：弹性盒子元素将向行中间位置对齐。 space-between：弹性盒子元素会平均地分布在行里。 space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。 align-items [ə’laɪn] 竖直方向偏移设置 align-self 单个元素方向偏移设置 flex-wrap: wrap; [ræp] flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行 no-wrap; flex容器为单行，该情况下flex子项可能会溢出容器 zepto 移动端的jQuery tap [tæp] 轻击 fastclick 快速点击（解决点透插件） Iscroll 实现客户端原生滚动效果的插件 swiper [‘swaipə] 轮播图用插件 bootstrap 移动端最常用框架 container [kən’teɪnə] 容器（响应式） container-fluid [‘fluːɪd] 容器（全屏式） hidden-xs（extra small） [‘hɪdn] [‘ekstrə] /hidden-sm（small）
/hidden-md（middle） [‘mɪd(ə)l] /hidden-lg（large） [lɑːdʒ] /分别在不同的屏幕尺寸下会隐藏
template [‘templeɪt] 模板 compatible [kəm’pætɪb(ə)l] 兼容的；能共处的；可并立的
carousel [,kærə’sel] 轮播 Superscripted 上标（文本） Subscripted 下标（文本）

Canvas中的单词 canvas [‘kænvəs] html中的画布标签 getContext [‘kɒntekst] 获取上下文 moveTo（）移动画笔 lineTo（）笔画停点 stroke（） [strəʊk] 描边 fill（）填充 beginPath（） [pɑːθ] 新建图层 closePath（）闭合路径 lineWidth [‘lainwidθ] 线宽 lineCap [kæp] 线帽 //butt [bʌt] 默认无帽
//square [skweə] 方帽
//round [raʊnd] 圆帽 lineJoin [dʒɒɪn] 拐角
//miter [‘maɪtə] 默认尖角 //bevel [‘bev(ə)l] 倒角 //round 圆角 setLineDash( 数组 ) [dæʃ] 设置虚线参数 lineDashOffset = 值设置虚线偏移量 strokeStyle 设置描边的颜色 fillStyle 设置填充的颜色 strokeRect（）绘制描边矩形 fillRect（）填充矩形 clearRect（）清除矩形 radian [‘reɪdɪən] 弧度 angle [‘æŋg(ə)l] 角度 strokeText（）描边的文字 fillText（）实心的文字 textAlign 水平对齐方式 textBaseline 垂直对齐方式 echarts [tʃɑːts] 图表

PHP中的单词 Hypertext Preprocessor PHP超文本预处理器 [‘haɪpətekst] [,priː’prəʊsesə] Apache [əˈpætʃɪ] 开源的网页服务器 Domain Name [də(ʊ)’meɪn] 域名 C/S架构 Client/Server [‘klaɪənt] [‘sɜːvə] 客户端/服务器 B/S架构 Browser/Server [‘braʊzə] [‘sɜːvə] 浏览器/服务器 URL（uniform resource locator）统一资源定位符 [‘juːnɪfɔːm] [rɪ’sɔːs] [ləʊ’keɪtə] hosts 本地主机文件 echo [‘ekəʊ]  输出字符串、变量及表达式  可以同时输出多个变量及字符串。不是函数，是语言结构 unset（）删除变量 var_dump（） [vɑr] [dʌmp] 输出一个或者多个变量的类型，长度及值。一般用于打印复杂变量（结合pre标记），如数组,对象等。 print_r（）输出变量的值。一般用于打印变量。对于字符串类型、整型、浮点型，打印变量本身。不能打印布尔类型的原始值。对于复杂类型的变量，如数组、对象，按照一定的格式显示。 explode() [ɪk’spləʊd] 将目标字符串使用分割符分割，返回子字符串组成的数组。 implode() [ɪm’pləʊd] 将数组的元素使用连接字符串拼接成新的字符串 database [‘deɪtəbeɪs] 数据库 charset 字符集 float [fləʊt] 单精度浮点数
decimal [‘desɪm(ə)l] 定点类型

每日一鸡汤：

Progress is not created by contented people. 进步不是由满足的人所创造.
If you don’t know what you want, you will end up getting what you don’t want. 如果你不清楚自己所追求的是什么，那么你最终可能得到的是你不想要的。
Life was like a box of chocolates, you never know what you are gonna get. 生活就像一盒巧克力，结果往往让你出乎意料。——《阿甘正传》
Simple, so charming. 简单，所以迷人。
You have a dream, you got to protect it. 如果你有梦想与愿景，就要去守护它。——《当幸福来敲门》
When one door shuts, another opens. 上帝为你关上了一扇门必然为你打开了一扇窗。
I am the master of my fate, I am the captain of my soul. 我，主宰着我的命运；我，统帅着我的灵魂。
Youth gives you light please don’t let it down. 青春赋予你光芒，请别让它失望。
Many people start a career with a dream, then get busy forgetting it. 很多人一开始为了梦想而忙，后来忙得忘记了梦想。
I might look like a tough chick and I am. But I’m also a hopeless romantic inside. 我外表看起来是如此强悍，可我内心是无可救药的浪漫。（心有猛虎，细嗅蔷薇）。
After all， Tomorrow is another day. 无论如何，明天又是新的一天。——《乱世佳人》
If you are in full bloom the wind come. 你若盛开，清风自来。
Be present，it is the only moment that matters. 留意当下，这是唯一的重要时刻。 14.Make the best of what happens. 做好当下的事。
You learn more from your failures than you do from your success. 在失败中收获的成长远比你在成功中收获的更多。 16· A genuine smile should be made out of the heart and released by the lips. 真心的微笑应该是由心而出，由唇而释。——巴尔巴拉·安·基普弗（美国考古学家）。
We live only to discover beauty. All else is a form of waiting. 活着只为发现美，其他一切只是一种等待。
No matter what happens, even if the stars fall, I will live. 无论发生什么，即使星辰陨落，我也要好好活着。 19.You want to hide a tree, then a forest is the best place to do it. 隐藏一棵树的绝佳地点，就是森林。 20.The sun used to be changing so slowly. Cars, horses and mails used to run so slowly. A lifetime is short enough to love only a person. The lock was so pretty in the past. And the key was so exquisite. When it’s locked, your thoughts would be understood. 从前的日色变得慢，车、马、邮件都慢，一生只够爱一个人，从前的锁也好看, 钥匙精美有样子，你锁了，人家就懂了。 ——木心先生《从前慢》 21.You are what you say. 你说什么样的话，你就是什么样的人。
What’s coming will come and we’ll just have to meet it when it does. 该来的总会来。来到时，就勇敢面对。
Be careful which path you travel now, Strange. Stronger men than you have lost their way. 小心你现在走的路，很奇怪。比你更坚强的人都曾迷失过方向。
Life’s like a movie, write your own ending. Keep believing, keep pretending. 人生如同电影，写自己的结局，持续相信，继续演出。

html中的单词

Network [‘netwɜːk] 网络

General [‘dʒen(ə)r(ə)l] 一般的，大体的

Request [rɪ’kwest] 请求

Response [rɪ’spɒns] 响应

Headers [‘hedəz] 标题

HyperText [‘haɪpətekst] 超文本

Transfer [træns’fɝ] 传递

Protocol [‘prəʊtəkɒl] 协议

HyperText Transfer Protocol http:超文本传输协议

document [‘dɒkjʊm(ə)nt] 文件

title [‘taɪt(ə)l] 标题

type [taɪp] 类型

doctype: 文档类型

meta [‘metə] 变化

body [‘bɒdɪ] 身体

notepad [‘nəʊtpæd] 笔记本；记事手册

heading [‘hedɪŋ] 标题

h标签

paragraph [‘pærəgrɑːf] 段落

p标签：

line [laɪn] 行，排

break [breɪk] 打破

line break 换行

Horizontal [hɒrɪ’zɒnt(ə)l] 水平的

Horizontal Line 水平线

image [‘ɪmɪdʒ] 图片

img标签

anchor [‘æŋkə] 锚

a标签超级链接

target [‘tɑːgɪt] 目标

background [‘bækgraʊnd] 背景

unordered [ʌn’ɔːdəd] 无序的

lists [lɪst] 列表

item [‘aɪtəm] 项目

list item 列表项目

li标签

unordered lists 无序列表

ordered [‘ɔːdəd] 有序的

ordered lists 有序列表

definition [defɪ’nɪʃ(ə)n] 定义

definition lists 自定义列表

Term [tɜːm] 术语

Definition Term 定义术语

description [dɪ’skrɪpʃ(ə)n] 类型

dd标签

form [fɔːm] 表单

text [tekst] 文本

password [‘pɑːswɜːd] 密码

table [‘teɪb(ə)l] 表格

row [rəʊ] 排

table row ==》tr 一行

data 数据

cell [sel] 细胞

table data cell ==> td 表格中的一个单元格

table header cell==》 th 表格中的表头

css中的单词

Cascading [kæ’skeɪdɪŋ] 层叠

style [staɪl] 式样

Sheets [ʃit] 单

css Cascading Style Sheets 层叠样式表

size [saɪz] 大小

color [‘kʌlɚ] 颜色

content [‘kɑntɛnt]内容（英 [kən’tent]满足的）

description [dɪ’skrɪpʃ(ə)n] 描述

element [‘elɪm(ə)nt] 元素

font [fɒnt] 字体

font-size 字体大小

color 字体颜色

display [dɪ’spleɪ] 显示

block [blɒk] 块

inline [‘ɪn,laɪn] 行内的

inline-block 行内块级元素

indent [ɪn’dent] 缩进

text-indent 首行缩进

weight [weɪt] 重量

font-weight 字体加粗

bold [bəʊld] 加粗的，黑体的

line-height 行高

letter 字母

letter-spacing 字符间距

word [wɜːd] 单词

break [breɪk] 打破

word-break 让长句英文自动换行

white 白色的

type [taɪp] 类型

link 连接

background-image 背景图片

repeat 重复

background-repeat 背景是否平铺

position [pə’zɪʃ(ə)n] 位置

link

visited 访问过的

hover 盘旋，悬停

active [‘æktɪv] 激活

padding [‘pædɪŋ] 填料（填充物）

top [tɒp] 顶部

right [raɪt] 右边

bottom [‘bɒtəm] 底部

left [left] 左边

border 边框

border-color 边框颜色

border-style 边框样式

border-width 边框宽度

margin [‘mɑːdʒɪn] 边缘外边距

margin：0 auto 让盒子居中显示

collapse [kə’læps] 倒塌

border-collapse 合并相邻边框

outline [‘aʊtlaɪn] 轮廓

outline-style 外边线样式

resize [riː’saɪz] 调整大小

resize:none; 不允许拖动文本域

overflow [əʊvə’fləʊ] 溢出

overflow:hidden 溢出的部分隐藏

float 浮动

*{margin:0; padding:0;} 清除浏览器默认的边距

Cursor [‘kɜːsə] 光标

pointer [‘pɒɪntə] 指针

Cursor:pointer 让鼠标变成小手

position [pə’zɪʃ(ə)n] 位置

absolute [‘æbsəluːt] 绝对的

relative [‘relətɪv] 相对的

index [‘ɪndeks] 指数

z-index: 1 叠放次序

———————————————————————-

js中的单词

java [‘dʒɑ:və] (用于因特网的)Java 语言；爪哇岛（位于印尼）

script [skrɪpt] 脚本

javascript [‘dʒɑ:və,skrɪpt] 基于对象和事件驱动的客户端脚本语言

variable [‘veərɪəb(ə)l] 变量

console [kən’səʊl] 控制台

log [lɒg] 记录

alert [ə’lɜːt] 警报

prompt [prɒm(p)t] 提示

number [‘nʌmbə] 数字

string [strɪŋ] 线

boolean [‘bʊlɪən] 布尔

null [nʌl] 空

undefined [ʌndɪ’faɪnd] 未定义

Math [mæθ] 数学

round [raʊnd] 绕行

Math.round 四舍五入

在JS中Math首字母大写,Math是JS的一个自带对象，可以试着用[]的形式调用一下Math中的一些常见方法，也是可行的

ceiling [‘siːlɪŋ] 天花板

Math.ceil(); 向上取整

floor [flɔː] 地板

Math.floor(); 向下取整

absolute [‘æbsəluːt] 绝对的

Math.abs（）;取绝对值

maxima [‘mæksəmə] 最大数

Math.max(); 取最大值

minimum [‘mɪnɪməm] 最小值

Math.min (); 最小值

random [‘rændəm] 随机的

Math.random(); 得到一个小于0小于1的随机数

parse [pɑrs] 解析

parseInt（）解析成整数

integer [‘intidʒə] 整数

parseFloat () 解析成浮点数

false [fɔːls] 错误的

true [truː] 真实的

if [ɪf] 如果 else [els] 其他

while [waɪl] 当……的时候

break [breɪk] 中断

continue [kən’tɪnjuː] 继续

switch [swɪtʃ] 转换

debug [diː’bʌg] 调试

case [keɪs] 情况

array [ə’reɪ] 数组

length [leŋθ] 长度

function [‘fʌŋ(k)ʃ(ə)n] 函数

return [rɪ’tɜːn] 返回值

arguments [‘ɑːgjʊm(ə)nts] 伪数组

object [‘ɒbdʒɪkt] 对象

delete [dɪ’liːt] 删除

Instanceof [‘ɪnst(ə)ns] 判断数组

Object.prototype.toString.call() 精确判断数据类型

[‘prəʊtətaɪp]

constructor [kənˈstrʌktə(r)] 构造函数

push [pʊʃ] 推进

pop [pɒp] 删除最后一项，返回删除项

shift [ʃɪft] 删除第一项，返回删除项

unshift [ʌn’ʃɪft] 将这些元素插入到一个数组的开始部分

reverse [rɪ’vɜːs] 翻转

sort [sɔːt] 将…排序

concat [‘con:cat] 把参数拼接到当前数组

slice() [slaɪs] 从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始

splice() [splas] 删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)

indexOf() [ɪndeks] 检索此字符出现的索引，如果没有，则返回-1

lastIndexOf() 从后往前检索此字符出现的索引，如果没有，则返回-1

filter() [‘fɪltə] 过滤

charAt() [tʃɑː] 获取指定位置处字符

charCodeAt() 获取指定位置处字符的ASCII码

trim() [trɪm] 去除字符串两侧的空白

to(Locale)UpperCase() 转换大写

[ləʊ’kɑːl] [‘ʌpə’keɪs]

to(Locale)LowerCase() 转换小写

[,ləʊə’keɪs]

join() [dʒɒɪn] 分隔

split() [splɪt] 分割

API中的单词

API（Application Programming Interface）

[æplɪ’keɪʃ(ə)n] [‘prəʊɡræmɪŋ] [‘ɪntəfeɪs] 应用程序编程接口

document [‘dɒkjʊm(ə)nt] 文件，文档

Element [‘elɪm(ə)nt] 元素

getElementById() 通过Id获取元素

getElementsByTagName() 通过标签名获取元素

getElementsByName() 通过Name获取元素

getElementsByClassName() 通过ClassName获取元素

querySelector() [‘kwɪərɪ] [sɪ’lektə] 通过选择器查询第一个元素

querySelectorAll() 通过选择器查询所有元素

获取标签中的内容的三种方式

innerHTML [ɪnə] 内部HTML

innerText [ɪnə] [tekst] 内部文本

textContent [tekst] [kən’tent] 文本内容

getAttribute() [ə’trɪbjuːt] 获取标签行内属性

setAttribute() [ə’trɪbjuːt] 设置标签行内属性

removeAttribute() [ə’trɪbjuːt] 移除标签行内属性

document.write() [‘dɒkjʊm(ə)nt] [raɪt] 文档打印输出

document.createElement() [‘dɒkjʊm(ə)nt] [kriː’eɪt] 文档创建元素

appendChild() [ə’pend] [tʃaɪld] 附加子元素

insertBefore() [ɪn’sɜːt][bɪ’fɔː] 在之前插入

removeChild() [rɪ’muːv][tʃaɪld] 移除子元素

replaceChild() [rɪ’pleɪs][tʃaɪld] 置换子元素

parentNode [‘peər(ə)nt][nəud] 父节点

childNodes [tʃaɪld][nəuds] 子节点

children [‘tʃɪldrən] 子元素

nextSibling/previousSibling 之后的节点/之前的节点

[‘sɪblɪŋ] [‘priːvɪəs]

nextElementSibling/previousElementSibling 之后的元素/之前的元素

firstChild/lastChild 首子节点/末子节点

[fɜːst] [tʃaɪld] [lɑːst][tʃaɪld]

Contented [kən’tentɪd] 满足的；心安的

onmouseenter（不会冒泡）= onmouseover（会冒泡）鼠标移入

onmouseleave（不会冒泡）= onmouseout（会冒泡）鼠标移出

onmouseup 鼠标按键放开时触发

onmousedown 鼠标按键按下触发

onmousemove 鼠标移动触发

onkeyup 键盘按键按下触发

onkeydown 键盘按键抬起触发

onclick [‘ɒnklɪk] 鼠标单击事件

onfocus [ɒn’fəʊkəs] 获取焦点

onblur [‘ɒn blɜː] 失去焦点

classList.add（）给标签添加的样式属性

classList.remove（）移除标签的样式属性

classList.toggle（） [‘tɒg(ə)l] 开关（无则添加，有则删除）

hasChildNodes() 判断dom是否有子节点

addEventListener() 事件监听(Ie9+)

attachEvent() [ə’tætʃ] 事件监听(老版本Ie）

removeEventListener() 移除事件监听(Ie9+)

detachEvent() [dɪ’tætʃ] 移除事件监听(老版本Ie)

e.clientX [‘klaɪənt] 鼠标相对于可视区域的横向位置

e.clientY 鼠标相对于可视区域的纵向位置

e.pageX 鼠标相对于当前页面的横向位置

e.pageY 鼠标相对于当前页面的纵向位置

cloneNode [kləʊn] 克隆节点

return false 取消默认行为

preventDefault() 取消默认行为（DOM标准方法）

[prɪ’vent] [dɪ’fɔːlt]

Propagation [,prɒpə’ɡeɪʃən] 传播

stopPropagation() 停止事件传播取消冒泡

cancelBubble 取消冒泡（非标准的方式老版本Ie）

[‘kæns(ə)l] [‘bʌb(ə)l]

setTimeout() 设置单次定时器

clearTimeout() 清除单次定时器

setInterval() [‘ɪntəv(ə)l] 设置定时器

clearInterval() 清除定时器

offset [‘ɒfset] 偏移

scroll [skrəʊl] 卷曲

confirm [kən’fɜːm] 确认取值为true or false

onload [‘ɔnlod] 加载

onunload [ɔn’ʌnlod] 页面加载完成后

location [lə(ʊ)’keɪʃ(ə)n] 位置

location.reload() true 强制从服务器获取页面 false 如果浏览器有缓存的话，直接从缓存获取页面

scheme [skiːm] 通信协议

host [həʊst] 主机

port [pɔːt] 端口

path [pɑːθ] 路径

query [‘kwɪərɪ] 查询

fragment [‘frægm(ə)nt] 信息片断

history [‘hɪst(ə)rɪ] 历史

navigator [nævɪgeɪtə] 通过userAgent可以判断用户浏览器的类型

cursor [‘kɜːsə] 光标

cursor: move 被悬浮的物体可被移动

cursor: pointer [‘pɒɪntə] 让鼠标变成小手

opacity [ə(ʊ)’pæsɪtɪ] 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）

JS高级中的单词

User Interface 用户界面，我们所看到的浏览器

Browser engine 浏览器引擎，用来查询和操作渲染引擎

[‘braʊzə] [‘endʒɪn]

Rendering engine [‘rend(ə)rɪŋ] 用来显示请求的内容，负责解析HTML、CSS，并把解析的内容显示出来

Networking 网络，负责发送网络请求

JavaScript Interpreter(解析者) [ɪn’tɜːprɪtə] JavaScript解析器，负责执行JavaScript的代码

UI Backend [‘bæk,ɛnd] UI后端，用来绘制类似组合框和弹出窗口

Data Persistence(持久化) [pə’sɪst(ə)ns] 数据持久化，数据存储 cookie、HTML5中的sessionStorage

sessionStorage 本地存储/全局对象/会话存储

Object Oriented Programming 面向对象编程

[‘ɒbdʒɪkt][‘ɔːrɪentɪd][‘prəʊɡræmɪŋ]

constructor [kənˈstrʌktə(r)] 构造函数

prototype [‘prəʊtətaɪp] 原型

bind [baɪnd] 绑定，装订，结合

keycode [kiːkəʊd] 键码

json (JavaScript Object Notiation)

基于JavaScript语言的轻量级的数据交换格式

extend [ɪk’stend] 延伸；扩大；伸展

triangle [‘traɪæŋg(ə)l] 三角形

ellipse [ɪ’lɪps] 椭圆形

uniform [‘juːnɪfɔːm] 统一的；一致的；相同的

scale [skeɪl] 规模

closure [‘kləʊʒə] 闭包

factorial [fæk’tɔːrɪəl] 阶乘

JQ中的单词

:add [æd] 增加

:event [ɪ’vent] 事件

:empty [’em(p)tɪ] 成为空的

:remove [rɪ’muːv] 移动

:prepend [pri:’pend] 预先考虑

:prop [prɒp] 支撑；维持

toggle [‘tɒg(ə)l] 开关，切换

fadeIn [feɪdɪn] 平淡的进入

fadeOut [feɪdaʊt] 平淡的出去

fadeToggle [feɪd’tɒg(ə)1] 淡入淡出

fadeTo [feɪdto] 选元素的不透明度逐渐地改变为指定的值

slideDown [slaɪddaʊn] 向下滑动

slideUp [slaɪdʌp] 向上滑动

slideToggle [slaɪd’tɒg(ə)l] 滑动切换

target [‘tɑrɡɪt] 目标

delegate [‘delɪgət] 代表

delegateTarget [‘delɪgət] [‘tɑrɡɪt]

currentTarget [‘kʌr(ə)nt] [‘tɑrɡɪt]

prevAll [priv] [ɔːl]

prev 上一个 all 全部

hover [‘hɒvə] 盘旋

repeat [rɪ’piːt] 重复

style [staɪl] 设计式样

strict [strɪkt] 严格的

trigger [‘trɪgə] 触发

triggerHandler [‘trɪgə] [‘hændlə] 触发事件响应方法，不触发浏览器行为

noConflict [‘kɒnflɪkt] 多库共存

spellCheck = ‘false’ [spel] 取消拼写检测（css）

H5C3中的单词

fullpage 整版，全屏

mousewheel [wiːl] 滚轮滑动事件

anchorlink [‘æŋkə] 锚链接

afterLoad [ləʊd] 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算

onLeave 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down

afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数

afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数

onSlideLeave 某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数

github 下载fullPage.js的官网

Keyframes [kay] [frems] 声明函数用

scrollingSpeed 滚动速度，单位为毫秒

navigation [nævɪ’geɪʃ(ə)n] 是否显示项目导航

loopBottom [luːp] [‘bɒtəm] 滚动到最底部后是否滚回顶部

loopTop 滚动到最顶部后是否滚底部

keyboardScrolling [‘kiːbɔːd] 是否使用键盘方向键导航

animation-fill-mode

设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态

forwards:[‘fɔːwədz]会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态

backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态

both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态*/

background: linear-gradient 线性渐变(方向，开始颜色位置，颜色2 位置，颜色3 位置…) [‘greɪdɪənt]

其中方向：to position

background: radial-gradient 径向渐变 [‘reɪdɪəl] (形状大小坐标,颜色1，颜色2…)

其中坐标：at position

closest-side [kləusɪst] 最近边

farthest-side [‘fɑːðɪst] 最远边

closest-corner 最近角

farthest-corner 最远角

backgroundPositionX / backgroundPositionY 背景位置设定

Skew [skjuː] 斜的，歪斜

固定滚动和跟随滚动 (background-attachment：fixed/scroll)

fixed滚动窗口的滚动条图片不会随着滚动条滚动但是图片被盖住

scroll滚动窗口的滚动条图片会随着滚动条滚动

local和scroll的区别

local：滚动内容的滚动条背景图片会跟随内容一起滚动

scroll：滚动内容的滚动条背景图片不会跟随内容一起滚动

stellar [‘stelə] 视差滚动效果

ratio [‘reɪʃɪəʊ] 比率，比例

data-stellar-ratio=”” 设置元素滚动速度

data-stellar-background-ratio=”” 设置背景滚动速度

ruquestFullScreen() 开启全屏

cancelFullScreen() 退出全屏

fullscreenElement 全屏模式

FileReader(）文件读取

onabort [ə’bɔrt] 读取文件中断片时触发

onerror 读取错误时触发

onload 文件读取成功完成时触发

onloadend 读取完成时触发，无论成功还是失败

onloadstart 开始读取时触发

onprogress 读取文件过程中持续触发

readAsDataURL() 读取后会把文件存在文件读取对象的result中，且是转码的

draggable [dræg] 可拖拽的

ondrag 应用于拖拽元素，整个拖拽过程都会调用–持续

ondragstart 应用于拖拽元素，当拖拽开始时调用

ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用

ondragend 应用于拖拽元素，当拖拽结束时调用

ondragenter 应用于目标元素，当拖拽元素进入时调用

ondragover 应用于目标元素，当停留在目标元素上时调用

ondrop [drɒp] 应用于目标元素，当在目标元素上松开鼠标时调用

ondragleave 应用于目标元素，当鼠标离开目标元素时调用

dataTransfer [træns’fɜː] 数据转换

sessionStorage [‘seʃ(ə)n] [‘stɔːrɪdʒ] 会话存储

localStorage [‘ləʊk(ə)l] 本地存储

setItem(key,value) [‘aɪtəm] 存储数据，以键值对的方式存储

getItem(key) 获取数据，通过指定名称的key获取对应的value值

removeItem(key) 删除数据，通过指定名称key删除对应的值

clear() 清空所有存储的内容

manifest [‘mænɪfest] 明显的

play() 播放

pause() 暂停 [pɔːz]

paused 视频播放的状态.

currentTime [‘kʌr(ə)nt] 视频播放的当前进度、

duration [djʊ’reɪʃ(ə)n] 视频的总时间

oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。

ontimeupdate [ʌp’deɪt] 通过该事件来报告当前的播放进度.

onended 播放完时触发—重置

移动web中的单词

PPI（Pixels Per Inch） [‘piksəls] 像素密度

viewport [‘vju:pɔ:t] 视口

layout [‘leɪaʊt] 布局，设计

layout viewport 布局视口

ideal viewport [aɪ’dɪəl] 理想视口

device-width [dɪ’vaɪs] [wɪtθ] 设备宽度

initial-scale [ɪ’nɪʃəl] [skeɪl] 初始缩放值

maximum-scale [‘mæksɪməm] 最大缩放值

minimum-scale [‘mɪnɪməm] 最小缩放值

onresize [riː’saɪz] 改变屏幕大小时

touchstart [tʌtʃ] 触摸开始

touchmove 触摸滑动时

touchend 触摸结束

targetTouches [‘tɑːgɪt] 目标触摸对象

changedTouches 最后一次变化的触摸对象

display: flex; [fleks] 伸缩布局

flex-direction: column || row [‘kɒləm] 变换主轴（纵轴||横轴）

justify-content: [‘dʒʌstɪfaɪ] 水平方向偏移设置

flex-start || space-between || center || space-around || flex-end

[speɪs] [bɪ’twiːn]

flex-start：弹性盒子元素将向行起始位置对齐。

flex-end：弹性盒子元素将向行结束位置对齐。

center：弹性盒子元素将向行中间位置对齐。

space-between：弹性盒子元素会平均地分布在行里。

space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元

素之间间距大小的一半。

align-items [ə’laɪn] 竖直方向偏移设置

align-self 单个元素方向偏移设置

flex-wrap: wrap; [ræp] flex容器为多行。该情况下flex子项溢出的部分

会被放置到新行，子项内部会发生断行

no-wrap; flex容器为单行，该情况下flex子项可能会溢出容器

zepto 移动端的jQuery

tap [tæp] 轻击

fastclick 快速点击（解决点透插件）

Iscroll 实现客户端原生滚动效果的插件

swiper [‘swaipə] 轮播图用插件

bootstrap 移动端最常用框架

container [kən’teɪnə] 容器（响应式）

container-fluid [‘fluːɪd] 容器（全屏式）

hidden-xs（extra small） [‘hɪdn] [‘ekstrə]

/hidden-sm（small）

/hidden-md（middle） [‘mɪd(ə)l]

/hidden-lg（large） [lɑːdʒ]

/分别在不同的屏幕尺寸下会隐藏

template [‘templeɪt] 模板

compatible [kəm’pætɪb(ə)l] 兼容的；能共处的；可并立的

carousel [,kærə’sel] 轮播

Superscripted 上标（文本）

Subscripted 下标（文本）

Canvas中的单词

canvas [‘kænvəs] html中的画布标签

getContext [‘kɒntekst] 获取上下文

moveTo（）移动画笔

lineTo（）笔画停点

stroke（） [strəʊk] 描边

fill（）填充

beginPath（） [pɑːθ] 新建图层

closePath（）闭合路径

lineWidth [‘lainwidθ] 线宽

lineCap [kæp] 线帽

//butt [bʌt] 默认无帽

//square [skweə] 方帽

//round [raʊnd] 圆帽

lineJoin [dʒɒɪn] 拐角

//miter [‘maɪtə] 默认尖角

//bevel [‘bev(ə)l] 倒角

//round 圆角

setLineDash( 数组 ) [dæʃ] 设置虚线参数

lineDashOffset = 值设置虚线偏移量

strokeStyle 设置描边的颜色

fillStyle 设置填充的颜色

strokeRect（）绘制描边矩形

fillRect（）填充矩形

clearRect（）清除矩形

radian [‘reɪdɪən] 弧度

angle [‘æŋg(ə)l] 角度

strokeText（）描边的文字

fillText（）实心的文字

textAlign 水平对齐方式

textBaseline 垂直对齐方式

echarts [tʃɑːts] 图表

PHP中的单词

Hypertext Preprocessor PHP超文本预处理器

[‘haɪpətekst] [,priː’prəʊsesə]

Apache [əˈpætʃɪ] 开源的网页服务器

Domain Name [də(ʊ)’meɪn] 域名

C/S架构 Client/Server [‘klaɪənt] [‘sɜːvə] 客户端/服务器

B/S架构 Browser/Server [‘braʊzə] [‘sɜːvə] 浏览器/服务器

URL（uniform resource locator）统一资源定位符

[‘juːnɪfɔːm] [rɪ’sɔːs] [ləʊ’keɪtə]

hosts 本地主机文件

echo [‘ekəʊ] l 输出字符串、变量及表达式

l 可以同时输出多个变量及字符串。

不是函数，是语言结构

unset（）删除变量

var_dump（） [vɑr] [dʌmp] 输出一个或者多个变量的类型，长度及

值。一般用于打印复杂变量（结合pre标记），如数组,对象等。

print_r（）输出变量的值。一般用于打印变量。

对于字符串类型、整型、浮点型，打印变量本身。

不能打印布尔类型的原始值。对于复杂类型的变量，如数组、对

象，按照一定的格式显示。

explode() [ɪk’spləʊd] 将目标字符串使用分割符分割，返回子字符串组成的数组。

implode() [ɪm’pləʊd] 将数组的元素使用连接字符串拼接成新的字符串

database [‘deɪtəbeɪs] 数据库

charset 字符集

float [fləʊt] 单精度浮点数

decimal [‘desɪm(ə)l] 定点类型

每日一鸡汤：

Progress is not created by contented people.

进步不是由满足的人所创造.

If you don’t know what you want, you will end up getting what you don’t want.

如果你不清楚自己所追求的是什么，那么你最终可能得到的是你不想要的。

Life was like a box of chocolates, you never know what you are gonna get.

生活就像一盒巧克力，结果往往让你出乎意料。——《阿甘正传》

Simple, so charming.

简单，所以迷人。

You have a dream, you got to protect it.

如果你有梦想与愿景，就要去守护它。——《当幸福来敲门》

When one door shuts,another opens.

上帝为你关上了一扇门必然为你打开了一扇窗。

I am the master of my fate,I am the captainof my soul.

我，主宰着我的命运；我，统帅着我的灵魂。

Youth gives you light please don’t let it down.

青春赋予你光芒，请别让它失望。

Many people start a career with a dream, then get busy forgetting it.

很多人一开始为了梦想而忙，后来忙得忘记了梦想。

I might look like a tough chick and I am. But I’m also a hopeless romantic inside.

我外表看起来是如此强悍，可我内心是无可救药的浪漫。（心有猛虎，细嗅蔷薇）。

After all， Tomorrow is another day.

无论如何，明天又是新的一天。——《乱世佳人》

If you are in full bloom the wind come.

你若盛开，清风自来。

Be present，it is the only moment that matters.

留意当下，这是唯一的重要时刻。

Make the best of what happens.
做好当下的事。
You learn more from your failures than you do from your success.

在失败中收获的成长远比你在成功中收获的更多。

16· A genuine smile should be made out of the heart and released by the lips.

真心的微笑应该是由心而出，由唇而释。——巴尔巴拉·安·基普弗（美国考古学家）。

We live only to discover beauty. All else is a form of waiting.

活着只为发现美，其他一切只是一种等待。

No matter what happens, even if the stars fall, I will live.

无论发生什么，即使星辰陨落，我也要好好活着。

You want to hide a tree, then a forest is the best place to do it.

隐藏一棵树的绝佳地点，就是森林。

The sun used to be changing so slowly.Cars, horses and mails used to run so slowly. A lifetime is short enough to love only a person. The lock was so pretty in the past. And the key was so exquisite. When it’s locked, your thoughts would be understood.

从前的日色变得慢，车、马、邮件都慢，一生只够爱一个人，从前的锁也好看,

钥匙精美有样子，你锁了，人家就懂了。 ——木心先生《从前慢》

You are what you say.

你说什么样的话，你就是什么样的人。

What’s coming will come and we’ll just have to meet it when it does.

该来的总会来。来到时，就勇敢面对。

Be careful which path you travel now, Strange. Stronger men than you have lost their way.

小心你现在走的路，很奇怪。比你更坚强的人都曾迷失过方向。

Life’s like a movie, write your own ending. Keep believing, keep pretending.

人生如同电影，写自己的结局，持续相信，继续演出。

HTML 文档结构标签