自学前端——HTML第一天（下）

AAAEEESS
417 阅读3分钟

自学前端——HTML第一天（下）

水平线标签<hr/>：把标签<hr/>后面与前面的内容用水平线隔开。 代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平线标签hr</title>
	</head>
	<body>
		<p>我是上面的内容<hr>我是下面的内容</p>
	</body>
</html>

效果如下： 水平线标签<hr> 换行标签br:让文字换行。 代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>换行标签br</title>
	</head>
	<body>
		<p>我是上面的内容<br/>我是下面的内容</p>
	</body>
</html>

效果如下：换行标签<br/> 文字标签span ： 标签被用来组合文档中的行内元素，是一个小盒子，一行可以放很多个span。

盒子标签div：

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联，是一个大盒子，一行只可以放一个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>

效果如下： span与div 文字类标签：倾斜标签<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/>: 属性：

  1. src: 图片的路径（来源）
  2. title:当鼠标悬停在图片上显示的文字
  3. width:图片的宽度
  4. height：图片的高度
  5. border:图片的边框 属性特点：
  6. 属性之间部分先后顺序
  7. 属性名与属性值之间以键值对的形式存在
  8. 属性名与属性值之间以等号分隔 属性值要以引号包裹； 代码如下：
<!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>

效果图如下： 链接标签1 剩下的跳转、鼠标悬停覆盖效果以及阻止效果就不一样展示了，小伙伴们可以自己回去试试看。

路径 相对路径 在同一个文件夹直接找名字 向上一级 ../ 向下 / 绝对路径

代码如下： 相对路径：同一级路径

<!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>

第一天结束啦，大家辛苦啦，要看这么多，加油 ！冲出内卷~第一次写文章，写的不是很好，感谢大家坚持看下来，明天继续更新第二天的。

avatar
文章
阅读
粉丝