妙味课堂——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 ...
随机推荐
- DataTemplate 以及Template Selector 学习笔记
1. 内容控件通过ContentTemplate,列表控件通过itemTemplate 来支持模板绑定.例子如下: 模板定义: xaml: <DataTemplate x:Key="R ...
- Entity Framework SqlFunctions 教你如何在EF调用sqlserver方法的函数存根
今天算是研究了一天的SqlFunctions,请教了几个群的牛人,居然发现大伙对这个都比较陌生, 有的甚至直指EF中是不能调用sqlserver里的方法的. 因为之前搞过linq to sql 里面的 ...
- svn中的图标解释
黄色感叹号(有冲突): --这是有冲突了,冲突就是说你对某个文件进行了修改,别人也对这个文件进行了修改,别人抢在你提交之前先提交了,这时你再提交就会被提示发生冲突,而不 允许你提交,防止你的提交覆盖了 ...
- Understanding Service Types
Last update: June 2014. I have partially rewritten this article to provide more technical details an ...
- spring mvc官网下最新jar搭建框架-静态资源访问处理-注解-自动扫描
1.从官网下载spring相关jar http://spring.io/projects 点击SPRING FRAMEWORK
- 容器适配器之priority_queue
template <class T, class Container = vector<T>, class Compare = less<type ...
- linux查看端口是否已开启和查看文件数
查看端口是否开启 lsof -i:80 查看文件数 ls | wc -w
- Notes of the scrum meeting（12.7）
meeting time:18:30~19:10p.m.,December 7th,2013 meeting place:3号公寓一层 attendees: 顾育豪 ...
- Careercup - Microsoft面试题 - 5173689888800768
2014-05-11 05:21 题目链接 原题: Complexity of a function: int func_fibonacci ( int n) { ) { return n; } el ...
- 网络---中断套接字Socket
package socketpack_2; import java.awt.BorderLayout; import java.awt.EventQueue; import java.awt.even ...