一网打尽h5与css3,学习经验心得

      html5与html其实并没有太大的区别,大部分都是一样的,只是html5中推出了一些新特性,一些新标签而已.学过或者了解过html的童鞋对html5上手是很快的,并不难.现在我们简单的玩一玩,讲一讲html5,css3到底是个什么东西.     

        说h5到底是什么,比如说:我们要做菜(html5页面),首先我们要买菜对吧.^o^.超市里会有很多标签牌写着白菜大葱黄瓜(标签),把菜选好才能做菜,才能吃啊!然而html页面就是一桌菜,区别的就是看这桌菜是"干豆腐卷大葱"还是"满汉全席"了.功能多的(菜样多的)好看的(色香味俱全的)自然是好的页面(满汉全席)了.就算我们短时间内变不成厨师长级别的,但是家常菜还是可以做的嘛.慢慢来!

        说了这么多,html5(以下统称html)就是由一个一个的标签组成,实现标签自己的功能从而让整个页面达到想要的效果.比如:鸡蛋炒柿子柿子和鸡蛋就标签.那css是什么呢,就是(样式)你的刀工,你放的调料,你是切成块还是切片还是切花,放点酱油就黑了.css就是用来调节样式的.样式做的炫酷也是很厉害的!

        好了简单介绍过后我们来说html页面怎么写:

        我用的开发软件是Hbuilder.一个html页面像一个人一样 : 有头,有身子.我们的html标签主要是脏器,写在body中,css主要是性格样貌外在,写在head中(称为头部引入).当然了css也可以用(外部引入):即在创建的web项目中的css文件夹中添加XXX.CSS文件,在文件中写样式,写法和头部引入的写法相同.

         css的引入方式有4种:1.外部引入(浏览器压力大)

                   (各有利弊)       2.头部引入(乱)

      3.标签内引入(优先级不是最高的)

                                           4.@import(优先级非常高,不常用)

         html标签

         

               

            < style type = "text/css" >

/*此处写css样式*/

.div1{

/*css选择器中的一种:类选择器*/

color:red;

/*输出的文字为红色*/

}

style>

          

 

class="div1" >我是一个块标签

/*class是类,类名是div1*/

           

 标签:

行标签：(可以共用一行)strong,em,img,a,b,i,u,s,input,span
块标签:(独占一行）h1-h6,p,div,hr,ul,ol,li,dt,dd,dl

     标签嵌套规则
1.a标签不能嵌套a标签。
2.块标签可以任意嵌套（除了p,h,dt 这三个标签可以嵌套行标签）。
3.行标签不能嵌套块标签。

        

  1.:HTML文本声明.

        如果不写ie6以下版本会出现怪异情况.

     2.盒模型:

margin+border+padding+content

可视区域:

border+padding+content

怪异盒模型:

  margin+content(应用在移动端布局)

  css3中有个属性会进入怪异盒模型.

      # 加padding注意总高度要变化

文字默认大小17px

      3.标签
   双标签:里面可以嵌套内容.

    单标签:里面不需要嵌套内容.

     4.标签类型:
  块 : 独占一行,可以设置宽高margin\padding...,宽度默认100%
  行 : 可以共用一行,默认内容撑开宽高,不能设置垂直margin,左右margin可设
  img,input : 可以共用一行,默认内容撑开宽高,并且可以设置宽高
              居中用text-align:center
              行块标签偏向于行
        定位/浮动元素 : 脱离文本流,可以共用一行,默认内容撑开宽高,并且可以设置宽高
     5.table
cellspacing:单元格合并间距
colspan:列合并
rowspan:行合并
     6.表单元素
form :  action(上传地址)
              method:上传方式.
        get:上传速度块,不安全
        post:上传速度慢,安全
input:type(必填):
      text:文本输入框
      password:密码
      number:数字输入框
      button:按钮(value也要填)
      file:文件上传
      submit:提交按钮
      reset:重置按钮(基本用不到)
      checkbox:复选框
      radio:单选框
      select(option):下拉列表
textarea:文本域
     7.display
        none:消失,布展内容
inline:转换为行标签
block:转换为块标签
inline-block:转换为行块标签
table:表格类型
     8.float:浮动 ,使块标签们在同一行上,此时该元素脱离文本流,浮在文本表面
对兄弟造成影响(解救办法):
(1).这个兄弟也浮动
(2).clear:left/right/both.
对父级造成影响:
(1).父级也起飞(浮动)(不常用)
(2).overflow:hidden
(3).加一个空标签然后给空标签加clear both.
浮动以后的元素叫浮动元素,性质如上.
浮动通常用于左右布局.

# overflow:hidden 清除超出父级范围的部分

overflow:scroll 超出父级范围的部分变为在父   

                         级可视范围滑动显示

9.cursor: 改变光标样式 .

    9.定位(移动端特别常用)
    position:
    relative:相对于自身相对定位(文本没有脱离文本流)
    absolute:绝对定位(父级设置position:relative 子集设置position:absolute)
    fixed:相对于窗口定位.(nav,广告).
    static:默认值(不定位)
    z-index:z轴
       用途:
    1.用于页面重叠部分

  css选择器:
  1.通配符 (*)

      2.id (#)

     3.类选择器(class) 

         4.标签

            5.群组 (eg:.div1,.div2,div3{ })  

     6.后代选择器

      7.伪类(eg:a:hover) 

       8.结构选择器

9.属性选择器

    

起名规范

1.只能由字母数字下划线和$组成,并且不能以数字开头.

2.见名知意.

3.不能与系统保留字重名

4.不能重复命名

5.驼峰命名规则:

        eg:yourName

          leftTopYourName

    10.html新特性:
标签:header,nav,footer,header section,Mark,hgroup,article,aside,figure,
功能标签:video,audio,iframe,canvas(画布,画图用的)
                input新的type:url/number/range/date/search/color

       11.响应式
流式布局:margin,padding用百分比表示上下左右都是按照宽度的百分比来的
    媒体查询:@media

    所为响应式就是在页面的可视窗口大小改变时,页面布局随着变化,视觉效果更好.

  一个性能完备的页面当然少不了JS了,JS请听下回分解