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

来源：互联网发布：谷歌访问助手 for mac 编辑：程序博客网时间：2024/06/14 16:02

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标签

<html>

<head>

<styletype="text/css">

/*此处写css样式*/

.div1{

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

color:red;

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

}

</style>

</head>

<body>

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

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

</body>

</html>

标签:

行标签：(可以共用一行)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.<!DOCTYPE html>: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请听下回分解

0 0