妙味课堂——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 ...

随机推荐

EF之高级查询
首先我们来看看一个页面这里面有多选的条件,大于,小于等等,包括每个字段都有如此多的查询条件,我们的后台该如何实现呢? 难道我们还得每个参数都去判断吗? 那得传多少参数进来才能实现这个页面的功能啊! ...
C#设计模式之装饰者模式(Decorator Pattern)
1.概述装饰者模式,英文名叫做Decorator Pattern.装饰模式是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 2 ...
MyEclipse查看Struts2源码及Javadoc文档
一.查看Struts2源码 1.Referenced Libraries >struts2-core-2.1.6.jar>右击>properties. 2.Java Source A ...
sudo配置临时取得root权限
系统中的普通用户有时需要root权限执行某种操作,要是使用su - root的话必须要知道root的密码,这是不安全的,所以有了sudo,root可以对/etc/sudoers做一定的配置,让普通用户 ...
不会JS中的OOP，你也太菜了吧！(第一篇)
一.你必须知道的 1) 字面量 2) 原型 3) 原型链 4) 构造函数 5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象.稳妥对象适合用在安全的环境中和防止数据被其它程序改变的时候) ...
如何让Asp.net Web Api全局预防Xss攻击
一.概述二.什么是XSS 三.预防方法四.在WebApi中如何实现在实现之前,需要了解ASP.NET WEB API的pipeline机制. 如上,可以采用多种方式进行参数的过滤 1.重写Del ...
hdu 3046 Pleasant sheep and big big wolf 最小割
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3046 In ZJNU, there is a well-known prairie. And it a ...
Hibernate中查询数据转成VO对象及注意问题
大家都可能会遇到,在用json传输数据时,很多字段是来自不同的表数据,需要我们进行封装数据. hibernate提供这么一个方法用来直接封装查询属性: query.setResultTransform ...
css之margin && padding讲解
margin && padding盒子模型: margin是模块与模块的空隙,padding是内容与边框的空隙注: 1.margin:边缘.空白 2.padding:填充 margi ...
ios 图片转视频
转自:http://blog.iosxcode4.com/archives/160 用到的FrameWork有: MediaPlayer.framework,QuartzCore.framework, ...

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

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

随机推荐

热门专题