第一课 网页设计简介
万维网（World Wide Web）超文本 检索
W3C负责维护与制定标准
www.w3school
URL、IP
设计静态网页的技术：
HTML（HyperText Markup Language）组织页面内容
CSS（Cascade Style Sheets）修饰与定位网页内容
JS（JavaScript）处理事件、验证等交互
HTML标记
<；开始标签 [属性=”值” …]>内容</结束标签>
<；开始标签></结束标签>或<；开始标签/>，HTML还支持单标签<；开始标签>
标记可以嵌套，但是不能交叉
标记不区分大小写
注释：<!-- -->
开发工具：
记事本
Editplus
Dreamweaver
MyEclipse（Java）
Visual Studio（C#）
浏览器：
IE（360、搜狗、TT、遨游）
Mozilla FireFox
Safari
Chrome
Opera
第二章 HTML基础介绍
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
第三章 文字与段落
标题文字：
h1…h6 标题文字是块标记 align属性是控制文本水平对齐方式的
特殊：
空格  ；或者�
> >
< <
& &
注释：<!-- --> 和 <comment></comment>，不能嵌套
段落标记：p，br
Font标记：
<font face=”字体名称” size=”字体大小” color=”字体颜”></font>
文字效果
<b><i><address><u><del><s><hr><pre><blockquote><center>
第四章 列表
1. 中国
2. 美国
3. 英国
4. 韩国
5. 法国
无序列表：<ul>unorder list  <li>list item
type: circle，disc，square
有序列表：<ol>order list  <li>
type：1，A，a，I，i
start：起始值（以数字表示）
自定义列表：<dl>defined list <dt> <dd>
嵌套列表：
第八章 框架
标记：<frameset border=”边框宽度” bordercolor=”边框颜” noresize rows=”水平拆分可以用*分配剩余空间” cols=”垂直拆分” scrolling=”auto | yes | no”>
<frame src=”网页来源” name=”框架名称” marginwidth=”框架中内容与边界的边距” marginheight=””>
注意：frame必须在frameset中，frameset不能和body共存。框架网页只负责分割页面区域，不能包含其他页面内容。
浮动框架：<iframe>是独立的框架不需要frameset包裹，跟body也没有冲突，控制比较随意
注意：当今浏览器对框架的支持都很弱且各不相同，所以网页人员基本舍弃这种布局方法
第五章 超链接
a标记
属性：
1. href=”URL” 链接资源路径
2. target=”_self | _top | _parent | _blank | <framename>” 资源出现的位置。默认_self
分别代表：自身所在位置、上一层、父级容器、新窗口、指定名称的框架
3. title=”鼠标悬浮时的提示信息”
4. name=”作为书签时定义的位置名称”
相对位置和绝对位置
网页中所谓的绝对位置往往是从Web服务器的根目录出发，现在还无需关注
而与相对位置相关的一些概念：
. 代表当前目录，默认可以不写
.. 代表上一级目录
/ 代表根目录
书签（锚）：用书签来理解这种应用
在使用书签之前，要先放置书签，就是加锚标记：<a name=”锚标记名”>xxx</a>
使用书签：同一文件锚的访问<a href=”#锚标记名”>xxx</a>
不同文件锚的访问<a href=”URL#锚标记名”>xxx</a>
<a href="../demo_1/author.html#tag2">用T-SQL语句附加数据库</a>
邮件链接 <a href="mailto:zhangsan@gmail?subject=我是标题&body=我是内容&cc=lisi@gmail&bcc=wangwu@gmail"></a>
mailto实际上是去启动本地邮件客户端
下载链接
浏览器对于超链接指向的资源，如果自身能够解释，则处理它；
如果自身解释不了，则调用客户端本地软件或者弹出下载对话框。
图片链接
<a href="acle">
<img src="../resources/oracle.png" width="300px" height="300px" border="0" alt="点击这里去oracle首页" hspace="50" vspace="50"/>
</a>
多媒体
<bgsound src=”#”  loop=”n”> 不同浏览器对相对路径和绝对路径的支持？
<embed src=”#” loop=”n” autostart=”false”/>
<object classid=”” codebase=””><param name=”” value=””/></object>
表格
容纳数据：
Table 是表格的起始
属性：border/bordercolor/width/cellpadding/cellspacing/align/bgcolor
Caption
Tr：align/width/valign
Td：colspan、rowspan
Th
布局：
表格嵌套的时候，子表格一定是被外部表格的td包围，而不该出现在其他位置
表单
接收用户的输入，收集必要的信息
<form action=”提交目的地” method=”get | post”>表单内容及各种表单域</form>
Mothod默认是get方式提交，get方式是明文提交，且追加在URL后面：
URL?name=value&name1=value1&……
<input>
Type： text  单行文本框
Password  密码框
Radio  单选框  相同name为一组（同组互斥）
Checkbox 复选框
Submit  提交按钮
Reset  重置按钮
Button  普通按钮
Image  图片按钮（提交）
File  选择文件
Hidden  隐藏域
Name：可以重复。表单只提交有name的表单域的value
Id：便于CSS或者JavaScript查定位（id理论上在一个HTML中只能有一个）
Value：在按钮上的文字、在文本框和密码框中的内容、单选和复选提交的值、如果是submit或者reset、button按钮则直接显示为按钮上的文字
Checked：单选或者复选的默认选中
（自说明属性，有它和无它已经说明两种状态。在HTML中它直接就说明问题，但是在XHTML中，不允许没有值的属性存在，所以要写成：checked=”checked”）
Size：文本框和密码框能显示的字符数
Maxlength：文本框和密码框最多接收输入的字符数
<label for=”联动控件的id”>文本</label>
<fieldset>
<legend
>组名</legend>
……
</fieldset>
下拉框或者列表框： <select name=”” multiple=”multiple” size=”显示条目数”>
<optgroup label=”组名”>
<option value=”” selected=”selected”>显示文本</option>
……
</optgroup>
</select>
多行文本域
<textarea cols=”一行最多显示的字符数” rows=”能显示多少行字符” wrap=”virtual | physical | off”>
文本中的特殊符号不会解释，不需要转移。但是转义字符会解释。
</textarea>
<button type=”button | submit | reset”>按钮上的字</button>
CSS
Cascading Style Sheets，层叠样式表
语法：selector {
attrName:attrVaule;
……
}
CSS属性名一般都不用缩写，如果组成名称的单词超过一个，中间用【-】组合成一个复合词
引入方式：
内嵌：<element style=”attrName: attrValue; ……”>
优点：直接简单
缺点：高耦合，不能重用
内联：在<head>中定义<style>
<style type=”text/css”>
Selector {……}
……
</style>
优点：可以被同一个HTML共享
缺点：不能跨HTML文件共享
外联：①创建【.css】后缀名的CSS文件
②在HTML的<head>中引入
嵌入：
<style type=”text/css”>
@import url(“css文件的URL路径”);
</style>
优点：跨HTML重用
缺点：会将CSS文件代码潜入进HTML
链接：
<link rel=”StyleSheet” type=”text/css” href=”cssURL”/>
优点：内容与样式分离
分工可能
HTML简化
搜索引擎方便
样式重用
降低耦合
优先级：内嵌>内外联（在<head>中，写在后面的优先（覆盖前面））
选择器：
l 元素选择器：element {}
优点：无需添加额外信息
缺点：不能个别控制
l 类选择器：.className {}
优点：可以个别控制，最常用的一种
缺点：需要给元素添加class属性
可以给一个元素同时指定多个class，用空格隔开（写在CSS文件中靠后的优先（后者覆盖前者），与元素的class属性值的先后无关）
l ID选择器：#idName {}
优点：可以精确控制某一个元素
缺点：需要给元素添加id属性
优先级：id>class>element
常用属性
字体相关：
<font face=”” size=”” color=””><b><i><u><s>
Font-family  <font face=””>
Font-size: Npx | xx-small | medium | xx-large  <font size=”1-7 | +n | -n”>
Color: colorName | #FFFFFF | #FFF | rgb(255,255,255) | rgb(%,%,%) <font color=””>
Font-weight: normal | lighter | bold | bolder | 100-500 | 600-900  <b><strong>
Font-style: normal | italic | oblique  <i><em>
Text-decoration: none | underline（<u>） | line-through(<s><del>) | overline | blink(<blink>)
Font-variant: normal | small-caps
Font: font-style font-variant font-weight font-size/line-height font-family
组合属性，CSS
将多个属性的值统一写在一起。这样简化代码，采用默认值的可以不写，但是要按要求的顺序，值之间用空格分隔
文本相关：
Text-indent: Npx | N% 首行缩进
Letter-sapcing:Npx | N% 字符间距
Line-height:normal | Npx 单行高度
Text-align: left | center | right | justify  内容对齐方式
Vertical-align: top | middle | bottom | base-line | text-top | sub | super
背景相关：
Background-color:
Background-image: url(“”);
Background-repeat: repeat | no-repeat | repeat-x | repeat-y;
Background-attachment: scroll | fixed;
Background-position: Npx | N% | {top | center | bottom | left | right};
Background: color image repeat attachment position
伪类(选择器)：
:link  当超链接从未被点击的时候
:hover 当鼠标悬停在超链接上时
:active 正在点击超链接时
:visited 被点击过的超链接
Visited一旦指定了color，就会覆盖hover和active的color
鼠标光标：
Cursor：auto | wait | move | pointer | text | help | url(“xxx.cur”)
盒子模型：
Content
Border：
Border: width style color 统一控制四个边框的宽度、样式、颜
Border-style: solid | dotted | dashed | double 控制四个边框的线条样式（1个值：四个边统一；2个值：上下边和左右边分别控制；3个值： 上、左右、下分别控制；4个值：上、右、下、左边分别控制）
Border-bottom: width style color 只控制下边框
Border-left-color    只控制左边框的颜
Padding(内容与边框的边距)
Margin（各个盒子边框之间的间距）
标准流：按照文档流的先后顺序排列元素
区域元素：
块元素：
前后会换行，独占一行
可以包含任何元素
P,div
行内元素：
与其他行内元素共处一行
只能包含行内元素
不支持width和height控制大小的属性
html网页设计超链接
A,input,font,span
互换： display:  normal | inline | block | none;
浮动：
Float: none | left | right  (以左浮动为例)尽量往左靠，遇到边界或者其他浮动元素停止。将右侧空间留给其他元素使用，其他元素如果容纳不下，会往下掉。
Clear: none | left | right | both  (以左清除浮动为例)不去使用左浮动留出的右侧空间。Both是左右浮动留出的空间都不会用。
定位：
Position:
Static: 固定不动。Top和left等坐标属性无效。
Relative: 相对于文档流规定的位置，利用top和left偏移来达到移动的目的。Top为正时，向下移动，left为正向右移动；反之亦然。文档流中的位置会保留。
Fixed: 相对于窗口的左上角，利用top和left偏移来达到定位的目的。脱离文档流，文档流中的位置消失。
Absolute: 和fixed一样。但是参照点是非标准流的父容器。
其他选择器：
元素选择器
类选择器
ID选择器
复合选择器
伪类选择器
父子
选择器 selector1 selector2{}  选择selector1下面的直接或间接selector2，中间是空格隔开
合并选择器 selector1,selector2{}  选择selector1或selector2，中间是逗号隔开
不同选择器修饰相同属性，可以放在一起，简化编码
其他属性：
溢出：
Overflow：visible | hidden | scroll | auto
Text-flow: clip | ellipsis(要结合其他属性使用)
#outter div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
列表属性：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。