基础模板：
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>YDTDHTML模板</title>
<meta name="Keywords" content="关键字,关键词"/>
<meta name="Description" content="描述和简介"/>
<link rel="stylesheet"href=""/>
<style type="text/css">
</style>
</head>
<body >
</body>
</html>
1.文本字体标签
a：超链接标签
<a href=“链接”>显示文字</a>
·target-打开方式
_blank-新窗口打开
_self-当前窗口打开 （默认）
h1~h6：标题标签
<h1>h1标题</h1>
<h2>h2标题</h2>
Font：字体标签
·color:字体颜色（适用十进制、十六进制颜色代码及英文单词）
·font-size：字体大小（单位PX）
·font-style：字体风格
normal：默认italic：斜体字体
oblique：强制倾斜字体
font-weight：（字体加粗）
bold : 粗体
bolder : 加粗
具体的数值 :100~900（bold） 没有单位
·line-height：（行高）
值如：1.5（无单位是基于字体的倍数）
值如：22px（有单位是具体的数值）
·font-family：””字体类型（必须是本机已安装的字体类型）
英文单词如：Microsoft yahei（微软雅黑）等
中文词汇如：宋体、微软雅黑等
（关于引号
字体的属性值书写时可以加上引号，可以不加引号，并不会影响字体的 加载，但基于习惯我们会给中文字体加上引号英文字体不加引号。
·字体类型兼容：
字体的类型有很多但是一般只有当用户的系统安装了对应的字体类型我 们的类型才能生效，所以通常会在样式初始化时，在body里选择一组备 用类型，当用户没有安装对应的字体类型时替代 body{ font-family:Arial, "Microsoft Yahei", sans-serif; }）
text：（文本样式）
·text-align：文字水平对齐方式
left：左对齐（默认值）
right：右对齐
center：居中对齐
·text-decoration:文本修饰
none：无修饰
underline：下划线
overline：上划线
line-trough：删除线
·text-indent：文本首行缩进
值如：10px（允许使用负值）
·text-overflow：文本溢出处理
clip：超出剪裁
ellipsis：超出出现省略号
hidden：超出隐藏
（单行超出省略号：overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;）
·text-transform：文本字母处理
none:正常显示
capitalize：首字母大写
uppercase：全部大写
lowercase：全部小写
·letter-spacing：字间距
litter-spacing：10px
·word-spacing：词间距
word-spacing：10px
·white-space：文本换行方式
nowrap：只有遇到<br />才换行
normal：默认换行方式
pre：与源码的格式一致，不会合并空格换行，不会自动换行
pre-wrap：不会合并空格换行 会 自动换行
pre-line：合并空格换行会自动换行
·word-break：单词换行方式
break-all：允许在单词内换行
normal：默认换行方式
keep-all：不允许在单词内换行
·转义字符
html界面中有一些特殊符号不可以直接显示在文档当中如< > ' ...... 这时候需要对它们进行转 义才能在界面中正常的显示
如：
> &it >< > <
查询网站：
http://tool.oschina.net/commons?type=2
常用标签
·p：段落标签
<p>段落</p>
·pre：格式化文本
<pre></pre>
内部文本的空格，换行会被解析，通常用于代码的展示
·em/i:倾斜字体
<em>倾斜字体-轻微强调</em>
<i>倾斜字体-无强调语义-现常用于图标</i>
·strong/b：加粗字体
<strong>加粗字体-强烈强调</strong>
<b>加粗字体-无强调语义</b>
⦁ 盒子模型：
·border-style：边框样式（可以四条边分开设置）
none：无边框（默认值）
solid：实线
dashed：虚线
double：双实线
dotted：点状线
groove：3D凹槽
ridge：3D立槽
inset：3D嵌入边框1
Outset：3D嵌入边框2
·border-color：边框颜色（可以四条边分开设置）
（适用十进制，十六进制颜色代码及英文单词）
·border-width：边框宽度（可以四条边分开设置）
{top（上） right（右） bottom（下） left（左）}
·padding：内边距/margin：外边距（可以四个方向分开设置）
固定的数值：100（单位px）
百分比：10%（基于父级的宽度）
⦁ 图片列表
·img：图片标签（单标签）
图片格式：
jpg：普通且最常见的图片格式
png：通常为透明图，常用于图标，雪碧图
gif：动态图片，小动画
<img src=”” width=”” height=””alt=”” title=”” />
src：图片路径
width/height：图片宽/高
alt：图片描述
title：图片标题
·ul：无序列表
语义：不分顺序的列表
用途：通常用于导航，菜单，列表等布局
ul：列表区域
li：列表项
type：列表项样式<ul type=””>
disc：实心圆（默认）
circle：空心圆
square：方块
（特性：默认的列表样式（list-style）与边距）
·ol：有序列表
语义：按顺序排列的列表
用途：使用较少，可用于目录等
ol：列表区域
li：列表项
type：列表项样式<ol type=”A”>
A/a：字母（大写/小写）
Ⅰ：罗马数字
（特性：默认的列表样式（list-style）与边距）
·dl：自定义列表
语义：标题与内容对应的列表
用途：常用于上下（左右）的图文区域布局，标题-内容区块
结构：自定义列表包含一个列表区域（dl）与数个列表标题（dt）和对应的列表项（dd）
（特性：默认边距）
⦁ 行、快特性与转换
·行级（行内）标签
主要特性：
可以在同一行排列、不支持设置宽高、宽高均由内容撑开、上下内外边 距无法作用于其他元素...
常见行级：a、span、strong、em、i、b....
·块级标签
主要特性：
单独占据一行、高度由内容撑开、宽度继承父级、支持所有属性
常见块级：div、p、ul、li、h、dl、dt、dd....
·行级块级之间的特性转换
display：特性转换
block：转换为块级特性
inline：转换为行级特性
none：消失（直接消失，不占位置，包括子级）
·行块级元素
inline-block：同时拥有行快特性
主要目的：
很多时候我们需要让标签在一排显示，但也想它支持宽高上下边距那我 们就需 要用到这第三种特性-行块级
主要特性：
支持宽高，内外边距，一排显示，高度宽度由内容撑开，当父级宽度不 够的时 候会从第二排开始显示...
弊端：
不兼容IE低版本，元素之间代码换行会有字体大小一半的间距，对齐方 式某些 情况下怪异...
·vertical-align：对齐方式
top：基于元素上对齐
middle：基于元素中间对齐
bottom：基于元素下方对齐
text-top：基于父级文字上对齐
baseline：基于父级文字中间对齐
text-bottom：基于父级文字下对齐
注意点：
1. 居中对齐时需要给所有需要对齐的元素添加属性
2. 此属性可以解决图片下边距的问题
5.样式初始化
·什么是样式初始化：
许多标签会用默认存在的样式，如p标签的外边距，a标签的下划线等等， 通常情况下我们会把这些默认的样式去除，初始化。
·为什么要初始化样式：
默认的样式在不同的浏览器上通常会有不同的表现情况（兼容问题），所以为 了减少这种情况的发生而带来的一些问题，而统一的不会使用默认的样式
·常见标签的初始化：（.css文件）body,dl,ol,ul,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin:0; /* 拥有默认内外边距的标签 */ padding:0; } body{ /* 规定字体的行高和字体大小和字体风格 */ font:12px/1.5 'Microsoft yahei'; } a{ text-decoration:none; color:inherit;
/* 默认下划线 默认字体颜色*/ }ol,ul{ list-style:none; } /* 默认小黑原点，序列号 */ img{ border:0; vertical-align:bottom; } /* IE边框、下边距 */
⦁ 上下外边距的合并与溢出
·上下外边距的合并：
一：当上下相邻的两个元素，在相邻的面同时拥有外边距时，其外边距 值只会取其中较大的值。
二：当一个除了上下外边距没有其他任何属性与内容的元素，它的上下 外边距也会发生合并，并且当它遇到其他元素的上下外边距时同样 会发生合并。
·上下外边距的溢出：
当父子关系的两个元素，子级拥有上下外边距时，其外边距不会作用于 父级，而是会传递给父级。
⦁ css选择器
·标签名选择器
如：div{****}
<div></div>
·类名选择器
如：.Box{****}
<div class=”box”></div>
（注意：一个类名在一个界面可以按需求出现多次，主要用于css 样式的书写，并且一个元素可以有多个类名）
·ID名选择器
如：#box{****}
<div id=”box”></div>
（注意：一个ID名在一个界面只能出现一次，不能有相同的ID名 称，通常用于一个大的区块的划分，和JavaScript的获取， 不适用于样式的主要书写）
·通配符选择器
如：*{****}
（注意：通配符选择器因为会选择所有的元素所以极大的影响网页 的加载效率，所以不常使用，但是通配符选择器也可以配 合父子选择器使用，选择某个节点下的所有子节点）
·包含选择器（子类关系）
如：#nav .box div{****}
<div id=”nav”><div class=”box”><div></div></div></div>
·标签名类名选择器（与关系）
如：div.box{ ****}
<div class=”box”></div>
·群组选择器（同类关系）
如：#nav .box div,div.box{ **** }
<div id=”nav”></div> <div class=”box”></div>
·选择器优先级（选择器作用的范围越大优先级越低，执行顺序越后优先级越高）
什么是样式的优先级:
当同一个元素被多个选择器同时选择，并且赋予相同的属性时，的 一个取值规则.
影响优先级的因素:
⦁ 选择器类别:
行内 > ID > class > 标签名 > 通配符 > 默认样式
⦁ 选择器数量：
A) .box div div > .box div > div
B） div.box div > .box div
⦁ 执行顺序：
当选择器的类别与数量相同时，执行顺序越靠后优先级越高
⦁ 样式放置的位置
行内>内部>外部
·高级选择器：
结构类选择器：
1) 子级选择器（子级关系）#box>div{ margin:0; } <div id=”box”> <div> <div></div> </div> </div>
1) 毗邻选择器（兄弟关系）#box+div{ margin:0; } <div id=”box”> <div></div> </div> <div></div> <div></div>
高级选择器：
⦁ 属性选择器[class]{ margin:0; } <div class=”box top”> <div class=”top ”> <div id=”list”></div> </div> </div>
⦁ 属性属性值选择器[class=top]{ margin:0; } <div class=”box top”> <div class=”top”> <div id=”list”></div> </div> </div>
⦁ 背景
·背景意义：
背景显示在元素最底层的属性，不会影响到元素内的子级或者文字的正 常排列，背景通常包含背景颜色，和背景图片两种形式。·background-color：背景颜色
默认值透明
（适用十进制、十六进制颜色代码及英文单词）
·background-image：背景图片
rul：（“路径地址”）（默认没有图片）
·background-repeat：背景图片重复方式
repeat：上下左右重复（默认）
no-repeat：不重复
repeat-x：x轴方向重复
repeat-y：y轴方向重复
·background-position：背景位置
A) 关键字：center、top、right、bottom、left
B、固定的数值、百分比div{ background-position:100px 50%; }
（注：当只写一个值时该值为x轴的值，y轴的值默认为center）
·background-size：背景大小
⦁ 关键字：设置时只需一个参数
cover：等比缩放铺满整个元素
contain：等比缩放到遇到第一条元素边缘
B、固定的数值、百分比div{ background-size:100px 50%; }
（注：当只写一个值时该值为x轴的值，y轴的值默认等比缩放）
·background-attachment：背景依附
意义：
规定当元素因超出高度（宽度）而出现滚动条滚动时，背景依附元 素的方式。
scroll：随界面的滚动而移动（默认值）
fixed：不会随界面的滚动而移动
⦁ 伪类选择器
·什么是伪类选择器：
伪类选择器是指，当已知元素在满足某些条件的时候，就会被选择。
·未被点击时
a:link{ color:red; }
·鼠标悬停时
a:hover{ color:red; }
·鼠标按下时
a:active{ color:red; }
·点击过后时
a:visited{ color:red; }·伪类元素改变其他元素属性时需满足的关系：
包含：div:hover p{ width:100px; }
兄弟：div:hover+p{ width:100px; }
·元素前面插入内容：
a:before{ content:'插入前面的文字'; }
·元素后面插入内容：
a:after{ content:'插入后面的文字'; }
·before 与 after的一些特性
A、content 为必须的属性且格式必须完整 content:'';
B、其解析出的效果基本等同于写入一个标签
C、{ }中的所有属性都是为伪类元素添加不影响使用伪类的元素
D、after常用于清除浮动时使用
10.css3常见属性
·border-radius：边框圆角（可以分开设置）
数值如：20px
百分比如：20%（基于边框长度）
border-top-left-raidius:上左
border-top-right-raidius:上右
border-bottom-left-raidius:下左
border-bottom-right-raidius：下右
四个值：border-radius:上左 上右 下右 下左
三个值：border-radius:上左 上右与下左 下右
两个值：border-radius:上左与下右 上右与下左
一个值：border-radius:四个角
·box-shadow：盒子阴影
div{ box-shadow:5px（x轴偏移量） 5px（y轴偏移量） 10px（模糊度）
0px 阴影面积增量）red（阴影颜色）inset（阴影风格）; }
1、偏移量：可以为负值
2、模糊度：为0时没有模糊效果 不能为负值
3、模糊面积增量：默认为与盒子大小一致
4、阴影风格：inset（内部阴影） outset（外部阴影 默认值）
常用格式：box-shadow:0 0 10px balck;
多层阴影：box-shadow:0 0 10px red,
0 0 20px blue;
⦁ 过渡
·div{ transition:all（过渡的属性）2s（过渡时间）5s（延迟时间）
linear（运动曲线）; }
·过渡的属性：
all：所有的属性
none：默认
指定的属性如：width、margin等
·延迟/过渡时间：
s：秒ms：毫秒
·运动曲线：
linear 匀速
ease 加速-减速
ease-in 匀加速
ease-out 匀减速
ease-in-out 缓加速减速
cubic-bezier(n,n,n,n) 贝塞尔曲线 x1,y1,x2,y2
·简写格式：
transition:2s；
transition:color 2s;
·多个值：
transition:width 2s,
height 4s;
⦁ 内容溢出处理
·overflow：
hidden：溢出隐藏
auto：溢出出现滚动条
scroll：一直出现滚动条
visible：超出显示（默认值）
hidden visible占位隐藏
⦁ 浮动
·定义：
浮动是一个让元素拥有块级元素的特性但却可以在一排显示的属性，无论该元素 是否是块级元素还是行内元素
·float：
left：从左到右排列
right：从右到左排列
none：无浮动
·规则：
a) 元素遇到父级边缘的时候停止
b、其它元素在横向遇见另外一个浮动元素的时候停止
c、当父元素宽度不够时在下一排排列，同时遵循a b的规则
·特性：
a、浮动元素支持设置宽高，但是当未设置宽高时由内容撑开
b、不再支持 margin:auto;
·层级特性：
a、浮动元素之后未浮动元素会在浮动元素的下方显示
b、文字不会出现在浮动的元素的下方而是和浮动元素并排显示
c、浮动元素无法撑起父级的高度
·文档流：
界面中的元素按正常的特性（块级特性、行内特性、行块特性等）从上到下加载 排列，占据正常的位置
·脱离文档流：
如浮动、定位等后的元素会脱离普通文档流，也不再按照常规的排列方式排列其 主要特性为：提高层级，不会再占据当前的位置，可以设置宽高但宽高默认由内 容撑开，margin:auto;失效。
·清除浮动：
定义：清除浮动是指解决如，父级高度塌陷不能占据当前位置等等的一些问题， 而不是说让浮动失效
适用情况：
A) 父级元素浮动
B) 父级元素为行块级
C) 父级元素超出隐藏
D) 父级元素定位
clear：清除浮动
left-清除前面兄弟元素的左浮动
right-清除前面兄弟元素的右浮动
both-清除前面兄弟元素元素的所有浮动
A) 清除浮动的属性（clear）是作用于其前边的兄弟元素而不是其自己或者其 子级
B、清除浮动的属性元素的本身必须为块级特性）
方法：利用after伪类清除浮动（主流方式）
结合clear属性的相关特性，我们可以发现after伪类选择器与之完美 切合，所以通常 我们都是用after伪类来清浮动
.clearFixed:after{ content:''; display:block; clear:both; }
⦁ 定位
·定义：定位属性（position）允许元素相对于其自身所在的位置、父级元素移动、浏览 器窗口（取决于属性值）进行移动。这样的方式具有很好的灵活性，所以多用于 元素需要移动到一些比较偏僻的位置
·特性：
定位后元素（除relative值）和浮动一样会脱离文档流，宽高默认由内容撑开， 并且定位元素与定位元素之间可以相互重叠，显示的顺序由结构顺序和层级值决 定
·定位偏移量：
定义：
元素添加定位属性与属性值后，只会出现在默认的位置，如果想要移动它， 还需要添加与定位配合使用的偏移量属性
左偏移量：left
右偏移量：right
上偏移量：top
下偏移量：bottom
值：
固定数值：div{ position:relative; left:100px; top:100px; }
百分比：div{ position:absolute; right:50%; bottom:50%; }
注意：
一般同轴向（X、Y）的偏移量属性通常只会出现一个
·定位的值：
相对定位：relative
特性：元素自身的特性不会有任何改变，但是使用偏移量后会相对原来的位 置移动
语法：div{ position:relative; }
绝对定位：absolute
特性：元素脱离普通文档流，使用偏移量后会相对定位父级移动
语法：div{ position:absolute; }
固定定位：fixed
特性：元素脱离普通文档流，使用偏移量后会相对浏览器窗口移动
语法：div{ position:fixed; }
默认值：static
元素将以正常的方式解析，并且没有任何定位的特性，也不能作为参照物
·万能居中：div{ position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; }
·定位层级：
定义：
定位元素与定位元素之间有时候会遇到相互层叠的情况，通过层级我们可 以决定他们之间层叠的顺序
语法：
div{ position:absolute; left:0; top:0; z-index:10; }
值：
层级的值可以为正值也可以为负值不需要单位，值越大排列顺序越靠前，默认情况下后边的元素层级会比前边的层级高
注意点：
A、不是兄弟元素之间比较时，如果定位父级之间有定位比较则以其比较结果为准
B、只有使用的定位的元素层级属性才有意义
C 、元素设置定位之后其百分比宽高以定位父级为参考
⦁ 指针样式：
·作用：
规定鼠标放置到元素上时显示的指针样式
·值：
默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
text 光标指示文本。
wait 光标指示正忙（通常是一只表或沙漏）
help 光标指示帮助（通常是一个问号或一个气球）
·引用指针样式：
li{ cursor:url('pointer.cur'),pointer; }
url为引用的路径 逗号后的第二个值为引用的图标不兼容时的备用样式，且为必 须值
⦁ 元素透明度：
·定义：
设置元素及元素里所有的内容的透明度
·用法：
div{ opacity:0.5; }
0~1 ： 0为完全透明 1为完全不透明
·低版本IE兼容：
div{ filter:alpha(opacity=50); }
值
0~100 ： 0为完全透明 100为完全不透明
⦁ 头部标签补充：
·base标签：
规定界面所有a标签的跳转方式<base target=“”>
_blank 在新窗口中打开被链接文档。
_self 在被点击时的同一框架中打开被链接文档（默认）。
_parent 在父框架中打开被链接文档。
_top 在窗口主体中打开被链接文档。·标题图标引用：
1、图标后缀名为 .ico
2、引用图标<link rel='shortcut icon' type='image/x-icon' href='logo.ico' />
⦁ css样式继承
·定义：
某些特定的css样式会被子孙级元素继承，也就是说子孙级元素没有直接设置该 样式也会，拥有该特性的表现
·部分常见继承样式：
color、font、text-align、list-style、word-spacing、......
·继承注意点
A、a标签不会被继承字体颜色
B 、继承属性的优先级较低
·强制继承（inherit）
我们可以通过给样式设置一个通用值（inherit），让元素强制继承父级的该属性
列：
A、height:inherit;
B、background-color:inherit;
⦁ 表单
·用处：
表单通常是用于当需要收集用户输入的一些数据时
·构成：
表单的构成为一个表单区域（form）和若干表单元素（如input）
<form action=“”method=“get”><input />…</form>
·属性：
action 提交地址
method 提交方式：
值：get 普通提交方式 post 加密提交方式
·input：
定义：//input是form表单里的一个表单项，可以通过不同的type值成为不同作用的表单元素 //1、单行文本输入框 <input type=“text”value=“” /> //2、加密文本输入框 <input type=“password”value=“” /> //属性与值： //value=“输入框内当前的内容” name=“” //3、单选按钮 <input type=“radio” name=“sex” value=“” /> //属性与值： //name=“sex” 标记一组的单选框，name值相同的只能选择一个 //value=“0” 值用于区别一组里不同的按钮 //checked=“checked” 默认选中 //4. 复选框 <input type=“checkbox”value=“” /> //属性与值： //name=“apple” 区别不同的选项 //value=“1” 值用于区别一组里不同的按钮 //checked=“checked” 默认选中 // 5. 按钮元素 //提交按钮 <input type=“submit” value=“提交”/> //普通按钮 <input type=“button” value=“注册”/> //重置按钮 <input type=“reset” value=“重置” /> //6. 隐藏输入框 <input type=“hidden” value=“” /> //7. 文件上传 <input type=“file” value=“” />
·textarea：多行文本输入框
结构：<textarea></textarea>
属性与值：
cols=“50” 规定一行文本输入的最大字节
rows=“10” 规定输入文本最大的显示行数
name=“file” 用于区别不同的表单元素，类似于ID选择器的 作用，几乎所有的表单元素都可以拥有name属性
css属性：
resize:none; 禁止改变大小
·select>option:下拉列表
结构：<select name=“date”> <option value=“1”>一月</option> <option value=“2”>二月</option> <option value=“3”>三月</option> </select>
值：
disabled：禁用该下拉列表 值：disabled
multiple：规定可选择多个选项 值：multiple
name：规定下拉列表的名称 值：随便你咋起名
size：规定下拉列表中可见选项的数目 值：数字
·fieldset>legend：定义域
定义：
作用为划分一类表单元素
结构：<fieldset> <legend>定义域标题</legend> <input type=“text” value=“” /> <input type=“password” value=“” /> </fieldset>
·label：关联控件
定义：
通过for属性关联某些表单元素，使用户在使用鼠标操作时更加方便
结构：<form action=“”> <input type=“text” value=“”id=“textID” /> <label for=“textID”></label> <input type=“radio” value=“”id=“radioID” /> <label for=“radioID”></label> </form>
3189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
