数据库实训2-前端

最新推荐文章于 2024-10-04 00:46:18 发布

好喜欢吃红柚子

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量948

点赞数

分类专栏： Java与数据库实训文章标签：前端数据库 webview

本文链接：https://blog.csdn.net/weixin_45662399/article/details/122184587

版权

Java与数据库实训专栏收录该内容

12 篇文章 2 订阅

订阅专栏

一、 HBuilderX的使用

1. <title>...</title>中：设置网站的标题

<title>标签页题目</title>

2. 在<body></body>中

标题

h1到h6：大小依次变小

<h1>...</h1>

分段

<!-- 分段落 -->
		<p>并刀如水，吴盐胜雪，纤手破新橙。锦幄初温，兽烟不断，相对坐调笙。</p>
		<p>低声问向谁行宿，城上已三更。马滑霜浓，不如休去，直是少人行。</p>

超链接

跳转外部网站

<!-- 超链接 -->
<a href="https://www.baidu.com">baidu</a>

跳转本地路径

<a href="page/file1.html">宋词</a>

href="想要跳转网站的网址"

插入图片

先在img下新建目录，然后把图片复制在该目录下

然后在img标签中调用src="图片的路径"

<img src="img/image/1.webp"/>

两个点：外部的路径

<img src="../img/image/2.webp"/>

表单

<form></form>

action:表单提交的地址

method：表单提交的方式（get post）

type：text文本框 passward密码框

<form action="" method="post">
			
			<!-- 文本框 -->
			<input type="text" name="" id="" value="" />
			
			<!-- 密码框 -->
			<input type="password" name="" id="" value="" />
			
			<!-- 单选框：男和女 -->
			<!-- 单选框产生互斥性：name属性相等即可产生互斥性 -->
			<input type="radio" name="1" id="" value="female" />
			<label>女</label>
			
			<input type="radio" name="1" id="" value="man" />
			<label>男</label>
			
			<!-- 复选框 -->
			<input type="checkbox" />
			<label>reading</label>
			<input type="checkbox" />
			<label>movie</label>
			<input type="checkbox" />
			<label>music</label>
			<input type="checkbox" />
			<label>hang out</label>
			
		</form>

文本框

<!-- 表单 -->
		<form><input type="text" name="" id="" value="" /></form>

密码框

<form><input type="password" name="" id="" value="" /></form>

可以在其中填写内容

单选框

<!-- 单选框：男和女 -->
			<!-- 单选框产生互斥性：name属性相等即可产生互斥性 -->
			<input type="radio" name="1" id="" value="female" />
			<label>女</label>
			
			<input type="radio" name="1" id="" value="man" />
			<label>男</label>

复选框

<!-- 复选框 -->
			<input type="checkbox" />
			<label>reading</label>
			<input type="checkbox" />
			<label>movie</label>
			<input type="checkbox" />
			<label>music</label>
			<input type="checkbox" />
			<label>hang out</label>

下拉框

	<!-- 下拉框 -->
		<select>
			<option>山东省</option>
			<option>湖南省</option>
			<option>江西省</option>
			<option>陕西省</option>
			<option>湖北省</option>
		</select>

表格

在<body></body>中写

几个<tr></tr>代表有几行

<tr></tr>中有几个<td></td>代表有几列


		<table>
			<!-- 行：tr -->
			<tr>
				<!-- td:列 -->
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
			</tr>
			
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>18</td>
			</tr>
			
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>20</td>
			</tr>
			
		</table><br>

样式设置：设置边框线的颜色，粗细，是否显示,边框线是双层还是单层

