利用HbuilderX制作简单网页

最新推荐文章于 2025-02-26 11:44:25 发布

m0_67266042

最新推荐文章于 2025-02-26 11:44:25 发布

阅读量2.2w

点赞数 21

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

本文链接：https://blog.csdn.net/m0_67266042/article/details/123376314

版权

本文介绍了如何使用HbuilderX工具，在半天时间内快速学习并制作一个简单的HTML网页。尽管作者没有前端基础，但通过HTML描述网页结构，CSS设置样式，JavaScript增强交互性，成功创建了一个包含主页面和登录界面的静态网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次综合课程设计要求设计内容不限安卓App，小程序，h5界面等，实现两三功能。
鉴于Android的知识放得太久，且AndroidStudio已被删除，所以尝试下载HbuilderX（十几M大小，操作简单），自学半天设计一个简陋的网页，由于没学过前端，所以很一般。

工具：在这里插入图片描述

项目文件及包含：

1.

HTML是描述网页文档的标记语言(网页)
HTML的全写是Hyper Text Markup Language
一门标记语言是由很多标记组成的.
HTML标记用来描述HTML文档
每个HTML标签描述不同的文档内容

2.

CSS是描述HTML(或XML)文档的样式表语言.
CSS描述了元素在屏幕上、纸上或其他媒体上呈现的方式.

3.

Javascript让HTML页面更加的动态和更有交互性.
在这里插入图片描述

内容结构：

DOCTYPE用来申明文档类型为HTML

和之间的内容用来描述HTML文档和之间的内容描述文档的头部信息和设置文档的标题和之间的内容为文档的可见内容

和

申明为一个标题

和

申明为一个段落

HTML结构图可以很快了解具体框架：
在这里插入图片描述

主页面.html

主页面包含了整个网页我所想展示的东西。

<!doctype html>
<html>

	<head>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/背景.css" rel="stylesheet" />
		<link href="css/播放器.css" rel="stylesheet" />
	
		<style>
		        div.sticky {
		            position: -webkit-sticky;
		            position: sticky;
		            top: 0;
		            padding: 5px;
		            background-color: #C7DDEF;
		            border: 2px solid #4CAF50;
		        }
		    </style> 
	</head>
这里添加了一个具有position:sticky;的元素,是根据用户的滚动位置定位.粘性元素在相对和固定之间切换,具体取决于滚动位置. 它开始时是相对定位,直到在视口中满足了给定的偏移位置 - 然后它粘住(sticky)到固定的位置(如position:fixed).
<table style="width: 100%;">
  <tr>
     <td style="text-align: right; vertical-align: middle;">
	<body>
		<div class="sticky">小昭的旅行日志??</div>
		<table style="width: 100%;"&g

最低0.47元/天解锁文章