分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了HTML5 CSS3简要教程，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_675_4@HTML5 CSS3简要教程

@H_675_4@

@H_675_4@虽然我们现在已经普遍使用了HTML4和CSS2.1，但是我们还可以做得更好！我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在，HTML5和CSS3正跃跃欲试的等待大家，下面就跟兄弟连HTML5培训来看看他们是否真的能让我们的设计提升到下一个高度吧…

@H_675_4@

@H_675_4@跟<div>说再见,欢迎语义化标签

@H_675_4@

@H_675_4@曾经，设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的<div>布局替代了table布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们把它叫做“<div>-soup”综合症。也许你很熟悉下面的代码:

@H_675_4@

@H_675_4@<divid=”news”>

@H_675_4@<divclass=”section”>

@H_675_4@<divclass=”article”>

@H_675_4@<divclass=”header”>

@H_675_4@<h1>Div Soup Demonstration</h1>

@H_675_4@<p>Posted on July 11th,2009</p>

@H_675_4@</div>

@H_675_4@<divclass=”content”>

@H_675_4@<p>Lorem ipsum text blah blahblah.</p>

@H_675_4@</div>

@H_675_4@<divclass=”footer”>

@H_675_4@<p>Tags: HMTL,code,demo</p>

@H_675_4@</div>

@H_675_4@<divclass=”aside”>

@H_675_4@<divclass=”header”>

@H_675_4@<h1>Tangential Information</h1>

@H_675_4@</div>

@H_675_4@<divclass=”content”>

@H_675_4@<p>Lorem ipsum text blah blahblah.</p>

@H_675_4@</div>

@H_675_4@<divclass=”footer”>

@H_675_4@<p>Tags: HMTL,demo</p>

@H_675_4@</div>

@H_675_4@< /div>

@H_675_4@

@H_675_4@尽管这有些勉强，但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是，HTML5解决“<div>-soup”综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的<div>标签，并同时为CSS的调用提供了”自然”的CSS钩子。下面是兄弟连（www.lampbrother.net）HTML5课程的解决方案实例:

@H_675_4@

@H_675_4@<section>

@H_675_4@<article>

@H_675_4@<header>

@H_675_4@<h1>Div Soup Demonstration</h1>

@H_675_4@<p>Posted on July 11th,2009</p>

@H_675_4@</header>

@H_675_4@<section>

@H_675_4@<p>Lorem ipsum text blah blahblah.</p>

@H_675_4@</section>

@H_675_4@<footer>

@H_675_4@<p>Tags: HMTL,demo</p>

@H_675_4@</footer>

@H_675_4@</article>

@H_675_4@<aside>

@H_675_4@<header>

@H_675_4@<h1>Tangential Information</h1>

@H_675_4@</header>

@H_675_4@<section>

@H_675_4@<p>Lorem ipsum text blah blahblah.</p>

@H_675_4@<p>Lorem ipsum text blah blah blah.</p>

@H_675_4@<p>Lorem ipsum text blah blahblah.</p>

@H_675_4@</section>

@H_675_4@<footer>

@H_675_4@<p>Tags: HMTL,demo</p>

@H_675_4@</footer>

@H_675_4@</aside>

@H_675_4@</section>

@H_675_4@< /section>

@H_675_4@

@H_675_4@正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的<div>标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有 class和id的。

@H_675_4@

@H_675_4@正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的

@H_675_4@标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有 class和id的。

@H_675_4@

@H_675_4@结合了富有新的语义化标记的HTML5，CSS3为web设计师们的网页提供了神一般的力量。有了HTML5的能量，我们将得到更多的对文档代码的控制权，有了CSS3的能量，我们的控制权将趋于无穷大！

@H_675_4@即使没有那些高级的CSS选择器，我们仍然可以通过强大的HTML5条调用不同的容器而不劳驾class和id这类属性。像以往的DIV布局，我们在css中可能要这样调用:

@H_675_4@

@H_675_4@div#news {}

@H_675_4@div.section{}

@H_675_4@div.article{}

@H_675_4@div.header {}

