HTML标签

颜尚德

已于 2024-07-11 17:29:23 修改

阅读量226

点赞数 3

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

于 2024-03-09 08:48:13 首次发布

本文链接：https://blog.csdn.net/2302_77527700/article/details/136576930

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML中的标记指的就是标签。 HTML使用标记标签来描述网页。结构：标签内容闭合标签(有标签内容) 自闭合标签 (无标签内容）

标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如：1.属性的格式：属性名 = “属性值“ 2. 属性的位置： xxx 3. 添加多个属性： xxx

标题标签，段落标签，换行标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入外部样式表 -->
		<link href="css/index.css" rel="stylesheet"/>
		<!-- 
		内嵌样式表
		<style>
			p{
				font-size: 16px;
				color:blue;
			}
		</style> -->
	</head>
	<body>
		<!-- <p>
			<font color="red">
				<b>
					<i>
						静夜思
					</i>
				</b>
			</font>
		</p> -->
		
		<!-- 
		px 像素单位 
			行内样式表-直接写在标签中
		-->
		<!-- <p style="color:blue;font-size: 20px;font-weight: bold;">静夜思</p>
		<p style="color: green;font-size: 16px;">床前明月光,</p>
		<p style="color:green;font: size: 16px;">疑是地上霜.</p> -->
		
		<p>静夜思</p>
		<p>窗前明月光,</p>
		<p>疑是地上霜.</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 标题标签 -->
		<!-- 
			<h1></h1>....h6 每一个标题标签会独占一行
			align="left/center/right"控制标签内容在标签体中水平对齐
		 -->
		<h1 align="center">
			<font color="red">1级标题</font>
		</h1>
		<h2 align="right">2级标题</h2>
		<h3>3级标题</h3>
		
		<!-- 段落标签 -->
		<!-- 
			p 表示一个段落 段落与段落之间有间隔
		 -->
		 <p align="left">
			 《三国演义》由东汉末年黄巾起义末期开始描写，至西晋初期国家重归统一结束，
			 以魏、蜀、吴三个政治、军事集团之间的形成演变，矛盾斗争为主线，最后由晋统一全国，
			 国家重归统一。小说在广阔的社会历史背景上，展示出那个时代尖锐复杂又极具特色的政治军事冲突，
			 在军事政治谋略方面，对后世产生了极其深远的影响。
		 </p>
		 
		 <p align="right">
			 第一回 宴桃园豪杰三结义 斩黄巾英雄首立功
		 </p>
	</body>
</html>

列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 列表 -->
		<!-- 无序列表 -->
		<ul type="square">
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
		</ul>
		<!-- 
			有序列表 
			type="1/I/A"只有这三种
		-->
		<ol type="1">
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
		</ol>
	</body>
</html>

超链接，图片标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			href="网页的地址"
			target="_blank" 在新窗口打开目标网页
			target="_self" 在当前窗口打开一个新网页 默认的
		 -->
		 <a href="http://www.baidu.com" target="_blank">百度</a>
		 <a href="index.html" target="_self">index</a>
		 
		 <hr/>
		 
		 <img src="img/1.png" width="150" height="100" border="1"/>
		 
		 <a href="http://www.jd.com">
			<img src="img/2.png"/>
		 </a>
	</body>
</html>

特殊符号转义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			在网页中有些符号不能直接显示的,
			需要通过其他的符号进行代替,这些代替的符号称为转义符
			&+特定
		 -->
		 &lt;b&gt; 标签的功能是加粗文字 空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
		 <hr/>
		 &reg;
		 &copy;
	</body>
</html>

颜尚德

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML标签

标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如：1.属性的格式：属性名 = “属性值“ 2. 属性的位置： xxx 3. 添加多个属性： xxx。HTML中的标记指的就是标签。HTML使用标记标签来描述网页。结构：标签内容闭合标签(有标签内容) 自闭合标签 (无标签内容）标题标签，段落标签，换行标签。
复制链接

扫一扫

专栏目录