HTML5和CSS3总结

最新推荐文章于 2021-12-20 23:27:14 发布

h_y_

最新推荐文章于 2021-12-20 23:27:14 发布

阅读量329

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/m0_46549742/article/details/105978203

版权

知识点罗列
1.HTML5新标签
2.HTML5兼容性
3.CSS3过渡
4.CSS3的2D转换
5.CSS3的3D转换
6.CSS3弹性flex
7.CSS3多列布局
8.CSS3动画
9.CSS3多媒体查询
10.CSS3选择器

总结
1.HTML5的新标签
（1）<canvas>新元素
<canvas>标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

（2）新多媒体元素
<audio>定义音频内容
<video>定义视频（video 或者 movie）
<source>定义多媒体资源 <video> 和 <audio>
<embed>定义嵌入的内容，比如插件。
<track>为诸如 <video> 元素之类的媒介规定外部文本轨道。

（3）新表单元素
<datalist> 定义选项列表。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出，比如脚本的输出。

（4）新的语义和结构元素
<article> 定义页面独立的内容区域。类似于div
<aside>定义页面的侧边栏内容。类似于div
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
行级，类似于span
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节。兼容性不好，仅支持Chrome
<dialog> 定义对话框，比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<footer> 定义 section 或 document 的页脚。类似于div
<header>定义了文档的头部区域。类似于div
<mark> 定义带有记号的文本。默认是黄色
<meter> 定义进度条。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）。
<rt> 定义字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节（section、区段）。类似于div。
<time> 定义日期或时间。
（5）dl,dt,dd,自定义列表
书写格式

<dl>
    <dt>信息
    	<dd>内容1</dd>
  	  	<dd>内容2</dd>
    	<dd>内容3</dd>
    </dt>
</dl>
或者：
<dl> 
    <dt>信息 </dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dd>内容3</dd>
</dl>

结果运行显示：

信息

内容1

内容2

内容3

2.HTML5兼容性

（1）利用兼容性语法：

 -- 强制兼容处理--
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <!--[if lte IE 6]>
    <script src="//misc.360buyimg.com/mtd/pc/index/home/ie6tip.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <!--[if gt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
   -- 浏览器之间的样式差异处理  重置浏览器的默认样式--
    <link rel="stylesheet" href="./css/normalize.css"/>

（2）浏览器中属性识别

 background-color: #2bf156; /*所有识别*/
 
 + background-color : red; /*IE6、7识别*/
 
 _background-color: #1e0bd1; /*IE6识别*/
 
 background-color: pink \9; /*6,7,8,9识别*/

（3）
css3 样式在ie9 以下不兼容用css3pipe 来处理兼容性
behavior: url(pie文件地址)：处理css3 在 IE8 或者 IE7上的兼容性。
3.CSS3过渡
属性：
transition 简写属性，复写四个属性。
transition-property 过渡的 CSS 属性的名称。
transition-duration 过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果方式。默认是 “ease”。
属性值：ease-in 、 ease-in-out 、 ease-out、 linear、 ease
transition-delay 过渡延迟。默认是 0。
注：
在默认样式中写过渡样式。写过渡样式，一定要有过渡样式的默认样式。默认样式：border-radius:0;
4.CSS中的2D转换
（1）2D样式：
①translate(平移)：
默认为x轴。
transform:
translatex(20px);沿x轴平移。
translatey(20px);沿y轴平移。
translatez(20px);沿z轴平移。
②rotate(旋转)：
默认z轴。
transform:
rotatex(20deg);沿x轴旋转20度。
rotatey(20deg);沿y轴旋转20度。
rotatez(20deg);沿z轴旋转20度。
③scale(伸缩)：
两个值分别为宽和高。
transform:scale(1,2);即宽不变，高变为原来2倍高度。
transform:scale( );一个值时宽高伸缩一样比例。
④skew(变形)：
两个值，分别为x水平倾斜和y水平倾斜。
transform:skew(45deg,0deg),即x水平倾斜45度。
⑤matrix（6个值复写属性）
tansform: matrix(0.866,1,1,0.866,0,0);
后两个是平移，第二个第三个 scale，第一个第四个 skew ，cos 角度
（2）transform-orgin属性
旋转中心点
transform-orgin：0% 0%；左上角
transform-orgin：100% 100%；右下角
transform-orgin：50% ；正中心
（3）transform复合写
transform：translatex(20px) rotatey(20deg) scale(0.5 );
**注：**旋转和平移的前后顺序影响最终结果。
5.CSS中的3D转换

构建3维空间：
transform-style: preserve-3d;
         
设置透视点：
perspective:100px;

6.CSS3弹性flex
（1）flex-direction 属性
①flex-direction 属性指定了弹性子元素在父容器中的位置。
②语法：
flex-direction: row | row-reverse | column | column-reverse
③属性值：
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
④使用：

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

