鹅厂前端跟你聊聊Html5+CSS3的优势有哪些
https://www.flypeng.com win10系统 发布时间:2023-04-27 09:08 来源:未知

一:大多浏览器支持,低版本也没问题

在Html5网页中引入Modernizr,就能让IE支持HTML5新元素。

HTML5样板文件快速开发(html5boilerplate.com)

 

二:布局、标签省时省力

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

<header>

<!--语义相当于<div class="header">-->

<nav>导航</nav>

</header>

这样开发者就不用标记标签的结束位置了,定位时会很方便,也易于搜索引擎进行判断。

<header>定义页面或区段的头部;

<footer>定义页面或区段的尾部;

<nav>定义页面或区段的(主)导航区域;

<section>页面的逻辑区域或内容组合,比如一个用于“简介”,另一个用于“新闻列表”。

<article>定义正文或一篇完整的内容,能被直接粘贴到别的地方有独立意义,比如“博客正文”。

<aside>定义补充或相关内容,侧边栏,广告栏等。

<a>标签可以包含多个标签

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

 

 

<a href="index.html"><h2>一</h2><img src="home.jpg"></a>

<vedio>、<audio>快速添加视频、音频

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

 

<video src="myVideo.ogg" controls width="640" height="480">这里提示你没有使用支持HTML5的浏览器</video> //controls播放控制栏;支持ogg和mp4格式;响应式视频:普通情况可以使用max-width:100% height:auto,如果是外部<iframe>视频,则使用FitVids的jQuery插件

 

三:离线Web应用

通过.manifest文件指定哪些文件可以离线访问的

四:更灵活的CSS3

01.可以多栏显示文本

column-width:12em; //试了几个浏览器好像很多无效的~

 

02.众多选择器

body[id="2^"]{} //id为"2"开头的标签

li:first-child 、 li:last-child //针对列表的首尾项

 

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

 

li:nth-child(2n+1)//第“1”个li元素起,每“2”个颜色为红色

color: red;

}

<ul>

<li>һһһһһ</li>

<li>22222222</li>

<li>33333333</li>

</ul>

p::first-line{color:red;} //第一行文字为红色

五:更丰富CSS3

传统CSS实现圆角、阴影等效果,一般要借助图片来实现,使用CSS3代替图片,可以有效减少http请求,取得更快的网页加载速度。不同浏览器对不同的CSS特性可能要使用不同的代码,可以使用预处理器SASS或LESS才处理。

 

01.CSS3轻松应用边框圆角

 

[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

<html>

<head>

<style>

a

{

background-color:red;


border-top-left-radius:8px;/*圆角位置和大小*/

border-top-right-radius:8px;

padding:0.8em;

}

</style>

</head>

<body>

<br />

<a href="#">圆角</a>

</body>

</html>

02.可以使用@font-face嵌入网页字体,还可以使用可缩放的ICON(非图片格式,fico.lensco.be)

 

补充:

使用HTML5 Boilerplate来写HTML5网站,它带有组织好的文件夹结构和CSS文件,加入当前编码的最佳实践、浏览器的bug修复以及js库。

 

怎么样,优势明显,但是如果想真正入门的话,还是建议学一下的

如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到#qq.com(#替换为@)。期待你的好消息!