@H_675_4@div.content{}

@H_675_4@div.footer {}

@H_675_4@div.aside {}

@H_675_4@

@H_675_4@我们再来看看基于HTML5的实例:

@H_675_4@

@H_675_4@section {}

@H_675_4@article {}

@H_675_4@header {}

@H_675_4@footer {}

@H_675_4@aside {}

@H_675_4@

@H_675_4@这是个进步，但仍有一些问题需要解决。在<div>实例中，我们需要通过class或id属性来调用页面中的元素。这种逻辑将允许我们将样式应用到文档中的任何一个元素上，无论是整体还是个体。例如在<div>实例中，.section 和 .content元素很容易定位。但是在HTML5实例中，实际文档中会有很多个section元素。其实我们可以添加一些特定的属性选择器来调用那些不同的section元素，不过谢天谢地，我没现在可以用少量的高级CSS选择器来定位不同的section元素。

@H_675_4@

@H_675_4@不使用class和id定位HTML-5元素

@H_675_4@下面让我们来看看如何在不使用class和id的情况下定位HTML5页面元素的一个实例，我们可以使用三种CSS选择器来定位和辨别实例中的元素。如下:

@H_675_4@* 后代选择器:[CSS 2.1]: EF

@H_675_4@* 兄弟选择器:[CSS 2.1]: E + F

@H_675_4@* 子元素选择器:[CSS 2.1]: E> F

@H_675_4@

@H_675_4@下面让我们来看看如何不使用class和id而完成对文档中的那些section元素的定位吧:

@H_675_4@定位最外层的<section>元素

@H_675_4@

@H_675_4@考虑到我们的例子并不是一套完整的HTML5代码，所以我们假定在<body>元素下有个<nav>元素与<section>元素是兄弟元素。这样的话，我们就可以向下面代码那样定位最外层的<section>了:

@H_675_4@

@H_675_4@body nav+section {}

@H_675_4@

@H_675_4@定位下一个<section>元素

@H_675_4@作为最外层<section>元素下的唯一直属子集元素，这个<section>元素也许可以这样定位:

@H_675_4@1

@H_675_4@section>section {}

@H_675_4@定位<article>元素

@H_675_4@可以定位<article>元素的方法有很多，不过最简单的方法当然就是后代选择器了:

@H_675_4@

@H_675_4@section section article {}

@H_675_4@

@H_675_4@定位<header>、<section>和<footer>元素

@H_675_4@这三个元素分别在两个地方都出现过，一是在<article>元素中出现，另一是在<aside>元素中出现。这种差别能让我们轻松定位每个元素。

@H_675_4@

@H_675_4@article header {}

@H_675_4@article section {}

@H_675_4@article footer {}

@H_675_4@

@H_675_4@或者一起定义:

@H_675_4@

@H_675_4@section section header {}

@H_675_4@section section section {}

@H_675_4@section section footer {}

@H_675_4@

@H_675_4@到目前为止，我们已经使用CSS2.1选择器排除掉了所有的class和id。那么我们为什么还需要使用CSS3呢？我很高兴你能这么问…

@H_675_4@使用CSS3对HTML5元素进行高级定位

@H_675_4@

@H_675_4@虽然我们已经使用CSS2.1选择器排除掉了所有的class和id，显然还会有很多更复杂的情况需要CSS3的高级选择器来解决。让我们通过完成一下的实例来了解一下如何在不使用无用的class和id属性的情况下利用CSS3定位页面元素。

@H_675_4@

@H_675_4@使用一个唯一的日志(post)ID定位所有日志

@H_675_4@

@H_675_4@wordpress 提供给我们一种包含了ID的每篇日志的源代码输出。这种信息通常用于导航和/或了解资料的意图，不过CSS3可以利用这些唯一的ID来定义这些日志的样式。当然，你还可以像往常那样为每篇日志添加class=”post”这样的属性，但这就与我们练习的意图相冲突了(再加上它没有一点乐趣所在)。使用” 子字符串匹配选择器”，我们就可以像下面这样定位所有日志和它们的不同元素了。

