学所 前端 | HTML5+CSS3

Posted 是这样的Seong样

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学所 前端 | HTML5+CSS3相关的知识,希望对你有一定的参考价值。




html5

&CSS3

2020/09/5



啥?!HTML5是什么?

“HTML5”和“HTML”有什么区别?

新增的HTML5特性有多好用?


HTML5


    HTML5是W3C与WHATWG合作的产物。W3C指World Wide Web Consortium,即万维网联盟,专注于XHTML2.0。而WHATWG指的是Web Hypertext Application Technology Working Group,致力于web表单和应用程序。在 2006 年,双方进行合作,决议创建一个新的HTMl版本,即HTML5。

    HTML的上一个版本诞生1999年,HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。


HTML5 建立的一些规则:

HTML5的新特性是基于 HTML、CSS、DOM 以及 javascript的新“规范”,它减少了对外部插件的需求,优化了对错误的处理机制,添加了更多可以取代脚本的标记,HTML5 可以独立于设备,开发进程对公众透明。

最新版本的 Safari、Chrome、Firefox 、Opera以及IE9 都分别支持某些 HTML5 特性。



HTMl5新特性


结构类标签



https://www.w3school.com.cn/tags/index.asp


    结构标签是构建基本网页结构的主要元素,只具有语义层的意义,大多数没有太多特殊的作用。HTML5新增的结构类标签大大增强了代码的可读性。

HTML5 中的一些有趣的新特性有:

  • 用于绘画的 canvas 元素。

  • 用于媒介回放的 video 和 audio 元素

  • 对本地离线存储的更好的支持。

  • 新的特殊内容元素,比如 article、footer、header、nav、section等。

  • 新的表单控件,比如 calendar、date、time、email、url、search等

  • 浏览器支持:

    最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。


全局类属性


contendeditable:使内容变成可编辑文本,继承父级元素。

  • true

  • false

  • classname继承父级元素

hidden:规定对元素进行隐藏,只要存在就是隐藏效果,如不想要隐藏,则需要将其删除,而不是设置为false。设置该属性会使元素脱离文档流。

spellcheck:拼写检查,可对text、input、textarea等文本进行检查,


其它标签


mark:标记文本标签-突出黄色。

ambed:引入其他多媒体标签。

article:标记一个文章


音视频标签


video:视频标签,对视频的文件格式以及频率都有要求。

  • controls,使用默认的视频控制面板

  • autoplay,设置自动播放

  • width/height,设置视频播放窗口的宽高

  • 播放次数-默认为1次

一般使用子标签source来引入音视频的文件、可写多个作为备选。支持的文件格式:Ogg、mp4、WebM,其属性值与属性名相同,即可以只写属性名。


audio:音频标签,用法同视频标签的使用。



CSS3


    CSS3 是完全向后兼容的。

    CSS3 被划分为一些模块,其中最重要的 就有:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局以及用户界面几类。W3C 仍然在对 CSS3 规范进行开发,而当前主流的浏览器都已经实现了相当多的 CSS3 属性。



CSS3新增属性



border——边框类



border-radius:设置圆角边框,其属性值可以为百分比,或者具体的像素。

由下例可看出,当值大于50%时,效果是和50%的圆角效果一样的。

而在网页中最舒适的圆角,即一般按钮的圆角效果,这时候的属性值设为具体的像素值,且值为元素高度的一半,即此效果:

学所 前端 | HTML5+CSS3



box-shadow:设置元素的阴影效果。属性值有:

  • h-shadow,必备属性,设置水平阴影的位置,可以为负值。   

  • v-shadow,必备属性,设置垂直阴影的位置,可以为负值。 

  • blur,用于设置模糊距离。 

  • spread,设置阴影尺寸。

  • color,设置阴影的颜色。    

  • inset,可将外部阴影 (outset) 改为内部阴影(第五个案例)。  

学所 前端 | HTML5+CSS3



