Java自学-HTML(2)
1、网页基本标签
标签字母+Tab键,自动生成标签。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
<!--粗体、斜体-->
<h1>字体样式标签</h1>
粗体::<strong>i love you</strong><br/>
斜体:<em>i love you</em>
<br/>
<!--特殊符号-->
空 格
<br/>
空 格
<br/>
<!--大于号,greater than-->
>
<br/>
<!--小于号,less than-->
<
<br/>
<!--版权符号-->
©版权所有*。
<br/>
<!--
特殊符号记忆方式
& ;
-->
</body>
</html>
2、图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--
img学习
src :图片地址(必填)
相对地址(推荐使用),绝对地址
../--上一级目录
alt :图片名字(必填)
-->
<img src="../resources/image/1.jpg" alt="小灰栗的头像" title="悬停文字" width="300" height="300" >
</body>
</html>
3、超链接标签及应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--使用id作为标记-->
<a id="top">顶部</a>
<!--
a标签
href :必填,表示要跳转到那个页面
target :表示窗口在哪里打开
_blank在新标签中打开
_self在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面1</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>
<!--图像超链接-->
<a href="1.我的第一个网页.html">
<img src="../resources/image/1.jpg" alt="小灰栗的头像" title="悬停文字" width="300" height="300" >
</a>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/1.jpg" alt="小灰栗的头像" title="悬停文字" width="300" height="300" >
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/1.jpg" alt="小灰栗的头像" title="悬停文字" width="300" height="300" >
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/1.jpg" alt="小灰栗的头像" title="悬停文字" width="300" height="300" >
</a>
</p>
<p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/1.jpg" alt="小灰栗的头像" title="悬停文字" width="300" height="300" >
</a>
</p>
<!--锚链接
实现页面间跳转
1。需要一个锚标记
2。跳转到标记
-->
<a href="#top">回到顶部</a>
<a id="down">down</a>
<!--功能性链接
邮件链接: mailto:
QQ链接
-->
<a href="mailto:2260016947@qq.com">点击联系我!</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2260016947&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:2260016947:53" alt="你好,与我联系,领取*" title="你好,与我联系,领取*"/>
</a>
</body>
</html>