整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

html5常用基本标签

、Html的基本结构：

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8">

<title></title>

</head>

<body>

网页的文本、图片等信息；

</body>

</html>

二、Head部分：用于表示网页的元数据即描述网页的基本信息

其常用标签及属性有：

1、title标签：浏览器标签页显示的标题

2、meta标签：其常用属性

①charset:设置文档的字符集编码格式。HTML5中设置字符集编码：<meta charset="UTF-8">

常见的字符集编码格式：

a.GB-2312:国标码，简体中文

b.GBK：扩展的国标码

c.UTF-8：万国码 Unicode 常用

②http-equiv属性:将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值：Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）

③name属性：使用方法同“http-equiv”。将我们的信息写给搜索引擎看

常用且需要掌握的属性值：author（作者） keywords（网页关键字） description（网页描述） 这两个属性设置，网页必不可少。

3、link标签：链接网页图标（title前的小logo），其常用属性有：

①rel属性：声明链接文件的类型，此处选icon

②type属性：可以省略

③href属性：表示图片的路径地址

三、body部分：网页的文本、图片等信息

标签的分类：

块级标签：显示为块，前后隔一行（自动换行）

行级标签：按行从左往右逐一显示。

1、 常见的块级标签：

①<h1></h1>......<h6><h6>：标题标签，自动加粗，h1最大，h6最小。

②<hr/>：水平线标签，添加一条水平线。

③<p></p>:段落标签，

④<br/>:换行标签，

⑤<blockquote/></blockquote>:引用标签，cite属性，表明引用的来源，一般引用网址

浏览器默认首行缩进。

⑥<pre></pre>:预格式标签，用于重载代码。浏览器默认显示样式：1、显示为等宽字体。 2、代码中的换行、

空格等元素能在浏览器中显示。

【补充】html 文件中空格的表示：

2、 基于布局的块级标签

列表：无序列表、有序列表、定义列表

①有序列表：<ol></ol> 列表项：<li></li>

②无序列表：<ul></ul> 列表项：<li></li>

③定义列表（实现图文混排）:<dl></dl>

列表标题：<dt>一般只有一项</dt>

列表描述项：<dd>可以有很多项</dd>

3、组合标签：<figure></figure>用于显示图片及图片标题

他有两个子标签：<img />图片

<figcaption></figcaption>图片的标题

例如：<figure>

<img src="img/EZ.jpg" height="20%" width="20%" alt="探险家"/>

<figcaption>探险家 伊泽瑞尔</figcaption>

</figure>

4、分区标签：<div></div>

5、常见的行级标签

<1>span（文本）:无实际意义，用于包裹某部分文字，修改特定样式，例如：

这是<span style="color: red;font-size: 36px;">span</span>中的文字

img（图片）：其常用属性：①src:表示引用图片的地址。

路径地址的写法：相对路径：以当前文件为最准，去寻找图片地址

a、与文件处于同一层的图片，直接写图片名

b、图片在当前文件下一层：文件名/图片名

c、图片在当前文件上一层：../图片名

绝对路径:file:///盘符：/文件夹/图片名，但 是严禁使用

图片网址：网络上的图片链接，但是一般不用

②height和width：图片的高度和宽度。可以用CSS样式代替

③title：图片标。当鼠标指上之后显示的文字

④alt:当图片无法显示的时候，显示的文字

<2>em（倾斜强调）

<3>strong（加粗强调）

<4>b（加粗）

<5>i（倾斜）

Strong、em、b、i的区别

1、Strong、em都表示强调，Strong为粗体，em为斜体，而Strong的强调 程度逗比em高

2、Strong和b都能加粗，em和i都能倾斜，，但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。

<6>q（短引用）

<7>small/big（缩小/放大字体）：small和big分别是缩小和扩大字体，都可以多层嵌套直至上限或下限

<8>a（超链接）

1、href:超链接的路径，可以是网络链接，也可以是本地文件。

2、target:跳转页面打开的位置。_self自身页面，_blank新页面。

3、title:鼠标指在超链接上显示的名称。

4、Rel（被链接是当前的前/后一篇）:指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息：

rel="prev"被链接文档是当前文档的前一篇文 档，

rel="next"被链接文档是当前文档的后一篇文档,

rel="icon"被链接文档是当前文档的图标

rel="stylesheet"被链接文档是当前文档的样式表

5、Rev（当前是被链接的前/后一篇）

锚链接：

①本页面锚链接:a、设置锚点：<a name="top"></a>

b、跳转锚点：#name名

①页面间锚链接:a、在即将跳转页面的指定位置设置锚点

b、跳转锚点：页面地址.html#name名

<a href="02_常见的块级标签.html#Hbuilder">页面间锚链接</a><br/>

功能性链接： mailto用于给指定邮箱发送邮件

file：///e:/aaa.png打开本地文件

tencent://message/?uin=1315618220 给指定QQ发送息

<9>s标签，有误文本：删除线

<s>这是S标签中的文字</s><br />

<10>cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用

<cite>这是cite中的文本</cite><br />

<11>code:计算机代码，不保留代码格式

<pre>

<code></code>

</pre>

<12>bdo:表示文本方向，属性：dir="ltr"表示从左往右，dir="rtl"表示从右往左

<bdo dir="rtl">1234567</bdo><br />

kbd:表示需要用户用键盘输入的内容，浏览器显示为等宽字体

请输入“<kbd>Esc</kbd>”推迟系统<br />

<13>sup:上标文本，sub:下标文本

x<sub>6</sub><br />

© © 空格

© © 空格 <br />

<14>u:下划线

<u>这是下划线</u><br />

mark:高亮或标记文本，浏览器显示为黄色背景

<mark>mark</mark><br />

6、表格：表格的行：tr，每行中的列：td，表格的表头：th

表格的常用属性：

表格行列属性：[tr和td的属性]：

1、width/heigh：单元格的宽高

2、bgcolor:单元格的背景颜色

3、align:left center right 单元格中的文字水平对齐方式

4、valign:top center bottom 单元格中的文字垂直对其方式

5、nowrap:单元格中文字不换行

【注意】当表格属性与行列属性冲突时，行列属性优先级高

7、表单（form）

【两个重要属性】：action-表单提交的服务器地址 method-表单提交数据的方法（get/post）

get/post区别:

1>get使用URL传参：http://服务器地址?name1=value1&name2=value2

（?表示传递参数，?后面采用name=value的形式传递，多个参数之间用&连接） ① URL传参不安全，所有信息可在地址栏看到，并且别人可以很容易url注入，来 攻击自己的数据库。

② URL传参数据量有限，只能传递少量数据。

2>post:使用http请求传递数据。URL地址看不到数据信息，安全且传递信息量没有限制

综上所述：大部分使用post传参，但是get传参比Post快

【input标签及属性】

①type：input输入框的类型，可选值有：

②name：input输入框的别名，必填，因为传参的时候采用name=value的形式传递。

③value：input输入框的默认值

④placeholder:提示内容，当输入框有value时，提示内容消失。

【input特殊属性值】

① checked="checked"默认选中

② disabled="disabled"设置控制不能使用，按钮上不能点击，输入框上不能修改，而且如果

输入框时disabled，则输入框信息不传递到后台

③hidden=“hidden”隐藏。等同于<input type="hidden" name="username"value="1234" />

等同于配合disabled或根据其他需要，使用隐藏域传递信息.

【input-type属性详解】

①text：文本输入框

②password：密码输入框，内容不对外显示

③radio：单选按钮

checkbox:复选按钮

a、单选按钮，name和value属性需同时存在，提交时，提交的是value中的属性值

例如：<input type="radio" name="sex" value="男"/>提交显示为"sex=男"

b、radio凭借name属性区分是否为同一组，name相同为同组，且只能选择一个

