精华内容
下载资源
问答
  • 利用HbuilderX制作简单网页

    万次阅读 多人点赞 2021-01-07 15:37:24
    鉴于Android的知识放得太久,且AndroidStudio已被删除,所以尝试下载HbuilderX(十几M大小,操作简单),自学半天设计一个简陋的网页,由于没学过前端,所以很一般。 工具: 项目文件及包含: 1. HTML是描述网页...

    本次综合课程设计要求设计内容不限安卓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%;">
    		  <tr>
    		     <td style="text-align: center; vertical-align: middle;">
    		<body style="background-image:linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);">
    			
    //添加一个漂亮的背景色,取自https://webgradients.com/
    		
    		<div>
    			<style type="text/css">
    				background-attachment: fixed;
    				background: url(img/background.jpg);
    			</style>
    	//没用到,本来想用图片做一个固定背景
    		
    		  <li><a href="https://blog.csdn.net/weixin_45281843?spm=1000.2115.3001.5343">传送门:我的CSDN博客</a></li>
    		        <li><a href="https://user.qzone.qq.com/1178815523">我的QQ空间</a></li>
    		      </ul>
    		</div>
    		//俩超链接,一个到博客,一个到qq空间
    		<div>
    			<audio src="./周杰伦%20-%20超人不会飞.mp3" controls="controls"></audio>
    		</div>
    		
    //一个播放器小组件
    		
    		</div>
    		<div class="row">
    		  <div class="col-sm-6 col-md-4">
    		    <div class="thumbnail">
    		      <img src="./img/朝圣的人.jpg">
    		      <div class="caption">
    		        <h3>拉卜楞寺的朝圣</h3>
    		        <p>拉卜楞寺,位于甘肃省甘南藏族自治州夏河县,藏语全称为:“噶丹夏珠达尔吉扎西益苏奇具琅”,意思为具喜讲修兴吉祥右旋寺。</p>
    		        <p><a href="朝圣的人.html" class="btn btn-primary" role="button">欣赏原图</a> <a href="https://baike.baidu.com/item/%E6%8B%89%E5%8D%9C%E6%A5%9E%E5%AF%BA/113379?fr=aladdin" class="btn btn-default" role="button">查看地点</a></p>
    		      </div>
    		    </div>
    		  </div>
    		</div>
    	//通过缩略图组件扩展 Bootstrap 的 栅格系统,可以很容易地展示栅格样式的图像、视频、文本等内容。 添加一点点额外的标签,就可以把任何类型的 HTML 内容,例如标题、段落或按钮,加入缩略图组件内。 带俩按钮的缩略图。
    		<div class="row">
    		  <div class="col-sm-6 col-md-4">
    		    <div class="thumbnail">
    		      <img src="./img/青海湖.jpg">
    		      <div class="caption">
    		        <h3>青海湖畔</h3>
    		        <p>青海湖是我国青藏高原东北部的一个最大的内陆湖,独特的地理位置加上气候因素。青海湖成了一个著名的旅游景点,青海湖最具有特点的就是气候日照特别的强烈,海天相接的青海湖,更加证明了它的面积是非常广阔的</p>
    		        <p><a href="青海湖畔.html" class="btn btn-primary" role="button">欣赏原图</a> <a href="https://baike.baidu.com/item/%E9%9D%92%E6%B5%B7%E6%B9%96/113605" class="btn btn-default" role="button">查看地点</a></p>
    		      </div>
    		    </div>
    		  </div>
    		</div>
    		
    		<div class="row">
    		  <div class="col-sm-6 col-md-4">
    		    <div class="thumbnail">
    		      <img src="./img/郎木寺.jpg">
    		      <div class="caption">
    		        <h3>郎木寺庙</h3>
    		        <p>郎木寺镇是甘肃甘南藏族自治州碌曲县和四川阿坝藏族羌族自治州若尔盖县共同下辖的一个小镇,白龙江穿镇而过。其中江北的赛赤寺属于甘肃碌曲县,又叫“达仓郎木赛赤寺”,江南是格尔底寺,属于四川若尔盖县,又叫“达仓郎木格尔底寺”,两座寺庙均属藏传佛教格鲁派寺庙。</p>
    		        <p><a href="郎木寺.html" class="btn btn-primary" role="Button">欣赏原图</a> <a href="https://baike.baidu.com/item/%E9%83%8E%E6%9C%A8%E5%AF%BA" class="btn btn-default" role="button">查看地点</a></p>
    		      </div>
    		    </div>
    		  </div>
    		</div>
    		
    		<div class="row">
    		  <div class="col-sm-6 col-md-4">
    		    <div class="thumbnail">
    		      <img src="./img/月牙泉.jpg">
    		      <div class="caption">
    		        <h3>沙漠明珠:月牙泉</h3>
    		        <p>月牙泉是敦煌诸多自然景观中的佼佼者,古往今来以“沙漠奇观”著称于世,被誉为“塞外风光之一绝”。月牙泉、莫高窟九层楼和莫高窟艺术景观融为一体,是敦煌城南一脉相连的“三大奇迹”,成为中国乃至世界人民向往的旅游胜地。</p>
    		        <p><a href="月牙泉.html" class="btn btn-primary" role="Button">欣赏原图</a> <a href="https://baike.baidu.com/item/%E6%9C%88%E7%89%99%E6%B3%89/4562" class="btn btn-default" role="button">查看地点</a></p>
    		      </div>
    		    </div>
    		  </div>
    		</div>
    		
    		<div class="row">
    		  <div class="col-sm-6 col-md-4">
    		    <div class="thumbnail">
    		      <img src="./img/日照丹霞.jpg">
    		      <div class="caption">
    		        <h3>日照丹霞</h3>
    		        <p>张掖丹霞地貌群,俗称“张掖丹霞”,由“七彩丹霞”和“冰沟丹霞”组成。如用文字来表达,仅有两个字震撼。其气势之磅礴、场面之壮观、造型之奇特、色彩之斑斓,大自然的鬼斧神工,令人惊叹。她不仅具有一般丹霞的奇、险,而且更美的在于色。在方圆10多平方公里的范围内,随处可见有红、黄、橙、绿、白、青灰、灰黑、灰白等多种鲜艳的色彩,把无数沟 、山丘装点得绚丽多姿。张掖丹霞地貌以她那层理交错的线条、色彩斑斓的色调、灿烂夺目的壮美画图,形成一个彩色的童话世界。</p>
    		        <p><a href="日照丹霞.html" class="btn btn-primary" role="Button">欣赏原图</a> <a href="https://baike.baidu.com/item/%E5%BC%A0%E6%8E%96%E4%B8%B9%E9%9C%9E/6349616" class="btn btn-default" role="button">查看地点</a></p>
    		      </div>
    		    </div>
    		  </div>
    		</div>
    		
    		<div class="row">
    		  <div class="col-sm-6 col-md-4">
    		    <div class="thumbnail">
    		      <img src="./img/长安不夜城.jpg">
    		      <div class="caption">
    		        <h3>长安不夜城</h3>
    		        <p>大唐不夜城以盛唐文化为背景,以唐风元素为主线,建有大雁塔北广场、玄奘广场、贞观广场、创领新时代广场四大广场,西安音乐厅、陕西大剧院、西安美术馆、曲江太平洋电影城等四大文化场馆,大唐佛文化、大唐群英谱、贞观之治、武后行从、开元盛世等五大文化雕塑,是西安唐文化展示和体验的首选之地。</p>
    		        <p><a href="长安不夜城.html" class="btn btn-primary" role="Button">欣赏原图</a> <a href="https://baike.baidu.com/item/%E5%A4%A7%E5%94%90%E4%B8%8D%E5%A4%9C%E5%9F%8E" class="btn btn-default" role="button">查看地点</a></p>
    		      </div>
    		    </div>
    		  </div>
    		</div>
    		
    		<script src="js/mui.js"></script>
    		<script type="text/javascript">
    			mui.init()
    		</script>
    		</tr>
    		</table>
    		
    		<script type="text/javascript">
    		        	/* 鼠标点击爱心特效 */
    		            !function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");requestAnimationFrame(r)}function n() {var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) {t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a = t.createElement("style");a.type = "text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()}(window, document);
    		</script>
    	</body>
    
    </html>
    

    页面预览:

    在这里插入图片描述
    在这里插入图片描述

    登录界面

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<link rel="stylesheet" href="css/style.css" />
    		<link rel="stylesheet" href="css/iconfont.css" />
    		<script type="text/javascript" src="./js/new_file.js"></script>
    		<title>登录</title>
    	</head>
    	<body>
    		<div id="bigBox">
    			<h1>小昭的旅行日志</h1>
    			<div class="inputBox">
    				<div class="inputText">
    					<span class="iconfont icon-nickname"></span>
    					<input type="text" placeholder="用户名" />
    				</div>
    				<div class="inputText">
    					<span class="iconfont icon-visible"></span>
    					<input type="password" placeholder="密码" />
    				</div>
    			</div>
    			<input class="loginButton" type="button" value="Login" onclick="go()" />//给按钮一个跳转函数,再写一个js的定义,以便跳转到主页面。
    			
    		</div>
    	</body>
    </html>
    
    

    css文件

    body
    {
    	margin: 0;
    	padding: 0;
    	background-image: url(../img/20150826_IMG_2927.JPG);	/* 背景图片 */
    	background-repeat: no-repeat;	/* 背景图片不重复 */
    }
    
    #bigBox
    {
    	margin: 0 auto;	/* login框剧中 */
    	margin-top: 200px; /* login框与顶部的距离 */
    	padding: 20px 50px;	/* login框内部的距离(内部与输入框和按钮的距离) */
    	background-color: #00000090;	/* login框背景颜色和透明度 */
    	width: 200px;
    	height: 100px;
    	border-radius: 10px;	/* 圆角边 */
    	text-align: center;	/* 框内所有内容剧中 */
    }
    
    #bigBox h1
    {
    	color: white;	/* LOGIN字体颜色 */
    }
    
    #bigBox .inputBox
    {
    	margin-top: 50px;	/* 输入框顶部与LOGIN标题的间距 */
    }
    
    #bigBox .inputBox .inputText
    {
    	margin-top: 20px;	/* 输入框之间的距离 */
    }
    
    #bigBox .inputBox .inputText span
    {
    	color: Black;	/* icon颜色 */
    }
    
    #bigBox .inputBox .inputText input
    {
    	border: 0;	/* 删除输入框边框 */
    	padding: 10px 10px;	/* 输入框内的间距 */
    	border-bottom: 1px solid white;	/* 输入框白色下划线 */
    	background-color: #00000000;	/* 输入框透明 */
    	color: black;	/* 输入字体的颜色 */
    }
    
    #bigBox .loginButton
    {
    	margin-top: 30px;	/* 按钮顶部与输入框的距离 */
    	width: 150px;
    	height: 25px;
    	color: white;	/* 按钮字体颜色 */
    	border: 0; /* 删除按钮边框 */
    	border-radius: 20px;	/* 按钮圆角边 */
    	background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);	/* 按钮颜色 */
    }
    

    网页预览

    在这里插入图片描述

    展开全文
  • 一个简单HBuilder

    2018-03-12 19:35:28
    利用HBuilder实现了一个简单的用户注册,登录,读取数据库中数据的功能(服务器和数据库需要自己搭建)。代码是企业实习安卓开发做的,做的一般般。我就是上传来玩一下。
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>...link rel="stylesheet" type="text/css" href="css/myweb.css" />...div class.
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="css/myweb.css" />
    	</head>
    	<body>
    		<div class="header">
    			<div class="logo fl"></div>
    			<div class="nav-lan fl">
    				<div class="language fr">选择语言</div>
    				<div class="nav fr">导航</div>
    				<div class="clear"></div>
    			</div>
    			<div class="clear"></div>
    		</div>
    		<div class="center">
    			<div class="photo fl"></div>
    			<div class="notice fl">
    				<div class="news"></div>
    				<div class="notices"></div>
    				<div class="mation"></div>
    			</div>
    			<div class="hotspot fl"></div>
    			<div class="option fr"></div>
    			<div class="clear"></div>
    		</div>
    		<div class="footer"></div>
    	</body>
    </html>

    附css代码:

    * {
    	padding: 0;
    	margin: 0;
    }
    
    .fl {
    	float: left;
    }
    
    .fr {
    	float: right;
    }
    
    .clear {
    	clear: both;
    }
    
    .container {
    	margin: 0 auto;
    }
    
    .header {
    	width: 970px;
    	height: 103px;
    	/*background-color: green;*/
    	margin: 0 auto;
    }
    
    .header .logo {
    	width: 277px;
    	height: 103px;
    	background-color: red;
    }
    
    .header .nav-lan {
    	width: 679px;
    	height: 103px;
    	margin-left: 14px;
    	/*background-color: green;*/
    }
    
    .header .nav-lan .language {
    	width: 137px;
    	height: 49px;
    	background-color: green;
    }
    
    .header .nav-lan .nav {
    	width: 679px;
    	height: 46px;
    	background-color: green;
    	margin-top: 8px;
    }
    
    .center {
    	width: 970px;
    	height: 435px;
    	/* background-color: yellow; */
    	margin: 0 auto;
    	margin-top: 10px;
    	margin-bottom: 10px;
    }
    
    .center .photo {
    	width: 310px;
    	height: 435px;
    	background-color: yellow;
    	margin-bottom: 10px;
    }
    
    .center .notice {
    	width: 450px;
    	height: 400px;
    	/* background-color: blue; */
    	margin-left: 10px;
    }
    
    .center .notice .news {
    	width: 450px;
    	height: 240px;
    	background-color: dodgerblue;
    	margin-bottom: 10px;
    }
    
    .center .notice .notices {
    	width: 450px;
    	height: 110px;
    	background-color: dodgerblue;
    	margin-bottom: 10px;
    }
    
    .center .notice .mation {
    	width: 450px;
    	height: 30px;
    	background-color: dodgerblue;
    }
    
    .center .hotspot {
    	width: 190px;
    	height: 400px;
    	background-color: purple;
    	margin-left: 10px;
    }
    
    .center .option {
    	width: 650px;
    	height: 25px;
    	background-color: green;
    	margin-top: 10px;
    }
    
    .footer {
    	width: 970px;
    	height: 35px;
    	background-color: blue;
    	margin: 0 auto;
    }

    展开全文
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="0" cellspacing=...购物简易计算器</td>.
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<table border="0" cellspacing="0">
    			<tr>
    				<td colspan="2" align="center">购物简易计算器</td>
    			</tr>
    			<tr>
    				<td>第一个数</td>
    				<td><input id="input1" type="text" /></td>
    			</tr>
    			<tr>
    				<td>第二个数</td>
    				<td><input id="input2" type="text" /></td>
    			</tr>
    			<tr>
    				<td colspan="2">
    					<button onclick="cal('+')">+</button>&nbsp;&nbsp;&nbsp;&nbsp;
    					<button onclick="cal('-')">-</button>&nbsp;&nbsp;&nbsp;&nbsp;
    					<button onclick="cal('*')">*</button>&nbsp;&nbsp;&nbsp;&nbsp;
    					<button onclick="cal('/')">/</button>
    				</td>
    			</tr>
    			<tr>
    				<td>计算结果</td>
    				<td><input id="output" type="text" /></td>
    			</tr>
    		</table>
    
    		<script type="text/javascript">
    			function cal(type) {
    				var num1 = document.getElementById('input1').value;
    				var num2 = document.getElementById('input2').value;
    				switch (type) {
    					case '+':
    						document.getElementById('output').value = parseInt(num1) + parseInt(num2);
    						break;
    					case '-':
    						document.getElementById('output').value = parseInt(num1) - parseInt(num2);
    						break;
    					case '*':
    						document.getElementById('output').value = parseInt(num1) * parseInt(num2);
    						break;
    					case '/':
    						document.getElementById('output').value = parseInt(num1) / parseInt(num2);
    						break;
    				}
    			}
    		</script>
    	</body>
    </html>

    效果如下图:

    展开全文
  • 个人网站建设及实现

    2018-07-09 06:58:48
    个人网站建设及实现,springmvc,mysql,有后台分页,富文本编辑器,附件上传,文件上传,时间选择器等等的源代码,保证可以运行,带导入视频
  • Hbuilder开发的发淘宝页面,完整带前台+后台+SQL,完整的仿淘宝类,自行导入SQL,前后分离,后端是php,,好用不贵,也可以拿资源互换
  • 个人站长制做网页常用的php代码
  • 简历代码: XML/HTML Code复制内容到剪贴板 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <...  <head>...
  • HBuilder的示例

    2017-08-28 10:02:44
    HBuilder简单示例
  • hbuilder 源码 HBuilder登入注册界面hbuilder 源码 HBuilder登入注册界面
  • HTML入门----简单网页制作

    千次阅读 2012-11-16 11:44:25
    概念:HTML(Hypertext Markup Language)即超文本标记语言,用于网页文件的制作。HTML由一系列的标记组成,可以说HTML的本质就是通过对各种标记进行组合嵌套将文本,表格,图片等网页元素组织成一个网页页面。   ...

     

    概念:HTML(Hypertext Markup Language)即超文本标记语言,用于网页文件的制作。HTML由一系列的标记组成,可以说HTML的本质就是通过对各种标记进行组合嵌套将文本,表格,图片等网页元素组织成一个网页页面。

     

    标记:在HTML中标记的种类繁多但是大体也不过被分为两类,头部标记<head></head>和页面主体标记<body></body>。在HTML中绝大部分的标记均为成对使用。

    在头部元素标记中有以下几种比较重要的标记:

    1.       标题标记。标记标题以<title>开始,以</title>结束。标记之间的内容为网页标题内容,它将显示在浏览器的标题栏中。

    2.       元标记。元标记<meta>用于定义页面信息的名称关键字等。<meta>标记不是成对出现的。他通过属性方式来定义页面信息。以设置页面关键字为例。设置页面关键字的name的属性值是keyword,它是为了搜索引擎说明该网页的关键词,从而帮助搜索引擎对该网页进行查找和分类,从而提高被搜索到的几率。一般可以设置多个关键词,各个关键词之间用逗号分开,如<meta name=”keyword” content=”content1,content2,content3”>。除设置关键字外,还可以通过将name属性值设为description来描述网页的主题,<meta name=”description” content=”这是一个学习类网页”>,通过refresh属性定时刷新网页或者进行网页定时跳转操作。<meta http-equiv=”refresh” content=”间隔时间;url=连接地址”>(间隔时间以秒计算)。

     

    主体标记以<body>开始,以</body>结束,主体标记中的标记比较多,简单介绍一下下面几种常用标记的作用:

    标记

    作用

    是否成对使用

    <p>

    创建一个段。<p align=”#”>属性align表示段的对其方式,#可以是left,center,right,justify.

    <br>

    创建一个空行,用于换行

    <hr>

    插入一条水平线。<hr color=”clr”>属性color用来指定线的颜色,clr可以为red,blue,green等,或以十六进制数表示

    <center>

    使文本居中显示

    <hn>

    用于指定文档标题是几级标题,n为1到6的整数。<hn align=”#”>.

    <font>

    用于设置字体,属性size表示字体的大小,n可以是1到7的整数。<font size=n color=”clr”>

    <b>

    使文本成为粗体

    <i>

    使文本成为斜体

    <ol>

    与<li>嵌套使用,指定编号的格式和顺序,用type属性指定编号系统的类型

    <ul>

    与<li>嵌套使用,建立带有项目符号的列表,用type属性指定符号样式

    <table>

    用于定义表格元素,具有align,border,bgcolor等属性

    <caption>

    嵌套在<table>中,用于定义表格标题

    <tr>

    嵌套在<table>中,在表格中添加一个新行

    <th>

    嵌套在<table>中,用于定义表头元素

    <td>

    嵌套在<table>中,用于定义单元格

    <form>

    与嵌套在其中的相关元素组合,在网页上产生一张表单。Method属性用来指定项服务器提交表单的方法。有get或post两种,get方法用于数据量少且不要求安全性的情况下,反之使用post方法

    <input>

    嵌套在<table>或<form>中使用,通过type属性指定input元素的类型type属性的值有text,submit,reset,password,radio,checkbox,hidden等,依次表示单行文本输入控件,提交按钮,重置按钮,口令输入控件单选按钮,复选框,隐藏控件

    <select>

    床简历表框

    <option>

    嵌套在<select>中,用于提供列表框中的各个列表项

    <a>

    用于实现超链接,href属性的值为连接地址,<a>…</a>之间的文本为网页中的连接文本

    <img>

    用于在网页中嵌入图像,src属性为图像资源的位置,width和height属性分别制定图像的宽度和高度

    展开全文
  • HBuilder实现简易计算器 主要是JavaScript的练习。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .cbody { width: ...
  • HBuilderX的功能十分强大,利用它制作手机APP极其简单,步骤如下: 新建项目:5+app 开始编写想要的页面,以下gif图是我编写的一个手机知识问答应用程序 ...
  • 使用HTML5+CSS+Javascript的简单web开发项目,包含源码
  • 前端开发学习-1

    2021-03-09 20:25:37
    HBuilder学习第一周 整体代码&预览 <!DOCTYPE html> <html> <head> <title>个人介绍-SHP</title> </head> <body> <div id="content" style=height:200...
  • HTML5七夕情人节表白网页制作 ❤蓝色主题-樱花雨3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以...
  • 假设你现在有Hbuilder,我用的是Hbuilder。(没有的亲可以去下载,这是官网网址:http://www.dcloud.io/) 首先你安装好之后的打开页面应该是这样子的 然后新建一个web项目  此时弹出此窗口 只需要想我...
  • 制作简单网页的基本步骤 01 了解网站是做什么的,来设计网站整体风格。首先要对网站整体页面色彩、版式有一个统筹安排,方便后面的进行。这一步最重要,做好了后面就不会反反复复修改。 02 首页设计。首页是网站...
  • 这一小节我们来通过编写一个简单网页,来看一下Hbuilder和谷歌浏览器的使用方法及各种标签。我们打开Hbuilder,先来创建一个项目,项目也就是我们平时创建的文件夹。我们把它命名为HTMLCSS,这里选择了基本的HTML...
  • 考察的都是基础知识 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="shortcut icon" href="//... mar
  • 包含代码,图片,下载就可以用。请大家支持啊
  • &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;开心网&lt;/title&gt; &lt;style type="...
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>图书展示</h1> <...java核心
  • 这是HTML期末大作业,花了点时间,稍加修改就可以作为自己的作业了,而且也可以作为学习参考
  • 关于小米官网的一个项目,如果说有初学者的话,项目不会做可以参考一下.
  • HBuilderX.1.8.2.20190401.解压直接使用;简单快捷的网页生成软件,可编写HTML5+CSS+JS简单网页制作网页制作入门推荐。
  • 运用HBuilder X编写个人介绍

    千次阅读 2021-03-10 21:44:37
    个人介绍 个人介绍 姓名:小张 班级:电商xx班 学号:1241252232 爱好:阅读、看电影...... 学期目标:认真学习本门课程,深入了解HTML用法......

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,466
精华内容 586
关键字:

hbuilder制作简单网页