第二季第十一天 html5语义化标签 css透明度

时间：2022-09-23 17:13:50

span不能设置宽高背景

HTML5语义化标签

<section>标签所包裹的是有一组相似的主题的内容，可以用这个标签来实现文章的章节、标签式对话框中的各种标签页等类似的功能。

<section>通常包含一个头部<header>、可能还会包含一个尾部<footer>。

<article>

    <h1>JavaScript框架</h1>

    <p>Javascript框架是指以Javascript语言为基础搭建的编程框架。</p>

    <section>

        <h2>angular.Js<h2>

        <p>angular.Js是一款优秀的前端JS框架</p>

    </section>

    <section>

        <h2>Vue.js<h2>

        <p>Vue.js是用于构建交互式的Web界面的库</p>

    </section>

    <section>

        <h2>jQuery<h2>

        <p>jQuery是一个快速、简洁的JavaScript框架。</p>

    </section>

</article>

我们不但可以在<article>标签中使用<section>标签，还可以在<section>标签中使用<article>标签。

<section>

    <h1>HTML5技术栈</h1>

    <p>广义而言的HTML5包含HTML、CSS和JavaScript三个部分</p>

    <article>

        <h2>HTML<h2>

        <p>内容</p>

    </article>

    <article>

        <h2>CSS<h2>

        <p>样式</p>

    </article>

    <article>

        <h2>JavaScript<h2>

        <p>行为</p>

    </article>

</section>

在这个例子中，<section>标签代表一段内容，在这段内容中，HTML、CSS、Javascript是三个完全独立的部分，因而我们为这三个不同的部分分别使用<article>标签。

<div> <section> <article>三者的比较：

  • <div>：应用广泛，只要我们想为一个区域定义一个样式或者为其添加JS行为，就可以使用div标签
  • <section>：包含的内容是一个明确的主题，通常有标题区域,但是可以重复
  • <article>:如果我们的页面中需要一个单独的模块来实现一个单独的功能，就用<article>，其他的时候都用

header

通常被放置在页面或者页面中某个区块元素的顶部，包含整个页面或者区块的标题、简介等信息，起到引导与导航的作用

一个文档中可以包含一对或者一对以上的<header>标签。标签的位置是次要的，不一定非要显示在页面的上方，我们可以为任何需要的区块标签添加<header>元素，

nav

表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分

不但可以作为页面独立的导航区域存在，我们还可以在<header>标签中使用。此外，<nav>标签还可以显示在侧边栏中。由此可见，一个页面之中可以有多个<nav>标签。

根据HTML5标准，<nav>标签只用于页面的主要导航部分。因为搜索引擎或者屏幕阅读器会根据<nav>标签来确定网站的主体内容，所以并不是任意一组超链接都适合放置在<nav>标签中,我们只要将主要的，基本的链接组放进<nav>即可,对于有辅助性的页脚链接则不推荐使用<nav>标签。

<header>

    <img src="data:images/logo.png" alt="**科技" />

    <h1>**信息科技有限公司</h1>

    <nav>

        <li><a href="#">首页</a></li>

        <li><a href="example.html">客户案例</a></li>

        <li><a href="service_one.html">技术服务</a></li>

        <li><a href="aboutus_one.html">关于我们</a></li>

        <li><a href="connection.html">联系我们</a></li>

    </nav>

</header>

footer

一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式等信息。

跟<header>标签一样，<footer>标签的使用个数没有限制，可以在任意需要的区块底部使用。

article

表示包含于一个文档、页面、应用程序或网站中的一段独立的内容，可以被独立的发布或者重新使用文章标记标签。

<article>标签应该使用在相对比较独立、完整的的内容区块，所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用它。通常情况下，一个<article>元素包括标题、正文和脚注。和<nav>标签一样，该标签同样不能用在<address>标签中

<article>

    <h1>HTML5学习之语义化标签</h1>

    <p>....正文.....</p>

    <footer>版权所有*伪版必究</footer>

</article>

<article>标签还可以嵌套使用，但是它们必须是部分与整体的关系。例如在一篇发表的博客中，我们可以对读者评论使用该标签。

示例如下：

<article>

    <h1>HTML5学习之语义化标签</h1>

    <p>....正文.....</p>

    <article>

        <header>

            <h2>读者评论</h2>

        </header>

        <article>

            <header>

                <h3>评论人：张三</h3>

                <p>评论时间：<time datetime="2017-02-15">2017-02-15 11:45:23</time></p>

            </header>

            <p>张三到此一游</p>

        </article>

        <article>

            <header>

                <h3>评论人：李四</h3>

                <p>评论时间：<time datetime="2017-02-09">2017-02-09 14:20:15</time></p>

            </header>

            <p>李四到此一游</p>

        </article>

     </article>

</article>

aside

所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。

<aside>标签一般使用在页面、文章的侧边栏、广告、友情链接等区域。

示例如下：

 <article>

    <h1>HTML5学习之语义化标签</h1>

    <p>....正文.....</p>

    <aside>

        <h2>什么是语义化标签</h2>

        <p>语义化标签就是......</p>

    </aside>

</article>

语义化标签来自博客https://www.cnblogs.com/hedawei/p/6376087.html

1.css3新增的一个属性rgba,语法

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间

2.设置透明度是不会被继承的，所以不用头疼继承的问题.字体透明度便设置成color:rgba(0,0,0,0.5);边框：border:5px solid rgba(0,0,0,0.5);或者背景都可以

3.css2中opacity制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就有心无力了。

相关文章