如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一、WEB概述 (!!掌握web发展过程图、B/S和C/S架构的特点)
B/S: Browser-Server 浏览器服务器模型 WEBQQ 网页游戏
优点: 不需要下载客户端程序, 使用浏览器可以直接访问. 程序的升级操作是在服务器端进行的. 浏览器只需要刷新页面就可以看到升级后的效果
缺点: 浏览器具有一定的局限性, 页面的展示能力仍然是很差. 所有的页面数据都需要从服务器实时的获取, 所以对网速的依赖很高
C/S: Client-Server 客户端服务器模型 QQ LOL
优点: 客户端可以任意的设计, 页面的展示能力就可以很强. 由于大量的资源都已经保存在了客户端, 和服务器交互的仅仅是一些变化的数据, 所以对网速的依赖很低
缺点: 第一次使用时需要下载客户端程序, 一旦程序需要升级操作, 所有的客户端程序都需要升级. 在有些场景中是不能被接受的.
二、HTML
1.HTML是什么
超文本标记语言 最基础的网页语言 W3C
HTML不是一门编程语言 而是一门标记语言
HTML是用标记(标签/元素)来描述网页内容的
HTML是文档的一种
2.html的结构 (掌握)
<!DOCTYPE HTML>
<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>
<!DOCTYPE HTML>用来指定当前页面所遵循的html的版本
头部分用来存放html页面的基本属性信息 优先被加载
体部分用来存放页面数据,是可见的页面内容
<title></title>指定网页的标题
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />其中的charset的值用来指定浏览器用什么编码解析当前页面
3.html语法 (掌握)
html标签分为开始标签和结束标签,如果标签内没有修饰的内容, 开始标签和结束标签可以合并为一个自闭标签
如: <br/> <hr/>
标签通常都可以具有属性 属性与属性值用"="连接,属性的值可以用双引号、单引号引起来或者不用引号 一般会用双引号引起来
<!-- html的注释 -->
html中多个连续的空白字符(制表符,空格,换行)默认会合并为一个空格来显示
如果非要输入空格,可以用转义字符来替代
如果非要输入换行,可以用 <br/> 来替代
4.font标签 -- 用来指定文本的字体/大小/颜色 (了解)
size:指定字体大小 范围是 1~7 默认值为3
color:指定字体颜色
值可以指定为颜色名 如red
或 十六进制的颜色值 如#000000
或 rgb三原色值 如rgb(255,255,255)
face:指定字体 中文默认是宋体
5.标题标签 -- 指定特定样式字体的一组标签 (掌握)
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
属性:
align:指定文本的排列
left
center
right
justify
6.转义字符 (掌握)
< <
> >
" "
' '
空格
7.列表标签
(1)定义列表 (了解)
<dl> 定义一个定义列表
<dt> 定义定义列表中的标题
<dd> 定义定义列表中的项
(2)有序列表 (了解)
<ol> 定义一个有序列表
<li> 定义列表中的项
属性:
type:定义项目符号的类型
A a I i 1(默认)
start:定义项目符号的起始值
(3)无序列表 (掌握)
<ul> 定义一个无序列表
<li> 定义列表中的项
属性:
type:定义项目符号的类型
disc square circle
8.img标签 -- 图像标签 (!!掌握)
<img src="图片的路径" alt="图像的替代文本"/>
必选属性:
src:图片的路径
alt:图像的替代文本
可选属性:
width:宽度 px %
height:高度 px %
border:边框的宽度 px
9.map标签 (了解)
为图像绑定可点击区域的图像映射
<map name="" id="">
<area shape="circle" coords="640,410,64" href="#" />
</map>
属性:
shape: 指定区域的形状
coords: 指定区域的坐标
href: 点击区域后跳转资源的URL
10.超链接 -- <a> 锚 (!!掌握)
用于指向当前位置以外的资源
(1) 用于创建指向另外一个文档的超链接
(2) 用于在当前页面的不同位置之间进行跳转
重要属性:
href: 所指向资源的URL
name: 指定锚的名字
target: 指定浏览器打开目标URL的方式。
_blank 在新窗口中打开目标url
_self 在当前窗口中打开目标url
11.表格标签 -- <table> (!!!掌握)
<table> 定义一个HTML表格
<tr> 定义表格中的行
<td> 定义表格中的单元格
<th> 定义表格中的表头
table的重要属性:
border 边框宽度
cellspacing 单元格之间的空白
cellpadding 边框与单元格内容之间的距离
bgcolor 背景颜色
bordercolor 边框颜色
width 宽度
align 对齐方式
tr重要属性:
align 对齐方式
bgcolor 背景颜色
th/td重要属性:
align 对齐方式
bgcolor 背景颜色
width 宽度
height 高度
colspan 可横跨的列数
rowspan 可竖跨的行数
<caption> 定义表格的标题
<thead>
<tfoot>
<tbody>(可以出现多次).
三个标签要么都没有,要么就必须一起使用,并且出现的顺序必须是thead,tfoot,tbody
如果没有使用这三个标签, 那么<table>里面所有的内容都会隐含在一个隐藏的<tbody>标签内
12.框架标签 (了解)
<frameset>
<frame>
框架标签需要写在head和body的中间
<frameset>属性:
rows 定义框架集中行的数目和尺寸
cols 定义框架集中列的数目和尺寸
<frame>属性:
src 定义目标文档的URL
noresize 规定无法调整框架的大小
frameborder 是否显示框架周围的边框
name 框架的名字
target 打开目标URL的方式
_blank 在新窗口中打开目标url
_self 在当前窗口打开目标URL
_parent 在父窗口中打开目标URL
_top 打开时忽略所有框架在当前页面打开url
framename
<iframe>
创建包含另一个文档的行内框架
<iframe>标签永远不要自闭!! 可以在标签内部存放提示文本 如果浏览器不支持iframe 该文本会显示
属性:
src
width
height
13.表单 (!!!掌握)
(1)浏览器向服务器发送数据的方式, 有两种
a)利用超链接向服务器发送数据 -- 请求参数
在超链接的后面拼接上要发送的请求参数, 链接和请求参数之间用?分割, 参数名和参数值用 = 连接, 多个参数之间用 & 分割, 可以存在多个同名的参数
b)利用表单向服务器发送数据
利用HTML中的<form>标签以及一些表单项标签, 用户可以输入数据, 通过提交表单发送数据给服务器
(2)form
必须存在的属性:
action: 指定表单发送的目标URL地址
可选的属性:
method: 指定以何种方式发送表单
http协议指定了7种提交方式, 其中5种不用, 只用GET提交和POST提交
只有使用表单并且明确的指定提交方式为post时(也就是设置method="POST")才是POST提交，其他提交都是GET提交．
GET提交和POST提交的区别：
主要区别体现在数据传输方式的不相同
a)GET提交: 请求参数会赋在地址栏后进行传输
这种方式发送的数据量有限, 最大不超过1kb(4kb)
数据显示在地址栏, 安全性差
b)POST提交: 请求参数在底层流中传输
这种方式发送的数据量无限制
地址栏上看不到数据, 比较安全
14.表单中的项 (!!!掌握)
表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它
(1)<input> 输入框
重要属性:
type属性
文本框 text 输入的文本信息直接显示在框中
密码框 password 输入的文本以圆点或者星号的形式显示
单选框 radio 进行单项的选择 如性别选择 多个radio的name属性相同会被当作一组来使用 必须用value为选项指定提交的值
复选框 checkbox 进行多项选择，爱好的选择。 多个checkbox具有相同的name属性时会被当作一组来使用 必须用value为选项指定提交的值
隐藏字段 hidden 如果有一些信息，不希望用户看见，又希望表单能够提交，就可以用隐藏字段隐含在表单中
提交按钮 submit 实现表单提交操作的按钮 可以通过value属性指定按钮显示的文字
重置按钮 reset 重置表单到初始状态
按钮 button 普通按钮, 没有任何功能 需要配合JavaScript为按钮指定具体的行为。可以用value属性指定按钮显示的文字。
文件上传项 file 提供选择文件进行上传的功能。
图像 image 利用一张图片替代提交按钮的功能, 不常用
name属性
表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它. 另外name属性的值是可以重复的
value属性 可以给input输入框设置一个初始值
readonly属性
使当前输入项变为只读,不能修改,但是提交时仍会被提交
disabled
使当前输入项不可用,不能修改值,也不会被提交
size属性
指定当前输入框的宽度
checked属性
指定单选框/复选框被选中
(2)<textarea> 文本域
属性:
rows 指定文本域的行数(高度)
cols 指定文本域的列数(宽度)
readonly 只读
disabled 禁用
(3)<select> <option>
select 提供下拉选择功能
option 下拉选框中的选项 可以用value属性指定提交的值,如果不指定,将会提交标签内的文本
重要属性:
name: 下拉列表的名称
size: 设置下拉选项中可见选项的个数
disabled 禁用下拉选框
multiple 是否支持多选
(4)<fieldset><legend> (了解 可以不练习)
<fieldset> 对表单中的表单项进行分组
<legend> 为分组设置标题
15.其他标签 (了解 可以不练习)
<marquee>
属性:
scrollAmount 设置文字滚动速度 默认值是6
direction 滚动方向 left right down up
behavior 滚动行为 scroll alternate slide
<pre>
可以将文本内容按照代码区的样子显示在页面上
<b> 加粗
<i> 斜体
<u> 下划线
<s> 删除线
<em> 强调
<strong> 更加强烈的强调
<sub> 下标
<sup> 上标
16.注册表单练习 (!!!掌握 自己能够独立的做出来)
略
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com