妙味课堂——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 ...
随机推荐
- jdk 1.6 & 1.7新特性
jdk1.6新特性 1.Desktop类和SystemTray类 2.使用JAXB2来实现对象与XML之间的映射 3.StAX 4.使用Compiler API 5.轻量级Http Server AP ...
- ASP.NET中Global.asax 文件是什么？
Global.asax 文件,有时候叫做 ASP.NET 应用程序文件,提供了一种在一个中心位置响应应用程序级或模块级事件的方法.你可以使用这个文件实现应用程序安全性以及其它一些任务.下面让我们详细看 ...
- -25299 reason: 'Couldn't add the Keychain Item.'
今天在用苹果官方demo 提供的KeychainItemWrapper类时遇到-25299 reason: 'Couldn't add the Keychain Item.'错误,再4s上可以正常运 ...
- viewport使用 html5
viewport 语法介绍: 01 02 width 控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的 ...
- OpenGl学习笔记3之模型变换、视图变换、投影变换、视口变换介绍
模型变换.视图变换.投影变换.视口变换介绍 opengl中存在四种变换,分别是模型变换,视图变换,投影变换,视口变换.这四种变换是图形渲染的基本操作,实质上这四种变换都是由矩阵乘法表示(这些操作都是由 ...
- MATLAB GUI程序设计中使文本框接收多行输入的方法
对于文本框来说 Max属性于Min属性数值之差小于等于1时,仅接收单行输入 大于1时,接受多行输入 对于多行情况,set/get到的String应为cell 本系列文章允许转载,转载请保留全文! [说 ...
- Android开发随笔3
昨天: 创建了工程hello world 了解了工程下的文件 对R.java和一些重要的文件有了了解 添加控件对layout文件夹下的文件有了了解 对apk的安装有所了解 对/data和/system ...
- liferay7中如何Hiding the default Success Message
下面介绍如何把在Liferay 7中如何把action执行成功之后的信息不显示,因为宝宝有需要,就去查了相关源码和资料. 如果想要某个portlet不显示执行成功的信息,在doProcessActio ...
- Careercup - Microsoft面试题 - 5120588943196160
2014-05-10 22:58 题目链接 原题: Three points are given A(x1, y1), B(x2, y2), C(x3, y3). Write a method ret ...
- 我是一只it小小鸟阅读笔记
“我们具有各自的独特性--我们兴趣各异,有不同的家庭背景,不同的知识储备,不同的思维方式……但在现实中,我们也会碰到类似的人生选择的关口,我们会犯类似的错误,有类似的迷惘,也会为类似的精彩鼓掌,而且很 ...