c、checked="checked"默认选中，（radio只可以选一个，checkbox可以选多个）

④submit：提交按钮，提交表单数据

⑤reset：重置按钮，重置为默认状态

⑥file：文件上传按钮

⑦image：图片提交按钮，功能同submit，可以提交数据

⑧button：普通按钮，没什么软用

⑨其他常用属性值：见下图

【select标签】下拉选择标签

写法：

<select name="=city">

<option>青岛</option>

<option>烟台</option>

<option>北京</option>

<option>纽约</option>

<option>罗马</option>

</select>

常用属性

①name属性：写在select里，所有选项只有一个name

②multiple属性：multiple="multiple"设置select为多选，一般不用

③option常用属性：value=""属性，当option没有value属性时，往后台传递的是<option></option>中间的文字，

当有value属性时，传递的是value的属性值。

title=""属性,鼠标之上后现实的文字

select="select"默认属性值

④optgroup属性： 用于option属性分组，用lable属性表示分组名。

<optgroup label="中国">

<option>青岛</option>

<option>烟台</option>

<option>北京</option>

</optgroup>

【textarea】:文本域，其常用属性 ：

①设置宽度高度 style="width: 150px;height: 200px;

②readonly="readonly"：只读模式，不允许修改编辑

③style="resize: none;"设置为宽度高度不允许修改

④style="overflow:;"设置文字超出区域时，如何处置，常用属性值有：

hidden 超出区域的文字，隐藏无法显示

scroll 无论文字多少，均显示滚动

auto 自动，根据文字多少自动决定是否会显示为滚动条

【fieldset 、legend】表单的边框与标题

<fieldset> //边框

<legend> //标题

</legend>

</fieldset>

如果想让标题嵌入到边框中，需将标题标签写到边框标签里面

一个表单可以有多组标题加边框组合

【h5智能表单】

1、H5新增input的form属性，用于指定特form表单的id，实现input无需放在form标签之中，即可通过表单进行提交

<form id=foo>

……

</form>

<input type="text" name="" form="foo">

2、 input元素的新增属性：

Autocomplete：自动完成功能，记录用户之前输入的内容，并在用户下次输入时提示用户输入

》》》属性值：on/off

》》》可以再form表单使用，对整个表单的所有控件进行自动完成的开关也可以在input上使用，

对特定输入框进行修改

》》》绝大部分浏览器默认开启

Autofocus：自动获得焦点，autofocus="autofocus"只能获得一个焦点

Form：所属表单，通过id确认属于哪个表单

Required：必填,required="required",设置必填，否则停止提交

Pattern：使用正则表达式验证input的模式

Placeholder：提示，当有value时取消提示。

HTML5 是最近十年来 Web 开发标准最巨大的飞跃，目前苹果、谷歌、微软世界三大移动互联网巨头都支持了 HTML5，HTML5 的发展给移动互联网应用带来了全新的变化。HTML5 的出现，给移动互联网带来了新的变革，为移动互联网中富媒体的应用提供了新的思路，并具有广阔的应用前景。所以HTML5适应了目前的移动互联网应用潮流。

Html5课程内容主要包括以下八个方面：Web页面制作基础，UI网站设计，编程基础技术，后端开发技术，移动互联网应用，特效开发高级实战，企业级应用开发以及网页游戏开发。

兄弟连教育根据公司和行业发展的实际需要设计教学内容，现行的课程体系包括四大阶段和特级课：“基础网页布局与响应式布局”、“前端核心技术：Javascript”、“HTML5新特性”、”MEAN(MongoDB+Express+Angular.js+Node.js)全栈框架开发”，”特级课：微信开发”。

第一阶段：基础网页布局与响应式布局

主要内容：

1、HTML CSS

2、PS操作，网页切图

3、基本网页布局

4、HTML5 语义标签

5、HTML5 智能表单

6、CSS3

7、Media Query响应式布局

--------------------------------------------------分割符---------------------------------------------------------------------------

详细内容包括：

WEB开发构件

系统及文件基本操作

基本的快捷键

描述 Windows Mac OS

编辑菜单 Alt + E Ctrl + F2 + F

文件菜单 Alt + F Ctrl + F2 + E

视图菜单 Alt + V Ctrl + F2 + V

全选文本 Ctrl + A Cmd + A

复制文本 Ctrl + C Cmd + C

查找文本 Ctrl + F Cmd + F

查找替换文本 Ctrl + H Cmd + F

新建文档 Ctrl + N Cmd + N

打开文件 Ctrl + O Cmd + O

打印选项 Ctrl + P Cmd + P

保存文件 Ctrl + S Cmd + S

粘贴文本 Ctrl + V Cmd + V

剪切文本 Ctrl + X Cmd + X

重做文本 Ctrl + Y Shift + Cmd + Z

撤销文本 Ctrl + Z Cmd + Z

文本编辑 描述 Windows Mac OS

光标移动操作

文本编辑操作

Web 浏览器操作

标签/窗口管理

打印当前网页

保存当前网页

地址栏操作

书签操作

屏幕截图

WEB开发构件

C/S结构

B/S结构

HTTP协议

传输数据方式：post,get

HTTP消息类型：2xx,4xx,5xx

URL组成

HTML介绍

HTML发展史

HTML5简介

新标准

引入原生多媒体支持

引入可编程内容

引入予以Web

http协议

HTTP消息类型：2xx,4xx,5xx

开发软件

nodepad++

sublime

dreamweaver

HTML介绍

HTML发展史

HTML5介绍

HTML基本语法与规范

标签

属性

固有属性

自定义属性

通用属性

元素

父元素（理解）

子元素

兄弟元素

后代元素

主体结构

长度单位

颜色单位

基础标签

文本类标签

文本格式化标签

<b> 定义粗体文本

<strong> 定义加重语气

<em> 定义着重文字

<i> 定义斜体字

<br> 换行标签

<sub> 定义下标字

<sup> 定义上标字

<ins> 定义插入字

<del> 定义删除字

<code> 定义计算机代码

<kbd> 定义键盘码

<samp> 定义计算机代码样本

<var> 定义变量

<pre> 定义预格式文本

<abbr> 定义缩写

<address> 定义地址

<bdo> 定义文字方向

<blockquote> 定义长的引用

<q> 定义短的引用语

<cite> 定义引用、引证

<dfn> 定义一个定义项目。

计算机输出类

语义，引用及标签定义

链接<a>

标题Hn

HTML框架iframe

段落P

列表标签

字符实体

空格 &nbsp; &#160;

< 小于号 &lt; &#60;

> 大于号 &gt; &#62;

& 和号 &amp; &#38;

" 引号 &quot; &#34;

' 撇号 &apos; (IE不支持) &#39;

￠ 分 &cent; &#162;

£ 镑 &pound; &#163;

¥ 日元 &yen; &#165;

€ 欧元 &euro; &#8364;

§ 小节 &sect; &#167;

© 版权 &copy; &#169;

® 注册商标 &reg; &#174;

™ 商标 &trade; &#8482;

× 乘号 &times; &#215;

÷ 除号 &divide; &#247;

表格标签

colgroup

caption

table

thead

col

span

th

tbody

tr

td

colspan

rowspan

tfoot

头部标签

<!doctype html>

<head> 定义了文档的信息

<title> 定义了文档的标题

<base> 定义了页面链接标签的默认链接地址

<link> 定义了一个文档和外部资源之间的关系

<meta> 定义了HTML文档中的元数据

charsetNew character_set 定义文档的字符编码。

content text 定义与 http-equiv 或 name 属性相关的元信息。

http-equiv content-type

default-style

refresh 把 content 属性关联到 HTTP 头部。

name application-name

author

description

generator

keywords 把 content 属

<script> 定义了客户端的脚本文件

