H5初体验

H5(HTML+JS+CSS)好处： 实时刷新 实时更新

创建HTML5 mac :html+tab win:html:5+tab

1.div/span:分区标签

div 是块级分区，从上往下

span 是行内分区，从左到右

2.换行标签 br

3.hn/p:文字标签， hn:h1,h2…h6 字体由大到小

p:段落 用于表示大段的文字

4.a/img:超链接和图片

a:超链接，用来在页面内容和页面间跳转

img:展示图片信息

5.ul-无序列表

li—列表中的项

总结：

1.掌握常用标签的用法

2.注意哪些标签闭合

3.注意区分块级和行内标签

块级： div/hn/p/ul/li

行内：a/img/span

------------------------------------------------------------------------------------------我是一条华丽的分割线--------------------------------------------------------------------------------------

CSS-Cascade Style Sheet 层叠样式表

1.使用CSS三种

优先级：行内>内部=外部

2.选择器：

ID: #id

类选择器 ; .cls

元素选择器：div,p,span...

群组选择器：#id,.cls,div{color:red;}

后代选择器：#id span{color:red;}

3.常用样式：

1）字体-font

font：font-style font-variant font-size/line-height

注意：

1.只要保证顺序可省略字号前面的所有属性

2.每项都可以单独设置，如：font-style：italic

2）文本-text

颜色：color：red/

对齐：text-align: center/left/right;

装饰：text-decoration:nope/under/underline/line-through

4.边框 -border:border-width border

5.背景色 -background：background-color background-image

background: no-repeat url(images/fb.png);

6.状态伪类 selector：hover{…...}

7.列表 -list-style:list-style-type list-style-position list-style-image

list-style:none;

------------------------------------------------------------------------------------------我是一条华丽的分割线--------------------------------------------------------------------------------------

1.盒子模型 - 浏览器根据盒模型解析元素应当占据的空间

真正宽= 外边距*2+边框*2+内边距*2+内容

1）外边距 - margin:10px 10px 10px 10px;

2) 内边距 - padding:10px 10px 10px 10px;

注意：

a. 在开始布局之前，首先清除掉浏览器预设

b. margin和padding是可以设置单独方向的值，

比如 margine-top/right/bottom/left:10px;

3）边框 - border:2px solid color;

4) 宽高 - width/height:10px/50%;

注意：宽高属性只对块级元素

行内元素高度由它们的内容决定。

5）显示模式 - display：block/inline - block

通过display 修改元素的默认的显示模式，从而满足不同的需求

2.浮动： - float：left/right

是元素脱离准文档流，并按指定 方向平铺

------------------------------------------------------------------------------------------我是一条华丽的分割线--------------------------------------------------------------------------------------