1210-认识iframe标签和CSS

1. 认识iframe

iframe 内联框架，可用于显示其它连接内容。常与<a>标签用于后台管理页面。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>iframe写一个迷你小后台</title>
    <link rel="stylesheet" href="style/iframe.css" />
  </head>
  <body>
    <div class="header"><h4>搜索大全</h4></div>
    <div class="aside">
      <a href="https://www.baidu.com" target="content">百度</a>
      <a href="https://www.sogou.com" target="content">搜狗</a>
      <a href="https://www.360.com" target="content">360</a>
      <a href="https://www.google.com" target="content">谷歌</a>
      <a href="https://www.bing.com" target="content">必应</a>
    </div>
    <div class="main">
      <iframe srcdoc="欢迎使用搜索大全,请选择左侧搜索引擎" name="content"></iframe>
    </div>
  </body>
</html>

2. 特殊符号

部分特殊符号需要显示不可以直接写，需按照指定格式：&XXX;

3. 网页常用布局

网页常用布局 1-2-1（头部-主体（侧边栏+内容）-底部）
H5 布局标签：

header：头部
aside:侧边
section：区段
article：文章内容
footer：底部
main：主要内容

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>布局元素</title>
    <link rel="stylesheet" href="style/layout.css" />
  </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>

4. 认识css

css使用：

直接在head > stlye里写css代码
使用link引用css文件
使用js控制

css格式：选择器+声明块+（属性：值）
css样式优先级：tag < class < id

css选择器：

标签选择器
类选择器
属性选择器
id选择器

css样式四个来源及影响力：继承HTML < 浏览器代理 < 用户自定义 < 行内定义

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1208-插件安装和html标签

2020-12-10 14:44:40