网页标签精讲
网页标签
一、网页基本标签
标题标签
<!--标题标签 快速生成键：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>
从以上的运行结果可以很好的看出块元素和行内元素的区别与特点。
扫一扫
4337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
