自学前端——HTML第一天(下)
水平线标签<hr/>
:把标签<hr/>
后面与前面的内容用水平线隔开。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平线标签hr</title>
</head>
<body>
<p>我是上面的内容<hr>我是下面的内容</p>
</body>
</html>
效果如下:
换行标签br
:让文字换行。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>换行标签br</title>
</head>
<body>
<p>我是上面的内容<br/>我是下面的内容</p>
</body>
</html>
效果如下:
文字标签span
:
标签被用来组合文档中的行内元素,是一个小盒子,一行可以放很多个span。
盒子标签div
:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>span与div</title>
</head>
<body>
<div>我是一个盒子,我一个人要单独占一行</div>
<span>我也是一个盒子</span>
<span>但是我是小盒子</span>
<span>一行可以放好多个</span>
</body>
</html>
效果如下:
文字类标签:倾斜标签<i></i>
与<em></em>(常用)
、加粗标签<b></b>与<strong></strong>
、下划线标签<ins></ins>与<u></u>
、删除线标签<del></del>与<s></s>
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本格式化标签</title>
</head>
<body>
<strong>我是加粗的文字!!!</strong>
<b>我也是加粗的文字</b>
<i>我是倾斜的文字!!!</i>
<em>我也是倾斜的文字</em>
<del>我是删除线!!!</del>
<s>我也是删除线</s>
<ins>我是下划线!!!</ins>
<u>我也是下划线</u>
</body>
</html>
效果如下:
图片标签<img/>
:
属性:
- src: 图片的路径(来源)
- title:当鼠标悬停在图片上显示的文字
- width:图片的宽度
- height:图片的高度
- border:图片的边框
属性特点: - 属性之间部分先后顺序
- 属性名与属性值之间以键值对的形式存在
- 属性名与属性值之间以等号分隔 属性值要以引号包裹;
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h4>图像标签的使用</h4>
<img src="../images/up.jpg"/>
<h4> alt 替换文本 图像显示不出来的时候用文字替换</h4>
<img src="../images/up1.jpg" alt="加载不出图片" />
<img src="../images/up.jpg" title="我是图片" />
<h4>width 给图像增加宽度:</h4>
<img src="../images/up.jpg" alt="加载不出图片" title="我是图片"width="50px"/>
<h4>height 给图像增加高度:</h4>
<img src="../images/up.jpg" alt="加载不出图片" title="我是图片"height="50px"/>
<h4>border 给图像设定边框:</h4>
<img src="../images/up.jpg" alt="加载不出图片" title="我是图片"border="10px"/>
</body>
</html>
效果如图:
链接标签 <a ></a>
:
外部链接 <a href="http://www.baidu.com"></a>
写完整的 协议 域名 网址
内部链接 <a href="index.html"></a>
直接写文件名即可
属性
href:指定跳转的页面
title:鼠标悬停显示的文字
target: _self(默认会覆盖原来的窗口) _blank(会以新的窗口打开) 窗口的打开方式
#:会阻止页面跳转但是会刷新页面
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h4>1.超链接标签</h4>
<a href="http://www.qq.com" target="_blank">腾讯</a>
target 打开窗口的方式 默认的值是_self 当前窗口打开页面 _blank 新窗口打开页面
<a href="http://www.itcast.cn" target="_blank">传智播客</a>
<h4>内部链接:网站内部页面之间的相互链接</h4>
<a href="公司简介.html">公司简介</a>
<h4>空链接:#</h4>
<a href="#">公司地址</a>
<h4>下载链接:地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="图像标签.zip">下载文件</a>
<h4>网页元素的链接</h4>
<a href="http://www.baidu.com"><img src="图像标签.jpg"/></a>
</body>
</html>
效果图如下:
剩下的跳转、鼠标悬停覆盖效果以及阻止效果就不一样展示了,小伙伴们可以自己回去试试看。
路径
相对路径
在同一个文件夹直接找名字
向上一级 …/
向下 /
绝对路径
代码如下:
相对路径:同一级路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同一级路径</title>
</head>
<body>
<img src="图像标签.jpg" />
</body>
</html>
上一级路径:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上一级路径</title>
</head>
<body>
<img src="../图像标签.jpg" />
</body>
</html>
下一级路径:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="images/up.jpg">
</body>
</html>
绝对路径:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="C:\Users\Administrator\Desktop\前端\学习1号\学习\图像标签.jpg" />
<img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" />
</body>
</html>
第一天结束啦,大家辛苦啦,要看这么多,加油 !冲出内卷~第一次写文章,写的不是很好,感谢大家坚持看下来,明天继续更新第二天的。