HTML的标签(标题、段落、文本、图片、列表)

HTML的标签1

标题标签:

标签:h1~h6

注意:如果使用无效标签(比如:h7)会按照文本内容在页面展示。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        
        <h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		<!--文本内容-->
		<h7>七级标签</h7>
	
	</body>
</html>

段落标签:

标签:p

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	
		<p>今天天气真好</p>
		<p>我们去逛街吧</p>
	</body>
</html>

文本标签:

标签:

​ span -- 文本标签

​ br -- 换行标签

​ hr -- 分割线标签

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<span>今天天气真好</span>
	
		<span>我们去逛街吧</span>
	
	</body>
</html>

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<span>今天天气真好</span>
		<br/>
		<span>我们去逛街吧</span>
	
	</body>
</html>
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<span>今天天气真好</span>
		<br/>
		<span>我们去逛街吧</span>
		<hr />
	</body>
</html>

图片标签:

图片标签:img

属性:

​ src:图片资源路径

​ width:宽度

​ height:高度

​ alt:图片加载失败后显示的文本内容
tips:

100px -- 100像素

30% ---- 占页面宽度的百分比

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<img src="../img/花儿.jpg" width="100px" height="100px"/>
		<br />
		<img src="../img/花儿.jpg" width="30%" height="30%" />
		<br />
		<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.NCZVberruGGjOtESnFnMDQHaEK?" width="200px" height="200px" />
		<br />
		<img src="https://tse2-mm.cn.bing.xxxxx" width="100px" height="100px" alt="图片加载失败" />
		
	</body>
</html>
		

列表标签:

有序列表:

有序列表:ol

属性: type --->展示类型:

​ 1-阿拉伯数字

​ a-小写英文字母

​ A-大写英文字母

i-小写罗马数字

I-大写罗马数字)

列表项: li

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	
        <h3>注册流程:</h3>
		<ol type="1">
			<li>填写基本信息</li>
			<li>绑定银行账号</li>
			<li>绑定手机号</li>
			<li>注册成功</li>
		</ol>
		
	</body>
</html>
		

无序列表:

无序列表: ul

属性:type ----> 展示类型

​ circle-空心圆

​ discs-实心圆

​ square-实心方块

列表项:li

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        
		<ul type="square" >
			<li>xxx</li>
			<li>yyy</li>
			<li>zzz</li>
		</ul>
		
	</body>
</html>

定义列表:

定义列表:dl

列表头:dt

列表体:dd

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<dl>
			<dt>
				<h2>花儿</h2>
				<img src="../img/花儿.jpg" width="100px" />
			</dt>
			<dd>
				<p>接天莲叶无穷碧,映日荷花别样红</p>
				<p>小荷才露尖尖角, 早有蜻蜓立上头</p>
				<p>小楼一夜听春雨,深巷明朝卖杏花</p>
				<p>人间四月芳菲尽,山寺桃花始盛开</p>
				<p>花开堪折直须折, 莫待无花空折枝</p>
				<p>春宵一刻值千金, 花有清香月有阴</p>
				<p>浔阳江头夜送客,枫叶荻花秋瑟瑟</p>
			</dd>
		</dl>
		
		
	</body>
</html>

列表案例:

HTML标签可以无限层嵌套!

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <!--无序列表-->
		<ul>
			<li>
				<h3>荤菜</h3>
                <!--有序列表-->
				<ol>
					<li>回锅肉</li>
					<li>仔姜鸭丝</li>
					<li>爆炒腰花</li>
					<li>宫保鸡丁</li>
					<li>小鸡炖蘑菇</li>
				</ol>
			</li>
			<li>
				<h3>素菜</h3>
				<ol>
					<li>清炒空心菜</li>
					<li>鱼香茄子</li>
					<li>土豆炒洋芋</li>
					<li>西红柿炒番茄</li>
				</ol>
			</li>
			<li>
				<h3>汤类</h3>
				<ol>
					<li>翡翠蛋花汤</li>
					<li>皮蛋黄瓜汤</li>
					<li>胡豆瓣酸菜粉丝汤</li>
					<li>开水白菜</li>
				</ol>
			</li>
		</ul>
	</body>
</html>
相关推荐
待磨的钝刨31 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨8 小时前
VUE+Vite之环境文件配置及使用环境变量
前端