总结:
常用的标签:
<body> <head> <title>
标题<h1>-<h6> 段落<p> 粗体 <b> 斜体 <i>
上标<sup> 下标<sub> 换行符<br/> 水平线<hr />
加粗<strong> <em> 强调斜体 <blockquote>引用
  空格
列表:
有序列表:<ol>
<li></li>
</ol>
无序列表: <ul>
<li></li>
</ul>
定义列表: <dl>
<dt></dt>
<dd></dd>
</dt>
<a>标签 target=_blank 表示在新的窗口打开默认 self
<img> 属性 src title alt height width
图片格式 jpg png gif
h5中的语义标签<figure><figcaption> 图形和图形说明
表格<table>
<tr> 行
<th></th>标题
<th></th>
<th></th>
</tr>
<tr>
<td></td>单元格
<td></td>
<td></td>
</tr>
</table>
<td>属性 colspan跨列 rowspan跨行
长表格 <thead><tbody><tfoot>分别是表头 主体 表尾
表单
<form action=">请求地址 method 请求方式:get ,post
<input type="text"/>文本框
<input type="password"/>密码框
<input type="radio"/>单选按钮
<input type="checkbox"/>复选框 属性checked 的值是bool类型
<input type="file"/>文件上传域
<input type="submit"/>提交按钮
<input type="image" src=""/>图像按钮
<input type="button"/>按钮
<button><img src="">add</button>
button可以设置类型为hidden来隐藏表单控件
</form>
<select>下拉列表框
<option></option>
<option></option>
</select>
<textarea></textarea>文本域
<label>标签<label>
<fieldset> 组合表单元素
<legend></legend> 标题
</fieldset>
在html5中增加了 type ="email" "url" "date" “search”
required 属性用来验证表单 placeholder 属性用来显示特性的值
html中的注释<!-- --> css /* */ js // /* */
id 唯一的标示符 class可以有多个
块级元素 独占一行 <p> <ul> <li> <h1> <div>..
内联元素 不能设置宽高 <a> <b> <img><em> <span>..
<div></div> <span></span> 盒子
<iframe> 内联框架 有属性src width height ...
<mate>页面信息
html5 添加视频
<video src="" width height >
preload 自动加载 controls 控制条显示
autoplay 自动播放
loop 重新播放
<source></source>
<source></source>
可以添加多个源防止浏览器不支持
<video/>
添加音频
<audio src=""> 属性和video类似
<audio>
CSS设想元素周围有一个盒子
CSS选择器:
通用选择器:*{}
标签选择器:h1,p,{}
类选择器: .class{}
Id选择器: #id{}
子选择器:li>a{}
后代选择器:p a{}
相邻兄弟选择器:h1+p{}应用与h1相邻的第一个p
普通兄弟选择器:h1~p{}应用于h1相邻的多个p
CSS中规则优先级:
就近原则:两个选择器相同那么后出现的选择器优先级高
具体性原则:选择器具体则优先级高 id:100 class:10 标签:1
重要性:在任意属性值后加!important来强调
继承:父元素的属性值会被子元素继承
color 文本的颜色 backgroundcolor背景颜色
color 有rgb和rgba opacity指的是透明度0-1
在css3中 用hsl 和 hsla 来表示颜色 h-色调 s-饱和度 l-明度 a - 透明度
字体
font-family指定的字体 :Georgia, times,serif:
font-face 服务器端字体
font-size : 像素 百分数; em值 1em等于一个m的宽度
字体刻度:
字体大小单位:
12像素刻度:
h1--24px--200%--1.5em
16像素刻度:
h1--32px--200%--2em
@font-face{ 更多字体
font-family:
src:url();
}
font-weight---normal --bold 粗体 可以为数字100,200,300,...,700,
font-style--normal--italic--oblique(是文本以倾斜显示)
text-transform--uppercase--lowercase--capitalize-分别是大写-小写-每个首字母大写
text-decoration--none---underline(下划线)-overline(上划线)---line-through(横穿线)---blink(会使文本以动态闪烁)
line-height---行间距-
通常将盒子的高度和行间距设置为一样可使文本居中显示
letter-spacing:字母间距
word-spacing;单词间距 (0.25em左右)
对齐方式:
text-align--center--right--left--justify--
vertical-align--top--middle--bottom--
文本缩进--text-indent--负值代表像左边缩进-9999px
投影:text-shadow--有四个取值-
-1-向左或右延伸的距离-2-向上或下延伸的距离
-3-可选值 模糊程度-4-投影颜色
一些伪类:
:first-letter,:first-line首字母,首行文本
:link 未访问的链接
:visited 单机后的链接
:hover 放在链接上
:active 正在访问的链接
:focus 元素拥有焦点的时候
:after 在元素后添加
特定选择器:
p[class]
p[class="dog"];
盒子的大小:
width:
height:
min-width
max-width
min-height
max-height
内容溢出
overflow--hidden--scroll--auto--
这个属性可以用来解决父元素里面只有一个浮动元素的时候父元素的边框会折叠在一起。 widht:100%; overflow:auto;
margin 外边距
padding 内边距
border 边框
让盒子居中
设置他的marign: 0 auto;
text-align属性会被子元素继承
内联元素与块级元素的转换
display---block--inline--inline-block--none
块级 内联 具有内联属性的块级元素 隐藏
不应该在内联盒子中创建块级元素
盒子的隐藏
visibility--hidden--visible--隐藏和可见
使用visibility盒子隐藏了但是它还是占一个位置
边框图片-css3
border-image--url 切割图片的位置 如何处理直边可选值(stretch repeat round)拉伸图片 重复图片
border-image:url("") 11 11 11 11 stretch;
盒子的投影
box-shadow--水平偏移-垂直偏移-模糊距离-阴影扩展--(正右下)
border-radius--圆角-椭圆形 -可以指定位置如border-top-right
常用的标签:
<body> <head> <title>
标题<h1>-<h6> 段落<p> 粗体 <b> 斜体 <i>
上标<sup> 下标<sub> 换行符<br/> 水平线<hr />
加粗<strong> <em> 强调斜体 <blockquote>引用
  空格
