标签：
<!-- 关于文本标记
<b>加粗
<strong>加粗(结构标签，加强)
<i>斜体
<em>倾斜(结构标签，加强)
<u>给字符加下划线
<s>字符上加横线，表删除
-->
<!--特殊字符标记
占位符 空格
< < > >
& & " "
© 版权 ?
® 注册商标 ?
× x
÷ ‘/. -->
<!-- 表格的作用：可以做网页布局
xhtml+css=结构+样式(美化)
<table--/被淘汰了：代码多，导致网页下载慢，不利于搜索引擎优化（seo)>
<table > 表格
<tr>行
<td>内容-列</td>
</tr>
</table>
单元格，行都有属性。
--- 表格:border边框，width宽度，height高，cellspacing表格各单元格的距离，cellpadding单元格内部和文本的距离，align对齐方式，caption表格标题，bordercolor表格边框颜色，bordercolorlight表格亮面颜色
---bgcolor背景颜色
---background背景图++++平铺
div+css
<table width="600" border="1" cellspacing="0" cellpadding="5" bgcolor="#00FF33" background="images/01.jpeg" align="center">
<tr>
<td><img src="images/2.jpg" /></td>
<td>单元格的文字</td>
<td>lianglie</td>
</tr>
<tr>
<td>第二个单元格文字</td>
<td>两列</td>
</tr>
<tr>
<td>第三个单元格文字</td>
<td>三列</td>
</tr>
</table>
<!----无序列表
type”类型“
1:disc实心黑色圆点
2：circle空心圆
3：square矩形
<h2>无序列表</h2>
<ul>
<li type="circle">phop</li>
<li type="square">html</li>
<li>css</li>
</ul>
<!---嵌套
<h2>嵌套</h2>
<ul>
<li>咖啡
<ul>
<li>摩卡</li>
<li>蓝山
<ul>
<li>绿茶</li>
<li>红茶</li>
</ul>
</li>
</ul>
</li>
</ul>
因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：
一:float:left
这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高
二：display:inline-block
即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，
低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie
display：block；比较常用于<a><span>这两个标签—
因为这两个标签非块元素，如果不用display：block定义一下，
那么定义width、height等和长宽相关的css属性时会发现完全不生
<!----有序列表
1：a
2:i
3:1
<h2>有序列表</h2>
<ol>
<li type="a">爱奇艺</li>
<li type="i">新浪</li>
<li>淘宝</li>
</ol>
<!--自定义列表《页面排版》
<dl>定义列表
<dt>定义标题
<dd>定义内容-
<h2>自定义列表</h2>
<dl>
<dt>定义标题</dt>
<dd>定义内容</dd>
</dl>
------->
</head>
<!---border边框
bordercolor边框颜色
cellpadding单元格边距
cellspacing单元格内部和文本的距离-->
<body>
<!--<table>表格<tr>行<td>列<th>加粗+居中(加标题) <caption>表格标题
align（左，中，右） valign设置一行中单元格垂直对其（顶部top 底部bottom）方式-
先把背景设置一个颜色，再把单元格背景设置一个颜色，边框设置成0:实线（
rowapan设置单元格所占行数
colspan设置单元格所占的列数
合并单元格的行和列）
表格嵌套：
《table》《tr><td><table><tr><td>-->
!--表单
<select>选择域<option>选项
<textarea> clos行 rows高
《from>所有表单元素放在from里
<input>文本 type=""text"类型=文本
type="password"类型=密码
type="radio"单选按钮 checked="checked"默认选中状态
type="checkbox" 复选框
type="button" 按钮 value="提交" -->
<!--细线表格
bgcolor="#CCCCCC" cellpadding="10" cellspacing="1">
<tr bgcolor="#FFFFFF">
-->
<!---列表嵌套-->
<!--=align对齐方式 排版
=bgcolor背景颜色(小的平铺 ) =background背景图片
=text非链接文字色彩-->
<!--pre预定格式标记
按照文档中预先拍好的板式-->
<!--相对路径：网页和图像在同一个文件夹里(站点）
绝度路径：从一个站点到另一个站点时，（网址 如;百度）-->
<!--插入图像<img />
src 来源= 可以选中，可以可以做链接，但插入图像不能在加其他内容
width 宽度 height 高
网站里使用的图像名不能是中文（数字，拼音，英文）
===关于图像比例缩放====
大图像可以缩小（正比例）
小图像放大会迷糊
模糊于变形的图像不要放在网站上，会影响视觉效果-->
<!--背景图像和背景颜色在一起先显示图像
=有特别情况全部显示
背景图像不能选中，可以平铺，背景图像上可出现其他内容，
度
==1.gif 256中颜色，支持文件背景透明，支持动画效果
文件小，下载快
==2.jpg 数百万种以上的颜色 不支持文件背景透明，不支持动画效果，单图像品质高，一般用于数码照片 【位图 一个一个相熟点组成】
==3.png foreworks软件的源文件格式，支持文件背景透明
一般的图像，导出文件选png8，透明就可以了
png24 写css
==4.TIFF 印刷格式
==5.psd photoshop源文件格式 可以编辑
-->
<!--size 大小 width宽度 align 对齐方式 color颜色-->
<!--blockquote要缩排的文字-->
<!--font字体设置 size 大小 face 字体 color 颜色 weight加粗:normal不加粗
网页中常用的字体 宋体 常用字号 12PX（规范） 微软雅黑，黑体，宋体
特殊字体表现形式 通常图片
如果有何相同的字体，先死的页面和本地浏览一样，如果没有 1 换成浏览器用默认的宋体 2 直接显示乱码
-->
<!--一个页面到另一个页面- 友情链接，有利于网站推广
<a href="要链接的页面路径">文本</a>
绝对路径：
背景图像 body background="图像路径" 《img src="图像路径">
链接完文字默认是蓝色，访问后是紫色
< 让链接网页 在新窗口打开 target="_blank"->
假链接 href="#"
--->
<!--关于颜色值简写#ffffff=#fff
#ffcc00=#fc0
html+css分开独立-->
<!--html和css添加属性不同
<table width="800">和 <h1 style="widtn:800px;"
valign垂直居中和line-height:100px;一行文字垂直居中>
/*样式注释*/<!--HTML注释-->--->
<!--css(样式）
1:行内式：在标记中直接加样式 <h1 style="属性：值；">内容</h1>
2；嵌入式：讲对页面中个元素的设置写在<head></head> 例如：<style type="text/css">样式</style>
3:导入式：<style type="text/css">@import"mystyle.css";</style>
独立样式文件里固定格式：@charset"utf-8";!!<@charset"utf-8";> !!
4:链接式：<link(链接) href="mystyle.css" rel="stylesheet" type="text/css"（类型）
【导入式和链接式不同：导入式，先看见HTML结构在看样式 网速慢时。不美观；
链接式：样式结构同时出现】-->
<!--css选择器
1:标记选择器h1{属性：值；}(所有下面什么标签)
2:类别选择器。.class{属性：值；}里面的class=样式名将来写成你定义选择器类别的名称（不能中文）
3:ID选择器。。#id{属性：值；}id=样式名
5:复合选择器：
（1）‘交集’选择器。标记/ID.类别。h3.cla类别ss{属性：值；}
(2):‘并集‘选择器。所有标签{} .类别，标记 class,h3
（3）：’后代‘选择器
p strong{}。 。类别 标记.。.class h3{属性：值；}-->
<title>css选择器</title>
<!--嵌入式
<style type="text/css">
h1{background-color:blue;color:#fff;}
p{width:500px;height:100px;background-color:yellow;color:red;text-align:center;line-height;center;}
</style>-->
<!--导入式--
<style type="text/css">
@import"mystyle.css";</style>-->
<!--链接式
<link href="file:///E|/HTML/my.css" rel="stylesheet" type="text/css"/>-->
<!--类别选择器
<style type="text/css">
.red{font-size:25; color:red;}
.blue{font-size:35; color:
blue;}
.bg{background:red;-->
<!--ID选择器
<style type="text/css">
#red{font-size:25; color:red;}
#blue{font-size:35; color:
blue;}
#bg{background:red;}-->
<!--’交集‘选择器
<style type="text/css">
p#red{color:red;}
p.blue{color:blue;}
h2.green{color:green;}-->
<!--’并集‘选择器 <style type="text/css">
p,h2,h3{color:red;}
</style>-->
<!--‘后代‘选择器-->
<style type="text/css">
p strong{color:red;}
h3 strong{color:blue;}
h2.green{color:green;}
</style>
</head>
<body>
<!--行内式-
<h2><font color="#00FF33">我要成功</font></h2>
<h2 style="background-color:blue;color:#fff;text-align:center;">我要有高薪</h2>
<p >style="width:500px;height:100px;background-color:yellow;color:red;text-align:center;line-height:100px;">学xi强大</p>-->
<!---嵌入式导入式——链接式-
<h1>式</h1>
<p>学习学习</p>-->
<!--类别选择器 --ID选择器
<p class="red">红色 25像素</p>
<p class="blue">蓝色 35像素</p>-->
<!--’交集‘选择器--’后代‘选择器 -->
<p id="red"><strong>红色</strong> 25像素</p>
<p class="blue"><strong>蓝色</strong> 35像素</p>
<p class="blue">黄色 40像素</p>
<h2 class="green">温温叫我乖宝宝</h2>
<h3 class="green"><strong>温温</strong>叫我乖宝宝</h3>
<!--全局声明
*{}
font-style:italic;倾斜
font-style:normal;没有样式
font-family:"字体"；-->3
<!--css层叠性
行内样式》ID》类别》标记
如果给同一个标签定义相同属性时，在样式文件中，底下会覆盖上面文件---->
<!--链接四种状态
a:link链接
a:visited访问后
a:hover鼠标经过
a:active鼠标点击
text-decoration:控制链接文字要不要下划线none;没有下划线 underline;有
font-weight:normal;不加粗
font-weight:bold;加粗
企业关于链接文字状态：：：：
1；文字默认无下划线，鼠标经过有下划线，访问后没下划线
2；都没有下划线，默认链接一种颜色，鼠标经过变一个颜色
3；默认有下划线，鼠标经过有下划线并变颜色
注意；通常，链接和访问的状态相同-->
<body>
<a href="#">公司</a> <a href="#">简介</a> <a href="#">联系我们</a>
</body>
</html>
<!--<span>内联元素。本身不带任何样式---->
<!---书写孙旭上 有下左
margin 外边距
margin-top顶部外边距
margin-right右侧外边距
margin-bottom底部外边距
margin-left左侧外边距
margin:20px;全20边距
margin：20px 30px 40px;第一个顶，第二个左右，第三个底；
margin:20px 30px;第一个顶底，第二个左右
margin：0；
margin: 20px 40px 60px 80px;（上；右；下；左。）
margin:0 auto;块级
padding内边距
padding-top;
padding-right右侧内边距
padding-bottom
padding-left;
body,h1,p,ul,li,dl,dt,dd{margin:0;padding:0;}
*{}-->
<!---首行缩进
<p> text-indent:2em;首行缩进2汉字---->
<!--盒子模式
<div></div>--->
<!--border 边框属性
border:1px solid #fc0- 虚线：dashed
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。solid : 实线边框（常用）
double : 双线边框。
border-style类型
border-color颜色
border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，
border-top:10px groove skyblue；groove上颜色skyblue下颜色
borser---->
<title>盒子模型</title>
<style type="text/css">
div{width:980px;height:300px;border:1px solid #09F;line-height:300px;text-align:center;margin:0 auto;}
</style>
</head>
<<!---div 区分块
水平居中：margin:0 auto;
div-width:980px,border:1px;总宽度982px
大盒子总宽度=第一个盒子宽度+间距（第一个到第二个的距离）+第二个盒子的宽度+间距+第三个盒子宽度+左右边框980px
大盒子总高度=第一个盒子高度+间距+第二个盒子高度+间距+第三个盒子高度+上下的边框300px
div{width:360px;height:310px;border:1px solid #9颜色
div{width:358px;height:308px;border:1px solid #ccc;padding-top:20px;padding-left:20px;}/*382*332宽度的盒子*/
<!--<span>内联元素。本身不带任何样式---->
<!---书写孙旭上 有下左
margin 外边距
margin-top顶部外边距
margin-right右侧外边距
margin-bottom底部外边距
margin-left左侧外边距
margin:20px;全20边距
margin：20px 30px 40px;第一个顶，第二个左右，第三个底；
margin:20px 30px;第一个顶底，第二个左右
margin：0 auto 居中；
padding内边距
padding-top;
padding-right右侧内边距
padding-bottom
padding-left;
body,h1,p,ul,li,dl,dt,dd{margin:0;padding:0;}
*{粗细、样式和颜色(边框三个属性)}
如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框：
div{
border:2px solid red;
}
上面是border代码的缩写形式，可以分开写：
div{
border-width:2px;
border-style:solid;
border-color:red;-->
<!---首行缩进
<p> text-indent:2em;首行缩进2汉字-
！！！！！！！！！！！！！！！！！！！！！-list-style:none;什么样式都没有-->
<!--盒子模式
标准文档流
1：块级元素{（block)
<div>标题，段落，img
2;行内元素（inline）
<span>行内元素 em i a strong
margin计算规则：
1：·如果两个对象在一行，第一个对象添加了右边距，第二个对象添加左边距，margin取和
2：如果两个对象在两行，上面对象家里下边框。下面对象加了上边框，margin去最大值。
dispaly:block;显示为块（可以将行内元素转化为快级元素）
display:none；隐藏
display:inline;显示为行内（可以将块级元素转成行内元素）
display:inlne-blok：显示为行内块（可以将行内元素换成行内块，增加宽和高）
background:url(图片路径)3*3 no-repeat：不平铺repeat-x水平方向平铺repeat-y垂直
left top左侧顶 right top右顶
background:background-color ||background-image || background-repeat || background-attachment || background-position
background-image:url("图片的网址"); 背景图
background: url(" 图片的网址 "); 背景
background-color:#色码; 背景色彩
scroll 拉动卷轴时，背景图片会跟着移动（缺省值）(滚动条所在位置)
fixed 拉动卷轴时，背景图片不会跟着移动
repeat 背景图片并排
repeat-x 背景图片以X方向 并排
repeat-y 背景图片以Y方向 并排
no-repeat 背景图片不 以并排的方式处理
（center bottom ）
微件：--->
<!--盒子的浮动和定
位
float:left左浮动；
float:right右浮动；
clear:booth清除浮动
父元素使用overflow方法设置hidden是最简单清除浮动的方法
但是子元素使用了定位布局，会很难实现
overflow:hidden：隐藏溢出
定位 position
static默认；
relative相对定位
absolute绝对定位-left,right,top,bottom
[1]必须先给父类加定位：position:relative
[2]给子元素加绝对定位，同时要加方向属性
fixed固定定位
position:relative;left:50ox;top;50px;小盒子对大盒子左边50，顶部50（右下角）
position：absolute；right：30
； bottom：30；对于浏览器来说。（右下角）
position：relative——>position：absolute：right：20px；bottom：20：px；
，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格 <dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
</dl>-->
<body>-->
background:rgba(0,0,0,.3)css3背景半透明
border-radius: 小圆角（原件半径）
cursor:pointer;小手---cursor:default;小白-----cursor:text;输入光标
clear="left"可能的值 值描述 left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。
em 相对长度单位，相当于当前对象内文本的字体尺寸
filter:alpha(opacity=50) 整个透明（火狐[opacity:0.5] 起作用）
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
box-shadow：<length><length><length><length>|| <color>
<length><length><length>?<length>? || <color>：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影边框；阴影模糊值；阴影颜色
=======<span>=======
text-overflow: clip|ellipsis|string;
值 描述
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本。
css-DOM操作
。获取和设置元素的样式属性：css();
。获取和设置元素透明度:opacity():0.1
。获取和设置元素高和宽
。获取元素在当前视窗中的相对位移：oddset(). ---top---left
html
标签：
原文地址：http://www.cnblogs.com/liuruimiku/p/5239552.html
