HTML5 和CSS3 提高

1、HTML5的新特性

HTML5的新增性主要是针对于以前的不足,增加了一些新的标签新的表单新的表单属性等。
这些新特性有兼容性问题,基本都是IE9+以上版本才支持,如果不考虑兼容性问题,可以大量使用这些新特性。

1.1、HTML5的新增的语义化标签

以前布局,基本都是div来做,但它对于搜索引擎来说,是没有语义的。

注意

  • 这种语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在IE9中,需要把这些元素转换成块级元素
  • 移动端更喜欢使用这些标签
  • HTML5还增加了很多其他标签
<header>: 头部标签
<nav>: 导航标签
<article>: 内容标签
<section>:定义文档某个区域
<aside>:侧边栏标签
<footer>: 尾部标签

在这里插入图片描述

1.2、HTML5的新增的多媒体标签

使用多媒体标签可以很方便的在页面中嵌入音频和视频,而不再使用flash和其他浏览器插件。
HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式有限。

音频 <audio>
视频 <video>

1、视频
当前 video 元素支持三种视频格式: 尽量使用mp4格式

浏览器MP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYES 从Firefox 21版本开始 Linux系统从Firefox 30开始YESYES
SafariYESNONO
OperaYES 从Opera 25版本开始YESYES

语法

<video src="文件地址" controls="controls"></video>

常见属性
在这里插入图片描述
2、音频

当前 audio 元素支持三种音频格式,

浏览器MP3WavOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

语法

<audio src="文件地址" controls="controls"></audio>

常见属性
在这里插入图片描述
3、多媒体标签总结

  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 可以给视频标签添加muted属性来静音播放视频,音频不可以(JavaScript解决)
  • 视频标签是重点,经常设置自动播放,不适用controls控件,循环和设置大小属性

1.3、HTML5的新增的input类型

重点:number、 tel 、search
在这里插入图片描述

1.4、HTML5的新增的表单属性

属性说明
requiredrequired表单拥有该属性表示其内容不能为空,必填
placeholder提示文本表单的提示信息,存在默认值将不显示
autofocusautofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
autocompleteoff/on当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项; 默认已经打开on,关闭off需要放在表单内,同时加上name属性,同时提交成功
multiplemultiple可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色

input :: placeholder {
color:pink;
}

2、CSS3的新特性

  • 新增的CSS3特性有兼容性问题,ie9+才支持
  • 移动端支持优于PC端
  • 应用相对广泛

2.1、新增选择器

1、属性选择器
可以根据元素特定属性来选择元素,不要借助类或者id选择器。
注意: 类选择器、属性选择器、伪类选择器,权重为10

例: div[class^=icon] {
         color: pink;
    }
选择符简介
E[ att ]选择具有att属性的E元素
E[ att=“val” ]选择具有att属性的且属性值等于val的E元素
E[ att^=“val” ]匹配具有att属性且值以val开头的E元素
E[ att$=“val” ]匹配具有att属性且值以val结尾的E元素
E[ att*=“val” ]匹配具有att属性且值中含有val的E元素

2、结构伪类选择器
主要根据文档结构来选择元素,常用于根据父级选择器里面的子元素。

nth-child(n) 和nth-of-type(n)区别:

  • 前者对父元素里所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看是否和E匹配。—>基于父元素编号。
  • 后者是对父元素里面指定子元素进行排序选择,先去匹配E,然后再根据E找第n个孩子。—>基于当前元素编号。

