第一单元：
hyper text markup language超文本标记语言
ctrl + Z撤销
ctrl+T自由变换
ctrl++ 放大
ctrl+- 缩小
ctrl+R显示标尺
ctrl+D取消选区
ctrl+N新建
ctrl+W关闭
Ff8 显示/隐藏“信息”面板,文件面板
<head></head> 网页头部
<title></title> 网页标题
<body></body> 网页主体
css网页样式
images 网页图片
js网页动态
flash网页动画
index.html或defaul.html首页默认名字
HMTL
<标签 属性=”属性值”>
HTML5页面的基本结构
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>
注意：<link> <script><meta><title>放在<head></head>之间
常用的单标签有:图片<img/>、换行 <br/>
第二单元：
<！doctype> (文档类型)HTML5
meta (语言编码声明/编码格式)
utf-8通用字符集 gb2312简体中文（编码格式）
<br/>换行标记(折行)
<b></b>、<strong>加强调显示</strong>加粗
<i></i>、<em>强调</em>倾斜
<u></u>下划线
空格（英文半角）
< (小于号)
> （大于号）
" (双引号)
© (版权)
® (注册)
h 1-h 6 (标题)h1最大，加粗
align 对齐方式
对齐方式的属性值：
left: 左对齐
right: 右对齐
center: 居中对齐
如：<h1align=”center”></h1>
<p></p> (段落标记)
<img/> (图像标记)
src (图片路径)
alt (图片提示文字)
title (鼠标滑过图片显示的文字提示)
width (宽度)
height (高度)
border （边框）
<hr/> (水平线标记)
水平线的属性：
color: 颜色
size: 粗细
width 宽
align 对齐方式
颜色
中文 | 英文 | RGB | RGB简写 |
红色 | red | #ff0000 | #f00 |
绿 | green | #00ff00 | #0f0 |
蓝色 | blue | #0000ff | #00f |
黑色 | black | #000000 | #000 |
白色 | white | #ffffff | #fff |
第三单元
a 超链接标签
href链接的路径
target 窗口打开方式
_blank 新窗口
_self 原窗口
_parent父级框架
_top顶级框架
ul无序列表
ol有序列表
li 列表项
disc 实心圆
circle空心圆
square正方形
reversed 倒序显示
dl 自定义列表
dt定义项
dd描述项
无序列表基本结构：
<ul><li></li></ul>
有序列表基本结构：
<ol><li></li></ol>
自定义列表基本结构
<dl><dt></dt><dd></dd></dl>
第四单元：
table (表格)
tr（行）
td （列）
th （表头）
table的属性：
width （宽）像素/百分比
height （高）
border （边框）默认0
bordercolor（边框颜色）
bgcolor（背景色）
background （背景图片）
cellspacing（单元格间距）
cellpadding（单元格边距）
colspan (水平合并) / rowspan（垂直居中）
align （水平对齐）
center （居中对齐）/left（左对齐）/right（右对齐）
valign（垂直对齐）
top （上）/middle （中）/ bottom （下）
表格分组：
Thead 表格页眉（1）
Tbody 表格主体（多）
Tfoot 表格页脚（1）
第五单元：
form 表单标签
action 提交地址
method 提交方法
提交方式 get post
名称 name
打开方式 target
属性值_self原窗口
_blank新窗口
输入标记：
<input/>
属性有type（类型）、name（名称）、value（值）、checked（默认选中）
<input type=”text”>文本框
<input type=”password”>密码框
<input type=”radio”>单选框
<input type=”checkbo”>复选框
<input type=”file”>文件域
<input type=”button”>普通按钮
<input type=”reset”>重置按钮
<input type=”submit”>提交按钮
<input type=”image” src=””> 图像域
下拉菜单的选项
<select>
<option></option>
</select>
option的属性：selected默认选中
<textarea></textarea>文本域
属性：cols字数=宽度
rows行数=高度
placeholder模糊显示输入提示文字
tel电话号码
url地址
emali邮箱
number数值
number数值的属性值：
step（步长）属性值倍数
max最大值
min最小值
date日期
第六单元
css 层叠样式表
选择器{属性：属性值;}
五种选择器：
p{} 标签选择器（1）（元素选择器）
class{} 类选择器(10)
id{} id选择器(100)
*{} 全局选择器（通配符选择器）
a:link 访问前的状态
a:hover 鼠标滑过的状态
a:active 鼠标按下的状态
a:visited访问后的状态
四种样式:
行内样式(1000)
<p style=””></p>
内嵌样式
<style> </style>
链接外部样式
<link href="style.css"rel="stylesheet"type="text/css" />
导入样式
@import
第七单元
文字属性:
color 字体颜色
font-size 字号
font-family 字体
font-weight 字体加粗
bold 加粗（600-900加粗）
normal 普通字体
bolder 更粗
lighter更细
font-style 字体风格
italic 倾斜
normal 正常
Word-spacing 单词间距
Letter-spacing 字母间距
文字的符合属性：font
段落属性
text-decoration 文字修饰
underline 下划线
none 无修饰
overline上划线
line-through 删除线
text-align 水平对齐方式
text-indent 文本缩进（首行缩进）
line-height 行高/行间距
背景属性
background-color背景颜色
background-image:url()背景图片
background-repeat背景重复
repeat水平平铺
no-repeat不平铺
repeat-x水平平铺
repeat-y垂直平铺
background-position背景位置（背景定位）
背景定位的5个方向
水平：Left左 center 中间right右
垂直：top上 bottom底
background-attachment背景附件
背景复合属性：background
列表属性
list-style 列表样式
list-style-type项目符号类型、
list-style-image自定义列表符号
list-style-position项目符号位置
列表复合属性:list-style
第八单元
盒模型的四个属性：
Content(内容)-padding(填充/内边距)—border(边框)—marging(边距/外边距)
border-color 边框颜色
border-style 边框样式（省略看不到）
soild实线
dashed 虚线
dotted 点线
none无线
border-width 边框宽度
border-top 上边框
border-right 右边框
border-bottom下边框
border-left 左边框
padding属性：（元素与内容的距离）
padding-right右填充
padding-top 上填充
padding-bottom下填充
padding-left 左填充
margin属性（元素与元素的距离）
margin-right右外边距
margin-top 上外边距
margin-bottom下外边距
margin-left 左外边距
1个值：4边
2个值：上下 左右（水平 垂直）
3个值：上 左右 下
4个值：上 右 下 左
第九单元：
box-shadow 盒子的阴影效果
inset 内部阴影
4个值：从左上开始顺时针
text-shadow 文字的阴影效果
border-radius 圆角边框
border-top-left-radius 左上角边框
border-top-right-radius 右上角边框
border-bottom-left-radius 左下角边框
border-bottom-right-radius 右下角边框
text-overflow 文字的溢出:
clip 不显示省略号
ellipsis 显示省略号标记
box-sizing默认属性值：
content-box（默认值）元素的宽度与高度不包括内部补白区域与边框的宽度与高度
border-box元素的宽度与高度不包括内部补白区域与边框的宽度与高度
gradient 渐变
-moz- 兼容firefox火狐
-webikt-兼容chrome谷歌
线性渐变的方向：
to bottom 从上往下
right从左往右
top从上往下
left从左往右
第十单元：
float 浮动
none不浮动（默认）
left 左浮动(正序)
right 右浮动(倒序)
clear 清除浮动
both全部清除
left 清除左浮动
right清除右浮动
none(默认)
第十一单元
非主体结构元素
header 头部(多)
main主体（1）
footer 页脚（多）
address 地址
主体结构元素
nav导航（多）
aside 侧栏
time 时间或日期
section独立的章、节
article 独立的自包含内容
音频、视频
video视频
autoplay自动播放(默认不自动播放)
controls 播放控件
loop 循环播放
height 高度
width 宽度
audio音频
第十二单元
display:inline 行内元素（内联元素）
特点：一行显示多个，不能单独设置宽高，宽高由内容决定
<a><lable><span>
display:block 块元素
每个元素单独占一行，可以设置宽，高<div><p><ul>
display:inline-block 行内块元素
overflow ：hidden溢出部分隐藏
overflow : visible 显示溢出内容（默认,隐藏溢出部分）
overflow ：auto 显示滚动条
Overflow-x 水平方向溢出
Overflow-y 垂直方向溢出
visibility:hidden 占位隐藏（隐藏整个元素，占位）
display:none 不占位隐藏（隐藏整个元素，不占位）
position 定位
static 静态定位（默认）
absolute 绝对定位（有定位的父级元素、body）
relative 相对定位（自身）
fixed 固定定位（浏览器窗口）
z-index 元素的层叠顺序
1、取值：正数 0 负数
2、不给值，后出现的元素在上面
3、有值，大值在上
4、默认值：auto
5、默认层是0层
定位的4个偏移方向
Left 左right 右top上bottom底
定位的应用：父相对，子绝对
第十四单元
伪类选择器
:first-child 第一个子元素
:nth-child(n) 第n个子元素
even 偶数
odd 奇数
:last-child 最后一个子元素
:checked 选中状态
::selection 被选择时的样式（不可border）
:disabled 禁用状态
:enabled 可用状态
:not() 选择器匹配非指定元素/选择器的每个元素
属性选择器：
CSS2
E[att=”val”>]
CSS3
E[att^=”val”]起始字符属性选择器
E[att$=”val”]结尾字符属性选择器
E[att*=”val”]包含字符属性选择器
兄弟选择器
+ 后面一个元素
~ 后面所有元素
第15单元：
Opacity 透明度：取值0-1
CSS Sprites CSS雪碧CSS精灵
第17单元
针对IE6浏览器的标准规范
IE6 ：*
IE6 ：-
针对IE7浏览器的标准规范
IE7 ：*
IE7 ：+
IE7 ：！important
\0----------IE8 9 10生效
\9----------IE6 7 8 9 10生效
第18单元
去掉所有标记的内填充和外边距: *{margin:0;padding:0;}
去掉超链接的下划线: a{text-decoration:none;}
去掉列表的项目符号: ul,li,ol {list-style:none;}
去掉图像标记的边框: img{border:none;}
控件和文本居中对齐vertical-align:middle
色块居中：margin:0 auto;必须和宽一起使用
提交按钮修饰：
HTML:<input type=”submit” value=”登陆”>
CSS: .btn{width:100px; height:50px;background:#333;}
扫一扫
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