<style> 定义了HTML文档的样式文件

多媒体标签

1. img

1.1 导入一张图片

1.2 属性

src 图片地址

width 设置图片宽

height 设置图片高

border 设置图片边框

alt 不显示图片时的提示信息

title 鼠标放上时显示的图片描述信息

usemap map标签的name #name

2. map

2.1 给图片划分区域 配合area

2.2 属性

name 给map指定一个name

3. area

3.1 在map的配合下给图片划分指定形状的区域

3.2 属性

shape 划分的形状

coords 形状的坐标·

href 要链接的地址

target 新网页打开方式

4. audio

4.1 导入音频的标签 HTML5新标签

4.2 属性

src 音频源的路径 必备

controls 显示控制按钮 必备

autoplay 自动播放

loop 是否循环

preload 预加载 不能跟autoplay属性混用

4.3 audio标签内部加文字，如果浏览器支持这个标签则文字不会显示 ，如果不支持就会显示

4.4 audio标签的两个格式

简单格式

<audio src="../video/music.mp3" controls>您的破浏览器不支持，请升级浏览器

</audio>

完整格式 视频源单独放到source标签中

<audio controls>

您的破浏览器不支持，请升级浏览器

<source src='../video/music.mp3' type='audio/mp3'>

<source src='../video/music.wav' type='audio/wav'>

</audio>

5. video

5.1 导入视频的标签 HTML5新标签

5.2 属性

src 路径

controls 显示控制按钮

autoplay 自动播放 属性值 auto none

loop 是否循环播放

width 视频的宽

height 视频的高

poster 缩略图地址

6. source

6.1 配合video标签 导入不同格式的视频 HTML5新标签

6.2 属性

src 视频地址

7. canvas 用于画图的标签

8. embed

8.1 导入多媒体文件 音频 视频 HTML5新标签

8.2 属性

src 多媒体文件地址

width

height

HTML表单及智能表单

1. 表单相关标签

1.1 form 客户端跟服务器端进行交互，常用语 登录 注册 调查问卷...

① 定义表单 所有的表单控件放在form中

② 属性

action 表单要提交的地址

method 提交方法 get（默认）提交的值会显示在url上 不安全而且传递的值数量有限 post 提交的内容不会显示 在url上，传递的值范围也比get方式的大，相对安全

target 打开新网页的方式 _self _blank _top _parent

enctype="multipart/form-data" 传文件必须加上

1.2 input

① 定义输入框密码框单选框复选框.....

② 属性

type input的类型

name input的名字

value input的值

checked 默认radio和checkbox

size input框的大小 type:text password textarea

maxlength input最大输入长度 type:text password

1.3 button

① 以标签形式定义按钮

② 属性

type 设置submit（默认值）， 按钮具有提交功能 设置为button，普通按钮 reset 重置

1.4 textarea

① 文本域 双标签

② 属性

name 指定名字

rows 指定行数 决定文本域高度

cols 指定列数 决定文本域宽度

1.5 select

① 选择框 下拉框 单选框

② 属性

name 指定名字

multiple 设置为多选

1.6 option

① 定义select中的的选项

② 属性

value 指定真正的值

selected 默认值

1.7 optgroup

① 给option分组 不常用

1.8 fieldset 套在form的外部 添加边框 不常用

1.9 legend 在边框定义form的标题 不常用

1.20 input select textarea button 称作表单控件元素

1.21 通用属性 所有的表单控件元素都具有属性 disabled enabled(默认)

2. form表单input中type类型

text 文本框 value设置默认值

password 密码框 value设置默认值

radio 单选框 所有的redio name相同才能单选 value设置真正提交的值 默认的按钮可以设置checked

checkbox 复选框 value设置真正提交的值 设置默认添加checked属性

image 提交按钮，按钮样式来自图片 配合src属性

submit 提交按钮， value指定按钮上的文字

reset 重置按钮 value指定按钮上的文字

button button按钮 value指定按钮上的文字

file 上传框

hidden 隐藏域 name value

3. label标签

用来嵌套input， 点击label嵌套的任何元素都可以激活label内的input

属性 for 指定 input的id

语义标签

<header> 定义了文档的头部区域

<nav> 定义运行中的进度（进程）。

<article> 定义页面独立的内容区域。

<figure> 规定独立的流内容（图像、图表、照片、代码等等）。

<figcaption> 定义 <figure> 元素的标题

<aside> 定义页面的侧边栏内容。

<section> 定义文档中的节（section、区段）。

<footer> 定义 section 或 document 的页脚。

<address> 定义文档作者或拥有者的联系信息

<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。

<command> 定义命令按钮，比如单选按钮、复选框或按钮

<details> 用于描述文档或文档某个部分的细节

<summary> 标签包含 details 元素的标题

<dialog> 定义对话框，比如提示框

dt

dd

<mark> 定义带有记号的文本。

<meter> 定义度量衡。仅用于已知最大和最小值的度量。

<progress> 定义任何类型的任务的进度。

<ruby> 定义 ruby 注释（中文注音或字符）。

<rt> 定义字符（中文注音或字符）的解释或发音。

<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。

<time> 定义日期或时间。

<wbr> 规定在文本中的何处适合添加换行符。

CSS基础与规范知识

1. CSS的定义

Cascading Style Sheets 层叠样式表（级联样式表）

2. CSS的作用

定义网页外观，如字体、背景、颜色等

3. CSS特点

① 精确的定位 准确的控制页面的任何元素

② 精细的控制 可以做到像素级别的调整

③ 样式与内容的分离 便于维护，便于重用

4. 发展历程

① CSS1 作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。

② CSS2 作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。

③ CSS3 CSS3 计划将 CSS 划分为更小的模块。2001年至今 HTML5+CSS3

CSS选择器

HTML tag

Class

包含选择器：div span a

ID

组合选择 div,span,a

任意选择器（通配符选择器）*

关系选择器

包含选择符

子选择符

相邻选择符

兄弟选择符

属性选择器

伪类选择器

伪对象选择器

CSS3属性

尺寸

边框

背景

内补白

外补白

布局

定位

字体

文本

列表

表格

用户界面

多栏

2D变换

过渡

动画

Photoshop网页设计基础

I设计介绍

photoshop安装与设置

位图与矢量图

网页常用图片格式

图像大小与分辨率

选区创建和编辑

选区的创建

选区工具M

套锁工具L

快速选区工具W和魔术棒W

钢笔选区

创建矢量路径

锚点操作

钢笔工具

形状转选区ctrl+Enter

选区的编辑

选区的存储

应用辅助功能

使用标尺ctrl+R

设置网格：视图>显示>网格ctrl+'

应用变换功能

选择>可变换选区ctrl＋T

缩放

旋转

扭曲

透视

变形

水平翻转

垂直翻转

应用内容识别比例功能

操控变形

裁剪图像

裁剪工具

基础绘画

了解绘画和绘画修饰工具

画笔

颜色替换

涂抹工具

绘画的基本技巧

绘制直线,按住shift

绘制曲线

定义颜色

使用拾色器

渐变工具

填充前景色：alt＋delete

填充背景色：control＋delete

为图像填充颜色shift+f5

图形、路径计算

网页布局规范

Web设计规范

banner设计

网页栅格系统

网页构成

命名规范

导航设计

版式设计

网页配色

Photoshop网页切图

网页切图及切图常见问题

精灵图片技术

专题页设计

W3C盒子模型

div+css网页布局

HTML5兼容性处理

使用 HTML5布局元素的布局

Media Query响应式布局

原生响应式布局

媒体查询+尺寸属性：百分比，max-width,max-height,min-width,min-height

--------------------------------------------------分割符---------------------------------------------------------------------------

可实现效果

1、表格制作个人简历