@H_675_4@

@H_675_4@article[id*=post-]{} /* 定位所有日志 */

@H_675_4@article[id*=post-] header h1 {}/* 定位所有日志中的h1标签 */

@H_675_4@article[id*=post-] section p {}/* 定位所有日志中的p标签 */

@H_675_4@我没仍然可以使用同样的方式定位评论的元素和它们的子元素。

@H_675_4@

@H_675_4@article[id*=comment-]{} /* 定位所有评论 */

@H_675_4@article[id*=comment-] header h1 {}/* 定位所有评论中的h1标

@H_675_4@article[id*=comment-] section p {}/* 定位所有评论中的p标签 */

@H_675_4@定位一些指定的区域(section)或文章(articlE)

@H_675_4@有很多博客的日志量和评论量都相当大，HTML 5会将它们由<section>或<article>元素组成。为了定位哪些指定的<section>或<article>元素，我们就要转而使用强大的“:nth-child”选择器了:

@H_675_4@

@H_675_4@section:nth-child(1){}/* 选择第一个 <section> */

@H_675_4@article:nth-child(1){}/* 选择第一个 <article> */

@H_675_4@section:nth-child(2){}/* 选择第二个 <section> */

@H_675_4@article:nth-child(2){}/* 选择第二个 <article> */

@H_675_4@

@H_675_4@同样，我们可以使用“:nth-last-child”选择器定位反序的一些元素。

@H_675_4@

@H_675_4@section:nth-last-child(1){}/* 选择最后一个 <section> */

@H_675_4@article:nth-last-child(1){}/* 选择最后一个 <article> */

@H_675_4@section:nth-last-child(2){}/* 选择倒数第二个 <section> */

@H_675_4@article:nth-last-child(2){}/* 选择倒数第二个 <article> */

@H_675_4@使用更多的方式选择指定元素

@H_675_4@

@H_675_4@另一种选择HTML5中指定元素(如header、section和footer)的方法就是利用”:only-of-type”选择器的优势。由于这些HTML5元素通常会在很多地方出现不止一次，所以当我们想定位那种在父元素下仅出现过一次的标签时这种方法很方便。例如，我们要选择的是在某元素中有切仅有的唯一一个元素，如以下代码:

@H_675_4@

@H_675_4@< section>

@H_675_4@<section></section>

@H_675_4@<section>

@H_675_4@<section>定位这个section元素</section>

@H_675_4@</section>

@H_675_4@<section>

@H_675_4@<section>定位这个section元素</section>

@H_675_4@</section>

@H_675_4@<section>

@H_675_4@<section>但不定位这个section元素</section>

@H_675_4@<section>和这个section元素</section>

@H_675_4@</section>

@H_675_4@<section></section>

@H_675_4@< /section>

@H_675_4@我们可以仅使用以下一行选择器:

@H_675_4@

@H_675_4@section>section:only-of-type {}

@H_675_4@

@H_675_4@总结

@H_675_4@我相信随着时间的推进和更多浏览器的支持，HTML5和CSS3将越来越受欢迎，它们将为web设计师们带来更无穷的能量，让我们的web前端（www.lampbrother.net）更上一个台阶。

大佬总结

以上是大佬教程为你收集整理的HTML5 CSS3简要教程全部内容，希望文章能够帮你解决HTML5 CSS3简要教程所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：3 5 css css3 html html5 教程简要

上一篇: HTML5新特性【pushState】和【re... 下一篇:html5整理（二）

猜你在找的HTML5相关文章

详解HTML5表单新增属性 2019-10-08
详解HTML5通讯录获取指定多个人的信息 2019-10-08
html5+css如何实现中间大两头小的轮播效果 2019-10-08
Html5 Canvas动画基础碰撞检测的实现 2019-10-08
使用HTML5捕捉音频与视频信息概述及实例 2019-10-08
详解HTML5中的<template>标签 2019-10-08
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例 2019-10-08
HTML5应用之文件上传 2019-10-08
详解HTML5 LocalStorage 本地存储 2019-10-08
MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7 2022-04-27