回顾上周学习的HTML5

2016-03-18  本文已影响58人  Alexander

前言

1, 什么是HTML5 ?

**2, 学习HTML5的好处与缺点 ? **

**3, HTML5中常见的标签? **

4, CSS的基本回顾

行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">

页内样式：在本网页的style标签中书写
<style>
    body {
        color: red;
    }
</style>

外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link href="CSS/index.css" rel="styleSheet">

5,CSS的选择器

// 标签
<div>我是一个标签</div>
// 标签选择器
div{
color : red;
}

// 结果 : 只要是div标签,标签内部的所有文字都会是红色


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

// 类选择器
.Alex{
color : red;
}
// 注意前面有一个圆点
// 结果: 只要是标记了Alex的标签中的所有文字都会是红色的

//标签
<p id = "Alex">我是一个标签</p>

// id选择器
#Alex{
color : red;
}
// 结果 : 只要是id名是Alex的,内部所有的文字都是红色

// 标签
<p class="Alex">我是一个类标签</p>
<p>我是一个段落标签</p>

<div class="Alex">我也是一个类标签</div>
<div>我是一个普通的标签</div>

// 选择器
div, .Alex{
color : red;
}

// 结果 :
我是一个类标签 : 文字为红色
我也是一个类标签: 文字为红色
我是一个普通的标签: 文字为红色
其他的都是默认颜色(黑色)

// 标签
<p class="Alex">我是一个类标签</p>
<p>我是一个段落标签</p>

<div class="Alex">我也是一个类标签</div>
<div>我是一个普通的标签</div>

// 选择器
div.Alex{
color : red;
}

// 结果 :我也是一个类标签 : 文字为红色
其余的全为默认颜色(黑色)

注意:必须同时成立,要是div标签,还需是class类标签


// 标签
<div>
    <p>div的儿子p</p>
        <span>
            <p>div的孙子span,span的儿子p<p/>
        </span>
</div>
<p>div的兄弟p</p>
// 注释 : 第一个p是div的儿子. 第二个p是span的儿子,div的孙子. 第三个p是div的兄弟. span是div的儿子

// 选择器
div span p{
color :red;
}

// 结果 : 只有div的孙子span,span的儿子这句话是红色,其余的全为黑色.

6,CSS中选择器的优先级以及两个原则

原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先

7, HTML标签的类型

8, 如何修改标签的显示类型

9, CSS属性中的继承问题

10, CSS中常见的属性

11, 计算盒子模型的四个属性

12, CSS3 新增的特性

13, CSS布局

回顾了上周末学习的知识结构后,我们来开始学习一些比较有意思的知识,丰富网页,详情见下一章笔记

上一篇下一篇

猜你喜欢

热点阅读