nth-child(n) 选择某个父元素的一个或多个特定的子元素:

  • n可以是数字,关键字和公式
  • n如果是数字,就是选择第n个子元素,里面数字从1开始…
  • n可以是关键字: even偶数, odd奇数
  • n可以是公式:常见公式(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
公式取值
n全部
2n偶数
2n+1奇数
5n5 10 15…
n+5从第5个开始(包含第五个)到最后
-n+5前5个(包含第5个)
ul li :first-child {
     background-color: pink;
}

ul li :last-child {
     background-color: pink;
}

ul li :nth-child(3) {
     background-color: pink;
}

ul li :nth-child(even) {
     background-color: pink;
}

ul li :nth-child(odd) {
     background-color: pink;
}
选择符简介
E : first-child匹配父元素中的第一个子元素E
E : last-child匹配父元素中的最后一个子元素E
E : nth-child(n)匹配父元素中的第n个子元素E
E : first-of-type指定类型E的第一个
E : last-of-type指定类型E的最后一个
E : nth-of-type(n)指定类型E的第n个

在这里插入图片描述

3、伪元素选择器
利用CSS创建新标签元素,不需要HTML标签,从而简化HTML结构。

选择符简介
element::before在元素内部的前面插入内容
element::after在元素内部的后面插入内容

注意:

  • before和after创建一个元素,但是属于行内元素
  • 新创建的这个元素在文档中是找不到的,所以称为伪元素
  • 语法 element ::before {}
  • before和after必须有content属性
  • before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
  • 伪元素选择器标签选择器一样,权重为1

伪元素选择器使用场景:

1、伪元素选择器使用场景1: 伪元素字体图标

在这里插入图片描述
2、伪元素选择器使用场景2: 伪土豆效果

.tudou::before {
		content: '';
		display:none;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background: rgba(0,0,0,0.3) url(arr.png) no-repeat center;
}


.tudou:hover::before {
    display:block;
}

3、伪元素选择器使用场景3: 伪元素清除浮动

  1. 额外标签法(隔墙法)
  2. 父级添加overflow属性
  3. 父级添加after伪元素
  4. 父级添加双伪元素
    在这里插入图片描述
    在这里插入图片描述

2.2、盒子模型

可以通过 box-sizing 来指定盒模型,有两个值:可指定为content-boxborder-box,这样计算盒子大小的方式就发生了改变。
如果盒子模型改成 box-sizing:border-box 那 padding和border 就不会撑大盒子了(前提是padding和border不会超过盒子宽度width)

  • box-sizing:content-box 盒子大小为 width + padding +border(以前默认的);
  • box-sizing:border-box 盒子大小为width;

2.3、其他特性

1、图片模糊处理

CSS3滤镜 filter:filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

 filter: 函数();  例如:filter:blur(5px); bulr模糊处理 数值越大越模糊

2、计算盒子宽度width:clac 函数

括号里面可以使用+ - * /来进行计算
width:clac (100%-80px);

2.4、CSS过渡(重点)

在不使用 Flash动画或 javaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画:从一个状态渐渐过渡到另外一个状态。
可以让页面更好看,动感十足,虽然低版本浏览器( ie9以下版本)不支持,但是不影响页面布局。
经常和 : hover 一起搭配使用。
口诀:谁做过渡给谁加

/*如果想要写多个属性,利用逗号进行分割*/
transition: 要过渡的属性 花费时间 运动曲线 何时开始;

1. 属性:想要变化的css属性,宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡,写一个all就可以。
2. 花费时间:单位是 (必须写单位) 比如 0.5s
3. 运动曲线:默认是ease(可以省略);

linear:匀速ease: 逐渐慢下来ease-in:加速ease-out:减速ease-in-out:先加速后减速

4. 何时开始:单位是秒,必须写单位,可以设置延迟触发时间,默认是0秒(可以省略)

2.5、CSS 2D转换

转换 是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。

1、移动: translate

可以改变元素在页面中的位置,类似定位
重点:

  • 定义2D转换中的移动,沿着X和Y轴移动元素,X轴向右是正值,Y轴向下是正值
  • 最大优点:不会影响其他元素位置
  • translate中的百分比单位是相对于自身元素的translate:(50%,50%)
  • 对行内标签无效果

语法:

    transform:translate(x,y); 
    transform:translateX(n);
    transform:translateY(n);

案例:

/* 实现盒子水平和垂直居中,常用定位搭配transform:translate(-50%,-50%);  */
div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #fff;
}
p {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    /* 盒子往左 往上走自己高度 宽度的一半 */
    transform:translate(-50%,-50%); 

}

