网页标签
一、网页基本标签
标题标签
<!--标题标签 快速生成键:h1 + tab键 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
段落标签
<p> </p>
换行标签
<br/>
水平线标签
<hr/>
字体样式标签
<strong>粗体</strong>
<em>斜体</em> <br>
特殊符号标签
<!--空格 &-->
<!--大于小于号-->
>
<
<!--版权符号-->
© 版权所有:某某某
<!--万能的公式 & ; -->
☎
例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静夜思</title>
</head>
<body>
<h1>静夜思</h1>
<em>朝代:唐代</em> 作者: <strong>李白</strong> <br/>
<hr/>
<p>
床前明月光, <br/>
疑是地上霜, <br/>
举头望明月, <br/>
低头思故乡。<br/>
</p>
</body>
</html>
例二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页的基本标签</title>
</head>
<body>
<!--特殊符号只需要了解万能公式即可 -->
<!--万能的公式 : & ;-->
☎
<hr>
<!--字体样式-->
<strong>马云 (阿里巴巴集团创始人)</strong>
<p>
<em>马云,男,汉族</em> <br>
<em>现担任日本软银董事</em> <br>
<em>1988年毕业于杭州师范学院外语系</em> <br>
<em>....</em> <br>
</p>
<hr>
<!--标题标签 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
<hr/>
</body>
</html>
二、图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--标签中带有参数的 key=value -->
<!--
src: 资源图片 : 图片的路径,必填
../:上一级目录
alt: 图片加载失败,表示图片的问题,即图片描述,必填
title: 鼠标放在图片上的悬浮提示,选填
width: 宽,选填
height:高,选填
-->
<!--这里我们使用相对路径-->
<img src="../resource/images/tx.jpg" alt="头像图片" title="图像" width="1000" height="1000">
</body>
</html>
三、超链接和锚链接标签
a标签:
1.超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<!--
超链接:表示从一个地方跳转到另外一个地方 例如:hao123导航
href:必填,表示要跳转到的地址(位置、页面)
target: 目标打开的窗口,在自己这个当前页面打开,还是在新的页面打开
_self : 在自己的窗口打开
_blank: 在新窗口中打开
-->
<a href="https://www.baidu.com/" target="_self">点击我跳转到百度</a>
<!--和图片嵌套使用-->
<!--图片标签,这里把百度的图片截图保存下来了,可以自己定义图片-->
<a href="https://www.baidu.com/" target="_self">
<img src="../resource/images/bd.png">
</a>
</body>
</html>
2.锚链接标签
- 用于页面间指定位置跳转 : 快速定位目录
- 可以在同一页页面中跳转
- 也可以在不同页面中跳转
锚点
<!--标记A-->
<a name="markerA">A</a>
跳转到锚点
<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a> <br>
<!--可以跳转到指定文件的某个位置-->
<a href="2.基本结构.html#haha">E</a> <br>
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--实现点击标题即可到达标签的所标记的链接(位置、网页)-->
<!--标题一-->
<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>
<!--这里我随便找了一个网页-->
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a> <br>
<a href="2.基本结构.html#haha">E</a> <br>
<a href="">F</a> <br>
<a href="">G</a> <br>
<hr>
<!--标记A-->
<a name="markerA">A</a>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<!--标记B-->
<a name="markerB">B</a>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<!--标记C-->
<a name="markerC"><h1>大标题</h1></a>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
<p>1111111111111111111</p>
</body>
</html>
点击图中这些标签,即可到达指定的页面。
3.功能性链接
1.邮箱链接
2.QQ链接
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>功能性链接</title>
</head>
<body>
<a href="mailto:1332673781@qq.com">点击联系我们</a>
<!--QQ推广-->
<!--https://shang.qq.com/v3/widget.html-->
<!--进入以上网址,便可以得到功能性链接网址-->
<!--a标签-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1332683781&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1332683781:53" alt="你好!" title="你好!"/>
</a>
</body>
</html>
运行结果:
如何得到a标签:
那段代码就是a标签,复制、粘贴下来即可。
四、行内元素和块元素
块元素:无论内容多少,该元素独占一行(p,h1~h6);
行内元素:内容撑开宽度,左右都是行内元素的可以排在一行(a,strong,em….);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>
<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>
</body>
</html>
从以上的运行结果可以很好的看出块元素和行内元素的区别与特点。