1210内联框架与css的初步认识

内联标签

iframe
srcdoc:提示文本 支持html标签
对seo不友好
适合写后台页面

<a href="https://j.map.baidu.com/69/y" target="ditu">显示地图</a>
<iframe srcdoc="这是地图" name="ditu"></iframe>

效果图

iframe实现后台页面小案例

 <header>网站管理后台</header>
    <aside>
        <a href="index.html" target="content">首页</a>
        <a href="system.html" target="content">系统管理</a>
    </aside>
    <main>
        <iframe name="content"></iframe>
    </main>

效果图

布局元素

语义化标签
页眉header
侧边aside
主体内容 main
div:通有容器标签，内部可以放置任何类型的元素，当一个容器类型不定时可以用它
span:通用容器，不过它内部是行内元素/文本/图片/链接/input
section:区块
article：文章
页脚footer

CSS的语法和基本术语

css:层叠样式表
如果你的css样式仅仅用来控制当前页面的元素，就用style标签写到当前页面中。
术语：规则，选择器，声明块，属性和值；
选择器：h1 .lage…；
声明块：由一对{}包住的内容；
规则：选择器+声明块；
属性和值:写在声明块中的名值对；
声明块中的每一个名值对，叫一个样式声明。

<style>
标签{
    属性：值
}
</style>

层叠与优先级

一个元素样式会受到四个级别声明的影响：
1.继承的
2.浏览器的：用户代理样式
3.自定义的：写在html文档的style标签中的
4.行内样式(内联样式),写在元素的style属性中的

CSS三大特性—— 继承、 优先级和层叠。
继承：即子类元素继承父类的样式;
优先级：是指不同类别样式的权重比较;
层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。
1、标签选择器
选中页面中所有的该标签元素
2、属性选择器
*[class=”title”]
选中页面中所有的具有该属性的元素
3、类选择器
.class
4、id选择器：浏览器不检查它的唯一性
通常用来选择页面中的唯一元素 #元素

优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性