border-image:设置图片边框。

  • border-image-source,用在边框的图片的路径。   

  • border-image-slice,图片边框向内偏移。   

  • border-image-width,图片边框的宽度。   

  • border-image-outset,边框图像区域超出边框的量。   

  • border-image-repeat,图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 


学所 前端 | HTML5+CSS3


    在设置时有几点需要注意,首先是在设置border-image时,需要先给要设置边框的元素设置一个border,可设成transparent值为固体透明的样式,再设置图片边框。对于图片边框的切片可以设成百分比或者一个数值,该数值和图片边框的宽度一样,设置时不需要有单位,通过调节这两个数值可以达到不同的视觉效果,另外针对图片平铺的设置,其实并没有出现效果,这个之后需要在再进行讨论。


background——背景类



background-clip:规定背景的绘制区域。

  • border-box,背景被裁剪到边框盒。

  • padding-box,背景被裁剪到内边距框。

  • content-box,背景被裁剪到内容框。    

学所 前端 | HTML5+CSS3


background-origin:规定背景图片的定位区域。

  • border-box,背景被裁剪到边框盒。

  • padding-box,背景被裁剪到内边距框。

  • content-box,背景被裁剪到内容框。

学所 前端 | HTML5+CSS3

由第三个box例子可以看出background-clip与background-origin的区别,后者只能够移动图片,前者则是剪裁超出部分的显示。

可移动的内容:

学所 前端 | HTML5+CSS3



background-size:规定背景图片的尺寸。

  • 设置具体数值,即背景图像的高度和宽度。第一个值为宽,第二个值为高。只设置一个值时,第二个值会被设置为 "auto"。

  • 设置百分比,以父元素的百分比来设置背景图像的宽度和高度。

  • 如果只设置一个值,则第二个值会被设置为 "auto"。

  • cover,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

  • contain,使图像图像的宽度和高度完全适应内容区域。 

学所 前端 | HTML5+CSS3


font——文字类



    文字类中的许多属性是当前主流的浏览器不兼容的,所以不一一列举。


text-align-last:设置如何对齐最后一行或紧挨着强制换行符之前的行。 

  •  left,设置最后一行文字左对齐

  • right,设置最后一行文字右对齐

  • center,设置最后一行文字居中对齐

text-overflow:规定当文本溢出包含元素时发生的事情。

  • clip,修剪文本。

  • ellipsis,显示省略符号来代表被修剪的文本。

  • string,使用给定的字符串来代表被修剪的文本。

text-shadow:向文本添加阴影,与box-shadow的用法相同。

学所 前端 | HTML5+CSS3


word-break:规定非中日韩文本的换行规则。

  • normal,使用浏览器默认的换行规则。   

  • break-all,允许在单词内换行。   

  • keep-all,只能在半角空格或连字符处换行。   

word-wrap:允许对长的不可分割的单词进行分割并换行到下一行。

  • normal,只在允许的断字点换行(浏览器保持默认处理)。   

学所 前端 | HTML5+CSS3



@font-face ——字体



font-family:name;规定字体的名称。  src:URL;定义字体文件的路径。

font-stretch:可选属性,定义如何拉伸字体。默认是 "normal"。  

  • normal

  • condensed

  • ultra-condensed

  • extra-condensed

  • semi-condensed

  • expanded

  • semi-expanded

  • extra-expanded

  • ultra-expanded    

font-style:可选属性。定义字体的样式。默认是 "normal"。      

  • ormal

  • italic

  • oblique   

font-weight:可选属性。定义字体的粗细。默认是 "normal"。   

  • normal-不加粗

  • bold-加粗

  • 100

  • 200

  • 300

  • 400

  • 500

  • 600

  • 700

  • 800

  • 900

unicode-range:unicode-range;可选属性。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

