妙味课堂——HTML+CSS(第二课)

时间：2022-02-12 10:39:12

常见标签——img标签

<img src="图片地址" alt="图片名"/>

alt属性是图片名字，是给百度搜索引擎抓取使用的。也有当图片地址不正确时，显示图片名。

常见标签——a标签

1、a标签(链接)

target链接打开方式(常用)：

  1. _blank：新窗口
  2. _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选择器，但是可以有多个类选择器。

注意：

  1. 在引用多个类class选择器的时候，用空格隔开

  2. 多个类选择器在同一个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)，又称父子选择器。

注意：

  1. 子选择器标签是html可以识别的标签

  2. 父子选择器可以有多层级

  3. 父子选择器适用于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伪类的应用：

  1. 四个伪类全用(搜索引擎、新闻门户、小说网站)

  2. 一般网站只用（ a{} a:hover{} ）

注意：IE6不支持a以外其它任何标签的伪类；IE6以上的浏览器支持所有标签的hover伪类。

相关文章