2、使用表单制作注册页面

3、div+css基本网页布局

4、PS网页设计

5、精灵图片技术

6、语义化标签布局

7、智能表单验证

8、多媒体播放

9、css3:圆角边框、边框九宫格特效、多图背景、动画、渐变和倒影、多列属性布局、服务器端字体

10、响应式网页实现

--------------------------------------------------分割符---------------------------------------------------------------------------

第二阶段：前端核心技术：Javascript

主要内容：

1、Javascript

2、Ajax

3、JQuery

4、JS高级特效

--------------------------------------------------分割符---------------------------------------------------------------------------

详细内容：

JavaScript 脚本语言

什么是JavaScript？

1. JavaScript 是一种客户端脚本语言（脚本语言是一种轻量级的编程语言）。

2. JavaScript 通常被直接嵌入 HTML 页面。

3. JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

特点：

1. 弱类型

2. 基于对象。(因为面向对象需要具有封装、继承、多态的特征)

JavaScript语言中包含三个核心：ECMAScript基本语法、DOM、BOM

JavaScript是基于对象的脚本语言。

在HTML中如何使用JavaScript

1. 使用<script></script>标签：

属性：

charset（可选）字符集设置、

defer（可选执行顺序）值：defer、

language(已废除)、

src（可选）使用外部的js脚本文件

type(必选)类型：值：text/javascript

<script type="text/javascript">

<!--

javaScript语言

//-->

</script>

2. 在html标签的事件中，超级链接里。

<button onclick="javaScript语言"></button>

<a href="javascript：alert('aa');alert('bb')">点击</a>

3. 外部导入方式（推荐）：

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

JavaScript的语法：

1.区分大小写：变量名、函数名、运算符以及其他一切东西都是区分大小写的。

2.他和php一样属于弱类型语言。

3.每行结尾的分号可有可无。(js中的每条语句之间的分割符可以是回车换行也可以是";"分号(推荐))

4.脚本注释：

// 单行注释

/* 多行注释 */

5.括号表示代码块:{}

6.变量的定义：使用var关键字来声明。

变量的命名规范是：字母数字，$符和下划线构成，但是不可以以数字开始。

变量名不可以使用关键字.

typeof函数获取一个变量的类型：

7.JavaScript的数据类型：

undefined 类型

null 类型（对象）

boolean 类型

number 类型

object引用类型

8. 类型转换：

JavaScript的运算符

1. 一元运算符

delete：用于删除对象中属性的 如：delete o.name; //删除o对象中的name属性

void： void 运算符对任何值返回 undefined。没有返回值的函数真正返回的都是 undefined。

++ --

一元加法和一元减法

2. 位运算符

位运算 NOT ~

位运算 AND &

位运算 OR |

位运算 XOR ^ (不同为1，相同则为0)

左移运算 <<

右移运算 >>

3. 逻辑运算符

逻辑 NOT ! 运算符 非

逻辑 AND && 运算符 与

逻辑 OR || 运算符 或

4. 乘性运算符：*（ 乘） /(除) %（取模）求余

5. 加性运算符： + -

*其中+号具有两重意思：字串连接和数值求和。

就是加号”+“两侧都是数值则求和，否则做字串连接

6. 关系运算符 > >= < <=

7. 等性运算符 == === != !==

8. 条件运算符 ? : (三元运算符)

9. 赋值运算符 = += -= *= /= %= >>= <<=

10 逗号运算符

用逗号运算符可以在一条语句中执行多个运算。

var iNum1=1, iNum2=2, iNum3=3;

javaScript（语句流程控制）

1. 判断语句 if语句； if... else ... if ... else if ... else...

2. 多分支语句： switch（）{。 case ：。。。。}

switch (i) {

case 20: alert("20");

break;

case 30: alert("30");

break;

case 40: alert("40");

break;

default: alert("other");

}

3. 循环语句（迭代语句）

for：

while

do...while

*for-in 语句: 语句是严格的迭代语句，用于枚举对象的属性。

var a = [10,20,30,40,50];

//迭代的是数组的下标。

for(i in a){

document.write(a[i]);

}

//输出： 1020304050

4. break 和 continue 语句对循环中的代码执行提供了更严格的控制。

5. *with 语句用于设置代码在特定对象中的作用域。

//扩充知识：

1. 在网页文档中获取一个节点对象（HTML标签）

document.getElementById("mid"); //获取标签id属性值为mid的节点对象

2. 定时相关函数：

setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 单次定时执行指定函数

clearTimeout(iTimeoutID) -- 取消上面的单次定时

setInterval(vCode, iMilliSeconds [, sLanguage]) --无限次定时执行指定函数

clearInterval(iIntervalID)-- 取消上面的多次定时

一、JavaScript的函数：

标准格式： function 函数名（[参数列表..]）{

函数体。。。

[return 返回值;]

}

JavaScript三种定义函数方法：

*第一种是使用function语句定义函数

如上面格式

第二种是使用Function()构造函数来定义函数（不常用）

var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);

如：

var 函数名 = new Function(”x”,”y”,”var z=x+y;return z;”);

*第三种是在表达式中定义函数

var 函数名 = function(参数1，参数2，…){函数体};

//例如：

//定义

var add = function(a,b){

return a+b;

}

//调用函数

document.write(add(50,20));

arguments 对象

在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。

例如，在函数 sayHi() 中，第一个参数是 message。用 arguments[0]

也可以访问这个值，即第一个参数的值（第一个参数位于位置 0，

第二个参数位于位置 1，依此类推）。

关于变量和参数问题：

函数外面定义的变量是全局变量，函数内可以直接使用。

在函数内部没有使用var定义的=变量则为全局变量，

*在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。

js函数定义的参数没有默认值（目前只有最新的火狐浏览器支持）

二、系统中常用的内置函数：

escape() //字串编码

unescape() //字串反编码

*eval() //将参数字符串作为脚本代码来执行。

*isNaN() // is not a number (不是一个数值)

*parseInt()

*parseFloat()

三、JavaScript的对象的定义和使用

1.使用构造函数创建内置对象

var myObject = new Object();

myObject.name = “lijie”;

myObject.age = 20;

myObject.say = function(){...}

2.直接创建自定义对象

var 对象名 = {属性名1：属性值，属性名2：属性值2，…….}

*3.使用自定义构造函数创建对象

function pen(name,color,price){

//对象的name属性

this.name = name;

//对象的color属性

this.color = color;

//对象的piece属性

this.price = price;

//对象的say方法

this.say = function(){};

}

var pen = new pen(“铅笔”,”红色”,20);

pen.say();

一、for…in语句

----------------------------------------

for(var i in window){

document.write(i+”----”+window[i]);

}

这种语句可以遍历对象中的所有属性或数组中的所有元素。

二、with语句

--------------------------------------------

如果使用with语句，就可以简化对象属性调用的层次。

document.write(‘test1’);

document.write(‘test2’);

document.write(‘test3’);

可以使用with来简化：

with(document){

write(‘test1’);

write(‘test2’);

write(‘test3’);

}

三、JavaScript内置对象

* Array（数组）

var a= new Array(); //创建一个空数组

a = new Array(10); //创建一个数组单元为10个的数组。

a = new Array(10,20,30);//创建一个指定数组单元的数组。

a=['a','b','c','d']; //快捷定义数组

常用属性：

length--获取长度。

常用方法：

toString() 把数组转换为字符串，并返回结果。

sort() 对数组的元素进行排序

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

* Boolean 布尔值包装类对象

方法：toSource() 返回该对象的源代码。

toString() 把逻辑值转换为字符串，并返回结果。

valueOf() 返回 Boolean 对象的原始值。

* Date

var dd = new Date();

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。

getMonth() 从 Date 对象返回月份 (0 ~ 11)。

