妙味课堂——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伪类。

妙味课堂——HTML+CSS(第二课)的更多相关文章

妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
妙味课堂——HTML+CSS(第四课)(一)
这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示使内嵌支持宽高换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...
妙味课堂——HTML+CSS(第三课)
常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的). 然而有一个问题,就是有的标签都有自己的默认样式.试通过如下代码来说明: <!DOCTYPE html> ...
妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
妙味课堂:JavaScript初级--第12课：json与数组
1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

bootstrap bootstrapTable 隐藏列
主要代码: <script type="text/javascript"> $(function () { LoadingDataListOrderRealItems( ...
iOS 进阶第十五天(0417)
0417 创建UICollectionViewCell的Xib方法如下图枚举定义导航跳转方式 js跳转到网页指定锚点如下图所示:
加速传感器(CoreMotion) swift
// // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...
online training
https://www.skillfeed.com/browse http://teamtreehouse.com/features http://www.pluralsight.com/ https ...
C语言中链表节点的实现,以及如何实现泛型
1.C语言中的struct是纯粹的结构体,没有访问权限的概念 2.C语言中用void* 来实现泛型编程,也是C++类和模板底层实现的基础,就是用void*来实现的 #include<stdio. ...
使用cronolog切割tomcat catalina.out文件
今天查看之前配置的tomcat发现catalina.out文件已经增大到接近5G,过不了多久就会将所在分区撑爆. 搜集了一下,大部分都使用cronolog切割catalina.out文件.按照这个方式 ...
我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子
昨天写的那篇文章<我教女朋友学编程Html系列(6)—Html常用表单控件>,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初 ...
MySQL数据库远程连接开启方法
有时候需要远程连接mysql数据库,默认是不可以的,可以参考下面的方法,解决下. 1.登陆自己机器的MySQL数据库:mysql -uroot -p密码设置root用户可以任意IP访问,代码如下(可 ...
JS 学习笔记--10---基本包装类型
练习中使用的浏览器是IE10,如果有什么错误或者不同意见,希望各位朋友能够指正,练习代码附在后面 1.基本包装类型: 首先是基本类型,但又是特殊的引用类型,因为他们可以调用系统的方法,这种类型就 ...
设计模式之组合模式(Composite)
组合模式原理:组合模式的作用是讲继承同一父类的不同子类对象组合起来,形成一个树形的结构,例如公司的部门组织代码如下 #include <iostream> #include <st ...

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

妙味课堂——HTML+CSS(第二课)的更多相关文章

随机推荐

热门专题