html 内联标签iframe css 选择器优先级 - html学习

Home > List of blog posts > html 内联标签iframe css 选择器优先级

Blogger Information

Blog 5

fans 0

comment 0

visits 3291

Special Recommendation

More>

Related recommendations

1、内联框架标签iframe

内联框架标签iframe通常会和a标签配合使用，iframe的name和a标签的target的值一致，点击a标签的链接，内容会在iframe中进行显示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>内联框架标签</title>
    <style>
      div {
        display: grid;
      }
      iframe {
        width: 30em;
        height: 16em;
      }
    </style>
  </head>
  <body>
    <div>
      <a href="https://j.map.baidu.com/51/6FJJ" target="hefei">合肥市地图</a>
      <iframe srcdoc="合肥市" name="hefei"> </iframe>
    </div>
    <div>
      <a href="https://j.map.baidu.com/ac/zzJJ" target="hangzhou">杭州市地图</a>
      <iframe srcdoc="杭州市" name="hangzhou"> </iframe>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简易后台</title>
    <link rel="stylesheet" href="../css/iframe.css" />
  </head>
  <body>
    <div class="header">网站管理后台</div>
    <div class="aside">
      <a href="https://www.baidu.com/" target="content">百度</a>
      <a href="https://www.alibabagroup.com/" target="content">阿里</a>
      <a href="https://www.tencent.com/zh-cn" target="content">腾讯</a>
      <a href="https://www.163.com/" target="content">网易</a>
    </div>
    <div class="main">
      <iframe srcdoc="互联网巨头" name="content"></iframe>
    </div>
  </body>
</html>

2、布局元素

可以使用header、aside、main、 section、 footer等布局元素来构成html页面的整体布局。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>布局元素</title>
    <link rel="stylesheet" href="../css/layout.css" />
  </head>
  <body>
    <header><h1>&lt;header&gt;</h1></header>
    <div class="container">
      <aside><h1>&lt;aside&gt;</h1></aside>
      <main>
        <h1>&lt;main&gt;</h1>
        <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>

3、CSS选择器优先级

CSS 选择器优先级：标签<class选择器<id选择器；注意：如果在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css语法基础</title>
    <style>
      /* 1. 标签选择器 */
      h1 {
        color: green !important;
      }
      /* 2. class选择器 */
      .active {
        color: aqua;
      }
      /* 3.id选择器 id:浏览器并不检查它的唯一性，由程序员自己控制 */
      #first {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 class="active" id="first">Hello World</h1>
  </body>
</html>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

标题和段落

2020-12-14 22:40:40

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

1、内联框架标签iframe

2、布局元素

3、CSS选择器优先级