列表:
有序列表:<ol>
<li></li>
</ol>
无序列表: <ul>
<li></li>
</ul>
定义列表: <dl>
<dt></dt>
<dd></dd>
</dt>
<a>标签 target=_blank 表示在新的窗口打开默认 self
<img> 属性 src title alt height width
图片格式 jpg png gif
h5中的语义标签<figure><figcaption> 图形和图形说明
表格<table>
<tr> 行
<th></th>标题
<th></th>
<th></th>
</tr>
<tr>
<td></td>单元格
<td></td>
<td></td>
</tr>
</table>
<td>属性 colspan跨列 rowspan跨行
长表格 <thead><tbody><tfoot>分别是表头 主体 表尾
表单
<form action=">请求地址 method 请求方式:get ,post
<input type="text"/>文本框
<input type="password"/>密码框
<input type="radio"/>单选按钮
<input type="checkbox"/>复选框 属性checked 的值是bool类型
<input type="file"/>文件上传域
<input type="submit"/>提交按钮
<input type="image" src=""/>图像按钮
<input type="button"/>按钮
<button><img src="">add</button>
button可以设置类型为hidden来隐藏表单控件
</form>
<select>下拉列表框
<option></option>
<option></option>
</select>
<textarea></textarea>文本域
<label>标签<label>
<fieldset> 组合表单元素
<legend></legend> 标题
</fieldset>
在html5中增加了 type ="email" "url" "date" “search”
required 属性用来验证表单 placeholder 属性用来显示特性的值
html中的注释<!-- --> css /* */ js // /* */
id 唯一的标示符 class可以有多个
块级元素 独占一行 <p> <ul> <li> <h1> <div>..
内联元素 不能设置宽高 <a> <b> <img><em> <span>..
<div></div> <span></span> 盒子
<iframe> 内联框架 有属性src width height ...
<mate>页面信息
html5 添加视频
<video src="" width height >
preload 自动加载 controls 控制条显示
autoplay 自动播放
loop 重新播放
<source></source>
<source></source>
可以添加多个源防止浏览器不支持
<video/>
添加音频
<audio src=""> 属性和video类似
<audio>
CSS设想元素周围有一个盒子
CSS选择器:
通用选择器:*{}
标签选择器:h1,p,{}
类选择器: .class{}
Id选择器: #id{}
子选择器:li>a{}
后代选择器:p a{}
相邻兄弟选择器:h1+p{}应用与h1相邻的第一个p
普通兄弟选择器:h1~p{}应用于h1相邻的多个p
CSS中规则优先级:
就近原则:两个选择器相同那么后出现的选择器优先级高
具体性原则:选择器具体则优先级高 id:100 class:10 标签:1
重要性:在任意属性值后加!important来强调
继承:父元素的属性值会被子元素继承
color 文本的颜色 backgroundcolor背景颜色
color 有rgb和rgba opacity指的是透明度0-1
在css3中 用hsl 和 hsla 来表示颜色 h-色调 s-饱和度 l-明度 a - 透明度
字体
font-family指定的字体 :Georgia, times,serif:
font-face 服务器端字体
font-size : 像素 百分数; em值 1em等于一个m的宽度
字体刻度:
字体大小单位:
12像素刻度:
h1--24px--200%--1.5em
16像素刻度:
h1--32px--200%--2em
@font-face{ 更多字体
font-family:
src:url();
}
font-weight---normal --bold 粗体 可以为数字100,200,300,...,700,
font-style--normal--italic--oblique(是文本以倾斜显示)
text-transform--uppercase--lowercase--capitalize-分别是大写-小写-每个首字母大写
text-decoration--none---underline(下划线)-overline(上划线)---line-through(横穿线)---blink(会使文本以动态闪烁)
line-height---行间距-
通常将盒子的高度和行间距设置为一样可使文本居中显示
letter-spacing:字母间距
word-spacing;单词间距 (0.25em左右)
对齐方式:
text-align--center--right--left--justify--
vertical-align--top--middle--bottom--
文本缩进--text-indent--负值代表像左边缩进-9999px
投影:text-shadow--有四个取值-
-1-向左或右延伸的距离-2-向上或下延伸的距离
-3-可选值 模糊程度-4-投影颜色
一些伪类:
:first-letter,:first-line首字母,首行文本
:link 未访问的链接
:visited 单机后的链接
:hover 放在链接上
:active 正在访问的链接
:focus 元素拥有焦点的时候
:after 在元素后添加
特定选择器:
p[class]
p[class="dog"];
盒子的大小:
width:
height:
min-width
max-width
min-height
max-height
内容溢出
overflow--hidden--scroll--auto--
这个属性可以用来解决父元素里面只有一个浮动元素的时候父元素的边框会折叠在一起。 widht:100%; overflow:auto;
margin 外边距
padding 内边距
border 边框
让盒子居中
设置他的marign: 0 auto;
text-align属性会被子元素继承
内联元素与块级元素的转换
display---block--inline--inline-block--none
块级 内联 具有内联属性的块级元素 隐藏
不应该在内联盒子中创建块级元素
盒子的隐藏
visibility--hidden--visible--隐藏和可见
使用visibility盒子隐藏了但是它还是占一个位置
边框图片-css3
border-image--url 切割图片的位置 如何处理直边可选值(stretch repeat round)拉伸图片 重复图片
border-image:url("") 11 11 11 11 stretch;
盒子的投影
box-shadow--水平偏移-垂直偏移-模糊距离-阴影扩展--(正右下)
border-radius--圆角-椭圆形 -可以指定位置如border-top-right