1.什么是div标签和span标签
div是块级元素；
div标签，没有具体含义，用来划分页面的区域，类似生活中看到的警戒线。
span是行内元素；
span是行内元素，在它的前后不会换行。 span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。
块元素可以设置宽高，独占一行；默认排列是从上到下；
行内元素不能设置宽高；
2.插入图片
语法：
<img src="图片入径" title="鼠标悬停上去后的提示信息" alt="图片不显示后的提示信息"/>
<body>
<img src="images/feiman.jpg" title="这是一张图片" alt="请重新刷新试试"/>
</body>
如果图片入径错误则出现
图片的入径分为两种——绝对入径和相对入径
1、绝对路径
绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。
注意：绝对路径在实际的开发过程中很少去使用，如果使用“E:\book\网页布\代码\第2章\bg.jpg”来指定背景图片的位置，在自己的计算机上 浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用“\”或“/”字符作为目录的分隔字符
2.相对入径
a.当前文件和目录文件在同一目录下 ，直接写目标的名字.后缀（扩展名）
<img src="图片名称.jpg"/>
b.(上找下)当前文件和目标文件的文件夹在同一目录下，
直接写文件夹的名字/目标的名字.后缀
<img src="文件夹名称/图片名称.jpg"/>
c.（下找上）当前文件的文件夹和目标文件的文件夹在同一目录，
../直接写文件夹的名字/目标名字.后缀
<img src="../文件名称/图片名称.jpg"/>
d.当前文件 在哪个文件里写哪个文件就叫当前文件
目标文件 你要找的对象
/表示下一级
../表示上一级
titile 鼠标悬停提示信息
alt 图片加载不出来 后提示信息 可写可不写最好写上
3.超链接
语法
<a href=“路径” title=“鼠标悬停上去之后的提示信息” target=“规定在何处打开文档">内容（文字和图片）</a>
超链接 指的就是页面和页面直接的跳转
自带特点：文字是蓝色的，并且有下划线
超链接路径的找法和插入图片的路径完全一样
<a href="#"></a> 是一个空链接
窗口打开方式
本窗口打开 默认不写就是本窗口打开或者写target="_self"
新窗口打开 添加一个target="_blank"属性
Target属性：规定在何处打开文档。
target=“_self“ 默认值
target=“_blank“ 新窗口打开
<body>
<a href="#" target="_blank">老王</a>
<hr/>
<a href="https://www.baidu.com"/><img src="../day2/images/feiman.jpg"/></a>
</body>
4.样式表的创建
样式表 主要是用来修改页面的显示样式的
1，内部样式表 只作用于当前的文件 一般用在活动 专题
a.内部样式
内部样式 在<head>标签里面
<style type="text/css">
type="text/css"可写可不写，但是不允许写错 建议写
属性值不加双引号 可以有多个属性和属性值
</head>
b.行内样式
2，行内（行间）样式表 只作用于当前标签 不常用 一般用在出错调试
语法<标签名称 style="属性:属性值;"></标签名称>
c.外部样式
3，外部样式表 用的最多 作用于所有文件
引入外部样式 用的最多的
a,先创建外部样式后缀是.css
b,在<head>
<link href="路径" rel="stylesheet" type="text/css"/>
rel="stylesheet" 关联样式表 必须得写
type="text/css" 可加可不加
</head>
导入外部样式表 用的很少
<style>
@import url(路径);
</style>
5.class标签选择器通配符选择器
标签选择器：
(所有标签都叫标签选择器)p div a img h1 input form table tr td b strong i em ul li ol dl dt dd u sup sub hr span body html button在
语法： 标签{属性：属性值;}
用法：想改变某个元素的默认样式时或者统一文档某个元素的显示效果时
注意：标签选择器如果用，暂时只允许修改文字颜色，大小，字体 的这几个样式，慎用
<style type="text/css">
P{
color:red;
}
</style>
</head>
<body>
<p>你好 世界</p>
</body>
</html>
class选择器：
第一步：style 在样式里用.取名
语法 .自己取的名字然后{ 属性 ：属性值；}
注意：自己取的名字要遵循命名规则
第二步：在标签里用class调用
class可以调用多个样式，可以多次调用
<style type="text/css">
.nav{
color:red;
width:100px;
height:30px;
border: 1px rebeccapurple solid;
}
</style>
</head>
<body>
<div class="nav">我爱前端</div>
</body>
id选择器：
a,在样式表里以#你自己取的名字{} 如，#all{color:red;}
b,在标签上用id调用 <div id="all"></div>
id选择器具有唯一性,属性值只能是一个
<style type="text/css">
.nav{
color:red;
width:100px;
height:30px;
border: 1px rebeccapurple solid;
}
#news{
color:palegreen;
}
</style>
</head>
<body>
<div class="nav">我爱前端</div>
<p id="news">不一样的未来</p>
</body>
通配符:
作用：给当前界面上所有的标签设置属性。（*的意思是选中所有的标签）
注意点：
由于通配符选择器是设置界面上所有的标签属性，所以在设置之前会遍历所有的标签，如果
当前界面上的标签比较多，那么性能就会比较差，所以在企业开发中一般不会使用通配符选择器。
*{padding:0; margin:0;}
群组选择器：
把相同的代码组合到一起，用逗号隔开
后代选择器（包含选择器）
语法： 选择器1 选择器2{属性:属性值;....} 最终改的是选择器2
<style>
/* ul li{
color:red;
} */
.box li{
color:red;
}
</style>
</head>
<body>
<ul class="box">
<li>1大大</li>
<li>2大大</li>
</ul>
<ul>
<li>上海疫情</li>
<li>深圳没有疫情</li>
</ul>
</body>
</html>
伪类选择器：
a{}
a:hover{}
如果就是默认的和鼠标划上的，a的:link建议不写
如果四种状态全写的情况，必须要按照顺序
<style>
a:link{
/* 默认的 */
color:red;
}
a:visited{
color:blue;
/* 访问后 a标签的状态 */
}
a:hover{
/* 鼠标划上a标签 a:hover最终改的是a标签，只不是a的一种状态 */
color:yellow;
}
a:active{
color: pink;
/* 鼠标激活（按下）a标签 */
}
.box:hover{
background-color:yellow;
}
.box:hover span{
color:pink;
}
.box span:hover{
color:red;
}
</style>
</head>
<body>
<a href="#">态度决定一切</a>
<div class="box">
不想上班
<span>文字</span>
</div>
</body>