学所 前端 | HTML5+CSS3


    设置字体的前提是先下载好字体文件,ttf、otf、otc或者woff等,拥有了字体文件之后,可以直接将这种字体安装到自身的电脑中,若文件格式不兼容,或者需要改成该种字体的其它文件格式,可以到“字客网(http://www.fontke.com/)”进行字体文件格式转换。


资料来源:

https://www.w3school.com/


Transform——2D转换


translate():通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:

学所 前端 | HTML5+CSS3
学所 前端 | HTML5+CSS3



rotate():元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。-90deg与270deg的旋转效果是一致的,以此类推。

学所 前端 | HTML5+CSS3
学所 前端 | HTML5+CSS3



scale():使元素的尺寸增加或者减少,第一个数值为宽,第二个数值为高,给一个值时为宽高放大或缩小相同的倍率。

学所 前端 | HTML5+CSS3
学所 前端 | HTML5+CSS3



skew():元素翻转给定的角度,两个数值时为水平值垂直方向值。

学所 前端 | HTML5+CSS3


matrix():把所有 2D 转换方法组合在一起,需要六个参数,包含数学函数,允许旋转、缩放、移动以及倾斜元素。

六个参数之间的关系详见:

https://blog.csdn.net/weixin_42103959/article/details/81044389


transform-origin:允许改变被转换元素的位置。

资料:

https://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html


Transform——3D转换



translate3d(x,y,z),定义3D转化。

  • translateX(x),仅用于X轴的值。 

  • translateY(y),仅用于Y轴的值。

  • translateZ(z),仅用于Z轴的值。

scale3d(x,y,z),定义 3D 缩放转换。   

  • scaleX(x),给定 X 轴缩放值。   

  • scaleY(y),给定 Y 轴缩放值。   

  • scaleZ(z),给定 Z 轴缩放值。   

rotate3d(x,y,z,angle),定义3D旋转。  

  • rotateX(angle),给X轴旋转角度。 

  • rotateY(angle),给Y轴旋转角度。

  • rotateZ(angle),给Z轴旋转角度。


matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n),3D 转换,使用 16 个值的 4x4 矩阵。


perspective(n),定义 3D 转换元素的透视视图。   


transform:向元素应用 2D 或 3D 转换。  


transform-origin:允许你改变被转换元素的位置。


transform-style:规定被嵌套元素如何在 3D 空间中显示。

  • flat,子元素将不保留其 3D 位置。

  • preserve-3d,子元素将保留其 3D 位置。  


perspective:规定 3D 元素的透视效果。 

  • number,元素距离视图的距离,以像素计。   

  • none,默认值,不设置透视。


perspective-origin:规定 3D 元素的底部位置

水平方向,默认值为50%。

    其他取值:

    • left

    • center

    • right

    • length

    • %-设置百分

垂直方向:默认值为50%。

    可能的值:

    • top

    • center

    • bottom

    • length

    • %-设置百分比


backface-visibility:定义元素在不面对屏幕时是否可见。

  • visible,背面是可见的。   

  • hidden,背面是不可见的。    


transition——过渡



transition:简写属性,用于在一个属性中设置四个过渡属性。

  • transition-property

  • transition-duration

  • transition-timing-function

  • transition-delay

transition-property:规定应用过渡的 CSS 属性的名称。

  • none,没有属性会获得过渡效果。

  • all,所有属性都将获得过渡效果。

  • property,定义应用过渡效果的CSS 属性名称列表,列表以逗号分隔。   


transition-duration:定义过渡效果花费的时间,单位以秒或毫秒计,默认值是 0。


transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。

  • linear,规定以相同速度开始至结束的过渡效果,效果同:

    cubic-bezier(0,0,1,1);  

  • ease,规定慢速开始,然后变快,然后慢速结束的过渡效果,效果同:

    cubic-bezier(0.25,0.1,0.25,1);    

  • ease-in,规定以慢速开始的过渡效果,效果同:

    cubic-bezier(0.42,0,1,1);    

  • ease-out,规定以慢速结束的过渡过程效果同:

    cubic-bezier(0,0,0.58,1); 

  • ease-in-out,规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。   

  • cubic-bezier(n,n,n,n),在 cubic-bezier 函数中定义自己的值。取值范围在0-1之间。