<style>
			table,td{
				/* 边框粗细 */
				border:1px;
				/* 边框颜色 */
				border-color:skyblue;
				/* 边框线：虚线，实线，点线 */
				border-style: solid;
				/* 边框 */
				border-collapse: collapse;
			}
		</style>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
	<!-- 装饰 -->	
		<style>
			table,td{
				/* 边框粗细 */
				border:1px;
				/* 边框颜色 */
				border-color:skyblue;
				/* 边框线：虚线，实线，点线 */
				border-style: solid;
				/* 边框 */
				border-collapse: collapse;
			}
		</style>
		
	</head>
	<body>
		
		<!-- 表格 -->
		<!-- 表格属性border=1即可设置分割线 -->
		
		<table>
			<!-- 行：tr -->
			<tr>
				<!-- td:列 -->
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
			</tr>
			
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>18</td>
			</tr>
			
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>20</td>
			</tr>
			
		</table><br>
		
		<table>
			<tr>
				<td>1-1</td>
				<!-- 跨行 -->
				<td colspan="2">1-2</td>
				<td>1-4</td>
			</tr>
			
			<tr>
				<td>2-1</td>
				<td>2-2</td>
				<!-- 跨列 -->
				<td rowspan="2">2-3</td>
				<td>2-4</td>
			</tr>
			
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<td>3-4</td>
			</tr>
			
			<tr>
				<td>4-1</td>
				<td>4-2</td>
				<td>4-3</td>
				<td>4-4</td>
			</tr>
			
			
		</table>
		
	</body>
</html>

3. 在<head></head>中：设置样式

在<style></style>标签中，对table和td进行修饰

<!-- 装饰 -->	
		<style>
			table,td{
				/* 边框粗细 */
				border:1px;
				/* 边框颜色 */
				border-color:skyblue;
				/* 边框线：虚线，实线，点线 */
				border-style: solid;
				/* 边框 */
				border-collapse: collapse;
			}
		</style>

应用：设计淘宝网站的商品信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>GoodsPay</title>
		<style>
			/* 选中所有标签 */
			*{
				margin: 0px;
				padding: 0px;
			}
			.container{
				width: 1200px;
				margin: 0 auto;
				background-color: aliceblue;
			}
			/* 浮动 */
			.fl{
				float: left;
			}
			/* 清空浮动 */
			.clearfix::after{
				clear: both;
				display: block;
				content: "";
			}
			.item{
				width: 20%;
				padding: 18px;
				/* 设置五个在一行 */
				box-sizing: border-box;
			}
			/* 指代选择器，代表选择下一级 */
			.img>img{
				width: 100%;
				padding: 20px;
				border-radius: 10px;
				overflow: hidden;
			}
			
			.intro{
				font-size: 20px;
				/* 设置间隔：上下为10，左右为0 */
				padding: 10px 0px;
			}
			.price{
				color: red;
				font-weight: 600;
				/* 设置间隔：上下为5，左右为0 */
				padding: 5px 0px;
			}
		</style>
	</head>
	<body>
		<!-- 版心：规定页面中所有组件都集中在版心区域内 -->
		<div class="container">
			<!-- 商品列表，所有的商品元素都集中在该商品列表中 -->
			<div class="list clearfix">
				<!-- 第一个商品元素 -->
				<div class="item fl">
					<div class="img">
						<img src="img/image/1.webp"/>
					</div>
					<div class="intro">
						2021年秋冬新款灯芯绒外套
					</div>
					<div class="price">
						998元
					</div>
				</div>
				<!-- 第二个商品 -->
				<div class="item fl">
					<div class="img">
						<img src="img/image/3.webp"/>
					</div>
					<div class="intro">
						2021年秋冬新款皮草
					</div>
					<div class="price">
						998元
					</div>
				</div>
				
				<!-- 第三个商品 -->
				<div class="item fl">
					<div class="img">
						<img src="img/image/4.webp"/>
					</div>
					<div class="intro">
						2021年秋冬新款羽绒服
					</div>
					<div class="price">
						939元
					</div>
				</div>
				<!-- 第四个商品 -->
				<div class="item fl">
					<div class="img">
						<img src="img/image/8.webp"/>
					</div>
					<div class="intro">
						2021年秋冬新款灯芯绒外套
					</div>
					<div class="price">
						998元
					</div>
				</div>
				<!-- 第五个商品 -->
				<div class="item fl">
					<div class="img">
						<img src="img/image/2.webp"/>
					</div>
					<div class="intro">
						2021年秋冬新款大衣
					</div>
					<div class="price">
						998元
					</div>
				</div>
			</div>
		</div>
	</body>
</html>