1.基础标签
<!DOCTYPE html> <!--表示文本类型-->
<html> <!--<html></html>表示创建一个html文档-->
<head> <!--<head></head>设置文档标题和其它在网页中不显示的信息-->
<title>标题</title> <!--<title></title>设置文档的标题，就是最上方的名字-->
</head>
<body> <!--<body></body>设置文档的内容-->
<p>原创作者：雨点的名字</p>
</body>
</html><strong> </strong>和<b> </b> 将文本加粗
<em> </em>和<i> </i> 将文本倾斜
<del> </del>和<s> </s> 将文本设置删除线
立即学习“前端免费学习笔记（深入）”；
<ins> </ins>和<u> </u> 将文本设置下划线
<pre></pre> 预编译格式很有用的标签
<!DOCTYPE html>
<head>
<title>来吧</title>
</head>
<body>
<!--这是一个注释标签，页面上你看不到-->
<h4>我是标题哦</h4>
<hr/>
<p>我是p标签<b>我自动加粗的</b></p><br/>
<s>我是删除线</s>
<u>我是下划线</u><br/>
<pre> 我是预编译，
我怎么输它就怎么显示</pre>
</body>
</html>运行结果如下：
<img></img>
效果如下：
<!DOCTYPE html> <head> <title>美女图片</title> </head> <body> <img src="first.jpg" title="就问你美不美" alt="这里显示第一张图" width="200" height="300"> <img src="second .jpg" title="身材太好了" alt="这里显示第二张图" width="200" height="300"> </body> </html>
注解：在该<img> </img>标签中常用src属性表示图片的来源和名称；用title属性设置鼠标放到图片上时显示的文字；用alt属性设置当图盘无法正常显示时对图片的描述；用width和height属性设置图片的宽和高
效果如下：
<a> </a> 标签实现超链接
<!DOCTYPE html>
<html>
<head>
<title>我是a标签</title>
</head>
<body>
<!-- 版权声明-->
<a href="http://www.baidu.com/"
title="百度一下，你就知道" target="_self">百度</a>
<a href="http://www.163.com"
title="网易新闻" target="_blank">网易</a>
</body>
</html注解：在利用<a> </a>实现超链接时使用href属性指明跳转的地址；使用title属性设置当鼠标放到超链接上时显示的文字；用target属性指明超链接的跳转方式，其中_self表示不开启新窗口且在当前窗口打开跳转后的页面（默认）而_blank表示开启新窗口打开跳转后的页面。
细节：如果在一个页面中所有的超链接跳转方式均一致，那么可以在<head> </head>标签中进行统一的配置。在<head></head>标签中添加
<base target="_self"></base> 表示该页面的所有超链接均在原窗口显示
BUI后台管理系统前端框架是基于良无限后台系统使用BUI搭建的后台后台管理系统前端框架。 特点： 灵活方便的菜单系统，功能强大的标签； 集成了大量的业务实践和前端解决方案； 精细的表单页、搜索页和详情页； 丰富的文档。
303
<base target="_blank"></base> 表示该页面的所有超链接均在新窗口显示
（2）通过a标签实现页面定位
案例：点击回到页面顶部
<!DOCTYPE html>
<html>
<head>
<title>网页定位</title>
</head>
<body>
<p id="top">这里是顶部</p>
<p>原创作者：蜗牛</p>
<p>原创作者：蜗牛</p>
<a href="#top">返回顶部</a>
</body>
</html>注解：当点击返回顶部的时候，页面会定位在id=“top”标签的位置，而且是最上面，这就是通过id属性定位，这里网页中放的东西很少，没有啥效果，你要测试可以在这两者之间添加许多其他标签，这样效果就很明显
（3）通过a标签实现下载
注解：可以实现点击链接自动下载文档，和压缩文件，当不能直接下载图片，当点击图片后页面会打开图片而不是下载
<!DOCTYPE html>
<html>
<head>
<title>下载</title>
</head>
<body>
<a href="6用户注册项目.docx">点击下载文档</a>
<a href="2017-1-4Jquery.rar">点击下载压缩文件</a>
<a href="second .jpg">点击图片</a>
</body>
</html>想要实现图片的下载需要在添加一步;
<body> <a href="first.jpg" download="first.jpg">点击图片</a> <!--download实现图片下载功能--> </body>
5：html框架
<!DOCTYPE html>
<head>
<title>Html框架</title> <!--注意;搭建框架是不能出现<body></body>标签的，所以要先删除<body>标签-->
</head>
<frameset rows="25%,75%"> <!--frameset用来定义一个框架集 ，row代表有上下两个界面，占比为25%和75%-->
<frame src="head.html" name="heand"/> <!--frame代表一个界面，界面内容为head.html中内容-->
<frameset cols="25%,75%"> <!--在下面在定义一个框架级，再分为左右两部分 cols代表列-->
<frame src="left.html" name="left"/>
<frame src="center.html" name="body"/> <!--定义name="body"是有意义的，方便调用-->
</frameset>
</frameset><noframes></noframes> <!--noframes还未知意义，删了照样运行所以知道的朋友可以给我留言-->
</html>1：head.html
<!DOCTYPE html>
<head>
<title>head.html</title>
</head>
<body>
<h1 align="center" style="color:#FF0000; font-size:50 ">欢迎进入本管理系统</h1>
</body>
</html>2:left.html
<!DOCTYPE html>
<head>
<title>无标题文档</title>
</head>
<body>
<a href="https://www.baidu.com" target="body">百度</a> <!--这里target="body"，代表当点击百度时，内容会在name="body"的界面中出现-->
<a href="http://www.163.com" target="body">网易</a>
</body>
</html>3:center.html
<!DOCTYPE HTML> <html> <head> <title>center.html</title> </head> <body> </body> </html>
运行结果如下：
更多html标签详解（1） 相关文章请关注PHP中文网！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
256
