前言
- 工作一周,差不多的又忘了,在学习新知识之前,回顾一下上周末学习的HTML5知识.
1, 什么是HTML5 ?
- 所谓的HTML5就是网页5.0版本的超文本标记语言,是HyperText Markup Labguage 5的简称,2014年才完成HTML5的标准制定,历时8年. 简单理解其实它就是一个文本而已,只是它是由浏览器负责将它解析成具体的网页内容而已.
**2, 学习HTML5的好处与缺点 ? **
- HTML5是跨平台的,用HTML5编写的UI界面能够运行在所有拥有浏览器的平台,也就是说,HTML5的运行平台(环境)是浏览器.但是,使用HTML5也有很多缺点:比如,不能使用照相机,不能访问相册等功能.
- Web 3.0 : 就是H5与C3的结合(主流技术) :
- HTML5亮点: Canvas HTML5音视频 Web存储 Geolocation Workers多线程处理
- CSS3亮点: 设计动画 2D变形 N多新特性
**3, HTML5中常见的标签? **
- 标题 : h1 h2 h3 h4 h5 h6...
- 段落 : p
- 换行 : dr
- 容器 : div span // 就是用于容纳其他标签
- 表格 : table tr td
- 列表 : ul li ol
- 图片 : img
- 输入框 : input
- 连接 : a
- 按钮 : button
- 更多资源可以去官网 :http://www.w3school.com.cn/
4, CSS的基本回顾
- 1, 什么是CSS
- CSS的全称是Cascading Style Sheets，层叠样式表,简称CSS
- 2,CSS的作用
- 它的主要作用就是用于美化HTML中的内容,控制标签的样式.它都是以键值对的形式存在的,比如 : color : red(左边是属性名 : 右边是属性值)
- CSS有3种书写方法,来控制htmt的标签样式
行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
页内样式：在本网页的style标签中书写
<style>
body {
color: red;
}
</style>
外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link href="CSS/index.css" rel="styleSheet">
5,CSS的选择器
- CSS总选择器有很多种类,它们的作用主要是在编程HTML5的过程中可以快速的去找到对应的标签,以下是主要用到的选择器种类
- 1, 标签选择器: 即根据标签名快速找到对应标签的设置样式
// 标签
<div>我是一个标签</div>
// 标签选择器
div{
color : red;
}
// 结果 : 只要是div标签,标签内部的所有文字都会是红色
- 2,类选择器 : 即根据类名找到对应标签的设置样式
// 标签
<div class = "Alex">我是一个标签</div>
// 类选择器
.Alex{
color : red;
}
// 注意前面有一个圆点
// 结果: 只要是标记了Alex的标签中的所有文字都会是红色的
- 3,id选择器 : 即根据id名找到标签设置样式
//标签
<p id = "Alex">我是一个标签</p>
// id选择器
#Alex{
color : red;
}
// 结果 : 只要是id名是Alex的,内部所有的文字都是红色
- 4,并列标签 :多个标签拥有相同的样式,以逗号隔开
// 标签
<p class="Alex">我是一个类标签</p>
<p>我是一个段落标签</p>
<div class="Alex">我也是一个类标签</div>
<div>我是一个普通的标签</div>
// 选择器
div, .Alex{
color : red;
}
// 结果 :
我是一个类标签 : 文字为红色
我也是一个类标签: 文字为红色
我是一个普通的标签: 文字为红色
其他的都是默认颜色(黑色)
- 5, 复合标签 : 相当于逻辑与,必须所有条件都符合,之间没有了逗号
// 标签
<p class="Alex">我是一个类标签</p>
<p>我是一个段落标签</p>
<div class="Alex">我也是一个类标签</div>
<div>我是一个普通的标签</div>
// 选择器
div.Alex{
color : red;
}
// 结果 :我也是一个类标签 : 文字为红色
其余的全为默认颜色(黑色)
注意:必须同时成立,要是div标签,还需是class类标签
- 后代标签:用于更加精准的定位,比如:div a p{}它们之间以空格隔开
// 标签
<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的儿子这句话是红色,其余的全为黑色.
- 注意:CSS中还有很多选择器,但是不是很常用,需要深究可以去WC3官网.
6,CSS中选择器的优先级以及两个原则
important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
优先级 :
通配选择符(*):0
标签 : 1
类 : 10
属性 : 10
伪类 : 10
伪元素 : 1
id : 100
important : 100
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
- 两个原则
- 1, 就近原则 : 相等级别的选择器,谁后定义执行谁
- 2, 叠加原则 : 属性值的叠加,只要是上一个级别没有的属性,就会叠加,有的就会执行级别较高的,级别相同的就执行后定义的.
7, HTML标签的类型
HTML标签的类型分为下面3种:
块级标签 :比如: div ul p li...
行内标签 : span a
行内-块级标签 : button input
1, 块级标签 : 独占一行,可以随时设置宽度和高度
2, 行内标签 : 多个标签可以显示在同一行,但是不能随时设置宽度和高度,宽高是由内容的大小来决定的
行内-块级(内联-块级)标签:多个标签能同时显示在同一行,并且能随时设置宽度和高度
8, 如何修改标签的显示类型
- CSS中提供了一个属性display,这个属性有4个属性值,分别代表不同的功能
- 1, display.none : 隐藏标签(全部隐藏)
- 2, display.block : 将标签设置为块级标签(标签是独占一行的,可以随时设置宽度和高度)
- 3, display.line :将标签设置为行内标签(多个标签能同时显示在同一行,但是不能设置宽度和高度)
- 4, display.line-block : 将标签设置为行内-块级标签(多个标签能同时显示在同一行,并且可以随时设置宽度和高度)
- 补充知识点 : 注意visibility和display.none的区别,它们都有吟唱标签的功能,但是他们之间的区别在于visibility隐藏标签后,宽度和高度仍然存在,也就是说即使隐藏了,它还是一直占位着,而display.none隐藏标签后,全部隐藏,包括宽度和高度,没有占位.
9, CSS属性中的继承问题
- 可继承的属性
- 父标签的属性值会传递给子标签,一般是文字控制属性可以继承
- 不可继承属性
- 父标签的的属性值不能传递给子标签,一般是区块控制属性.
10, CSS中常见的属性
- background 设置背景
- display 修改显示类型（none、block、inline、inline-block
- padding 内边距（四种方式）
- margin 外边距（四种方式) // 具体见官网
- border 设置边框（border-width、border-style、border-color)
- overflow 设置超出元素边界内容的显示
- line-height 垂直居中
- cursor 设置光标的类型 (手指 十字架)(在伪类hover中使用)
- text-decoration 设置a标签的下划线
- text-align 水平居中
- ist-style 设置列表左边编号的类型,经常用 none
11, 计算盒子模型的四个属性
- 我们完全可以将网页上的每一个标签都看成一个盒子,详情见官网提供的图片和解释.每个盒子都有4个属性.
- 内容（content）
- 填充（padding，内边距）
- 边框（border)
- 边界（margin，外边距)
12, CSS3 新增的特性
- C3中新增了很多属性,在实际开发过程中使用率非常高,下面我们来举几个例子,不全,想要深究的朋友可以去官网.
- RGBA(透明度) :用于设置透明度,是在原有的RGB基础上添加了透明度属性.
- 阴影
- 块阴影:box-shadow
- 圆角阴影:text-shadow
- 注意它们是如何取值的,详情见关网
- 设置圆角 : boder-radius
- 设置边框图片 : border-image
- 形变:transform(用到时直接去官网,例子:mac桌面的dock)
13, CSS布局
- 在默认的情况下,所有的网页标签都是从左往右,从上到下的,并且是都在"标准流"布局中
- 在网页中还存在一种标签就是不管你怎么滚动页面,它会在指定的位置不动.这样的标签脱离了"标准流"的布局.C3中提供了两种方法来设置脱离标准流布局.
- 1, float属性
- float属性有两个属性值:left和right.
- left : 脱离标准流布局,浮动在父标签的最左边
- right : 脱离标准流布局,浮动在父标签的最右边
- position属性
- position属性常见的5个属性值
- absolute
- relative
- fixed
- static
- inhert