getFullYear() 从 Date 对象以四位数字返回年份。

getYear() 请使用 getFullYear() 方法代替。

getHours() 返回 Date 对象的小时 (0 ~ 23)。

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。

getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。

getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

同上还有很多set方法用来设置。

* Math 对象用于执行数学任务。方法是静态的。

abs(x) 返回数的绝对值。

ceil(x) 对数进行上舍入。

floor(x) 对数进行下舍入。

random() 返回 0 ~ 1 之间的随机数。

round(x) 把数四舍五入为最接近的整数。

max(x,y) 返回 x 和 y 中的最高值。

min(x,y) 返回 x 和 y 中的最低值。

* Number

toString();

toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。

* String 子串处理对象

anchor() 创建 HTML 锚。

*charAt() 返回在指定位置的字符。

charCodeAt()返回在指定的位置的字符的 Unicode 编码。

*indexOf() 检索字符串。

*lastIndexOf() 从后向前搜索字符串。

match() 找到一个或多个正在表达式的匹配。

*replace() 替换与正则表达式匹配的子串。

search() 检索与正则表达式相匹配的值。

slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。

split() 把字符串分割为字符串数组。

substr() 从起始索引号提取字符串中指定数目的字符。

*substring() 提取字符串中两个指定的索引号之间的字符。

toLocaleLowerCase() 把字符串转换为小写。

toLocaleUpperCase() 把字符串转换为大写。

*toLowerCase() 把字符串转换为小写。

*toUpperCase() 把字符串转换为大写。

* RegExp

exec()正则匹配

test()

match()

* Global

escape(string) -- 可对字符串进行编码

unescape(string) -- 函数可对通过 escape() 编码的字符串进行解码。

encodeURI(URIstring) -- 函数可把字符串作为 URI 进行编码。

decodeURI(URIstring) -- 函数可对 encodeURI() 函数编码过的 URI 进行解码。

*eval(string) -- 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

getClass(javaobj) -- 函数可返回一个 JavaObject 的 JavaClass。

*isNaN(x) -- 函数用于检查其参数是否是非数字值。

Number(object) --函数把对象的值转换为数字。

*parseFloat(string) -- 函数可解析一个字符串，并返回一个浮点数。

*parseInt(string, radix)

事件处理

一、事件源: 任何一个HTML元素（节点） body, div , button p, a, h1 .......

二、事件: 你的操作

鼠标:

* click 单击

dblclick 双击

contextmenu (在body) 文本菜单（鼠标右键使用）

要想屏蔽鼠标右键使用return false

window.document.oncontextmenu=function(ent){...}

* mouseover 放上(移入)

* mouseout 离开（移出）

mousedown 按下

mouseup 抬起

* mousemove 移动

键盘：

keypress 键盘事件

keydown 按下

文档：(主要使用在body标签中)

* load 加载

unload 关闭(为了兼容可使用下面函数)

beforeunload 关闭之前

表单：

* focus 焦点

* blur 失去焦点

* submit 提交事件

* change 改变（如下拉框选择事件）

其它：

* scroll 滚动事件(常用延迟加载、瀑布流技术)

window.onscroll=function(){

document.documentElement.scrollTop;//获取滚动条的上距离

document.documentElement.scrollLeft;//滚动条的左距离

}

selectd 事件

。。。。

三、事件处理程序

使用一个匿名或回调函数

有三种方法加事件

第一种：

格式： <tag on事件="事件处理程序" />

*第二种：

<script>

对象.on事件=事件处理程序

</script>

第三种：(火狐不兼容)

<script for="事件源ID" event="on事件">事件处理程序</script>

事件对象：

属性：

1. srcElement

2. keyCode 键盘值

事件 event window.event

1. srcElement 代表事件源对象

2. keyCode 事件发生时的键盘码 keypress , keydown keyup

3. clientX, clientY 坐标位置

4. screenX, screenY

5. returnValue

6. cancelBubble;

//为页面添加鼠标右点击事件

window.document.oncontextmenu=function(ent){

//兼容IE和火狐浏览器兼容

var event=ent || window.event;

//获取事件坐标位置

var x=event.clientX;

var y=event.clientY;

...

}

一、BOM

1. window对象

常用的属性：

*document ：对 Document 对象的只读引用

*history ：对 History 对象的只读引用。

*location：用于窗口或框架的 Location 对象

Navigator： 对 Navigator 对象的只读引用

*parent： 返回父窗口。

length: 设置或返回窗口中的框架数量。

Screen: 对 Screen 对象的只读引用

status: 设置窗口状态栏的文本。

top: 返回最顶层的先辈窗口。

常用方法：

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

prompt() 显示可提示用户输入的对话框。

close() 关闭浏览器窗口。

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

scrollTo() 把内容滚动到指定的坐标。

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval() 取消由 setInterval() 设置的 timeout。

2. Navigator 对象

Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

常用属性：

with(document) {

write ("你的浏览器信息：<ul>");

write ("<li>代码："+navigator.appCodeName+"</li>");

write ("<li>名称："+navigator.appName+"</li>");

write ("<li>版本："+navigator.appVersion+"</li>");

write ("<li>语言："+navigator.language+"</li>");

write ("<li>编译平台："+navigator.platform+"</li>");

write ("<li>用户表头："+navigator.userAgent+"</li>");

write ("</ul>");

}

3. Screen 对象包含有关客户端显示屏幕的信息。

常用属性：

document.write( "屏幕宽度："+screen.width+"px<br />" );

document.write( "屏幕高度："+screen.height+"px<br />" );

document.write( "屏幕可用宽度："+screen.availWidth+"px<br />" );

document.write( "屏幕可用高度："+screen.availHeight+"px" );

参考了解其他属性信息获取方式

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

4. History 对象包含用户（在浏览器窗口中）访问过的 URL。

5. Location 对象包含有关当前 URL 的信息。

讲解DOM

一、基本概念

HTML DOM 定义了访问和操作HTML文档的标准方法。

HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

DOM 被分为不同的部分：

1.Core DOM

定义了一套标准的针对任何结构化文档的对象

2.XML DOM

定义了一套标准的针对 XML 文档的对象

3.HTML DOM

定义了一套标准的针对 HTML 文档的对象。

节点：根据 DOM，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：

>整个文档是一个文档节点

>每个 HTML 标签是一个元素节点

>包含在 HTML 元素中的文本是文本节点

>每一个 HTML 属性是一个属性节点

>注释属于注释节点

节点彼此间都存在关系。

>除文档节点之外的每个节点都有父节点。

>大部分元素节点都有子节点。

>当节点分享同一个父节点时，它们就是同辈（同级节点）。

>节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点

>节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点

查找并访问节点

你可通过若干种方法来查找您希望操作的元素：

>通过使用 getElementById() 和 getElementsByTagName() 方法

>通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

nodeName 属性含有某个节点的名称。

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

二、HTML DOM 对象参考

Document: 代表整个 HTML 文档，可被用来访问页面中的所有元素

常用集合属性：forms

Anchor : 代表 <a> 元素

Area : 代表图像映射中的 <area> 元素

Base : 代表 <base> 元素

Body : 代表 <body> 元素

Button : 代表 <button> 元素

Event : 代表某个事件的状态

Form : 代表 <form> 元素

Frame : 代表 <frame> 元素

Frameset: 代表 <frameset> 元素

Iframe : 代表 <iframe> 元素

Image : 代表 <img> 元素

Input button : 代表 HTML 表单中的一个按钮

Input checkbox : 代表 HTML 表单中的复选框

Input file : 代表 HTML 表单中的文件上传

Input hidden : 代表 HTML 表单中的隐藏域

Input password : 代表 HTML 表单中的密码域

Input radio : 代表 HTML 表单中的单选按钮

