HTML+CSS

HTML5元素分类

1. 块级元素

   标题<h></h>
   
   有序列表<ol><li></li></ol>
   
   无序列表<ul><li></li></ul>
   
   定义列表<dl></dl>
   
   段落标签<p></p>
   
   预格式文本<pre></pre>
   
   大段引用<blockquote></blockquote>
   
   小段引用<q></q>
   
   划分区块<div></div>
   
   定义<figure></figure>
   
   音频<audio></audio>
   
   视频<video></video>
   
   表格<table></table>
   
   表单<form></form>
   
   添加一条直线  <hr>
   
   装载独立文章<article>
   
   定义文档章节<section>
   
   定义非正文内容<aside>
   
   页眉<header>
   
   页脚<footer>
   
   导航链接部分<nav>
   
   为文档或 section 定义联系信息<address>
   
   制作更小字号的文本<small>
   
   下标文本<sub>
   
   上标文本<sup>
   

2. 内联元素

   标签类型代码书写
   
   超链接<a></a>
   
   倾斜<em></em>;<i></i>
   
   加粗</strong></strong>;<b></b>
   
   缩写<abbr></abbr>
   
   跨越多个字符<span></span>
   
   获取用户输入<input>
   
   创建下拉列表<select>
   
   创建多行文本框<textarea>
   
   定义控件标注<lable> 
   

3. 内联块元素

   标签类型代码书写
   
   图片<img  />
   
   内联框架<iframe></iframe>
   

CSS的背景:

1. 背景色:background-color
2. 背景图像:background-image
3. 重复背景background-repeat
4. 背景定位:background-position
5. 背景关联:background-attachment

CSS文本属性:

1. 文本颜色:color
2. 文本方向:direction
3. 行高:line-height
4. 字符间距:letter-spacing
5. 对齐元素中的文本:text-align
6. 向文本添加修饰:text-decoration
7. 缩进中文文本:text-indent
8. 控制元素中的文本:text-transform
9. 空白处理方式:white-space
10. 子间距:word-space

CSS字体

1. 定义文本字体:font-family
2. 字体风格:font-style
3. 字体变形;font-variant
4. 字体加粗:font-weight
5. 字体大小:font-size

CSS链接(出现顺序)

a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻

widht

height

padding:盒子模型得内边距

• padding 上 右 下 左
• padding 上下 右左
• padding 上 左右 下

border:盒子边框得厚度

• border:厚度 类型(solid dashed none hidden) 颜色

marging:盒子外边距

• margin:aotu(自动居中同padding)

overflow:内容溢出部分不再显示

• overflow:scroll;显示滚动条
• overflow:auto;根据内容自动控制是否显示滚动条,如果内容没有溢出则不显示滚动条

background-image:背景贴图

• url(路径);
• 默认是repeat方式:平铺贴图
• no-repeat不平铺
• repeat-x:x方向平铺
• repeat-y:y方向平铺

background-position:设置贴图位置

• 相对位置贴图:center,top,bottom,right,left...
• 绝对位置便宜贴图:background-position:-1px 0 ;

background-attachment:背景的附着方式

• scroll:背景图片跟着一起动
• fixed:固定

border-radius圆角属性

display设置元素的显示方式

• inline:行内元素--可以设置宽高
• inline-block:行内块,能够设置宽高
• block:块元素,能够设置宽高(独占一行) ####text-align:实现盒子中的行内元素居中显示

cursor:设置鼠标指针样式

• pointer,小手

定位方式

• 流定位(默认的定位方式):块元素从上到下依次显示,行内元素从左到右依次显示
• 浮动定位:float:left/right
  • right:向右浮动,首先脱离原本的位置,后面的元素顶上来,本身向右移动
  • left:向左浮动,文字始终不被遮挡

<div style="clear:both"></div>增加clear属性,消除浮动元素后对后续排版的影响

js的全局函数Functions

• 编码和解码 encodeURI() decodeURI()