a 标签 href 属性：用来设置超链接的地址
traget 属性：设置标签页的打开方式
_blank 在新标签页打开
_self 默认值，在当前页打开
作用：
1.设置一个超链接
2.设置锚点
最常用的效果是回到顶部
如果在开发中需要设置a标签点击没有效果，则可以设置href属性为 ## 既是 href="##"
如果需要设置回到顶部则 href="#"
不要设置 herf 为空，这样会导致页面刷新
3.下载文件
a. 如果设置的下载文件是音频、视频、图片、文档等，都需要经过压缩之后，再在href上设置
文件的路径
b. 如果是文本类型的文件，可以直接把文件路径设置在href属性上，直接由浏览器打开
q 标签，引用标签，他引用的内容都比较简短
qre 标签，格式化输出
code 标签，一般是嵌套代码使用
< 在html中渲染为 <
>； 在html中渲染为 >
在惠特米勒中渲染为 空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行标签</title>
</head>
<body>
<iframe src=".//case.html" height="200" width="600"></iframe>
<a href="http://www.baidu.com">百度</a>
<a href="./case.html" target="_blank">案例</a>
<hr />
<div id="re" style="height:100px;background:#f00;"></div>
<div id="gr" style="height:100px;background:#04be02;"></div>
<a href="#re">红色块</a>
<a href="#gr">绿色块</a>
<a href="#">回到顶部</a>
<a href="##">点不动</a>
<a href="./abc.txt">下载</a>
<a href="./aa.zip">下载图片
</a>
<hr />
<strong>林深听鹿鸣 strong</strong>
<em>林深听鹿鸣 em</em>
<b>林深听鹿鸣 b</b>
<i>林深听鹿鸣 i</i>
<var>林深听鹿鸣 var</var>
<span>钟：</span>
<q>拒收并蓄</q>
<p>
及你太美
及你实在太
及你太美万人迷
</p>
<pre>
及你太美
及你实在太
及你太美万人迷
</pre>
<code>
<p> 积极 </p>
</code>
</body>
</html>
img 标签，是一个单标签
src属性：用来设置图片资源路径
文件资源路径分为三种
a.网络路径
//图片的网络地址
b.绝对路径
//从服务器的根目录开始直到找到需要的文件整个路径,通常不使用
c.相对路径
//相对于当前文件的所在的资源路径
./ 代表的是当前目录
../ 代表的是上一级的目录
相对路径在开发中最常用、
alt 属性，用来解释图片的内容
作用：
1.当图片没有被加载出来的时候，会显示alt的内容
2.通过alt属性，告诉浏览器当前图片的内容
width/height 设置图片的宽和高，在实际的开发当中，一般指设置单个的宽或高，
另一侧会根据比例显示大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img标签</title>
</head>
<body>
<img src="D:/上课代码/01HTML/day02/image/2.jpg" width="400" height="600" alt="网络未连接" />
<img src="./image/2.jpg" width="400" height="600" alt="网络未连接" />
<img src="./image/3.jpg" width="400" alt="网络未连接" />
</body>
</html>总结
1.块属性标签
a.独自占据一行空间，支持宽和高的设置，设置完宽和高以后，仍然独占一行
b.支持上下 padding 和 上下 margin
2.行属性标签
a.不会独自占据一行空间，从左至右横向排列
b.无法设置宽高，他的宽高由内容撑开
c.不支持 上下 padding 和 上下 margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>总结</title>
</head>
<body>
<div style="background:#f00;height:200px;width:200px"></div>
<div style="background:#f0f;height:200px;width:200px"></div>
<span style="border:1px #f00 solid;height:200px;width:200px">白了少年头</span>
<span style="border:1px#f00 solid;height:200px;width:200px">空悲切</span>
</body>
</html>标签嵌套规则
标签嵌套规则
1.块标签可以作为一个布局标签，嵌套所有的标签
2.行标签不能嵌套块标签
以下标签不能相互嵌套
1. p 标签，h1-h6都不能相互嵌套，并且他们也不能嵌套块标签
2. a 标签不能相互嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌套练习</title>
</head>
<body>
<div style="border:1px #f00 solid;">
<div>漂亮</div>
<span>你好漂漂啊</span>
<ul style="list-style-type: none;">
<li>
<img src="./image/4.jpg" width="200" alt="">
</li>
<li>
<!-- p 不能嵌套 p 标签 -->
<p>千山鸟<p>飞绝，万</p>径人踪灭</p>
</li>
<li>
<!-- a不能嵌套 a 标签 -->
<a href="http://sina.com">
新<a href="http://jd.com">京东</a>浪
</a>
</li>
<li>
<div>
<h2>日月之行</h2>
<span>若<span style="color: #f00;">出</span>其中
</div>
</li>
</ul>
</div>
</body>
</html>css样式表
设置类名
.类名{
样式内容
}
text-align:文本排布，一般放在块标签上，用来控制块标签中 行标签 和文本的对其位置
值：
left:左对齐（默认）
center:居中对齐
right:右对齐
css 层叠式样式表，它是用来给HTML结构添加样式的
引入方式：
1.行间样式
在标签上，设置style属性，在style中设置样式
2.内部样式表
在head中设置style 标签，在标签中设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css样式表</title>
<style type="text/css">
.wp {
width: 200px;
height: 200px;
background: #f00;
color: #ff0;
text-align: center;
}
</style>
</head>
<body>
<div class="wp">
<img src="./image/4.jpg"width="100" alt="">
</div>
<p class="wp">这也太厉害<span>了吧</span></p>
</body>
</html>
2865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
