社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 html教程 html标签详解（1）

html标签详解（1）

高洛峰
高洛峰
Feb 16, 2017 pm 02:05 PM
html标签

1.基础标签

<!DOCTYPE html>               <!--表示文本类型-->
<html>                        <!--<html></html>表示创建一个html文档-->
    <head>                    <!--<head></head>设置文档标题和其它在网页中不显示的信息-->
        <title>标题</title>   <!--<title></title>设置文档的标题，就是最上方的名字-->
    </head>
    <body>                    <!--<body></body>设置文档的内容-->
        <p>原创作者：雨点的名字</p>
   </body>
</html>
登录后复制

2.body内常用标签     
      注释标签快捷键：Ctrl+Shift+/,  我用的是myeclipse

         换行标签
        横线标签

  表示段落

表示标题，分为h1到h6字体依次递减
 

和                将文本加粗

和                           将文本倾斜

和                         将文本设置删除线

和                        将文本设置下划线

                                                    预编译格式很有用的标签


<!DOCTYPE html>
<head>
<title>来吧</title>
</head>
<body>
<!--这是一个注释标签，页面上你看不到-->
<h4>我是标题哦</h4>
<hr/>
<p>我是p标签<b>我自动加粗的</b></p><br/>
<s>我是删除线</s>
<u>我是下划线</u><br/>
<pre class="brush:php;toolbar:false">  我是预编译，
         我怎么输它就怎么显示



登录后复制


运行结果如下：




html标签详解（1） 


3.图片标签




效果如下：


<!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>
登录后复制


注解：在该 标签中常用src属性表示图片的来源和名称；用title属性设置鼠标放到图片上时显示的文字；用alt属性设置当图盘无法正常显示时对图片的描述；用width和height属性设置图片的宽和高


效果如下：


html标签详解（1） 


 4：链接标签   


（1）基本链接介绍 
                  标签实现超链接




<!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
登录后复制


 注解：在利用 实现超链接时使用href属性指明跳转的地址；使用title属性设置当鼠标放到超链接上时显示的文字；用target属性指明超链接的跳转方式，其中_self表示不开启新窗口且在当前窗口打开跳转后的页面（默认）而_blank表示开启新窗口打开跳转后的页面。


细节：如果在一个页面中所有的超链接跳转方式均一致，那么可以在 标签中进行统一的配置。在标签中添加


     表示该页面的所有超链接均在原窗口显示


     表示该页面的所有超链接均在新窗口显示


（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>
登录后复制






下面是3个框架中的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） 







 


 更多html标签详解（1） 相关文章请关注PHP中文网！



						

					

					

						
本站声明

						
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

					

				


				



				



				
    


					


											

							

								

									
									
热AI工具

								

								

																		

											
												Undresser.AI Undress
											
											

												
													
Undresser.AI Undress

												
												
人工智能驱动的应用程序，用于创建逼真的裸体照片

											

										

																		

											
												AI Clothes Remover
											
											

												
													
AI Clothes Remover

												
												
用于从照片中去除衣服的在线人工智能工具。

											

										

																		

											
												Undress AI Tool
											
											

												
													
Undress AI Tool

												
												
免费脱衣服图片

											

										

																		

											
												Clothoff.io
											
											

												
													
Clothoff.io

												
												
AI脱衣机

											

										

																		

											
												AI Hentai Generator
											
											

												
													
AI Hentai Generator

												
												
免费生成ai无尽的。

											

										

																

								

									显示更多
								

							

						

					

					

					

						

							

								
								
热门文章

							

							

															

									R.E.P.O.能量晶体解释及其做什么（黄色晶体）
									

										4 周前
										By 尊渡假赌尊渡假赌尊渡假赌
									

								

															

									R.E.P.O.最佳图形设置
									

										4 周前
										By 尊渡假赌尊渡假赌尊渡假赌
									

								

															

									刺客信条阴影：贝壳谜语解决方案
									

										2 周前
										By DDD
									

								

															

									R.E.P.O.如果您听不到任何人，如何修复音频
									

										4 周前
										By 尊渡假赌尊渡假赌尊渡假赌
									

								

															

									WWE 2K25：如何解锁Myrise中的所有内容
									

										1 个月前
										By 尊渡假赌尊渡假赌尊渡假赌
									

								

														

							

								显示更多
							

						

					



											

							

								

									
									
热工具

								

								

																		

											
												记事本++7.3.1
											
											

												
													
记事本++7.3.1

												
												
好用且免费的代码编辑器

											

										

																			

											
												SublimeText3汉化版
											
											

												
													
SublimeText3汉化版

												
												
中文版，非常好用

											

										

																			

											
												禅工作室 13.0.1
											
											

												
													
禅工作室 13.0.1

												
												
功能强大的PHP集成开发环境

											

										

																			

											
												Dreamweaver CS6
											
											

												
													
Dreamweaver CS6

												
												
视觉化网页开发工具

											

										

																			

											
												SublimeText3 Mac版
											
											

												
													
SublimeText3 Mac版

												
												
