H5学习之第一阶段

前言：本系列课程旨在快速学习H5的相关知识，共分四个阶段。当前为第一阶段，学习一些HTML和CSS的基础知识。

相关知识

目前主流的APP开发模式：1. 原生(ios,android) 2.纯HTML5 3.原生+HTML5
网页组成： 1. HTML：网页的具体内容和结构 2. CSS ：网页的样式 3. JavaScript：网页的交互效果

一、HTML

此处主要讲的是html的基本标签，像

        h1~h6 标题标签，标签由大到小
        p标签，段落标签
        div标签，层次标签。。。

这里还有很多，就不一一列举了。我们可以去HTML基础学到所有的内容。此处为基础，也是孰能生巧的内容。就不多做解释了。

二、CSS

2.1 简介

css一般叫层叠样式表。有三种书写形式

1. 行内样式，也叫内联样式。为单个标签样式，即在标签内给属性赋值

2. 页内样式。在本页面的style标签中书写。
3. 外部样式。在单独的css文件中书写。然后用link标签进行引用。<link rel = "stylesheet" href = "xxxx.css">
   注：样式遵循两个原则。1. 就近原则：哪个样式离内容近就采用哪个样式，也叫覆盖原则。 2. 叠加原则：没被采用样式中的新样式也会被使用。

2.2 选择器

作用：找到指定的标签，来给内容设定样式。

类型	格式	权值
标签选择器	标签名{}	1
类选择器	.类名{}	10
id选择器	#id名{}	100
并列(并集)选择器	选择器1，选择器2{}	两个权值和
复合(交集)选择器	选择器1选择器2{}	两个权值和
后代选择器	选择器1空格选择器2{}	两个权值和
直接后代选择器	选择器1>选择器2{}	两个权值和
相邻兄弟选择器	选择器1+选择器2{}	两个权值和
属性选择器	标签名[属性名][属性名]	权值和
伪类	标签名:伪类样式{}	10
important	！important	1000
通配符	*{}	0

其中important是写在属性值后面的。即让当前的样式为第一样式。
注：相同类型选择器遵循就近和叠加原则。不同类型的选择器即是权值加在一起，大的优先；如果相等，后定义的优先。

importane > 属性（行内样式）>id > 类选择器 |伪类 > 标签 > 通配符

2.3 标签类型和修改标签的类型

1. 块级标签：独占一行；能随时修改高度和宽度。p标签和div标签等
2. 行内标签：多个标签显示为同一行；宽度和高度大小取决于内容。a标签和span标签等
3. 行内-块级标签：多个标签可以显示在同一行；能设置宽度跟高度。input标签和button标签等
   通过display属性可以修改标签的显示类型

 display : none  //隐藏标签
 display : block  //变成块级标签
 display : inline  //变成行内标签
 display : inline-block  //变成行内-块级标签

2.4 css属性

1. 可继承属性：父标签的属性会传递给子标签，一般为文字控制属性。
2. 不可继承属性：父标签的属性不会传递给子标签，一般为块级控制属性。

常见的属性：

visibility：（隐藏元素，但是样式格式还在例如宽高）
cursor：  （规定光标移到元素上时光标的类型）
text-decoration：none （去除a标签下方的横线）
text- indent ：（首行缩进）
list- style：（去除列表前方的点）

属性类型有很多，当我们需要的时候可以去神奇的网站查找，或者直接百度需要的属性类型，更直接些。

结束语：四个阶段可以定位四天来学习，第一阶段即是基础的内容，需要我们在今后的学习中不断积累。后面的阶段信息量会大一些，我也会在学习之后进行整理，希望大家一起学习。