HTML5学习之路回顾

以标签为代码的编程语言

链接地址：http://www.w3school.com.cn

1、HTML：网页的具体内容和结构（超文本标记语言）

     CSS：网页的样式（美化网页最重要的一步）

     JavaScript：网页的交互效果，比如对用户鼠标事件作出响应

2、标签类型

     标题：h

     段落：p

     超链接：a

     输入：input       (outline 去除系统自带的点击效果)

     换行：br

     列表：ul   li

     图像：img

     容器：div  span

     按钮：button

3、

4、CSS：

     行内样式  style color : red;

     页内样式  style  div{}

     外部样式  link rel=“”  href=“"

5、CSS选择器：

标签选择器、

类选择器（.类名{}）、

id选择器（唯一的#id名{}）、

并列选择器（div, .类名{}）、

复合选择器（div.类名{}）、

后代选择器（div p{}）、

直接后代选择器（div > p{}）

相邻兄弟选择器 （div + p{}）

属性选择器 （div[name][age]） (div[name=“jake"])

伪类选择器  （div:focus{}）(input:focus{})   （改变）   hover:鼠标移动到它的位置时候变化  focus：触发的时候变化

6、标签的类型

     块级标签：独占一行  div  ul  li  p

     行内标签：span  a

     行内块级标签   input button

     改变标签类型  display  以下类型

     none:

     block:将行内标签改成块级标签（可以换行）

     inline:

     inline-block:将块级标签改成行内标签（不独占一行）

7、CSS的属性

     1)可继承属性：

     所有标签可继承：visibility 隐藏内容，结构还在   cursor  改变鼠标样式（手指（pointer）、十字架）

     内联标签可继承：line-height、color、font-family、font-size、font-weight（bolder 加粗）、text-decoration（设置超链接下面的横线）

     块级标签可继承：text-indent（设置缩进3%）、text-align

     列表标签可继承：list-style (设置列表类型)

     2)不可继承属性：

     display、margin、border、padding、background

     height、min-height、max-height、width、min-width、max-width

     over-flow（设置自动,类似tableview）、position、left、right、top、bottom、z-index

     float、clear

8、CSS3新增的属性

     RGBA 设置透明度    opacity （设置不透明度）

     块阴影与圆角阴影    

     box-shadow   text-shadow

     圆角

     border-radius 

     圆角图片

     border-image

     形变

     transform 

9、盒子模型

     content（内容）padding（填充、内边距）border（边框）  margin（边界、外边距）

10、网页的布局

     脱离标准的布局

     float  （right、left）

     position、left、right、top、bottom

     positon 有好几个值  

11、

-webkit-transform:  0.1  linear;    延迟时间与效果

-webkit-transform-origin: bottom center;   参照物

-webkit-transform: scale( 1.6);   形变

12、

@media  screen  and (max-width:  500 px)  自适应屏幕