神级代码编辑软件(SublimeText3)

											

										

																	

								

									显示更多
								

							

						

										

					
					

						

							

								
								
热门话题

							

							

															

									gmail邮箱登陆入口在哪里
									

										

											
											7517
										

										

											
											15
										

									

								

															

									CakePHP 教程
									

										

											
											1378
										

										

											
											52
										

									

								

															

									steam的账户名称是什么格式
									

										

											
											79
										

										

											
											11
										

									

								

															

									win11激活密钥永久
									

										

											
											53
										

										

											
											19
										

									

								

															

									NYT连接提示和答案
									

										

											
											21
										

										

											
											66
										

									

								

														

							

								显示更多
							

						

					

				

			

							

					

						

							Related knowledge
						

						


													

								
									如何在Go语言中使用正则表达式提取HTML标签内容
								
								如何在Go语言中使用正则表达式提取HTML标签内容
								Jul 14, 2023 pm	 01:18 PM
								
如何在Go语言中使用正则表达式提取HTML标签内容导读：正则表达式是一种强大的文本匹配工具，它在Go语言中也有着广泛的应用。在处理HTML标签的场景中，正则表达式可以帮助我们快速提取需要的内容。本文将介绍如何在Go语言中使用正则表达式提取HTML标签的内容，并给出相关代码示例。一、引入相关包首先，我们需要导入相关的包：regexp和fmt。regexp包提供

							

														

								
									如何使用Python正则表达式去除HTML标签
								
								如何使用Python正则表达式去除HTML标签
								Jun 22, 2023 am	 08:44 AM
								
HTML（HyperTextMarkupLanguage）是用于创建Web页面的标准语言，它使用标签和属性来描述页面上的各种元素，例如文本、图像、表格和链接等等。但是，在处理HTML文本时，很难将其中的文本内容快速地提取出来用于后续的处理。这时，我们可以使用Python中的正则表达式来去除HTML标签，以达到快速提取纯文本的目的。在Python中，正则表

							

														

								
									PHP如何去除字符串中的HTML标签？
								
								PHP如何去除字符串中的HTML标签？
								Mar 23, 2024 pm	 09:03 PM
								
PHP是一种常用的服务器端脚本语言，广泛应用于网站开发和后端应用程序开发中。在开发网站或应用程序时，经常会遇到需要处理字符串中的HTML标签的情况。本文将介绍如何使用PHP去除字符串中的HTML标签，并提供具体的代码示例。为什么需要去除HTML标签？在处理用户输入或从数据库中获取的文本时，经常会包含HTML标签。有时候我们希望在显示文本时去除这些HTML标签

							

														

								
									php中怎么转义html标签
								
								php中怎么转义html标签
								Feb 24, 2021 pm	 06:00 PM
								
在PHP中，可以使用htmlentities()函数来转义html，能把字符转换为HTML实体，语法“htmlentities(string,flags,character-set,double_encode)”。PHP中也可以使用html_entity_decode()函数来反转义html，把HTML实体转换为字符。

							

														

								
									如何在Java中从给定的字符串中删除HTML标签？
								
								如何在Java中从给定的字符串中删除HTML标签？
								Aug 29, 2023 pm	 06:05 PM
								
String是Java中的final类，它是不可变的，这意味着我们不能改变对象本身，但我们可以更改对象的引用。可以使用String类的replaceAll()方法从给定字符串中删除HTML标签。我们可以使用正则表达式从给定字符串中删除HTML标记。从字符串中删除HTML标签后，它将返回一个字符串作为普通文本。语法publicStringreplaceAll(Stringregex,Stringreplacement)示例publicclassRemoveHTMLTagsTest{&nbs

							

														

								
									如何在HTML表格中使用HTML标签？
								
								如何在HTML表格中使用HTML标签？
								Sep 08, 2023 pm	 06:13 PM
								
我们可以轻松地在表格中添加HTML标签。HTML标签应放置在<td>标签内。例如，在<td>标签内添加段落<p>…</p>标签或其他可用标签。语法以下是在HTML表格中使用HTMl标记的语法。<td><p>Paragraphofthecontext</p><td>示例1下面给出了在HTML表格中使用HTML标签的示例。<!DOCTYPEhtml><html><head&g

							

														

								
									HTML中起始标签的示例是什么？
								
								HTML中起始标签的示例是什么？
								Apr 06, 2025 am	 12:04 AM
								
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

							

														

								
									PHP正则表达式验证基本的HTML标签的方法
								
								PHP正则表达式验证基本的HTML标签的方法
								Jun 24, 2023 am	 08:07 AM
								
PHP是一种高效的网页开发语言，其支持正则表达式功能，能够快速验证输入数据的有效性。在网页开发中，HTML是常见的标记语言，而对HTML标签进行验证，是网页表单验证的一种非常重要的方法。本文将介绍基本的HTML标签验证方法，以及如何使用PHP正则表达式进行验证。一、HTML标签基本结构HTML标签由尖括号包围的元素名称和属性组成，常见的标签包括p、a、div

							

													


													
								See all articles