内联构架元素与CSS入门

内联框架标签的工作原理与应用

\<iframe>标签

\<iframe> HTML内联框架元素 。它能够将另一个HTML页面嵌入到当前页面中。

实例：

<div>
    <a href="https://j.map.baidu.com/ef/_6" target="hefei">合肥市</a>
    <iframe srcdoc="合肥市地图" name="hefei"></iframe>
</div>

常常用于网站管理后台

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>iframe写一个迷你小后台</title>
    <style>
        body {
            margin: 0;
            display: grid;
            grid-template-columns: 10em 1fr;
        }
        .header {
            grid-column: span 2;
            height: 3em;
            background-color: lightblue;
        }
        .aside {
            display: grid;
            grid-template-rows: repeat(auto-fit, 2em);
            background-color: lightcyan;
        }
        iframe {
            width: 100%;
            min-height: 42em;
            background-color: #fff;
            border: none;
            padding: 2em;
        }
        a {
            text-decoration: none;
            color: #555;
            background-color: #fff;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="header">网站管理后台</div>
    <div class="aside">
        <a href="../20-12-08 HTML/demo2.html" target="content">链接与锚点</a>
        <a href="../20-12-09 HTML/demo1.html" target="content">小学课程表</a>
        <a href="../20-12-09 HTML/demo2.html" target="content">表单</a>
        <a href="../20-12-08 HTML/demo3.html" target="content">图片元素</a>
        <a href="../19HTML/2.HTML5常用标签.html" target="content">HTML5常用标签/a>
    </div>
    <div class="main">
        <iframe srcdoc="请右击左侧按钮" name="content"></iframe>
    </div>
</body>
</html>

页面布局还可以使用专用标签：

\<header> 页眉标签
\<aside> 侧边栏标签
\<main> 主体标签
\<footer> 页脚标签
\<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>布局元素</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-rows: 60px 1fr 60px;
        gap: 10px;
      }
      header,
      footer {
        height: 80px;
        background-color: lightgreen;
        text-align: center;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 10px;
        padding: 10px;
        background-color: lightskyblue;
      }
      .container > aside {
        background-color: lightcyan;
        text-align: center;
      }
      .container > main {
        display: grid;
        grid-template-rows: 1fr 200px;
        background-color: wheat;
        text-align: center;
        padding: 10px;
      }
      .container > main > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      main div section {
        background-color: violet;
      }
    </style>
  </head>
  <body>
    <!-- 页眉 -->
    <!-- 实体字符：页面中原样显示，不会被浏览器解析 -->
    <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;footer&gt;</h1></footer>
  </body>
</html>

CSS初接触

css语法和基本术语

术语: 规则，选择器，声明块，属性和值
- 选择器: h1
- 声明块: 由一对”{….}”包住的内容
- 规则: 选择器 + 声明块
- 属性和值: 写在声明块中的名值对

例：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>css语法和基本术语</title>
    <!-- 如果你的css样式仅仅用来控制当前页面的元素,就用style标签写到当前页面中 -->
    <style>
      /* 术语: 规则， 选择器，声明块，属性和值 */
      /* 选择器: h1  */
      /* 声明块: 由一对"{....}"包住的内容 */
      /* 规则: 选择器 + 声明块 */
      /* 属性和值: 写在声明块中的名值对 */
      h1 {
        /* 声明块中的每一个名值对,叫一个“样式声明” */
        /* 前景色 */
        color: green;
        font-weight: 200;
      }
    </style>
  </head>
  <body>
    <header class="page-header">
      <h1 id="page-title" class="title">Web全栈开发入门课程</h1>
    </header>
  </body>
</html>

层叠与优先级

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

css选择器：
1、标签选择器(元素)
2、属性选择器
3、类选择器(class)
4、id选择器

选择器的优先级别：

标签选择器 < class < id