1.实例演示:<iframe>标签的使用
<body> <!-- 内联标签:在当前页面中加载另一个页面 --> <h1>内联标签演示</h1> <h3><a href="https://www.baidu.com" target="baidu">百度</a></h3> <iframe frameborder="0" name="baidu"></iframe> <!-- a标签的值与iframe中name的值相同,就可以在iframe中打开网页 --> </body>
2. 实例演示: css样式设置的优先级
优先级:内联样式 > 内部样式 > 外部样式;
外部样式表:通过link标签将一个css文档连接到html文档中
内部样式:将元素的样式规则用style标签插入到当前的html文档中,这个样式规则, 仅适用于当前的这个html文档
内联样式:将元素的样式使用styel属性应用到当前元素上,只适用于当前标签
3. 实例演示: css的id, class与标签选择器的使用规则
优先级:标签 < class < id
<style> /*id选择器: 一个*/ #red { color: red; } /*类选择器: 一批*/ .green { color: green; } /*标签选择器*/ p { color: aqua; } </style> <p id="red">id选择器</p> <p>类选择器</p> <p>标签选择器</p>
4. 实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)
盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成,一个盒子中主要的属性就5个:width(内容宽度)、height(内容高度)、padding(内边距)、border(边框,三个要素:粗细、线型、颜色。)、margin(外边距)。
<style> .box { width: 500px; height: 500px; padding: 10px; border: 5px dashed black; margin: 0; } </style> <div> <div class="box">这是一个盒子</div> </div>