HBuilderX前端html功能拓展应用

最新推荐文章于 2023-10-22 15:43:28 发布

喆子玩点数据

最新推荐文章于 2023-10-22 15:43:28 发布

阅读量2.4k

点赞数 2

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

本文链接：https://blog.csdn.net/m0_58239511/article/details/126754443

版权

本文详细介绍了HBuilderX中HTML的高级用法，包括超链接的本地跳转和内容定位、列表标签（无序列表和有序列表）、input标签的各种type属性、多文本域与下拉菜单的使用，以及表格标签的属性和单元格合并的方法。

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

一、超链接高级用法

打开本地页面(本地跳转)
href的值为本地的html文件地址
本页面跳转（当前页面内容定位）
href的值为目标标签对应的id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<a href="03文本相关标签.html">文本相关标签</a>
		<a href="04图片和超链接.html" target="_blank">图片和超链接</a>
		
		
	
		<br>
		<!-- 自动定位到id属性值为h2的标签 -->
		<a href="#h2">标题2</a>			
		<br>
		<a href="#h3">标题3</a>
		<br>
		<a href="#img1">一人之下</a>
		
		<h1 id="h1">我是标题1</h1>
		<p>图片1</p>
		<img src="./img/bizi.png" alt="">
		<h2 id="h2">我是标题2</h2>
		<br>
		<img src="img/hua.png" alt="">
		<h2 id="h3">我是标题3</h2>
		
		<img id="img1" src="https://img1.baidu.com/it/u=2757022492,1966091646&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="">
		
		<a href="#h1">标题1</a>
	</body>
</html>

在这里插入图片描述

二、列表标签

1.无序列表: ul标签、li标签
ul标签 - 代表整个列表(容器)
li标签 - 列表中的元素

2.有序列表：ol标签、li标签
ol标签 - 代表整个列表(容器)
li标签 - 列表中的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1>千锋成都校区学科设置：</h1>
		<ul>
			<li>Python数据分析</li>
			<li>Java服务器开发</li>
			<li>前端开发</li>
			<li>UI\UE设计</li>
			<li>物联网</li>   
		</ul>
		
		
	
		<h1>香椒牛肉的做法：</h1>
		<ol>
			<li>将牛肉煮成7分熟(放料酒、盐、姜、花椒)</li>
			<li>切片</li>
			<li>油炸</li>
			<li>放调料</li>
		</ol>
		
		
		<h1>千锋成都校区学科设置：</h1>
		<ul>
			<li>
				<p>Python数据分析</p>
				<img width="200" src="https://img1.baidu.com/it/u=1679507727,998603233&fm=253&fmt=auto&app=120&f=GIF?w=935&h=699" alt="">
				<p>数据分析是指用适当的统计分析方法对收集来的大量数据进行分析，将它们加以汇总和理解并消化，以求最大化地开发数据的功能，发挥数据的作用。数据分析是为了提取有用信息和形成结论而对数据加以详细研究和概括总结的过程。数据分析的数学基础在20世纪早期就已...&