最近笔记3
来源：互联网 发布：剑道眼镜知乎 编辑：程序博客网 时间：2024/06/05 05:45
5.15爬虫入门
1.网络蜘蛛是通过网页的链接地址来寻找网页的。
从网站某一个页面（通常是首页）开始，读取网页的内容，找到在网页中的其它链接地址，
然后通过这些链接地址寻找下一个网页，这样一直循环下去，直到把这个网站所有的网页都抓取完为止。
如果把整个互联网当成一个网站，那么网络蜘蛛就可以用这个原理把互联网上所有的网页都抓取下来。
这样看来，网络爬虫就是一个爬行程序，一个抓取网页的程序。
2.打开网页的过程其实就是浏览器作为一个浏览的“客户端”，向服务器端发送了 一次请求，把服务器端的文件“抓”到本地，再进行解释、展现。
HTML是一种标记语言，用标签标记内容并加以解析和区分。
浏览器的功能是将获取到的HTML代码进行解析，然后将原始的代码转变成我们直接看到的网站页面。
3.什么是URI？
Web上每种可用的资源，如 HTML文档、图像、视频片段、程序等都由一个通用资源标志符(Universal Resource Identifier， URI)进行定位。
URI通常由三部分组成：
①访问资源的命名机制；
②存放资源的主机名；
③资源自身 的名称，由路径表示。
如下面的URI：
http://www.why.com.cn/myhtml/html1223/
我们可以这样解释它：
①这是一个可以通过HTTP协议访问的资源，
②位于主机 www.webmonkey.com.cn上，
③通过路径“/html/html40”访问。
4.URL是URI的一个子集。它是Uniform Resource Locator的缩写，译为“统一资源定位 符”。
通俗地说，URL是Internet上描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上。
采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。
URL的一般格式为(带方括号[]的为可选项)：
protocol :// hostname[:port] / path / [;parameters][?query]#fragment
URL的格式由三部分组成：
①第一部分是协议(或称为服务方式)。
②第二部分是存有该资源的主机IP地址(有时也包括端口号)。
③第三部分是主机资源的具体地址，如目录和文件名等。
第一部分和第二部分用“://”符号隔开，
第二部分和第三部分用“/”符号隔开。
第一部分和第二部分是不可缺少的，第三部分有时可以省略。
5.URL和URI简单比较
URI属于URL更低层次的抽象，一种字符串文本标准。
换句话说，URI属于父类，而URL属于URI的子类。URL是URI的一个子集。
URI的定义是：统一资源标识符；
URL的定义是：统一资源定位符。
二者的区别在于，URI表示请求服务器的路径，定义这么一个资源。
而URL同时说明要如何访问这个资源（http://）。
5.15js
1.js的对象是一种无序的集合数据类型，它由若干键值对组成，它用来描述现实世界中的某个对象，如：
var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
{...}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。注意，最后一个键值对不需要在末尾加,
访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用''括起来，访问不存在的属性不会报错，而是返回undefined。
2.js的对象是动态类型，我们可以自由的给一个对象添加或删除（delete）属性，用in操作符来检测某一对象是否具有某一属性，如：
'name' in xiaoming; // true
'grade' in xiaoming; // false
但是需要注意，用in判断一个属性存在，这个属性有可能是该对象通过继承得到的。而如果要判断一个属性是否是该对象自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法。
3.JavaScript使用if () { ... } else { ... }来进行条件判断。如果还要更细致地判断条件，可以使用多个if...else...的组合。如：
var age = 3;
if (age >= 18) {
alert('adult');
} else if (age >= 6) {
alert('teenager');
} else {
alert('kid');
}
请注意，if...else...语句的执行特点是二选一，在多个if...else...语句中，如果某个条件成立，则后续就不再继续判断了，条件判断的顺序非常重要。
4.试看如下代码：
var s = '123';
if (s.length) { // 条件计算结果为3
//
}
请注意，JavaScript把null、undefined、0、NaN和空字符串''视为false，其他值一概视为true，因此上述代码条件判断的结果是true。
5.16css网页布局三列
1.实战代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 210px 0 310px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0; float:right; background:#FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
<div class="right">right</div>
</body>
</html>
2.代码实战2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{width:100%; height:80px; background:gray;}
.main{width:100%; height:800px; background:red;}
.left{width:200px;height:800px;background:blue;position:absolute;}
.right{margin-left:210px; height:800px; width:100%; background:green; position:absolute;}
.foot{width:100%; height:80px; background:yellow; clear:both;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
3.一个小的新春贺卡demo分析学习。
学习目标：
#了解整套项目的需求、剖析及其开发
#了解基本的项目开发流程
#灵活运用切图、重构等前端知识
#提高自己的项目意识、团队意识，对大型项目的开发积累经验
需求分析：
#项目主题：确定采取何种表现形式
#设计稿图层分析，多页视图放到一个网页文档，采取视觉差特效完成分页展示（初步可能只能拿到psd文件）
#音乐是否跟随翻页，位置是否固定，播放时是否旋转，是否可以暂停
#需求的沟通和确认
开发技能分析
#移动端项目，采用html5作为项目的结构层
#分析网页呈现趋势，直接采用css3完成网页的表现层
#特效分析，采用css3完成主要特效，采用javas控制交互
#背景音乐直接采用javascript控制Audio的API进行控制
#采用原生态的javascript控制css实现翻页效果（放弃前端框架和类库）
性能优化分析：
#项目为移动端项目，尽可能简化结构层标签。
#尽可能少用图片，尽量直接用css3控制标签完成图片效果。
#尽可能减小文件大小，压缩图片到无损最小值。
#减少服务器请求次数，用原生态javascript替代zepto等前端框架。
项目开发：
流程：切图—重构—前端—优化
#减小图片文件，背景图片采用jpg格式，其他图片采用png24透明格式
#小型项目，直接采用html5+css3完成
#采用javascript控制html5API完成前端特效
#测试并优化整体网站性能，采用WampServer为本地服务器测试环境
5.17小demo学习继续
1.css长度单位：
CSS3长度单位 vw、vh（移动端自适应）
h1 {font-size: 8vw;}
(vw这个数值*当前视口的宽度)/100 = h1元素的字号 /*元素的字号单位是mm*/
vw这个数值 = (h1元素的字号*100)/当前视口的宽度
2.position：fixed；
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
solid #ef1639
solid是实线，不是颜色
例如：
border : solid 1px black;
意思就是设置边框样式为实线，宽度1像素，颜色黑色
z-index： 5；
当你定义的CSS中有position属性值为absolute、relative或fixed，
用z-index此取值方可生效。
此属性参数值越大，则被层叠在最上面。
三个CSS，将根据z-index的值决定谁在最上层。在z-index属性值相同的情况下，后声明的会覆盖先前声明的标签
border-radius：50%；
用来设置圆角。
3.表示层：bg
5.17node.js基础
1.它本质是一种javascript的运行环境，最初是由c++编写的，它打破了前后端的界限。它可以：解析js代码（而没有浏览器安全级的限制），提供系统级别的API（Application Programming Interface,应用程序编程接口是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。）:如文件的读写、进程的管理、网络通信等
2.学习网站推荐：
node.js官网
www.npmjs.com
www.github.com
www.stackoverflow.com
3.node.js小数位偶数为稳定版本，例如：－0.6.x <br>
小数位奇数为测试版本，例如：－0.7.x（功能不稳定，api可能会在正式版本中修改）
4.git bash下载
在cmd中输入node -v 和npm -v 若出现版本号，则说明完成了。
5.17web
1.使用mailto在网页中链接email地址。如：
<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感。&body=你好，对此评论有些想法。">对此影评有何感想，发送邮件给我</a>
其中，如果mailto后面是收件人地址，如果有多个收件人，收件地址是用分号隔开。mailto后同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。还有cc=地址（抄送地址），bcc=地址（密件抄送地址）
2.认识<img>标签
语法：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
#src：标识图像的位置；
#alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
#title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
#图像可以是GIF，PNG，JPEG格式的图像文件。
3.使用表单标签与用户交互
网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：
<form method="传送方式" action="服务器文件">
#<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
#action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
#method ： 数据传送的方式（get/post）。
举例：
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
注意:
#所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可提交不到服务器上哦！）。
4.文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
语法：
<form>
<input type="text/password" name="名称" value="文本" />
</form>
#type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
#name：为文本框命名，以备后台程序ASP 、PHP使用。
#value：为文本输入框设置默认值。(一般起到提示作用)
举例：
<form>
姓名：
<input type="text" name="myName">
<br/>
密码：
<input type="password" name="pass">
</form>
5.文本域，支持多行文本输入
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法：
<textarea rows="行数" cols="列数">文本</textarea>
#<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
#cols ：多行输入域的列数。
#rows ：多行输入域的行数。
#在<textarea></textarea>标签之间可以输入默认值。
举例：
<form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
6.使用单选框，复选框，让用户选择
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
#type:
当 type="radio" 时，控件为单选框
当type="checkbox" 时，控件为复选框
#value：提交数据到服务器的值（后台程序PHP使用）
#name：为控件命名，以备后台程序 ASP、PHP 使用
#checked：当设置 checked="checked" 时，该选项被默认选中
注意：同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
7.使用下拉列表，节省空间
如下代码（value为向服务器提交的值，标签间为显示的值）：
例子：
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
1.网络蜘蛛是通过网页的链接地址来寻找网页的。
从网站某一个页面（通常是首页）开始，读取网页的内容，找到在网页中的其它链接地址，
然后通过这些链接地址寻找下一个网页，这样一直循环下去，直到把这个网站所有的网页都抓取完为止。
如果把整个互联网当成一个网站，那么网络蜘蛛就可以用这个原理把互联网上所有的网页都抓取下来。
这样看来，网络爬虫就是一个爬行程序，一个抓取网页的程序。
2.打开网页的过程其实就是浏览器作为一个浏览的“客户端”，向服务器端发送了 一次请求，把服务器端的文件“抓”到本地，再进行解释、展现。
HTML是一种标记语言，用标签标记内容并加以解析和区分。
浏览器的功能是将获取到的HTML代码进行解析，然后将原始的代码转变成我们直接看到的网站页面。
3.什么是URI？
Web上每种可用的资源，如 HTML文档、图像、视频片段、程序等都由一个通用资源标志符(Universal Resource Identifier， URI)进行定位。
URI通常由三部分组成：
①访问资源的命名机制；
②存放资源的主机名；
③资源自身 的名称，由路径表示。
如下面的URI：
http://www.why.com.cn/myhtml/html1223/
我们可以这样解释它：
①这是一个可以通过HTTP协议访问的资源，
②位于主机 www.webmonkey.com.cn上，
③通过路径“/html/html40”访问。
4.URL是URI的一个子集。它是Uniform Resource Locator的缩写，译为“统一资源定位 符”。
通俗地说，URL是Internet上描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上。
采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。
URL的一般格式为(带方括号[]的为可选项)：
protocol :// hostname[:port] / path / [;parameters][?query]#fragment
URL的格式由三部分组成：
①第一部分是协议(或称为服务方式)。
②第二部分是存有该资源的主机IP地址(有时也包括端口号)。
③第三部分是主机资源的具体地址，如目录和文件名等。
第一部分和第二部分用“://”符号隔开，
第二部分和第三部分用“/”符号隔开。
第一部分和第二部分是不可缺少的，第三部分有时可以省略。
5.URL和URI简单比较
URI属于URL更低层次的抽象，一种字符串文本标准。
换句话说，URI属于父类，而URL属于URI的子类。URL是URI的一个子集。
URI的定义是：统一资源标识符；
URL的定义是：统一资源定位符。
二者的区别在于，URI表示请求服务器的路径，定义这么一个资源。
而URL同时说明要如何访问这个资源（http://）。
5.15js
1.js的对象是一种无序的集合数据类型，它由若干键值对组成，它用来描述现实世界中的某个对象，如：
var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
{...}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。注意，最后一个键值对不需要在末尾加,
访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用''括起来，访问不存在的属性不会报错，而是返回undefined。
2.js的对象是动态类型，我们可以自由的给一个对象添加或删除（delete）属性，用in操作符来检测某一对象是否具有某一属性，如：
'name' in xiaoming; // true
'grade' in xiaoming; // false
但是需要注意，用in判断一个属性存在，这个属性有可能是该对象通过继承得到的。而如果要判断一个属性是否是该对象自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法。
3.JavaScript使用if () { ... } else { ... }来进行条件判断。如果还要更细致地判断条件，可以使用多个if...else...的组合。如：
var age = 3;
if (age >= 18) {
alert('adult');
} else if (age >= 6) {
alert('teenager');
} else {
alert('kid');
}
请注意，if...else...语句的执行特点是二选一，在多个if...else...语句中，如果某个条件成立，则后续就不再继续判断了，条件判断的顺序非常重要。
4.试看如下代码：
var s = '123';
if (s.length) { // 条件计算结果为3
//
}
请注意，JavaScript把null、undefined、0、NaN和空字符串''视为false，其他值一概视为true，因此上述代码条件判断的结果是true。
5.16css网页布局三列
1.实战代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 210px 0 310px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0; float:right; background:#FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
<div class="right">right</div>
</body>
</html>
2.代码实战2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{width:100%; height:80px; background:gray;}
.main{width:100%; height:800px; background:red;}
.left{width:200px;height:800px;background:blue;position:absolute;}
.right{margin-left:210px; height:800px; width:100%; background:green; position:absolute;}
.foot{width:100%; height:80px; background:yellow; clear:both;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
3.一个小的新春贺卡demo分析学习。
学习目标：
#了解整套项目的需求、剖析及其开发
#了解基本的项目开发流程
#灵活运用切图、重构等前端知识
#提高自己的项目意识、团队意识，对大型项目的开发积累经验
需求分析：
#项目主题：确定采取何种表现形式
#设计稿图层分析，多页视图放到一个网页文档，采取视觉差特效完成分页展示（初步可能只能拿到psd文件）
#音乐是否跟随翻页，位置是否固定，播放时是否旋转，是否可以暂停
#需求的沟通和确认
开发技能分析
#移动端项目，采用html5作为项目的结构层
#分析网页呈现趋势，直接采用css3完成网页的表现层
#特效分析，采用css3完成主要特效，采用javas控制交互
#背景音乐直接采用javascript控制Audio的API进行控制
#采用原生态的javascript控制css实现翻页效果（放弃前端框架和类库）
性能优化分析：
#项目为移动端项目，尽可能简化结构层标签。
#尽可能少用图片，尽量直接用css3控制标签完成图片效果。
#尽可能减小文件大小，压缩图片到无损最小值。
#减少服务器请求次数，用原生态javascript替代zepto等前端框架。
项目开发：
流程：切图—重构—前端—优化
#减小图片文件，背景图片采用jpg格式，其他图片采用png24透明格式
#小型项目，直接采用html5+css3完成
#采用javascript控制html5API完成前端特效
#测试并优化整体网站性能，采用WampServer为本地服务器测试环境
5.17小demo学习继续
1.css长度单位：
CSS3长度单位 vw、vh（移动端自适应）
h1 {font-size: 8vw;}
(vw这个数值*当前视口的宽度)/100 = h1元素的字号 /*元素的字号单位是mm*/
vw这个数值 = (h1元素的字号*100)/当前视口的宽度
2.position：fixed；
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
solid #ef1639
solid是实线，不是颜色
例如：
border : solid 1px black;
意思就是设置边框样式为实线，宽度1像素，颜色黑色
z-index： 5；
当你定义的CSS中有position属性值为absolute、relative或fixed，
用z-index此取值方可生效。
此属性参数值越大，则被层叠在最上面。
三个CSS，将根据z-index的值决定谁在最上层。在z-index属性值相同的情况下，后声明的会覆盖先前声明的标签
border-radius：50%；
用来设置圆角。
3.表示层：bg
5.17node.js基础
1.它本质是一种javascript的运行环境，最初是由c++编写的，它打破了前后端的界限。它可以：解析js代码（而没有浏览器安全级的限制），提供系统级别的API（Application Programming Interface,应用程序编程接口是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。）:如文件的读写、进程的管理、网络通信等
2.学习网站推荐：
node.js官网
www.npmjs.com
www.github.com
www.stackoverflow.com
3.node.js小数位偶数为稳定版本，例如：－0.6.x <br>
小数位奇数为测试版本，例如：－0.7.x（功能不稳定，api可能会在正式版本中修改）
4.git bash下载
在cmd中输入node -v 和npm -v 若出现版本号，则说明完成了。
5.17web
1.使用mailto在网页中链接email地址。如：
<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感。&body=你好，对此评论有些想法。">对此影评有何感想，发送邮件给我</a>
其中，如果mailto后面是收件人地址，如果有多个收件人，收件地址是用分号隔开。mailto后同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。还有cc=地址（抄送地址），bcc=地址（密件抄送地址）
2.认识<img>标签
语法：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
#src：标识图像的位置；
#alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
#title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
#图像可以是GIF，PNG，JPEG格式的图像文件。
3.使用表单标签与用户交互
网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：
<form method="传送方式" action="服务器文件">
#<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
#action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
#method ： 数据传送的方式（get/post）。
举例：
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
注意:
#所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可提交不到服务器上哦！）。
4.文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
语法：
<form>
<input type="text/password" name="名称" value="文本" />
</form>
#type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
#name：为文本框命名，以备后台程序ASP 、PHP使用。
#value：为文本输入框设置默认值。(一般起到提示作用)
举例：
<form>
姓名：
<input type="text" name="myName">
<br/>
密码：
<input type="password" name="pass">
</form>
5.文本域，支持多行文本输入
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法：
<textarea rows="行数" cols="列数">文本</textarea>
#<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
#cols ：多行输入域的列数。
#rows ：多行输入域的行数。
#在<textarea></textarea>标签之间可以输入默认值。
举例：
<form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
6.使用单选框，复选框，让用户选择
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
#type:
当 type="radio" 时，控件为单选框
当type="checkbox" 时，控件为复选框
#value：提交数据到服务器的值（后台程序PHP使用）
#name：为控件命名，以备后台程序 ASP、PHP 使用
#checked：当设置 checked="checked" 时，该选项被默认选中
注意：同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
7.使用下拉列表，节省空间
如下代码（value为向服务器提交的值，标签间为显示的值）：
例子：
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
#设置selected="selected"属性，则该选项就被默认选中。
0 0
- 最近笔记3
- 最近笔记
- 最近笔记
- 最近的一些笔记
- 最近一点小笔记
- 最近知识点笔记
- 最近学习笔记
- 最近学习笔记
- 最近笔记2
- 最近的笔记整理
- 最近的git笔记
- 笔记：android4.3 添加清除最近使用应用按钮
- 整理一下最近的笔记
- 最近的性能优化笔记
- 最近的一些设计笔记
- [笔记]: LCA最近公共祖先
- 学习ajax最近的笔记
- 最近的一些基础笔记
- How to Install Android in VirtualBox
- POJ, 3723 Conscription(最小生成树)
- [bzoj4500]矩阵
- 启动tomcat提示mysql-connector驱动找不到
- 【NOIP2013模拟】KC看星
- 最近笔记3
- sdut 3252 Lowest Unique Price set
- 二维数组查找目标值
- 第11周补充项目3-点类派生直线类
- 《七周七语言》之ruby练习2
- Interface Default Static
- POJ 1003 （水题）
- Caffe框架源码剖析(1)—构建网络
- Hello World
