前端知识入门
还在为前途渺茫而苦恼吗，还在为工资低而感到担忧吗，本章节将带你入门前端有关知识，认识一下html，js，服务框架等如何撑起一个互联网时代，并逐渐取代现在的安卓应用的。
提示：安卓端不可根据目录进行跳转
文章目录
一、html部分入门
1. 基础知识
相关概念
HTML:
超文本标记语言。编写网页，浏览器来解析并渲染。使用固定的标记表示固定的用意。
- 超文本：文字，图像，音视频，超链接，flash。
- 当前：4.01版本、HTML5。
语法
- <标签名 属性=“值”>主体内容</标签名>
- <标签名 属性=‘值’/>
HTML文档结构标签
- <!doctype html>： 文档声明
- <html>…</html>：标识HTML文档的开始和终止。
- <head>…</head>：标识头部区域
- <body>…</body>：标识主体区域
- <!-- 注释 -->：注释标签。注释里的内容会被浏览器忽略
- 特殊字符–>转义符: < > ©
- HTML5的标准属性：class、id、style、title
所有的HTML标签都会有这些属性。
标签分类
a. 头标签
放置在head标签内部的。
- <base>指定网页中的超链接的基准地址或默认目标
- <link>定义文档与外部资源之间的关系。多数时候用于连接样式表
<link rel="stylesheet" type="text/css" href="styles.css"> - <meta> 元信息标签，常用于设置网页字符或者针对搜索引擎和更新频度的描述和关键词
<meta charset="UTF-8"/> - <title>定义文档的标题
b. 文本格式标签
- 标题标签：<h#> … </h#>
#=1, 2, 3, 4, 5, 6 字体大小依次递减 - 段落标签：<p> … </p>
- 预定义标签：<pre>… </pre>
- 块引用标签： <blockquote>…</blockquote>
- 其它
<br/>：换行符
<hr/>：水平线
c. 字符格式标签
- <b>…</b> 强调文本，加粗效果
- <i>…</i> 斜体文本
- <big>…</big> 放大文本
- <small>…</small> 缩小文本
- <u>…</u> 下划线文本
- <s>…</s> 删除线文本 —> <del>
- <sup>…</sup> 上标文本
- <sub>…</sub> 下标文本
d. 列表标签
- 无序列表：<ul>…</ul>
- 有序列表：<ol>…</ol>
- 列表项目：<li>…</li>
- “定义列表”标签：
<dl>…</dl>： 标识“定义列表”的标签
<dt>…</dt>：词条
<dd>…</dd>：解释
e. 超链接标签
- <a href="…">…</a>：用于从一个页面链接到另一个页面。常用属性：
href： 设置链接的目标URL或锚标记
target：设置目标内容要显示于哪个窗口或框架。_self、_blank、_parent、_top、自定义名 - URL路径问题
a)绝对路径：物理路径（完整路径）。一般用于链接外部站点的网页。如：“http://www.baidu.com”
b)相对路径：相对于参考路径的路径。用于链接本站点的其它网页。使用形式有： ./xxx、xxx/yyy、…/xxx、/xxx等。 - 锚链接：用于当前页面的上下跳转。
a) 定义锚：<a>标签的name属性用于创建锚标记。如：<a name=“top”/>
b) 使用锚：在href属性值中使用“#锚标记名”来引用。<a href="#top">跳顶部 - 电子邮件链接：在href属性值前添加"mailto:" 如：<a href=“mailto:qjyong@gmail.com”>站长信箱</a>
f. 多媒体标签
- <img … />：嵌入图像。 图像格式：png、jpg(jpeg)、gif、bmp
常用属性： src（图像的URL）、width、height、border、alt(替代文本) - <audio>：音频。支持ogg、mp3、mav格式。 --> HTML5
常用属性： src、autoplay、controls、loop、preload - <video>：视频。支持ogg、mp4、mkv格式。 --> HTML5
常用属性：src、autoplay、controls、loop、preload、width、height、poster
g. 分区标签
- <div>：块标签。用来在页面上定义一个区域，在这个区域内可以包含任何的HTML元素。独占一行。
- <span>：行内标签(也叫内嵌标签)。用来在同一行文本内选取一个片断。
它对选取的文本没有任何影响，只能借助于CSS或JavaScript来对元素进行处理。
h. 表格相关标签
- <table width="" border="" align=“left,center,right” cellspacing="" cellpadding="">
- <tr align=“left, center, right” valign=“top,middle,bottom”> 定义行
- <td width="" align="" valign="" colspan="" rowspan=""> 定义一行中的一列单元格
- <th> 标题单元格, <thead>表格头部,<tbody>表格主体,<tfoot>表格最后一行
使用表格做页面布局：不太建议使用。应用使用表格来布局一些数据。
i. 框架
把一个浏览器窗口划分成多个小窗口(frame) 帧
- <frameset cols=“15%,*,15%” rows="" frameborder=“1” border="">：用来划分小窗口，不能嵌套在body标签中。
- <frame name=“名” src=“目标网页URL” noresize=“noresize” scrolling=“auto,no,yes”>：一个窗口
- <iframe name="" src="" width="" height="" scrolling="" frameborder=“0”>：显示一个无须<frameset>的帧窗口
j. 表单相关标签
收集客户输入的数据
表单：用来向服务器提交数据。只提交本表单标签内输入控件的"名=值"对。
- <form id="" name="" action=“处理表单的服务器URL”
method=“表单数据发送方式(get | post)”
enctype=“表单数据的编码方式”>…</form>编码方式：
application/x-www-form-urlencoded 默认值,把表单数据编码为"名=值"对
multipart/form-data 传输的数据用多媒体传输协议方式传输
k. 常用表单元素
- 文本框:
<input type="text" name="名" value="初始值" size="尺寸" maxlength="最多字符数"/>
- 密码框:
<input type="password" name="名" value="" size="尺寸" maxlength="最多字符数"/>
- 单选钮:
<input type="radio" name="名" value="值" checked="checked"/>
//显示字符串。多个单选钮的name要相同才能实现单选的效果。
- 复选框:
<input type="checkbox" name="名" value="值" checked="checked"/>
//显示字符串。多个复选框的name要相同。
- 按钮:
<input type="submit|reset|button" name="" value=""/>
//提交、重置、普通按钮。
- 下拉列表:
<select name="名" size="初始显示几项,默认就是1项" multiple="multiple">
<optgroup label="分组名">
<option value="提交值" selected="selected">显示字符串</option>
<option value="提交值">显示字符串</option>
</optgroup>
</select>
- 文本域:
<textarea name="名" rows="行数" cols="一行的字符数">要显示的内容(值)\</textarea>。
//不会换行
- 文件选择框：
<input type="file" name="名"/>。
//表单包含文件选择框时，表单需要设置enctype="multipart/form-data"。
- 图片提交:
<input type="image" src="图片路径" />
- 隐藏字段:
<input type="hidden" name="名" value="值" />
- 文本显示标签:
<label for="user" accesskey="a" >用户名</label>
l. HTML5对表单的新添元素
- 对text类型的输入元素新增了几种：
email、url、number、range、tel、color
date、month、week、time、datetime、datetime-local - input标签新增了一些属性：
required、placeholder、pattern、autofocus
二、CSS样式表
1. 基础概念
CSS（层叠样式表）：修饰HTML中各个标签(元素)的外观。内容和样式的分离。便于修改和扩展。
2.设置CSS的四种方式
- 内联样式表：直接设置在HTML标签的style属性中。(所有的HTML标签都有style属性)
- 内部样式表：在HTML网页的标签内部用<style></style>定义。
- 外部样式表：把CSS定义在一个单独的外部文件中，扩展名为css
在需要使用这个样式表的网页头部用
<link href="xxx/xxx.css" rel="stylesheet"/> - 输入样式表：使用CSS的@import声明将一个CSS文件输入到另一个CSS文件中。
语法：@import url('xxx/xxx.css');
写在样式规则的前面
3. 样式语法：
选择器{ 属性:值; 属性:值; …}
- 选择器：指定受这条样式规则作用的网页元素(标签)。
- 属性：指定那些要被修改的样式风格名称。
每个属性有一个值。属性和值被冒号分开。
可以为一个选择器指定多个属性。每个属性之间用分号分开。 - 值：CSS属性值。如果值为若干单词，则要给值加引号。
4. 选择器
JS框架jQuery使用了CSS的选择器语法来选定网页中的元素。
-
元素选择器：使用HTML中的元素名(标签名)作为选择器名。如: body{ font-size: 12px; margin: 0; padding: 0;}
-
类选择器：定义格式为".类选择器名"。网页中的元素(标签)通过class属性来引用。(所有的HTML标签都有class属性)
如： .myclass{ color:red} 标签的引用方式：<font class=“myclass”>asdfasdf</font> -
ID选择器：定义格式为"#选择器名"。网页中的元素(标签)通过id属性来引用。(所有的HTML标签都有id属性)
如：#myDiv{ width: 50px; height: 50px; border: solid 1px red} 标签的引用方式: <div id=“myDiv”>xxx</div> -
属性选择器：
E[attr] 选择带有attr的E元素
E[attr=value] 选择属性attr的值必须为value的E元素
E[attr^=value] 选择属性attr的值以value开头的E元素
E[attr$=value] 选择属性attr的值以value结尾的E元素
E[attr*=value] 选择属性attr的值包含value的E元素 -
组合选择器：用,隔开的多个选择器名组合。将同样的样式规则定义应用于多个选择符。如：h1,h2,h3,h4,h5,h6{…}
-
后代选择器：格式为"E1 E2", 选择所有被E1包含的E2。如： p a{…}
-
子对象选择器：E1>E2, 选择所有作为E1子对象的E2。如：p > a{…}。 table > tbody > tr
-
相邻兄弟选择器：E1+E2, 选择所有与E1相邻的E2。
-
伪类选择器：对同一个HTML元素(标签)的各种状态来定义不同样式规则。
a) :link 向未被访问的链接添加样式。
b) :visited 向已被访问的链接添加样式。
c) :hover 当鼠标悬浮在元素上方时，向元素添加样式。任何标签都有这个状态。
d) :active 向被激活的元素添加样式。任何标签都有这个状态。
e) :focus 向拥有键盘输入焦点的元素添加样式。
f) CSS3新增的伪类选择器
:nth-child(2n)
:empty
:enabled
:checked
:not(selector)
5. 常用的样式属性
-
width,height： 宽和度 (单位可以用固定值(px)，百分比)
-
background：背景。
a) background-color 背景颜色
b) background-image 背景图像。值 ：url(‘xxx/xxx.png’)
c) background-repeat 平铺。值：repeat | no-repeat | repeat-x | repeat-y
d) background-position 背景图像的位置。设置左上角的坐标值(x,y) -
文本属性：
a) color 文本颜色（前景）。值：颜色名、rgb值(rgb(255,255,255))、rgb十六进制值(#ffffff)、rgba十六进制值
b) line-height 行高。 （文本的垂直居中：把行高与元素的高度设置一致）
c) text-align 水平对齐方式。值：left|center|right|justify
d) text-decoration 文本的装饰。值：none|underline|overline|line-through
e) white-space 如何处理元素内的空白。值：normal|nowrap(文本不会换行)
f) text-overflow 文本溢出包含元素时发生的事情。(CSS3属性) 值：clip | ellipsis | string -
font: 字体
a) font-size 尺寸。单位：px、em
b) font-weight 粗细。值：normal | bold | bolder | 100-900数值
c) font-family 字体名称序列。
d) CSS3开放字体 -
list-style：项目列表
a) list-style-image 使用图像作为列表项的标志。
b) list-style-position -
CSS盒子模型相关属性：计算某个HTML元素所占窗口的宽和高
a) width,height: 元素原始的宽和高
b) border: 宽度值 样式 颜色; 指定边框的样式。 (solid,dashed)。也可以按照：上、右、下、左的顺序来分别指定。
c) margin: 宽度值; 外边距。(top&bottom right&left; all)
d) padding: 宽度值; 内边距(填充)。
e) css3针对边框新增的属性：border-radius用于指定圆角。box-shadow用于添加阴影。光晕效果。 -
CSS定位：
a) 普通流：元素默认。(position: static)。
b) 相对定位：让元素“相对于”它的起点进行移动。{position: relative; top: 10px; left: 10px}
c) 绝对定位：绝对定位的元素的位置相对于最近的已定位祖先元素。{position: absolute; top: 10px; left: 10px}
固定定位：元素直接相对窗口来确定位置。{position: fixed; top: 10px; left: 10px}
d) 浮动：float属性，值有：left | rigth
clear属性，值有：left | right | both -
其它属性：
a) cursor 鼠标指针采用的光标形状。 值：auto| pointer(手形，各种浏览器兼容)
b) display 元素是否及如何显示。值：block(显示) | none(隐藏)
c) css3的opacity属性：不透明级别(1.0—0.0)
d) filter属性 要使用的滤镜效果。
三、ECMA-Script
1. 背景
- JavaScript: 网景公司开发的一种脚本语言，直接在解释器中(浏览器)执行。
解释型的，使用最多。 - JScript：是微软公司开发的一种脚本语言。
ECMAScript：是ECMA组织推出一套脚本语言的规范。
目前使用的JavaScript1.5遵守ECMAScirpt的第三个版本规范ECMA-262。
2. ECMAScript基础语法
- 标识符：
字母、数字、_、$组成。不能以数字开头。区分大小写。
保留关键字: var、typeof 要获取类型的数据、function、 - 变量：
弱类型语言，声明变量时无须指定类型，使用var关键字来声明：
var 变量名;
var 变量名 = 值;
变量名 = 值; - 基本数据类型：
Number: 数字类型。包括整数，浮点数
Boolean: 布尔类型，只有true和false。另外0/’’/null代表false;其它代表true。
String: 字符串类型。用单引号或双引号引用的Unicode字符序列。支持转义字符：\n - Null类型：
表示还不存在的对象。可看成对象的占位符。 var obj = null;
Undefined：表示声明了变量，但尚未赋值。var obj; - 判断数据类型的运算符：
typeof 变量或值 - 类型转换：
Boolean(value) 把给定的值转换成Boolean型
Number(value) 把给定的值转换成数字(可以是整数和浮点数)
String(value) 把给定的值转换成字符串 - 运算符：
支持Java中的所有运算符，包括算术、赋值、比较、逻辑、三目、逗号运算符。 - 流程控制语句：
if/else, switch/case, while,do/while,for,break,coutinue,return - 函数(方法)的定义：
function 函数名(参数名列表){ …; [return …;]}
a) 不能重载，后定义的函数会覆盖前面定义的同名函数，不管形参列表是否相同。
b) 自定义的函数都可以接收任意个数的参数。
c) 在函数内部的程序代码中，可以使用一个名为arguments对象。这是一个数组对象，其中包含了调用此函数时传递进来的所有参数值。
3. ECMAScript对象编程
- 对象分类：
a) 本地对象(ECMAScript规范中要求的): Object,Number,Boolean,String, Date,Array,RegExp,Function类，可以使用new关键字来创建出对象。
b) 内置对象: Global(根本不存在), Math。特殊的本地对象，解释器默认已经创建出了这个对象，可以直接使用对象上的方法。
c) 宿主对象(跟解释器相关的): DOM, BOM - 重点掌握：String,Date,RegExp,Array
4. 数组
类似Java中集合，是变长的。最多可存储10亿个元素。
a) 创建：var arr = new Array([长度]);
b) 静态初始化：var arr = [值, 值2…]; //可以存放类型不相同的数据。
c) 动态初始化：arr[0] = 值; 使用下标(索引,从0开始)来引用数组中的元素。
d) 属性：length, 用来获取数组中存放的元素个数
e) 方法：toString(),join(“连接符”), reverse(),sort(),push(),pop(),shift(),unshift()
f) 特殊之处：可以使用字符串作为数组的下标。(类似于Java中的Map)、不能用索引来获取元素。
5. JSON
JavaScript Object Notation JavaScript对象表示法。一种轻量级的文本数据交换格式。具有自我描述性，更易理解。
-
语法：
对象用{}包含一系列无序的“名称/值对”集合。“名称”和“值”之间用:分隔，名称/值对之间使用,(逗号)分隔。
数组用[]包含所有值，每个值用逗号分隔。
a) 名称：属性的名称。用字符串类型来表示。
b) 值：属性的值。可以是基本类型数据、其它Object对象或者数组对象。 -
属性值的类型：
a) String类型：用双引号引用的Unicode字符序列。如：“abc”。
"、\、/ 和一些控制符（\b，\f，\n，\r，\t）需要转码。
b) Number类型：数值字面值。
c) Boolean类型：只有true或false 。(没有双引号)
d) null类型：用null字面值
e) 日期时间值：建议使用毫秒值 -
较新的浏览器和最新ECMAScript标准中均包含了原生的JSON解析器。 Firefox(Mozilla) 3.5 、Internet Explorer 8、Chrome、Opera 10、Safari 4
JSON解析器提供的功能：
a) JSON字符串转对象：var obj = JSON.parse(txt);
b) 对象转JSON字符串：var txt = JSON.stringify(obj);
IE8以下版本可以引入：json2.js -
示例：
var obj = {“name”:“张三”, “age”:23, “gender”: true};
obj.name;
obj.age;
var objArr = [{“name”:“张三”, “age”:23, “gender”: true},
{“name”:“李四”, “age”:19, “gender”: false}];
objArr[0].name;练习 ：使用JS产生5个随机且不重复的字母，按字母降序排序输出
3926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
