◉HTML
1、结构
网页使用HTML HyperText Markup Language 来描述页面结构
超文本标记语言允许对文本建立链接，允许对文本进行标记
网页开头都有一个DOCTYPE 文档类型 声明，告诉浏览器此页使用的HTML版本
在HTML中添加注释使用<!—— 注释文本 ——>
HTML使用元素 <p>paragraph</p> 来描述页面内容的结构信息
元素由起始标签 <p> 、结束标签 </p> 和其间内容组成
HTML使用属性 <p lang=“en-us”> 来描述元素内容的附加信息
属性由属性名称 lang 和属性值 en-us 组成
HTML具有白色空间折叠特性，连续空格或换行都会显示为一个空格
<html>用来描述整个页面，<head>用来描述页面首部，<body>用来描述页面主体
添加页面标题使用<title>元素，元素位于<head>元素中
添加页面信息使用<meta />元素，元素位于<head>元素中
－name=description｜keywords｜robots
content=———｜—，—，—｜noindex/nofollow
－http-equiv=author｜pragma｜expires
content=———｜no-cache｜Fri，04 Apr 2015 11:11:11GMT
2、文本
结构化标记用来描述文本结构信息
－<h6>标题 <p>段落
－<b>粗体 <i>斜体
－<s>删除线 <u>下划线
－<sup>上标 <sub>下标
－<br />换行符 <hr />水平线
语义化标记用来描述文本语义信息
－<abbr >词汇缩写title＝“” <address>联系详情
－<strong>着重强调 <em>一般强调
－<del>删除 <ins>插入
－<blockquote>长引用 <q>短引用 cite＝“url”
－<cite>引文 <dfn>定义
3、列表
有序列表 <ol>
－列表项目 <li>
无序列表 <ul>
－列表项目 <li>
定义列表 <dl>
－定义术语 <dt>
－定义描述 <dd>
4、链接
添加链接使用<a>元素
<a>元素通过href属性指明链接跳转页面，通过target属性指明链接打开方式
链接文本尽量明确具体
href属性
－指向其他网站 href＝“绝对url”
－指向同一网站其他页面 href＝“相对url”
－指向当前页面特定位置 href＝“＃id值”
－指向其他页面特定位置 href＝“url/＃id值”
－指向email地址 href＝“mailto：email”
target属性
－在新窗口中打开链接 target＝“_blank”
5、图像
添加图像使用 <img />元素
<img />元素通过src属性指明图像来源，通过alt属性描述图像内容
创建图像基本原则
－使用正确的格式来保存图像 JPEG：多色 GIF：动画 PNG：透明
－使用正确的大小来保存图像 使用像素衡量图像／使用缩放或裁剪匹配页面
为图像添加说明使用<figure>元素
<figure>
<img />
<br />
<figcaption>图像说明文本</figcaption>
</figure>
6、表格
添加表格使用<table>元素
表格按照行的顺序逐行绘制，行用<tr>元素表示
表格数据用<td>元素表示
表格标题用<th>元素表示，可以通过scope属性表明标题是行标题 row 还是列标题 col
如需要跨行或跨列，可以使用rowspan属性或colspan属性，属性值为所跨的行数或列数
长表格可以用<thead>表示第一行，用<tbody>表示主体内容，用<tfoot>表示最后一行
7、表单
添加表单使用<form>元素，表单控件位于<form>元素中
表单中的信息以“名称／值”的形式进行发送
<form>元素通过action属性指明接收表单信息的web服务器，通过method属性表明提交表单是只为了检索信息 get 还是为了添加或删除信息 post
表单控件类型
－添加文本
<input />
type=text/password/email/url/search
name＝
maxlength= 最长字符
placeholder= 占位文本
required= 表单验证
<textarea>
name=
－进行选择
<input />
type=radio/checkbox
name=
value=
checked= 选中选项
<select> <option>
name= value＝
(size= ) 选项显示数 selected＝ 选中选项
(multiple= ) 多选
－提交表单
<input />
type=submit
name=
value=
<input />
type=image
src=
width=
height=
－上传文件/日期
<input />
type=file/date
name=
－隐藏控件
<input />
type=hidden
name=
value=
为表单添加按钮使用<button>元素，可在其间结合使用文本和图像
为表单添加说明使用<label>元素
<label>Age<input type=“text” name=“age” /></label>
<input id=“m” type=“radio” name=“gender” value=“m” /><label for=“m”>Male</label>
为表单添加组合使用<fieldset>元素
<fieldset>
<legend>控件组标题</legend>
表单控件
表单控件
</fieldset>
8、其他标记
每个HTML元素都可以附带id属性，用来对某一个元素进行标识
每个HTML元素都可以附带class属性，用来对某一类元素进行标识
－如果某一个元素属于不同类，可以用空格将类名隔开
块级元素在浏览器显示中总是另起一行，如<h1>、<p>、<ul>
内联元素在浏览器显示中总是与邻近元素出现在同一行内，如<a>、<b>、<img>
<div>元素将文本和元素集中在一个块级元素中
<span>元素将文本和元素集中在一个内联元素中
添加内联框架使用<iframe>元素，内联框架在页面上划出一定区域用来显示其他页面
<iframe>元素通过src属性指明显示页面地址，通过width和height属性指明框架宽高，通过seamless属性指明框架是否需要滚动条，添加此属性则表明不需滚动条
有些字符用于编写HTML代码而成为保留字符，需要使用转义字符来实现显示
－< > & × ÷
－" &lsquo &rdquo
－¢ £ ¥ &euro
－© ® &trade
9、Flash、视频和音频
添加Flash使用JavaScript脚本，添加视频使用<video>元素，添加音频使用<audio>元素
<video> <audio>
src src
poster 图像显示 －－
width,height －－
controls controls 播放控件
preload none/auto/metadata preload 预加载
autoplay autoplay 自动播放
loop loop 重新播放
添加多个视频源／音频源使用<source />元素替代src属性
－<source src=“video/文件名.mp4” type=‘video/mp4;codecs=“ ”’ />
－<source src=“audio/文件名.mp3” type=“video/mp3” />
◉CSS
10、CSS简介
网页使用CSS Cascading Style Sheet 来控制页面呈现
层叠样式表设想在元素周围有一个看不见的盒子，可通过规则来控制
一条CSS规则包含两个部分：选择器和声明，选择器指明要应用规则的元素，声明指明这些元素的表现和布局
－h1，p｛color：yellow；｝
－同一条规则可以应用在多个元素上，其间用逗号隔开
－一条声明包含两个部分：属性和值，两者用冒号隔开
－任意一条声明内可以指定多个属性，其间用分号隔开
在CSS中添加注释使用<／* 注释文本 *／>
在页面中添加CSS规则可使用外部CSS文件（推荐使用），也可使用内部CSS代码
－外部 <link href= type=“text/css” rel=“stylesheet” />
－内部 <style type=“text/css”> ########### </style>
CSS选择器类型
－基本选择器
通用选择器＊｛｝匹配所有元素
类型选择器p｛｝匹配某一类型元素
类选择器.class｛｝匹配class属性相同的元素
ID选择器＃id｛｝匹配id属性相同的元素
子元素选择器p>a｛｝匹配指定元素的直接子元素
后代选择器p a｛｝匹配指定元素的后代元素
相邻兄弟选择器h1+p｛｝匹配指定元素的下一个元素
普通兄弟选择器h1～p｛｝匹配指定元素的下一类元素
－特性选择器
简单选择器p［class］匹配一种具有特定属性的元素
精确选择器p［class＝“css”］匹配一个具有特定属性值的元素，该属性值唯一
部分选择器p［class～＝“css”］匹配一个具有特定属性值的元素，该属性值不唯一
开头选择器p［attr^=“c”］匹配一个具有特定属性值的元素，该属性值以某字符串开头
包含选择器p［attr*=“css”］匹配一个具有特定属性值的元素，该属性值包含某字符串
结尾选择器p［attr$=“s”］匹配一个具有特定属性值的元素，该属性值以某字符串结尾
伪元素 就像在代码中加入了额外的元素
－首字母 :first-letter｛｝／首行文本 :first-line｛｝
伪类 就像是一个类特性的额外的值
－未访链接 :link｛｝／已访链接 :visited｛｝
－悬停 :hover｛｝／操作 :active｛｝/获取焦点 :focus｛｝
CSS优先级原则
－就近性原则：如果两个选择器完全相同，那么后出现的选择器优先级更高
－具体性原则：如果一个选择器比其他选择器更加具体，那么具体的选择器优先级更高
－重要性原则：如果在任意属性值后添加 ！important ，那么这条规则更重要
11、颜色
指定颜色方式
－RGB值 rgba(90,90,90,0.5) 红 绿 蓝 不透明
－HSL值 hsla(0,0%,78%,0.5) 色调 饱和度|灰色 亮度|黑色 不透明
－十六进制编码 #eeeeee 红 绿 蓝
－颜色名称 DarkCyan
为使文本清晰易读，确保前景色 color 和背景色 background-color 之间有足够对比度
－白色背景－灰黑色文本
－黑色背景－灰白色文本
12、文本
文字属性
－字体系列 font-family
Georgia,Times,serif 衬线字体 适用于长文本
Arial,Verdana,sans-serif 无衬线字体 适用于短文本
“Courier New”,Courier,monospace 等宽字体 适用于代码显示
“Comic Sans MS”,cursive 草书字体 适用于手写风格
Impact,fantasy 虚幻字体 适用于装饰
－字体大小 font-size
12px 像素
200% 百分数 默认16px
1.3em EM值 1em相当于1个字母m的宽度
－字体粗细 font-weight
normal 常规
bold 粗体
－字体样式 font-style
normal 常规
italic 斜体
oblique 倾斜
文本属性
－文本切换 text-transform
uppercase 大写
lowercase 小写
capitalize 单词首字母大写
－文本装饰 text-decoration
none 无
underline 下划线
overline 上划线
line-through 穿越线
blink 闪烁
－文本对齐 text-align
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
－垂直对齐 vertical-align 用于内联元素（如<img>）与文本的垂直对齐
top/text-top 顶部对齐
middle 中间对齐
baseline 基线对齐
bottom/text-bottom 底部对齐
－文本缩进 text-indent
20px
－文本投影 text-shadow
1px 1px 0px #111111
水平偏移 垂直偏移 模糊距离 颜色
－文本间距
行间距 line-height 1.4em
单词间距 word-spacing 0.25em
字母间距 letter-spacing 0.1em
13、盒子
CSS采用盒子模型来处理每个HTML元素
控制盒子大小
－盒子宽度 width 宽度限制 min-width/max-width
－盒子高度 height 高度限制 min-height/max-height
－内容溢出 overflow：hidden 隐藏/scroll 滚动
控制盒子边框、内边距、外边距
－边框 border：2px dotted #000000
边框宽度 border-width：2px｜thin/midium/thick｜2px 1px｜2px 1px 3px 2px
－border-top-width／border-right-width／border-bottom-width／border-left-width
边框样式 border-style：solid 实线/dotted 方形点线/dashed 虚线/double 双实线/groove 雕入/ridge 浮出/inset 嵌入/outset 凸出/hidden 隐藏/none 无
－border-top-style／border-right-style／border-bottom-style／border-left-style
边框图像 border-image：url(“images/dots.gif”) 11 11 11 11 stretch/repeat/round
图像URL 切割位置 伸展/重复/自适应重复
边框颜色 border-color：#000000｜＃000000 #111111 #222222 #333333
－border-top-color／border-right-color／border-bottom-color／border-left-color
边框圆角border-radius：2px｜2px 1px｜2px 1px 3px 2px｜1em 2em 1em 2em/2em 1em 2em 1em
－border-top/bottom-right/left-radius：2px 1px
－内边距 padding：2px｜2px 1px｜2px 1px 3px 2px
padding-top／padding-right／padding-bottom／padding-left
－外边距 margin：2px｜2px 1px｜2px 1px 3px 2px
margin-top／margin-right／margin-bottom／margin-left
－如果为一个盒子指定了宽高，那么盒子的边框、内边距、外边距会增加到它的宽高上
－如果想为一个盒子在包含此盒的外部元素内居中显示，指定盒子宽度并将其左右两侧的外边距设置为auto，并在包含此盒的元素中添加text-align属性，设定其值为center
控制盒子阴影
－盒子投影 box-shadow
(inset) 1px 1px 2px 2px #111111
（内阴影）水平偏移 垂直偏移 模糊距离 阴影扩展 颜色
－显示／隐藏盒子
盒子显示 visibility
－hidden 使盒子隐藏，并在该盒子位置留下空白/ visible 显示
－li｛display：inline；margin-right：10px；｝
li.hide｛visibility：hidden；｝
元素显示 display 内联元素与块级元素转换
－inline 使块级元素表现得像内联元素
－block 使内联元素表现得像块级元素
－inline-block 使块级元素像内联元素那样浮动并保持其他块级元素特征
－none 使元素隐藏，就像没有这个元素一样
－li｛display：inline；margin-right：10px；｝
li.hide｛display：none；｝
14、列表、表格和表单
列表属性
－列表标记 list-style：inside circle
列表标记类型 list-style-type：(ul)none/disc/circle/square ol)decimal/decimal-leading-zero/upper-alpha/lower-alpha/upper-roman/lower-roman
列表标记图像 list-style-image:(ul)url(“images/star.png”)
列表标记位置 list-style-position：outside/inside
表格属性
－表格宽度 table｛width:600px;｝
－空单元格 table｛empty-cells:show/hide;｝
－单元格间距 th，td｛border-spacing:5px｜5px 15px;｝
－单元格合并 th，td｛border-collapse:collapse/separate; ｝
－定义表格样式技巧
设置单元格内边距 th，td｛padding:7px 10px 10px 10px;｝
区分标题
－粗体大写显示 th｛text-transform:uppercase;letter-spacing:0.1em;font-size:90%;｝
－添加背景色或下划线 th｛border-bottom:2px solid #111;border-top:1px solid #999;｝
交替改变表格行的背景色 tr.class｛background-color:#efefef;｝
悬停高亮显示当前表格行 tr:hover｛background-color:#c3e6e5;｝
向右对齐数字 .number｛text-align:right;｝
表单属性
－定义单行文本框样式
input｛
font-size:120%;
color:#5a5854;
back-ground-color:#f2f2f2;
border:1px solid #bdbdbd;
border-radius:5px;
padding:5px 5px 5px 30px;
background-repeat:no-repeat;
background-position:8px 9px;
display:block;
margin-bottom:10px;｝
input:focus,input:hover｛
back-ground-color:#ffffff;
border:1px solid #b1e1e4;｝
input#email｛
background-image:url(“images/email.png”);｝
input#password｛
background-image:url(“images/password.png”);｝
－定义提交按钮样式
input#submit｛
color:#444444;
text-shadow:0px 1px 1px #ffffff;
border-bottom:2px solid #b2b2b2;
background-color:#b9e4e3;｝
input#submit:hover｛
color:#333333;
border:1px solid #a4a4a4;
border-top:2px solid #b2b2b2;｝
光标属性
－光标类型 cursor：auto/default/crosshair/pointer/move/text/wait/help/url(“cursor.gif”)
15、布局
控制元素的位置 position
－普通流 static 每个块级元素都换行显示
－相对定位 relative 以其在普通流中所处的位置进行移动
位移属性 top/bottom:10px｜right/left:10px
－绝对定位 absolute 脱离普通流，不影响周围元素的位置，随着页面的滚动而移动
－固定定位 fixed 脱离普通流，不影响周围元素的位置，不随着页面的滚动而移动
位移属性 top/bottom:0px｜right/left:0px
控制元素的层次 z-index
－当使用相对定位、绝对定位或固定定位时，元素可能重叠，后出现元素会位于先出现元素上面
－可使用z-index属性控制元素层次，该属性值是一个数字，数字越大，元素属性越靠前
控制元素的浮动 float
－浮动 float：left/right 将元素定位到其包含元素的最左侧或最右侧
－清除浮动 clear：left/right /both/none 表明该元素左侧或右侧不允许浮动元素出现
－如果一个包含元素只包含浮动元素，其高度可能会被看成0像素，需在其样式中添加两条CSS规则 overflow:auto｜width:100%
－使用浮动将元素并排
p｛width:230px;
float:left;
margin:5px;
padding:5px;
background-color:#efefef;｝
p.clear｛clear:left;｝
－使用浮动创建多列式布局
.col1,.col2,.col3｛width:300px;
float:left;
margin;｝
理解页面的布局
－屏幕分辨率指一个屏幕在面积内所能显示的点数
－首屏页面宽度约为960～1000像素，高度约为570～600像素
－固定宽度布局保持固定宽度，通常以像素作为衡量单位
－流体布局通过伸展或收缩来适应屏幕，通常使用百分数
－网格有助于创建页面布局，最常见的布局网格为960像素网格
－可在一个页面中引用多个CSS文件
＊html <link />
<link />
<link />
＊html <link />
css @import url( )
@import url( )
16、图像
控制图像大小 width｜height
设置背景图像 background:(#ffffff) url( ) no-repeat center top, (#ffffff) url( ) no-repeat center top,(#ffffff) url( ) no-repeat center top 顶层→底层
－背景颜色 background-color
－背景图像 background-image: url( )｜渐变-moz/webkit/0-linear-gradient(#fff,#000)
－背景重复 background-repeat:repeat/repeat-x/repeat-y/no-repeat
－背景绑定 background-attachment:fixed/scroll
－背景位置 background-position:left/center/right top/center/bottom｜0% 50%
控制图像翻转
－html <a class="button" id="add-to-basket">Add to basket</a>
<a class="button" id="framing-options">Framing options</a>
－css a.button {
height: 36px;
background-image: url("images/button-sprite.jpg");
text-indent: -9999px;
display: inline-block;}
a#add-to-basket {
width: 174px;
background-position: 0px 0px;}
a#framing-options {
width: 210px;
background-position: -175px 0px;}
a#add-to-basket:hover {
background-position: 0px -40px;}
a#framing-options:hover {
background-position: -175px -40px;}
a#add-to-basket:active {
background-position: 0px -80px;}
a#framing-options:active {
background-position: -175px -80px;}
背景图像最好是低对比度的，如果是高对比度的，最好在文本下层插入半透明背景色
17、HTML5布局
添加页眉使用<header>元素，添加页脚使用<footer>元素
添加导航使用<nav>元素
添加文章使用<article>元素，添加附属信息使用<aside>元素
组合标题使用<hgroup>元素
把部分组合成整体使用<div>元素，就像一个容器
把整体分解成部分使用<section>元素，就像一把剪刀
◉实用信息
18、建站过程和设计方法
网站为谁而建？
－个人：年龄、性别、国家、地区、教育程度、家庭状况、收入、职业、上网频率、上网设备
－企业：规模、职务、建站目的、建站预算
人们为什么要访问你的网站？
－什么动机？→什么目标？→什么行动？
怎么构建网站？
－网站地图→线框图→高保真原型
怎么设计网站？
－形成视觉层次
大小：较大的尺寸更容易引起注意
颜色：明亮的颜色更容易引起注意
样式：独特的样式更容易引起注意
表现：合适的图像更容易引起注意
－分组
通过空白分组
通过背景色分组
通过边框分组
－保持一致
19、实用信息
搜索引擎优化
－站内优化：在页面网址、页面描述、页面标题、标题、正文、链接文本、图像说明添加关键词
－站外优化
网站分析
－常用分析工具：Google Analytics
－多少人访问了你的网站、他们如何找到你的网站、他们来你的网站做了什么
网站构建
－为将网站上传到Web，需要注册一个域名并使用Web托管
－为了让人们看到网站，需要使用文件传输协议 FTP 将网站文件上传到Web服务器