html第一次培训（常用标签）

最新推荐文章于 2024-11-09 21:24:41 发布

zhangshaozhong__

最新推荐文章于 2024-11-09 21:24:41 发布

阅读量624

点赞数

分类专栏：前端文章标签： html elementui 前端

本文链接：https://blog.csdn.net/zhangshaozhong__/article/details/122780725

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的常用标签，包括标题标签h1-h6、段落p、换行br、水平线hr、列表ul和ol、div、span、格式化标签如font、pre等，以及超链接a、图片img、表格table等。此外，还涉及到了一些基本的样式设置和对齐方式。通过此篇，读者可以掌握HTML页面的基本构建元素。

摘要由CSDN通过智能技术生成

包括了段落换行水平线列表 div span pre a table

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>常用标签</title>
	</head>
	<body>
		<!--
		 标题标签
			h1-h6依次递减
			尽量减少使用h1标签
			块级元素
		 -->
		 <h1 id="niu">标题1</h1>
		 <h2>标题2</h2>
		 <h3>标题3</h3>
		 <h4>标题4</h4>
		 <h5>标题5</h5>
		 <h6>标题6</h6>
		 <!--
		  段落标签
			P标签，会自动换行
			块级元素
		  -->
		  <p>这是一个段落1</p>
		  <p>这是一个段落2</p>
		  <!--
		   换行标签
				br单标签
				<br><br/>
		   -->
		   hello <br />world
		   <!-- 
		   水平线标签
				hr单标签
				常用属性
				color颜色
				size粗细
				width长度（px和百分比）
			-->
			<hr>
			<hr color="aqua" size="3" width="50%" />
			<!--
			 列表
				有序列表
				无序列表
			 -->
			 <ul type="disc">
				 <li>周杰伦</li>
				 <li>林俊杰</li>
				 <li>陈奕迅</li>
			 </ul>
			 <ol type="I">
			 				 <li>周杰伦</li>
			 				 <li>林俊杰</li>
			 				 <li>陈奕迅</li>
			 </ol>
			 <!-- 
			 div标签
				块级元素
				默认占全部宽度  有多少内容高度占多少
				可以设置div的宽高
				通过align设置对齐方式
			  -->
			  <div style="width: 500px;height: 100px;" align="center">
				                我真
								
			  	
			  </div>
			  11
		  <!--
		   span标签
				行内元素（不会自动换行）
				
		   -->
		   <span>这是一个span</span>
		   <hr />
		   <!--
			格式化标签
			font标签
					color字体颜色
					size字体大小
					face字体风格
			-->
			<font size="5" color="aliceblue" face=blackadder itc>我真帅</font>
			<br />
			<pre>
				hello             world
			</pre>
			<!--
			b 加粗
			i倾斜
			u下划线
			del中划线
			sup上标
			sub下标
			 -->
			 <p><b>你真帅</b><i>你真帅</i><u>你真帅</u><del>你真帅</del></p>
			 H<sub>2</sub>O
			 <!--
			  a标签
				超链接标签，用于链接到另一个url
				常用属性：
						href：需要跳转的地址
						target:窗口打开的方式
								_self: 当前窗口
								_blank:在空白窗口
				
			  -->
			  <br>
			  <a href="http://www.baidu.com"target="_blank">baidu</a>
			  <!-- 
			  作为锚点：
			      a标签的name属性值
				       <a name="top"></a>
				  其他的用id属性值
						<div id="top"></a>
			   -->
			   <a href="#niu">牛啊牛啊</a>
			   <!-- 
			   img标签
			   像网页中嵌入一个图片
			   常用属性：
						src需引入图片的地址
						alt当图片破损或不存在时显示的文本内容
						title当鼠标悬停时，显示的文本
						width图片的宽度
						height图片的高度
						border图片边框
				-->
				<!-- <img src="" /> -->
				<!-- 
					table表格标签
					tr行
					tb标准单元格
					th表头（字体）
					table的属性
						width表格宽度
						border边框
						align对齐方式
						style="border-collapse: collapse;"合并边框
					tr的属性
						align 行的内容的对齐方式
				 -->
				 <table width="400px" align="center" border="1" style="border-collapse: collapse;">
					 <tr align="left" bgcolor="antiquewhite">
						 <th>姓名</th>
						 <th>性别</th>
						 <th>年龄</th>
					 </tr>
					 <tr align="left">
					 	<th>张三</th>
					 	<th>男</th>
					 	<th>18</th>
					 </tr>
				 </table>
	</body>
</html>