3HTML5+CSS3
HTML5是唯一一个通吃PC、Mac、iPone、Android等主流平台的跨平台语言。
Html标签<!DOCTYPE html>标签
定义和用法:声明必须是HTML文档的第一行,位于标签之前。注意这个不是html标签,他的意思是指示web浏览器使用哪个HTML版本进行编写的指令。
HTML5新增标签
结构标签
多媒体标签
WEB应用标签
其他标签
结构标签(块状元素)
<article> 标记定义一篇文章
<header> 标记定义一个页面或一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一块区域。在网页中用途比较大,分成一块一块的
<aside> 标记定义页面内容部分的侧边栏
<hgroup> 标记定义文件中的一个区块的相关信息 里面<h1><h2>
<figure> 标记定义一组媒体内容以及他们的标题
<figcaption> 标签定义figure元素的标题
<footer> 标记定义一个页面或一个区域的底部
注意
header/section/aside/article/footer 不要随意进行嵌套
Header/section/footer > aside/article/figure/hgroup/nav > div 层层嵌套
多媒体标签
<video> 标记定义一个视频 autoplay自动播放 controls进度条控件 loop 循环播放 muted 静音播放 preload预播放 如果使用 "autoplay",则忽略该属性。
<audio> 标记定义音频内容标记定义一个音频 autoplay自动播放 controls进度条控件 loop 循环播放 muted 静音播放 preload预播放 如果使用 "autoplay",则忽略该属性。
<source> 标记定义媒体资源
Web应用标签
<meter> (实时状态显示:气压、气温 配合value max min)
<progress> 状态标签(任务过程:安装、加载 配合value max min)
<datalist> 列表标签 (下拉栏 配合option 配合input 配合list使用)
<details> 列表标签 (<summary> 标签包含 details 元素的标题)
<mark> 标签 强调重点的意思
重定义标签
显示不变,只是表达的含义进行了重新定义的标签
<b> 代表内联文本,通常是粗体,没有传递表示重要的意思
<i> 代表内联文本,通常是斜体,没有传递表示重要的意思
<hr> 之前表示一条水平线,现在表示主题结束,而不是简单表示水平线,虽然显示相同。
<small> 表示小字体,例如打印注释或者法律条款,之前一直表示小字体,但这里是和<big>标签成反义
<strong> 表示重要性而不是强调符号
一、CSS3 被划分为各个模块。
其中最重要的 CSS3 模块包括:
选择器
a.基本选择器:
通配符选择器、元素选择器、类选择器、id选择器
b.新增选择器:
群组选择器、伪类选择器、结构伪类选择器
c.伪类选择器:
动态伪类选择器(锚点伪类、用户行为伪类)
锚点伪类
:link,超链接并且未被访问过
:visited,超链接并且已被访问过
用户行为伪类
:hover用户鼠标悬停在链接文本内容上 超链接并且被激活
:active 按下与松开之间的状态
框模型
文本效果
渐变
2D/3D 转换
过渡、动画
二、CSS3结构类
Css3的:nth选择器
我们把css3的:nth选择器也成css3结构类
选择方法
:frist-child、:last-child
:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()
:first-of-type、:last-of-type
:only-child、:only-of-typ
:empty
Element:first-child
概念:选择属于其父元素的首个子元素的每个Element元素,并为其设置样式
兼容性:IE8+、firefox、chrome、safari、opera
Element:last-child
概念:指定属于其父元素的最后一个子元素的Element元素样式
Element:nth-child(n)
Element:nth-child(n)
概念:Element:nth-child(n)选择器匹配属于其父元素的第n个子元素,不论元素的类型
Element:nth-of-type(n)
概念::nth-of-type选择器匹配属于父元素的特定类型的第n个子元素的每个元素
关于参数(n)
Element:nth-child(number)
选择某元素的第number个Element元素
Element:nth-child(n)
N是一个简单表达式,取值”0”开始计算。这里只能是”n”,不能用其他字母代替。
使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。3n+0 3倍
Element:nth-child(odd)、Element:nth-child(even)
Odd和even是可用与匹配下标是奇数或偶数的Element元素的关键词(第一个的下标是1)
三、CSS3框模型
css3圆角属性
boder-radius属性
一个最多可指定四个border-radius属性的复合属性,这个属性允许你为元素添加圆角边框。
语法:border-radius:px、%、vw、em
多值
四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角
三个值:第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角
两个值:第一个值为左上角与右下角,第二个值为右上角和左下角
属性
Border-top-left-radius 定义了左上角的弧度
Border-top-right-radius 定义了右上角的弧度
Border-bottom-right-radius 定义了右下角的弧度
Border-bottom-left-radius 定义了左下角的弧度
css3盒模型阴影
box-shadow属性
box-shadow属性可以设置一个或多个下拉阴影的框 阴影框
对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }
语法
box-shadow:h-shadow v-shadow blur sparead color inset;
兼容性
IE9+、Firefox4+、chrome、safari5+、opera
四、CSS3文本效果
css3文本模型阴影
text-shadow 属性
text-shadow 属性向文本添加一个或多个阴影属性
规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色
语法
text-shadow: h-shadow v-shadow blur color;
css3自动换行
CSS3 word-wrap 属性
word-wrap:break-word;
允许对长单词进行拆分,并换行到下一行
css3渐变:
线性渐变
径向渐变