(HTML5)第二章

最新推荐文章于 2019-07-29 21:19:33 发布

原创最新推荐文章于 2019-07-29 21:19:33 发布 · 367 阅读

CC 4.0 BY-SA版权

14 篇文章

订阅专栏

7 篇文章

订阅专栏

一、HTML的语义元素

元素：如<nav><time><footer><header><article>等

特点：不真正做事，大多数语义元素都是块级元素。

必要性：容易修改和维护；无障碍性，方便屏幕阅读器（是一种可将文字、图形以及电脑接口的其他部分（藉文字转语音技术）转换成语音及/或点字的软件。）的使用；搜索引擎优化，有利于爬虫获得的信息更丰富；未来的功能，如提供页面的内容纲要。总之，利用予以元素，能够创建更加清晰的页面结构。

IE9不兼容问题解决：

a.使用HTML5垫片，在head加js脚本

<!--[if lt IE 9>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<!--翻墙才可以访问>
<![endif]-->

b.Modernizr可解决

c.为语义元素添加样式，以为不识别HTML5的浏览器会把语义元素当成内联元素，所以我们在样式标红添加一条“超级规则”，如下：

article,aside,figure,figcaption,footer,header,main,nav,section
summary{
display:block;
}

实例：

·<div>在传统HTML中作为制作页面结构的重要元素，html5中则使用了语义元素，不采用div标签，因为该标签不反映与页面相关的任何信息。

*<figure>标签，对于图片的插入

<figure>
<img src="human.jpg">
<figcaption>
this is human picture
</figcaption>
</figure>

ps:figcaption标签里还可以包含很多，如链接、小图标

*<aside>标签，与周围文本没关系，介绍另一个话题，如广告、某些内容链接等

*<section>适合任何以标题开头的内容区块，既可以包含一篇文章额一个片段，也可以标注整个一组文章，可标识与文档主要内容并列的部分。同时该元素会影响网页的纲要。

*<main>不能嵌套到<article>等语义元素里面，因为该元素的使命就是包裹页面中的主要内容，而非标识文档红的某个重要的部分。

*<footer> H5中规定只能放一些网站版权信息、作品来源、法律限制及链接之类的信息。所以如果你想要在里面加其他功能，如动画、关闭按钮，部分透明的背景、固定定位，则需要用div+ID选择符。

分块元素：<article><aside><nav><section>

为html文档生成纲要的工具

1、Chrome扩展--h5o插件

2、Opera扩展---插件下载地址 http://tinyurl.com/3k3ecdy

3、在线HTML纲要生成器---- http://gsnedders.html5.org/outliner/

1、类选择符的使用

.articleTitle{
font-size:40px;
}

2、上下文选择符:先找到Content类的元素，再在该元素中查找<h1>元素

.Content h1{
  font-size:40px;
}

.Content .LeadIn{
font-size:40px;
}

3、ID选择符

#LeadIn{
font-size:40px;
}

PS：ID选择符只能指定一个元素，比如定义导航栏的ID选择符--NavigationBar

4、伪类

a:link{
color:red;
}

.LeadIn:link{
color:red;
}

PS:伪类可以用于动画效果和好玩的按钮。关于伪类的更多介绍，可查看文章 https://www.smashingmagazine.com/2011/03/how-to-use-css3-pseudo-classes/

5、属性选择符:选取某标签对应的特殊属性的元素。

input[type="text"]{
font-size:40px;
}

#CSS编程思想：重复设置某个属性，反倒是可以增加将来修改样式的灵活性。

对于css3的使用，对于兼容性的考虑，可以信列出兼容性最好的属性，然后再列出新的属性，以覆盖之前的属性。如下：

.style{
...
background:yellow;
background:radial-gradient(eclipse,red,yellow)
}

总结：本书经常会提到兼容性问题，可见，在前端开发过程中这是必须面对的一个问题。