妙味课堂——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 ...
随机推荐
- ORACLE SQL TUNING ADVISOR 使用方法
sql tunning advisor 使用的主要步骤: 1 建立tunning task 2 执行task 3 显示tunning 结果 4 根据建议来运行相应的调优方法 下面来按照这个顺序来实施 ...
- Oracle用户，权限，角色以及登录管理 scoot 授权
Oracle用户,权限,角色以及登录管理 1. sys和system用户的区别 system用户只能用normal身份登陆em.除非你对它授予了sysdba的系统权限或者syspoer系统权限. sy ...
- 图片模糊度判断程序(C++、opencv)
//#include<opencv2\opencv.hpp> //using namespace cv; #include <opencv2/core/core.hpp> #i ...
- SQL Server 2008 R2 主从数据库同步
一.准备工作: 主数据库服务器: OS:Windows Server 2008 R2 DB: SQL Server 2008 R2 Hostname : CXMasterDB IP: 192.1 ...
- python生成带参数二维码
#coding:utf8 import urllib2 import urllib import json import string import random class WebChat(obje ...
- Quartus II Error总结与解答
(1).Error (209015): Can't configure device. Expected JTAG ID code 0x020B20DD for device 1, but found ...
- QT 按钮类继承处理带定时器
01.class KeyButton : public QPushButton 02.{ 03. Q_OBJECT 04.public: 05. explicit KeyButto ...
- 谈谈C#中的 Dispose 和 Finalize
主要有一下几点需要知道: 1. Dispose需要实现IDisposable接口. Finalize就是c#中的析构方法,方法名以~开始. 2. Dispose由开发人员代码调用,而Finalize由 ...
- ios coreData使用
ios中的coredata的使用(转) 分类: ios2013-07-15 18:12 27288人阅读 评论(1) 收藏 举报 Core Data数据持久化是对SQLite的一个升级,它是ios集成 ...
- 硬件相关-JTAG接口
JTAG(Joint Test Action Group,联合测试行动小组)是一种国际标准测试协议,用于系统仿真.调试及芯片内部测试.它通过访问芯片内部封装好的测试电路TAP(Test Access ...