前言:本系列课程旨在快速学习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一般叫层叠样式表。有三种书写形式
- 行内样式,也叫内联样式。为单个标签样式,即在标签内给属性赋值
- 页内样式。在本页面的style标签中书写。
- 外部样式。在单独的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 标签类型和修改标签的类型
- 块级标签:独占一行;能随时修改高度和宽度。
p标签和div标签等
- 行内标签:多个标签显示为同一行;宽度和高度大小取决于内容。
a标签和span标签等
- 行内-块级标签:多个标签可以显示在同一行;能设置宽度跟高度。
input标签和button标签等
通过display属性可以修改标签的显示类型
display : none //隐藏标签
display : block //变成块级标签
display : inline //变成行内标签
display : inline-block //变成行内-块级标签
2.4 css属性
- 可继承属性:父标签的属性会传递给子标签,一般为文字控制属性。
- 不可继承属性:父标签的属性不会传递给子标签,一般为块级控制属性。
常见的属性:
visibility:(隐藏元素,但是样式格式还在例如宽高)
cursor: (规定光标移到元素上时光标的类型)
text-decoration:none (去除a标签下方的横线)
text- indent :(首行缩进)
list- style:(去除列表前方的点)
属性类型有很多,当我们需要的时候可以去神奇的网站查找,或者直接百度需要的属性类型,更直接些。