2、旋转:rotate

元素在二维平面内顺时针或者逆时针旋转。
重点:

  • rotate里面跟度数,单位是deg,比如 rotate(45deg)
  • 角度为正:顺时针 负:逆时针
  • 默认旋转中心点是元素中心点

语法:

transform: rotate(度数);
转换中心点 ransform-origin

设置元素转换中心点

 transform-origin: x y;
 x y空格隔开
 x y 默认转换中心点是元素中心点 (50% 50%)
 还可以给元素设置 像素 或者 方位名词 (top bottom left right center)
 transform-origin: left bottom ;
 transform-origin: 50px 100px ;

案例:

div {
   width: 200px;
   height: 200px;
   border: 1px solid #ccc;
   overflow: hidden;
  
}
div::before {
    content: "栗子";
    /* before伪元素属于行内元素 */
    display: block;
    width: 100%;
    height: 100%;
    background-color: green;
    transform: rotate(180deg);
    transform-origin: left bottom;
    transition: all 0.4s;
}
/* 鼠标经过div 里面的before复原 */
div:hover::before {
    transform: rotate(0deg);
}

3、缩放:scale

重点:

  • 优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子

语法:

x,y用逗号隔开
transform: scale(x, y);
transform: scale(1, 1); 宽高放大一倍,等于没有放大
transform: scale(2, 2);宽高都放大两倍
transform: scale(2); 只写一个参数,则第二个参数和第一个一样,相当于scale (2,2)
transform: scale(0.3, 0.3);缩小

案例:
图片放大

div {
    overflow: hidden;
}
div img {
    /* 谁做过渡给谁加 */
    transition: all 0.4s;
}
div img:hover {
    transform: scale(1.1); 宽高一起放大1.1倍
}

<div><a href="#"><img src="scale.jpg" alt=""></a></div>

分页按钮

li {
    width: 30px;
    height: 30px;
    border: 1px solid pink;
    text-align: center;
    line-height: 30px;
    list-style: none;
    border-radius: 50%;
    cursor: pointer;
    transform: all 0.4s;
}

li:hover {
    transform: scale(1.2);
}

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

4、 2D转换综合性写法

transform: translate() rotate() scale()....  空格隔开
顺序会影响转换效果(先旋转会改变坐标轴方向)
当同时有位移和其他属性的时候,位移要放在最前面

在这里插入图片描述

2.6、CSS 动画

动画(animation)可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

动画序列

  • 0% 是动画开始,100%是动画完成,这样的规则是动画序列
  • keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多次数
  • 请用百分比来规定变化发生的时间,或者用关键词‘from’‘to’等同于0% 100%

1、先定义动画
keyframes定义动画(类似定义选择器)

@keyframes 动画名称move {
  /*动画开始*/
  0% {
      width: 100px;
      transform: translateX(0px);
  }
  
  /*动画结束*/
  100% {
      width: 200px;
      transform: translateX(1000px);
  }
}

2、再使用(调用)动画

div {
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin: 100px auto;
    /* 调用动画 */
    animation-name:动画名称 move ;
    /* 持续时间 */
    animation-duration: 持续时间 5s;
}

动画常用属性
在这里插入图片描述
在这里插入图片描述

动画简写属性
在这里插入图片描述

2.7、CSS 3D转换

3、广义的HTML5

  • 广义的HTML5 是HTML5 本身 + CSS3 +JavaScript
  • 这个集合有时称为HTML5和朋友,通常缩写为HTML5
  • 虽然HTML5的一些特性仍然不被某些浏览器支持,但是它是一种发展趋势。
  • HTML5 MDN介绍
  • https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值