Input reset : 代表 HTML 表单中的重置按钮

Input submit : 代表 HTML 表单中的确认按钮

Input text : 代表 HTML 表单中的文本输入域（文本框）

Link : 代表 <link> 元素

Meta : 代表 <meta> 元素

Object : 代表 <Object> 元素

Option : 代表 <option> 元素

Select : 代表 HTML 表单中的选择列表

Style : 代表单独的样式声明

Table : 代表 <table> 元素

TableData : 代表 <td> 元素

TableRow : 代表 <tr> 元素

Textarea : 代表 <textarea> 元素

AJAX

var xmlhttp;

1. 创建请求对象

if(window.XMLHttpRequest){

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}else{

// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

2. 设置回调函数（监听）

xmlhttp.onreadystatechange=函数名；

或

xmlhttp.onreadystatechange=function(){

函数体。。。

}

3. 初始化：

xmlhttp.open("GET",url,true);

4. 发送：

xmlhttp.send();

其中：xmlhttp请求对象：

**属性：

*readyState //请求状态：0,1,2,3,4

*responseText//响应内容

responseXML //xml响应对象

*status //浏览器响应状态：200正常， 404 请求地址不存在 ,,

statusText //状态内容

*onreadystatechange //回调函数属性

方法：

abort() //取消当前响应，关闭连接并且结束任何未决的网络活动。

getAllResponseHeaders() //把 HTTP 响应头部作为未解析的字符串返回。

getResponseHeader() //返回指定的 HTTP 响应头部的值

*open() //初始化 HTTP 请求参数

*send() //发送 HTTP 请求，使用传递给 open() 方法的参数

*setRequestHeader() //向一个打开但未发送的请求设置或添加一个 HTTP 请求。

自定义Ajax实例使用

jQuery的基本语法

对象的访问

each()

size()

length

selector

context

get()

index()

jQuery 属性操作

属性

attr

removeAttr

prop

removeProp

CSS

addClass

removeClass

toggleClass

HTML代码/文本/值

html()

text()

val()

基础知识

JQuery简介

JQuery 安装

JQuery语法

jQuery CSS 操作

css:css()

位置

offset()

position()

scrollTop()

scrollLeft()

尺寸

height()

width()

innerHeight()

innerWidth()

outerHeifht()

outerWIdth()

jQuery 选择器

基本

层级

伪类

内容

可见性

属性

子元素

表单

表单对象属性

jQuery 筛选

过滤

查找

串联

jQuery HTML文档处理

内部插入

外部插入

包裹

替换

删除

复制

jQuery 事件

页面载入

事件处理

事件委派

事件切换

事件

jQuery效果

jQuery 隐藏显示

jQuery 淡入淡出

jQuery 滑动

jQuery 动画

jQuery停止动画

jQuery Callback

Jquery chaining

jQuery Ajax

jQuery Ajax简介

jQuery load()方法

jQuery get()/post()方法

jQuery 其他

jQuery noConflict()方法

jQuery JSONP

数组和对象操作

函数操作

测试操作

字符串操作

浏览器及特性检测

URL

数据缓存

队列机制

jQuery 插件

插件使用

jQuery 自定义插件方法

--------------------------------------------------分割符---------------------------------------------------------------------------

可实现效果

1、刷新改背景

2、获取和设置时间

3、从URL中获取文件名

4、简单的计算器

5、滚动类效果

6、自定义菜单

7、下拉菜单

8、手风琴菜单

9、弹出层

10、瀑布流布局，滚动事件

11、选项卡开发

12、幻灯播放

13、拖拽效果

14、淘宝商品的放大效果

15、登录注册验证

16、首页多特效合成

17、后台效果制作

18、瀑布流

19、点名器

20、抽奖

--------------------------------------------------分割符---------------------------------------------------------------------------

第三个阶段：HTML5新特性

主要内容：

1、视频/音频

2、地理定位

3、Web 存储

4、应用缓存

5、拖放

6、文件读取

7、Web Workers

8、画布 SVG

9、CSS预处理

10、BootStrap 响应式框架

--------------------------------------------------分割符---------------------------------------------------------------------------

详细内容：

HTML5 多媒体

audio/video API操作

地理位置信息获取

geolocation API操作

地球间两点距离计算方法

地图API调用

HTML5离线缓存

cache manifest规范及格式

HTML5本地存储

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

拖放（Drag 和 drop）

FileReader

浏览器多线程

画布 SVG 动画实现

SASS使用

SASS的基本语法

Bootstrap配置

使用Bootstrap布局页面

Bootstrap全局样式

栅格系统原理

Bootstrap各种常用组件

Bootstrap常用插件应用

--------------------------------------------------分割符---------------------------------------------------------------------------

可实现效果：

制作属于自己的音/视频播放器

查看经纬度

获取公交路线

显示路线导航

离线应用

多线程优化用户体验

拖放歌曲列表

图片拖放显示

拖放照片墙

绘画五角星

绘制时钟

匀速、变速、圆周、曲线等物理运动

碰撞原理与实现

九大行星围绕运动

鼠标交互特效

使用SASS制作动态CSS程序

使用UI框架实现响应式布局

--------------------------------------------------分割符---------------------------------------------------------------------------

第四阶段：MEAN(MongoDB+Express+Angular.js+Node.js)全栈框架开发

主要内容：

1、Node.js

2、MongoDB

3、Express

4、AngularJS

5、WEB APP制作

--------------------------------------------------分割符---------------------------------------------------------------------------

详细内容:

NodeJS与浏览器js的区别

NodeJS基础

NodeJS安装

模块

require

exports

module

NPM

代码的组织和部署

模块路径解析规则

包（package）

index.js

package.json

文件操作

Buffer（数据块）

Stream（数据流）

File System（文件系统）

Path（路径）

网络操作

HTTP

HTTPS

URL

Query String

Zlib

Net

NPM/Bower依赖管理工具

Zepto.js库

NodeJS文件操作

使用NodeJS搭建Web服务器

使用NodeJS搭建Socket服务器

数据仓库：

SQL:结构化查询语言(Structured Query Language)

常见的SQL:MySQL Oracle MariaDB PostgreSQL等SQL

常见的NoSQL：MongoDB Redis Memcache

MongoDB：

C++语言编写，基于分布式文件存储的开源数据库系统

BSON:类JSON对象（Binary JSON，二进制形式的存储格式）

{"username":"zhangsan","age":20,"sex":"男"}

由"键值对"组成

结构划分：

数据库(database) db

集合(collection)

文档(document)

字段(field)

安装MongoDB

1.针对库的操作

查看所有库

创建并进入数据库

查看当前库

删除数据库

2.集合操作

查看当前集合

3.针对文档操作

插入数据

修改数据：

删除

查询数据

Express框架快速构建WEB应用程序

Express简介+MVC简介

Express路由模块

模板引擎 jade ejs handlebars

nosql数据库MogoDB管理数据

使用mongoose操作MongoDB

Angular JS介绍

Angular JS 表达式

Angular JS简介

Angular JS指令

Angular JS模型

Angular JS Scope(作用域)

Angular JS 控制器

Angular JS 过滤器

Angular JS Http

Angular JS 表格

Angular JS SQL

Angular JS HTML DOM

Angular JS 事件

Angular JS模块

Angular JS表单

Angular JS输入验证

Angular JS Bootstrap应用

Angular JS 包含

Angular JS 应用

App介绍

WebApp/NativeApp/HybirdApp简介

Cordova线下打包App

移动应用开发平台云端打包App

--------------------------------------------------分割符---------------------------------------------------------------------------

可实现以下效果

使用Nodejs搭建

应用程序的服务端

使用Socket长连接实时网络通信技术制作聊天室

带有前后台的简单博客系统

使用AngularJS打造单页面购物车应用

打包手机端应用

--------------------------------------------------分割符---------------------------------------------------------------------------

特级课：微信开发

主要内容：微信开发

1、微信接口开发

2、微信应用开发

3、微信UI框架

4、原型设计

5、面试题讲解

--------------------------------------------------分割符---------------------------------------------------------------------------

详细内容

微信JSSDK使用

分享接口

图像接口

音频接口

智能接口

设备信息

地理位置

界面操作

WEUI框架

原型设计

用户体验设计

面试题

--------------------------------------------------分割符---------------------------------------------------------------------------

可实现但不限于以下效果

微信测智商

测测上辈子是谁

测运势

留言板

照片分享发送

语音识别

位置显示

WEUI框架制作微信原生样式界面

小编已尽力排版，如小伙伴们觉得依然较乱，请留言


用html标签使用介绍

本文主要记录常用的html标签使用说明，用起来的时候偶尔查查。

常用html标签列表

标签

英文全拼

作用

特点

​<html></html>​​

html

网页的根标签

所有的标签都要写在这一对根标签里面

​​<head></head>​​

head

网页的头标签

包括完档的属性和信息

​​<body></body>​​

body

网页的主题

包含文档的所有内容

​​<div></div>​​

division

定义一个区域

浏览器通常会在​​<div>​​前后放置一个换行符

​​<!-- 注释 -->​​

-

注释

单标签

​​<br>或<br/>​​

break

换行

单标签，不会在其前后创建空白行

​​<hr>或<hr/>​​

horizontal rule

添加水平线

单标签

​​<img src="">​​

image

添加图片

单标签

​​<embed src="">​​

embed

嵌入外部应用

单标签

​​<meta>​​

meta

提供有关页面的元信息

单标签，​​<meta>​​​标签通常位于​​<head>​​区域内

​​<link>​​

link

定义文档与外部资源的关系

单标签，​​<link>​​​标签只能存在于​​<head>​​区域内，不过它可出现任何次数。

​​<p></p>​​

paragraph

定义段落

自动在其前后创建空白行

​​<h1> to <h6>​​

Header 1 to Header 6

定义标题

h1在一个页面里只能出现一次

​​<strong></strong>​​

strong

文本加粗

加粗标记该文本

​​<b></b>​​

bold

文本加粗

加粗显示文本，不推荐使用

​​<em></em>​​

emphasize

文本倾斜

倾斜标记文本

​​<i></i>​​

italic

文本倾斜

倾斜显示文本，不推荐使用

​​<del></del>​​

delete

文本添加删除线

-

​​<s></s>​​

strike

文本添加删除线

不推荐使用

​​<ins></ins>​​

insert

文本添加下划线

-

​​<u></u>​​

underline

文本添加下划线

不推荐使用

​​<a href="">填写内容</a>​​

anchor

添加超链接

最好使用CSS来改变链接的样式

​​<ul></ul>​​

unordered list

定义无序列表

通常与​​<li>​​标签一起使用

​​<ol></ol>​​

ordered list

定义有序列表

通常与​​<li>​​标签一起使用

​​<li></li>​​

list item

创建列表项

可与各种列表定义标签一起使用

​​<dl></dl>​​

definition list

定义描述列表

通常与​​<dt>​​​和​​<dd>​​一起使用

​​<dt></dt>​​

definition term

定义条目

定义描述列表的项目

​​<dd></dd>​​

definition description

定义描述

对描述列表中的项目进行描述

​​<table></table>​​

table

定义HTML表格

尽可能通过样式改变表格外观

​​<tr></tr>​​

table row

定义表格的行

一个​​<tr>​​​标签包含一个或多个​​<th>​​​或​​<td>​​标签

​​<th></th>​​

table headline

定义表格每一列的标题

该标签的文本通常呈现为粗体且居中

​​<td></td>​​

table data

定义表格中的单元格数据

该标签的文本呈现为普通且左对齐

​​<caption>表格标题</caption>​​

caption

定义整个表格的标题

​​<caption>​​​标签必须直接放在​​<table>​​标签后

​​<input type="">​​

input

定义输入控件

输入字段可通过多种方式改变，取决于type属性

​​select​​

select

定义下拉列表

​​<select>​​​中的​​<option>​​标签定义了列表中的可用选项

​​<option></option>​​

option

定义下拉列表中的可用项

​​<option>​​标签不可自由定义宽高

​​<optgroup></optgroup>​​

options group

定义选项组

​​<optgroup>​​标签用于把相关的选项组合在一起

​​<textarea></textarea>​​

textarea

定义多行的文本输入控件

文本的默认字体是等宽字体

​​<form></form>​​

form

定义表单

​​<form>​​可以包含多个元素

​​<fieldset></fieldset>​​

field set

定义围绕表单中元素的边框

​​<legend>​​​为​​<fieldset>​​定义标题

​​<legend></legend>​​

legend

为​​<fieldset>​​定义标题

​​<legend>​​通过css设定样式

​​<progress></progress>​​

progress

定义运行中的任务进度

​​<progress>​​​是HTML5中的新标签，​​<progress>​​标签不适合用来表示度量衡

​​<meter></meter>​​

meter

度量衡

​​<meter>​​​是HTML5的新标签，​​<meter>​​标签不适合用来表示进度条

​​<audio></audio>​​

audio

添加音频

​​<audio>​​标签是HTML5的新标签

​​<video></video>​​

video

添加视频

​​<video>​​标签是HTML5的新标签

​​<source>​​

source

定义媒介资源

​​<source>​​标签是HTML5中的新标签

常用标签使用说明

  • 常用写法：​​<img src="" alt="" title=""width="" height=""​​>
  • src：图片的来源（必写属性）
  • alt：图像不显示时的替代文本
  • title：鼠标在移动到元素上的文本提示
  • width/height：图片宽高，没有定义宽高的时候，图片按照百分之百比例显示，更改图片的宽度或者高度，图片等比例缩放

普通用法

  • 常用写法：​​<a href="" title="" target="">填写内容</a>​​
  • href：去往的路径（必写属性）
  • title：鼠标在移动到元素上的文本提示
  • target：规定在何处打开路径
  • _blank：新页面打开
  • _parent：在父窗口中打开链接
  • _self：当前页面跳转（默认值）
  • _top：在当前窗体打开链接，并替换当前的整个窗体
  • 当href的值为javascript：void(0); 或 javascript：; ，表示超链接不做任何事情，不做任何跳转
  • 当href的值为#，表示超链接为空链接，点击此链接时会跳转到页首的位置

锚点链接

锚点链接通过点击超链接，自动跳转到我们设置锚点的位置，类似于word的目录导航。建立锚点的元素必须要有id或name属性，最好两个都有。这里只跳转本页面元素，其他页面跳转自行搜索。
具体做法如下：

  1. 给目标元素设置id值，如​​<p id="id1"></p>​​
  2. 设置锚点超链接，锚点的超链接路径一定包含"#"，后面紧跟元素的id或者name，如​​<a href="#id1"></a>​​

示例如下。为了显示效果，通过使用lorem自动生成随机文本（具体使用方法搜索，一般直接输入就行），lorem*50表示重复lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超链接全局设置

在页面head中写入代码可以设置超链接的全局跳转设置

<head>
  <!-- 让页面所有的超链接新页面打开 -->
  <base target="_blank">  
</head>

charset编码

  • 常用写法： ​​<meta charset="UTF-8">​​
  • charset：定义文档的字符编码
  • ASCII/ANSI/Unicode：英语
  • GBK：亚洲通用字符集
  • GB2312：中文简体
  • Big5：台澳港繁体
  • UTF-8：世界通用字符集

name

  1. 关键字
  • 常用写法： ​​<meta name="keywords" content="">​​
  • 描述：告诉搜索引擎网页的关键字，尽量将重要的关键词放在前面
  1. 网页描述
  • 常用写法： ​​<meta name="keywords" content="">​​
  • 描述：告诉搜索引擎网页的主要内容
  1. 作者
  • 常用写法： ​​<meta name="author" content="">​​
  • 描述：告诉搜索引擎网页的作者
  1. 文件检索
  • 常用写法： ​​<meta name="robots" content="all | none | index | noindex | follow | nofollow">​​
  • 描述：有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是The Robots META标签。
  • content: 文件检索方式
  • all：文件将被检索，且页面上的链接可以被查询 （默认值）
  • none：文件将不被检索，且页面上的链接不可以被查询
  • index：文件将被检索；
  • noindex：文件将不被检索，但页面上的链接可以被查询
  • follow：页面上的链接可以被查询
  • nofollow：文件将不被检索，页面上的链接可以被查询

网页自动跳转

  • 常用写法： ​​<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />​​
  • 描述：网页5秒后自动跳转到谷歌主页
  • url：为空则刷新本页
  • 常用写法：
  • 描述：规定当前文档与被链接文档/资源之间的关系
  • rel：定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写（必写属性）
  • type：规定被链接文档的类型
  • href：链接的文件路径
  • 示例：
  • 链接外部样式表：​​<link rel="stylesheet" type="text/css" href="a.css">​​
  • 设置网页icon图标：​​<link rel="icon" href="a.ico">​​

列表

无序列表

无序列表使用粗体圆点进行标记。简单示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用数字进行标记，我们可以通过整数值start指定列表编号的起始值。简单示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通过描述列表自定义列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。

<dl>
        <dt>A</dt> <!-- 小标题 -->
            <dd>A1</dd> <!-- 解释标题 -->
            <dd>A2</dd> <!-- 解释标题 -->
        <dt>B</dt> <!-- 小标题 -->
            <dd>B1</dd> <!-- 解释标题 -->
            <dd>B2</dd> <!-- 解释标题 -->
    </dl>

表格

基础表格

  • 常用写法：​​<table width="" height="" border="" cellspacing="" cellpadding=""></table>​​
  • width：表格宽度
  • height：表格高度
  • border：边框宽度
  • cellspacing：单元格间距
  • cellpadding：内容与边框间距

简单示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格标题</caption> <!-- 定义表格标题 -->

<tr>
    <!-- 定义表格的行 -->
    <td>A1</td> <!-- 定义表格该行第一列中的数据 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定义表格的行 -->
    <th>A</th> <!-- 定义表格每一列的标题 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

单元格合并

  • 常用写法：​​<td colspan=“” rowspan=“”></td>​​
  • 描述：告诉表格该单元格可以横跨colspan列，纵跨rowspan行

简单示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->
<tr height="100">
    <!-- 定义表格的行 -->
    <td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

对于​​<input>​​不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

文本输入框

  • 常用写法：​​<input type="text" name="" maxlength="" readonly="" disabled="" value="">​​
  • type：规定输入字段的类型
  • name：输入框的名字
  • maxlength：输入文本长度
  • readonly：输入框是否只读
  • disabled：输入框是否未激活
  • value：输入框默认值

简单示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">

密码输入框

  • 常用写法：​​<input type="password" name="">​​
  • type：规定输入字段的类型
  • name：输入框的名字
  • 密码输入框的其他参数和文本输入框一样

简单示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">

单选框

  • 常用写法：​​<input type="radio" name="" checked="checked">​​
  • type：规定输入字段的类型
  • name：输入框的名字
  • checked：设定该输入框被预先选定
  • 想要多个单选框只能有一个被选中，设置所有单选框的name值相同即可实现

示例一，两个单选框都可以被选中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，两个单选框只能有一个被选中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

​​<select>​​

  • 常用写法：​​<select multiple=""></select>​​
  • multiple：当该属性为true时，可选择多个选项。

​​<optgroup>​​

  • 常用写法：​​<optgroup label=""></optgroup>​​
  • label：设定选项组的描述。

​​<option>​​

  • 常用写法：​​<option value="" selected="">选项值</option>​​
  • value：定义送往服务器的选项值。
  • selected：当该属性为true时，该选项被默认选择。

示例一，单选下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默认选中 -->
  </select>

示例二，带组合的单选下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，带组合的多选下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多选框

  • 常用写法：​​<input type="checkbox" checked="">​​
  • type：规定输入字段的类型
  • checked：设定该输入框被预先选定

简单示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

  • 常用写法：​​<textarea cols="" rows="" placeholder=""></textarea>​​
  • cols：控制可见文本的列数
  • rows：控制可见文本的行数
  • placeholder：提示字符

简单示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上传控件

  • 常用写法：​​<input type="file" accept=""/>​​
  • accept：规定提交的文件的类型

简单示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他类型按钮

<input type="submit">文件提交按钮
  <input type="button" value="">普通按钮
  <input type="image" src="">图片按钮
  <input type="reset">重置按钮
  <input type="url">网址控件
  <input type="date">日期控件 
  <input type="time">时间控件
  <!--email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交-->
  <input type="email">邮件控件
  <input type="number" step="3">数字控件
  <input type="range" step="100">滑块控件
  <input type="color">颜色控件

表单

示例一，普通表单

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，带分组信息表单

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

与

​​<progress>​​​与​​<meter>​​主要区别和用法见​​HTML5 progress和meter控件​​

​​<progress>​​

  • 常用写法：​​<progress value="" max=""></progress>​​
  • value：规定进程的当前值
  • max：规定需要完成的值

简单示例如下。

<progress value="60" max="100"></progress>

​​<meter>​​

  • 常用写法：​​<meter min="" low="" high="" max="" value="" optimum=""></meter>​​
  • value：规定度量的当前值
  • max：规定被界定为高的值的范围
  • min：规定被界定为低的值的范围
  • low：规定被界定为低的值的范围
  • high：规定被界定为高的值的范围
  • optimum：规定度量的最优值
  • 具体使用见meter标签改变颜色规则

简单示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒体资源

​​<audio>​​

  • 常用写法：​​<audio src="" controls autoplay loop></audio>​​
  • src：规定音频文件的url
  • controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
  • autoplay：如果出现该属性，自动播放音频
  • loop：如果出现该属性，循环播放音频

简单示例如下

<audio src="demo.mp3" controls autoplay></audio>

​​<video>​​

  • 常用写法：​​<video src="" width="" height="" poster="" controls autoplay loop></video>​​
  • src：规定视频文件的url
  • width：设置视频播放器的宽度（pixels）
  • height：设置视频播放器的高度（pixels）
  • poster：设置视频未播放时展示的画面
  • controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
  • autoplay：如果出现该属性，自动播放音频
  • loop：如果出现该属性，循环播放音频

简单示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

​​<source>​​

  • 常用写法：​​<source src="" type="">​​
  • src：规定媒体文件的url
  • type：规定媒体文件的类型
  • 因为不同浏览器支持的媒体格式不同，当添加媒体文件时，需要考虑浏览器是否支持它们。我们可以准备多种不同格式的媒体文件，然后使用source 标签，让浏览器从上到下选择支持的媒体格式

简单示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持video元素。
  </video>

特殊字符

​​HTML特殊字符编码对照表​​

参考

  • ​​HTML基础​​
  • ​​HTML 参考手册​​
  • HTML中标签对应的英文
  • meter标签改变颜色规则
  • HTML5 progress和meter控件

在线咨询
上一篇：js如何实现动态倒计时效果
下一篇：Web前端开发，HTML超链接标签，不懂的可以学习一下

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 阿勒泰市 鄂州 乐山 临河区 东山县 桓仁满族自治县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服