妙味课堂——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 ...
随机推荐
- MySQL使用rand函数实现随机数[转]
如何写一个语句能一下更新几百条MYSQL数据! 需要测试MYSQL数据库,里面有一个上万条数据的数据库,如何写一个PHP文件一下每次更新几百条信息,我都是写一个循环一次更新一条信息,这样我知道用WHI ...
- Android实现Button事件的处理
Android实现Button事件的处理 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 代码实现 首先是最基本的线性布局,给每个控件设立id值,以供代 ...
- linux 简单的DMA例程
一个简单的使用DMA 例子 示例:下面是一个简单的使用DMA进行传输的驱动程序,它是一个假想的设备,只列出DMA相关的部分来说明驱动程序中如何使用DMA的. 函数dad_transfer是设置DMA对 ...
- java判断某个字符串包含某个字符串的个数
/** * 判断str1中包含str2的个数 * @param str1 * @param str2 * @return counter */ public static int countStr(S ...
- P1230: [Usaco2008 Nov]lites 开关灯
嗯嗯,这是一道线段树的题,询问区间内亮着的灯的个数,我们可以把区间修改的线段树改一下,原本的求和改成若有奇数次更改则取反(总长度-亮着的灯个数),而判断是否奇数次只要数组加一个delta的值,upda ...
- 团队作业（NABC的分析）
我们的团队课题是游戏:躲避小球. 我认为它其中的一个优点是:丰富用户的短暂闲暇时间,使用户得到身心的放松 下面我将从N,A,B,C四个方面简述理由 N(需求):现代社会逐渐步入快节奏时代,大众生活压力 ...
- Netsharp介绍
1.1 Netsharp是什么 Netsharp定义: Netsharp业务基础平台 = 1.系统框架 + 2.元数据 + 3.平台工具 + 4.基础业务 + 5.二次开发 此五个概念请参考什 ...
- 在云服务器搭建WordPress博客（六）发布和管理文章
<(￣︶￣)↗[GO!] 发布文章是一个网站后台最重要的功能之一,WordPress的文章发布功能是比较强大的,系统简单地介绍一下. 访问后台 – 文章 – 写文章 ,就可以看到如下图所示的界面 ...
- JS 学习笔记--8---Function类型
练习使用的浏览器IE11 JS 中Function类型实际上是一种对象,每一个函数实际上都是Function类型的一个实例,每一个函数都有一些默认的属性和方法.由于函数是对象,故函数名实际上也是一 ...
- Vim 中使用cscope
使用cscope碰到的问题 1. E568: duplicate cscope database not added 根据提示,cscope数据库重复添加了,我使用的是vim7.2版本,而这个版本在已 ...