其余属性值类似。
（2）justify-content 属性
①justify-content 属性：
内容对齐属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
②justify-content 语法：
justify-content: flex-start | flex-end | center | space-between | space-around
③属性值：
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
结果显示：
在这里插入图片描述
④使用：

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

flex-start：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

stretch：
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
④使用：

.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}
 
.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}
 
.item3 {
    -webkit-align-self: center;
    align-self: center;
}
 
.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}
 
.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}

7.CSS3多列布局
（1）属性
①column-count ：
指定元素应该被分割的列数。
②column-fill：
指定如何填充列
③column-gap：
指定列与列之间的间隙
④column-rule：
所有 column-rule-* 属性的简写
⑤column-rule-color：
指定两列间边框的颜色
⑥column-rule-style：
指定两列间边框的样式
⑦column-rule-width：
指定两列间边框的厚度
⑧column-span：
指定元素要跨越多少列
⑨column-width：
指定列的宽度
⑩columns：
设置 column-width 和 column-count 的简写
（2）用法：
column-count用法：

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

其余属性类似。
column-span和column-width

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

8.CSS3动画
（1）概念
①动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
②使用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
如：改变背景移动位置

@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

（2）属性
①@keyframes:
规定动画。
②animation :
所有动画属性的简写属性，除了 animation-play-state 属性。
③animation-name:
规定 @keyframes 动画的名称。
④animation-duration:
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
⑤animation-timing-function:
规定动画的速度曲线。默认是 “ease”。
⑥animation-fill-mode:
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
⑦animation-delay:
规定动画何时开始。默认是 0。
⑧animation-iteration-count:
规定动画被播放的次数。默认是 1。
⑨animation-direction:
规定动画是否在下一周期逆向地播放。默认是 “normal”。
⑩animation-play-state:
规定动画是否正在运行或暂停。默认是 “running”。
（3）使用：

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

9.CSS3多媒体查询
（1）CSS3多媒体查询：做屏幕响应式，PC或移动端均可以。
（2）使用：

@media all{  }
    all所有设备
    screen  屏幕设备  电脑  ipaid  手机
    print  打印设备
    not print  不包含打印设备

注：
不加限制条件所有的屏幕共有的样式

@media screen and (min-width: 320px) {
                    .box{
                        width: 310px;
                    }
        }

注：
写min-width：从小到大写
写max-width ：从大到小写
10.CSS3选择器
（1）element1~element2
p~ul
即：选择p元素之后的每一个ul元素
（2）[attribute^=value]
a[src^=“https”]
即：选择每一个src属性的值以"https"开头的元素
（3）[attribute$=value]
a[src$=".pdf"]
即：选择每一个src属性的值以".pdf"结尾的元素
（4）[attribute*=value]
a[src*=“runoob”]
即：选择每一个src属性的值包含子字符串"runoob"的元素
（5）:first-of-type
p:first-of-type
即：选择每个p元素是其父级的第一个p元素
（6）:last-of-type p:last-of-type
即：选择每个p元素是其父级的最后一个p元素
（7）:only-of-type
p:only-of-type
即：选择每个p元素是其父级的唯一p元素
（8）:only-child
p:only-child
即：选择每个p元素是其父级的唯一子元素
（9）:nth-child(n)
p:nth-child(2)
即：选择每个p元素是其父级的第二个子元素
（10）:nth-last-child(n)
p:nth-last-child(2)
即：选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
（11）:nth-of-type(n)
p:nth-of-type(2)
即：选择每个p元素是其父级的第二个p元素
（12）:nth-last-of-type(n)
p:nth-last-of-type(2)
即：选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
（13）:last-child
p:last-child
即:选择每个p元素是其父级的最后一个子级。
（14）:root
即：选择文档的根元素
（15）:empty
p:empty
即：选择每个没有任何子级的p元素（包括文本节点）
（16）:target
#news:target
即：选择当前活动的#news元素（包含该锚名称的点击的URL）
（17）:checked
input:checked
即：选择每个选中的输入元素
（18）:not(selector)
:not§
即：选择每个并非p元素的元素
（19）::selection
即：匹配元素中被用户选中或处于高亮状态的部分

（20）:valid
即：用于匹配输入值为合法的元素
（21）:invalid
即：用于匹配输入值为非法的元素

h_y_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5和CSS3总结

知识点罗列1.HTML5新标签2.HTML5兼容性3.CSS3过渡4.CSS3的2D转换5.CSS3的3D转换6.CSS3弹性flex7.CSS3多列布局8.CSS3动画9.CSS3多媒体查询10.CSS3选择器总结1.HTML5的新标签（1）<canvas>新元素<canvas>标签定义图形，比如图表和其他图像。该标签基于 JavaScript...
复制链接

扫一扫