Correction status:qualified
Teacher's comments:对于各类缩写要多写才能记住
一,< a href="" target="">与<iframe>理解target属性与name属性之间的关联是如何实现的
target对应的属性值应该与iframe中name的属性值一致!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联标签/元素</title> </head> <body> <a href="https://www.qq.com/" target="当前">腾讯</a> <!--ifame内联标签 target指向标签--> <iframe src="" feameborder="1" name="当前" width="600" height="800"></iframe> </body> </html>
二,演示css中的内联样式,内部样式,外部样式的应用场景,理解style属性, style标签, 以及外部样式表的使用方式
1,内联样式>内部样式,示例如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联,内部,外部样式</title> <style> /*内部样式:仅对当前的htlm文档有效*/ p{color: gold} </style> </head> <body> <!--内联样式:用属性来设置元素的样式--> <p style="color:red">自从我们推出《赞助vip会员,赠送一对一魔鬼训练营课程》以来, </p> <p>每天大量的咨询报名,虽然我们有完整的学习提示 </p> <p>但是还是有很多同学,不知道从哪里开始学习,为了更好的服务广大VIP学员,我们特意整理一个清晰的学习指南,请参考!</p> <p>目前,《赞助vip会员,赠送一对一魔鬼训练营课程》增加了【必修】和【选修】课程,体验更佳,欲报名请速***Q:88526(猪哥)</p> </body> </html>
2,外部样式
需要单独写一个stylesheep样式表 ,然后用link标签加载该样式表
stlysheep样式表
p{color: gold}
外部样式表示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <!--样式表地址--> <title>外部样式</title> </head> <body> <p>自从我们推出《赞助vip会员,赠送一对一魔鬼训练营课程》以来, </p> <p>每天大量的咨询报名,虽然我们有完整的学习提示 </p> <p>但是还是有很多同学,不知道从哪里开始学习,为了更好的服务广大VIP学员,我们特意整理一个清晰的学习指南,请参考!</p> <p>目前,《赞助vip会员,赠送一对一魔鬼训练营课程》增加了【必修】和【选修】课程,体验更佳,欲报名请速***Q:88526(猪哥)</p> </body> </html>
3,style标签和属性
style(元素属性)>id>class>Tag*
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外部样式</title> <style> /*标签选择器Tag*/ P{color: red} /*类选择器class,id(可叠加)*/ .blue{color: blue} .pink{color: pink} #gold{color: gold} /*style(元素属性)>id>class>Tag*/ </style> </head> <body> <p class="blue">自从我们推出《赞助vip会员,赠送一对一魔鬼训练营课程》以来, </p> <p class="blue pink">每天大量的咨询报名,虽然我们有完整的学习提示 </p> <p id="gold" class="blue">但是还是有很多同学,不知道从哪里开始学习,为了更好的服务广大VIP学员,我们特意整理一个清晰的学习指南,请参考!</p> <p id="gold" class="blue" style="color: brown">目前,《赞助vip会员,赠送一对一魔鬼训练营课程》增加了【必修】和【选修】课程,体验更佳,欲报名请速***Q:88526(猪哥)</p> </body> </html>
三,盒模型中的内外边距和边框都遵循上右下左的设置顺序
边框颜色:border-color:
边框厚度:border-width
边框样式:border-style:
边框圆角:border-radius:
内边距:padding:
外边距:margin:
四,盒模型的每个要素的排列方式是 上 右 下 左!