transition-delay:定在过渡效果开始之前需要等待的时间,以秒或毫秒计,默认值为0。


animate——动画



@keyframes:规定动画。创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,可以多次改变这套 CSS 样式,并以百分比的形式来规定改变发生的时间,从0%到100%,或者也可以使用"from" - "to"来记录这些关键节点。

0% 是动画的开始时间,100% 动画的结束时间,而为了获得最佳的浏览器支持,应该始终定义 0% 和 100% 选择器。在使用动画属性来控制动画的外观时,应同时将动画与选择器绑定。

写法:

@keyframes 动画名称{

    0% {css-styles;}

    100%{css-style;}

}


animation:所有动画属性的简写属性,除了 animation-play-state 属性。

如:

animation: myfirst 5s linear 2s infinite alternate;

即:

animation:动画名称 动画周期时长 出现形式 开始时间(被触发后)(出现效果时长) 动画播放次数;


animation-name:规定 @keyframes 动画的名称。

  • keyframename,规定需要绑定到选择器的 keyframe 的名称。   

  • none,规定无动画效果(可用于覆盖来自级联的动画)。 


animation-duration: 规定动画完成一个周期所花费的秒或毫秒。默认是 0。


animation-timing-function:规定动画的速度曲线。默认是 "ease"。

  • linear,动画从头到尾的速度是相同的。

  • ease,默认。动画以低速开始,然后加快,在结束前变慢。

  • ease-in,动画以低速开始。  

  • ease-out,动画以低速结束。   

  • ease-in-out,以低速开始和结束。

  • cubic-bezier(n,n,n,n),在cubic-bezier 函数中自己的值。取值范围是0-1之间。


animation-delay:规定动画何时开始。默认是 0。


animation-iteration-count:规定动画被播放的次数。默认是 1。


animation-direction:规定动画是否在下一周期逆向地播放。默认是 "normal"。

  • normal,默认值。动画正常播放。

  • alternate,动画轮流反向播放。    


animation-play-state:规定动画是否正在运行或暂停。默认是 "running"。

  • paused,规定动画已暂停。   

  • running,规定动画正在播放。


animation-fill-mode:规定对象动画时间之外的状态。

  • none,不改变默认行为。   

  • forwards,当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。   

  • backwards,在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。   

  • both,向前和向后填充模式都被应用。    


columns——多列



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 的简写属性。    


appearance——用户界面



appearance:允许您将元素设置为标准用户界面元素的外观。

box-sizing:允许您以确切的方式定义适应某个区域的具体内容。

icon:为创作者提供使用图标化等价物来设置元素样式的能力。

nav-down:规定在使用 arrow-down 导航键时向何处导航。

nav-index:设置元素的 tab 键控制次序。

nav-left:规定在使用 arrow-left 导航键时向何处导航。

nav-right:规定在使用 arrow-right 导航键时向何处导航。

nav-up:规定在使用 arrow-up 导航键时向何处导航。

outline-offset: 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

resize:规定是否可由用户对元素的尺寸进行调整。    



学习心得


早在前两周就过完了HTML5和CSS3知识,当时的笔记并没有做得那么详尽,很多知识都没有真正掌握理解,最明显的就是在上周的项目中,我们小组的动画效果极少,用JS写的模块切换都比较生硬,所以想着赶紧把动画的内容好好理顺,并掌握下来。

这篇推文没有动画效果的展示,我会在下一篇推文中挑一些动画来写,并分享出来。




【END】





文字:Seongyeom自整笔记

图片:网络配图




以上是关于学所 前端 | HTML5+CSS3的主要内容,如果未能解决你的问题,请参考以下文章

适合转HTML5大前端的5类人!有你吗?

5月千锋HTML5就业战报:平均月薪8303元,最高月薪16500元

前端学习笔记--16/5~22/5 jQuery,HTML5+CSS3+JS 简易微信贺卡开发

中国科学院数学所二阶椭圆偏微分方程考博试题

前端初识

前端大纲********