初探内联框架iframe&布局元素&css

iframe

HTML内联框架元素 (< iframe >) 表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。

1. 结合a标签可以实现点击标签显示

    <div>
        <a href="https://j.map.baidu.com/9d/2cE" target="wenzhou">温州市</a>
        <!-- src 属性使用url
        srcdoc 说明性文本，内部可以是使用标签 -->
        <!-- <iframe srcdoc="<i style='color:red'>温州</i>地图" name="wenzhou"></iframe> -->
        <iframe srcdoc="地图" name="wenzhou"></iframe>
    </div>

1. 用iframe 做迷你小后台

    <div class="header">网站管理后台</div>
    <div class="aside">
        <a href="../1208/demo2.html"target="content">连接与锚点</a>
        <a href="../1208/demo3.html"target="content">图片</a>
        <a href="../1209/demo1.html"target="content">列表表格与表单</a>
    </div>
    <div class="main">
        <iframe srcdoc="请点击左侧按钮" name="content" frameborder="0"></iframe>
    </div>

布局元素

HTML5 语义化的布局元素
header aside main footer

article ：表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
section ：表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题.例如，导航菜单应该包含在 < nav >元素中，但搜索结果列表和地图显示及其控件没有特定元素，可以放在 < section >里.注意：如果元素的内容作为一个独立的有意义的集合，<article>元素可能是更好的选择。
等等

    <!-- 页眉 -->
    <header>
        <!-- 实体字符：页眉中原样显示不会被浏览器解析 -->
        <h1>&lt;header &gt;</h1>
    </header>
    <!-- div:通用容器标签，块级 内部可以放置任意类型的元素，当一个容器类型不定时尅用它 -->
    <!-- span:通用容器，不过它内部是行内元素 文本/图片/连接/input -->
    <div class="container">
        <!-- 侧边栏 -->
        <aside>
            <h1>&lt;aside &gt;</h1>
        </aside>
        <!-- 主体 -->
        <main>
            <h1>&lt;main &gt;</h1> 
            <article>
                <h3>今天是个好日子</h3>
                <p>很高兴认识了来自全球的web开发者</p>
            </article>
            <div>
                <section>
                    <h1>&lt;section &gt;</h1> 
                </section>
                <section>
                    <h1>&lt;section &gt;</h1> 
                </section>
            </div>
        </main>
    </div>
    <!-- 页脚 -->
    <footer>
        <h1>&lt;tooter &gt;</h1>
    </footer>

---

CSS语法和基本术语

什么是CSS，层叠样式表，是一种样式表语言，用来描述HTML或者XML文档的呈现。CSS描述了再屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
CSS是开放网络的核心语言之一，由W3C规范实现跨浏览器的标准化。

一个元素样式会受到4个级别声明的影响：
1.继承的：根据元素在文档的结构和层级关系来确定它最终的样式
2.浏览器的：用户代理模式，大多数浏览器表基本一致
3.自定义的：写到HTML文档的 style 标签中的
4.行内样式（内联样式）：写到元素的 style 属性中的
级别越来越高

写在哪里

1. 如果你的css样式仅仅用来控制当前页面元素，就用style标签写到当前页面

2. 如果是写在CSS文件中，可用用link标签引入当前页面

3. 写在行内，标签的style属性中。属于特殊定制

术语：规则，选择器，声明块，属性和值

h1 {
    /* 声明块中的每个名值对叫一个样式声明 */
    /* 前景色  */
    color: green;
    font-weight: 100;
}

h1 选择器
{} 由一对大括号包住的内容是声明块
选择器 + 声明块 规则
写在声明块中的名值对 属性和值

分类

1.标签选择器

h1 {
    color: green;
    font-weight: 100;
}

2.属性选择器

/* *：表示所有元素/标签 */
        *[class="title"] {
            color:violet;
        }

有类属性和id数据

        /*类属性*/
        h1[class="title"] {
            color:violet;
        }
        /* id属性。id:浏览器并不检查它的唯一性，由程序员自己控制 */
        h1[id="page-title"]{
            color:red;
        }

注意：最终那个样式会生效跟选择器的优先级有关，跟写的前后顺序无关

!important 提权

h1 {
            color:blue !important; /* 强制提权*/
        }

3.类选择器

        h1.title {
            color:burlywood;
        }
        /* 类选择器通常不写前面的标签 */
        .title {
            color:chartreuse;
        }

注意:如果 h1.title 和 .title 都写 那h1.title 会生效，因为他的权重要高.css样式尽量不要写标签,如果要选中第一个可以如下写法

.title:first-of-type {
            color:darkblue;
        }

4. id 选择器

#page-title {
            color:darkorange;
        }

注意：tag < class < id 行内样式不是选择器，级别最高 。