妙味课堂——HTML+CSS(第二课)
常见标签——img标签
<img src="图片地址" alt="图片名"/>
alt属性是图片名字，是给百度搜索引擎抓取使用的。也有当图片地址不正确时，显示图片名。
常见标签——a标签
1、a标签(链接)
target链接打开方式(常用)：
- _blank：新窗口
- _self：当前窗口
<base target="_blank"/> 定义页面链接默认打开方式
例，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <base target="_blank" /><!-- 定义页面中所有链接打开方式 --> </head> <body> <a href="http://www.miaov.com/">a标签(链接)</a> <a href="http://www.miaov.com/">a标签(链接)</a> <a href="http://www.miaov.com/" target="_self">a标签(链接) last</a> </body> </html>
2、a标签(锚点)
例，点击百步飞剑，就跳到介绍百步飞剑的地方。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="#box1">百步飞剑(锚点)</a> <a href="#box2">夜尽天明</a> <a href="#box3">诸子百家</a> <a href="#box4">万里长城</a> <a href="#box5">君临天下</a> <div style="height: 1000px;" id="box1"> 百步飞剑<br/> ..................... </div> <div style="height: 1000px;" id="box2"> 夜尽天明<br/> ..................... </div> <div style="height: 1000px;" id="box3"> 诸子百家<br/> ..................... </div> <div style="height: 1000px;" id="box4"> 万里长城<br/> ..................... </div> <div style="height: 1000px;" id="box5"> 君临天下<br/> ..................... </div> </body> </html>
3、a标签(下载)
例，点击链接，可以进行下载(文件、视频等)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="常见标签（上）.ppt">a标签(下载)</a> </body> </html>
常见标签：
| div | 块 |
| img | 图片(单标签) |
| a | 下载、链接、锚点 |
| h1-h6 | 标题 |
| p | 段落 |
| strong | 强调(页面展示为粗体) |
| em | 强调(页面展示为斜体) |
| span | 区分样式 |
| ul | 无序列表 |
| ol | 有序列表 |
| li | 列表项 |
| dl | 定义列表 |
| dt | 定义列表标题 |
| dd | 定义列表项 |
例，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div>块</div> <img src="1.png" alt="美女" /><!-- 单标签 --> <a href="http://www.miaov.com">a标签</a> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <p>段落</p> <strong>强调(页面展示为粗体)</strong> <em>强调(页面展示为斜体)</em> <span>区分样式</span> <span style="color: blue;">月亮·兰顿</span>13小时前 <!-- 有序列表 --> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <!-- 无序列表 --> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <!-- 定义列表 --> <dl> <dt>定义列表标题</dt> <dd>定义列表项</dd> <dd>定义列表项</dd> <dd>定义列表项</dd> </dl> </body> </html>
选择符
1、id选择符(#)(又叫id选择器)
例，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*id选择符*/ #box { width: 100px; height: 100px; background: blue; } </style> </head> <body> <div id="box">块</div> </body> </html>
2、群组选择符(,)。在css文件中，如果有多个类/id选择器它们都有相同的部分，我们可以把相同的css样式放在一起。这样可以简化css文件，从而达到减少带宽的目地。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*群组 选择符*/ #box1, #box2, #box3 { width: 100px; height: 100px; background: blue; } </style> </head> <body> <div id="box1">块</div> <div id="box2">块</div> <div id="box3">块</div> </body> </html>
3、class选择符(.)，又称类选择器。一个元素最多有一个id选择器，但是可以有多个类选择器。
注意：
-
在引用多个类class选择器的时候，用空格隔开
-
多个类选择器在同一个html标签上使用时，如发生冲突会以在css文件中类选择器的先后顺序来指定，写在后面的会被系统认定为可使用的。而不是在html文件引入选择器的顺序为使用准则。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*class(类) 选择符[可以重复使用的ID]*/ .box { width: 100px; height: 100px; background: blue; } .box2 { border: 5px solid red; } </style> </head> <body> <div class="box">块</div> <div class="box box2">块</div> <div class="box">块</div> </body> </html>
4、类型选择符(div....)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*类型 选择符*/ p { width: 100px; height: 100px; background: blue; } </style> </head> <body> <div>块</div> <div>块</div> <div>块</div> <p>p1</p> <p>p1</p> <p>p1</p> </body> </html>
5、包含选择符(div p)，又称父子选择器。
注意：
-
子选择器标签是html可以识别的标签
-
父子选择器可以有多层级
-
父子选择器适用于id选择器、类(class)选择器、html选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*包含 选择符 div下所有的p标签*/ /*div p { width: 100px; height: 100px; background: blue; }*/ div span p { width: 100px; height: 100px; background: blue; } </style> </head> <body> <div> <p>p2</p> </div> <div> <p>p2</p> <span> <p>p3</p> </span> </div> <div>块</div> <p>p1</p> <p>p1</p> <p>p1</p> </body> </html>
6、通配符(一般不会使用，*代表所有页面中的标签，如果希望所有的元素都符合某一种样式，可以使用通配符选择符)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*通配符*/ * { border: 1px solid red; } </style> </head> <body> <div> <p>p2</p> </div> <div> <p>p2</p> <span> <p>p3</p> </span> </div> <div>块</div> <p>p1</p> <p>p1</p> <p>p1</p> </body> </html>
选择符的优先级
一个元素可以同时有id选择器和类选择器。
基础选择符的优先级：
类型(1) < class(10) < id(100) < style行间样式(1000) < js
注意：同级样式默认后者覆盖前者。
例，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> li { height: 40px; } ol li { background: blue;/*1+1*/ } li { background: green;/*1*/ } .list { background: red;/*10*/ } .list1 { background: yellow;/*10*/ } #box { background: pink;/*100*/ } /* 同级样式默认后者覆盖前者 样式优先级 类型(1) < class(10) < id(100) < style行间样式(1000) < js */ </style> </head> <body> <ol> <li class="list list1" id="box" style="background: purple"></li> <li class="list1 list"></li> <!-- 不要认为list和list1的样式同级，list覆盖list1，而是与它们在样式表中的顺序有关 --> <li class="list"></li> <li></li> <li></li> <li></li> </ol> <script type="text/javascript"> document.getElementById("box").style.background='#000'; </script> </body> </html>
测试：请问以下哪两个样式优先级更高？
A、#header #div1 .box1 div .section p .link{………………}
B、#some .base #font #call a{………………}
解：先比较优先级别更高的，再比较优先级别次之的.......很显然B的优先级更高，因为它有3个id选择符。故答案：B。
a的四个伪类
伪类：伪类用于向被选中元素添加特殊的效果。（元素在特定情况下才具备的。）
a标签的四个伪类：
| link | 未访问（默认） |
| hover | 鼠标悬停（鼠标划过） |
| active | 链接激活（鼠标按下） |
| visited | 访问过后（点击过后） |
例，加载页面，链接无下划线，绿色；鼠标悬停其上，变为红色，有下划线；鼠标按下，变为黄色；按下之后，鼠标离开，变为黑色；鼠标悬停其上，变为红色，有下划线；鼠标按下，变为黄色；按下之后，鼠标离开，变为黑色......(四个伪类持续触发)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* ink 未访问（默认） hover 鼠标悬停（鼠标划过） active 链接激活（鼠标按下） visited 访问过后（点击过后） */ /*同级样式，四个伪类持续触发*/ a:link { font-size: 60px; text-decoration: none; color: green; } a:visited { color: black; } a:hover { color: red; text-decoration: underline; } a:active { color: yellow; } div { height: 100px; background: blue; } div:hover { background: red; } </style> </head> <body> <a href="#">a标签(链接，下载，锚点)</a> <div></div> </body> </html>
所以，四个伪类的一般顺序为：
link visited hover active(love hate 记忆方法！)
一般标签都有hover这个伪类，例如div等。
a伪类的应用：
- 四个伪类全用(搜索引擎、新闻门户、小说网站)
-
一般网站只用（ a{} a:hover{} ）
注意：IE6不支持a以外其它任何标签的伪类；IE6以上的浏览器支持所有标签的hover伪类。
