<!-- 1.标题标签:加粗会自动换行  h1大~h6小 -->
<!-- 2.列表标签:有序orderlist列表ol li,无序unorderlist列表ul li -->
<!-- 3. 图片标签img src属性指定图片的位置height属性指定图片的高度 width指定宽度,单位是像素-->
<!-- 4. 超链接a href属性用来指定跳转的网址target属性用来指定打开方式,默认是当前窗口_self,_blank是用新窗口打开-->
<!-- 5. 锚定 a -->
<a name="top">我是顶部</a>
内容
<a href="#top">点我,回到顶部</a>

这里有Git操作：cgb2107-day06_cgblpx的博客-CSDN博客

            <!-- 添加音频 controls使用控制组件--><audio controls="controls"><!-- 指定资源的位置 --><source src="jay.mp3"></source></audio><!-- 添加视频 controls使用控制组件--><video controls="controls" loop="loop"><source src="b.mp4"></source></video>placeholder="在这里输入年龄"这是框里的提示信息密码输入框:<input type="password" />      <br/>普通输入框:<input type="text" placeholder="在这里输入年龄"/>          <br/>checked="checked"这是选择框的默认方法单选框:<input type="radio" name="sex" value="1" checked="checked"/>男<input type="radio" name="sex" value="0"/>女   <br/>多选框:<input type="checkbox" name="hobby" value="1" checked="checked"/>篮球<input type="checkbox" name="hobby" value="2"/>足球<input type="checkbox" name="hobby" value="3"/>乒乓球   <br/>日历:<input type="week" />                <br/><input type="date" />                <br/>数字:<input type="number" />               <br/>邮箱:<input type="email" />               <br/>普通按钮:<input type="button" value="点我"/><button >点我</button>                <br/>提交按钮:<input type="submit" value="注册"/>  <button type="submit">点我</button>  下拉框：<select name="city"><option value="">-请选择-</option><option value="bj">北京市</option><option value="sh">上海市</option><option value="gd">广东省</option></select>上传文件：<input type="file" />文本框：<textarea>在这儿输入...</textarea>按钮：<button type="submit">提交</button><button type="reset">重置</button><!-- 2. table表格标签 tr是行 th是表头(加粗居中) td是列border设置边框    width设置宽度 bgcolor设置背景颜色   cellspacing单元格间距rowspan行合并(合并多个行)  colspan列合并(合并多个列)--><table border="2px" width="300px" bgcolor="lightgreen" cellspacing="0"><tr><td colspan="3"><h2>流量调查表</h2></td></tr><tr> <!-- 行 --><th colspan="2">11</th> <!-- 列 --><th>13</th></tr><tr><td>21</td><td>22</td><td rowspan="2">23</td></tr><tr><td>31</td><td>32</td></tr></table>

get方式提交数据是在地址栏,默认方式,安全性低,长度受限

post方式提交数据不在地址栏,安全性高,没有上限

method属性用来设置数据的提交方式,默认是get，action属性用来指定数据即将提交给哪个程序去处理

总结

form 标签用来把页面填写的数据提交给后台的java程序
table 标签用来向网页中添加表格
tr标签用来表示表格里的一行
td标签表示行里的列元素
input标签用来实现输入框(text password email radio checkbox…)
select标签用来定义一个下拉框,option标签用来定义选项
textarea 标签用来表示一个大的文本框(文本域)
img 标签用来向网页中加入图片
button标签用来表示一个按钮
src属性用来指定图片的位置,type属性用来指定输入框的类型,
width属性用来指定宽度,height属性用来指定高度,bgcolor属性用来设置背景颜色
cellspacing属性用来设置单元格的间距…

3,提交数据

1, 必须用form标签
2, 必须有提交submit按钮
3, 必须设置name属性
4, 提交的数据都在?之后 , 多个值用&连接 ,
每个值用=连接 , user和pwd是页面上name属性的值 , 1和2是用户在浏览器输入的数据
http://127.0.0.1:8848/hbuilderx/cgb2107/test4.html?user=1&pwd=2

4JDBC接收数据并且提取用户输入的数据

public static void main(String[] args) {//1,接受用户发来的数据String url = "http://127.0.0.1:8848/cgb2107/student.html?user=jack&age=18&sex=1&hobby=1&hobby=2&hobby=3&xueli=2&day=2021-09-03";//按照?切割字符串String[] a = url.split("\\?");//[http://127.0.0.1:8848/cgb2107/student.html,
//user=jack&age=18&sex=1&hobby=1&hobby=2&hobby=3&xueli=2&day=2021-09-03]//只获取数组里的第二部分String data = a[1];//继续切,用&切String[] b = data.split("&");
//[user=jack,age=18,sex=1,hobby=1,hobby=2,hobby=3,xueli=2,day=2021-09-03]//循环b数组for(String s : b){//获取到每一组数据user=jack,age=18String[] c = s.split("=");//把每组数据按照=切割 [age,18]String datas = c[1];//只取=后面的数据c[1]System.out.println(datas);}}

选择器：

/* 1.标签名选择器:按照标签的名字选中元素 */标签名{}

/* 2.类选择器:按照class属性的值选中元素，先给元素加class属性 + 通过.获取class的值 */.a{}

/* 3. id选择器:按照id属性的值(唯一) 选中元素，先给元素加id属性 + 通过# 获取id的值*/#div1

/*1.分组选择器:选中一批元素分成一组,统一设置样式 */
div,span{/* 把所有div和span设置字体颜色 */color:red; /* 字的颜色 */font-family: "微软雅黑";  /* 字体*/font-size: 20px;  /* 字号*/background-color: #00FFFF; /* 背景色 */}/* 2. 属性选择器: 通过标签的属性选中元素 */   a[href]{ /* 选中有href属性的a标签*/color: #008000; /* 字的颜色*/}/* 选中type=text的input设置背景色 */input[type="text"]{background-color: #008000;}.m{color: red;}.n{color: green;text-indent: 200px; /* 首行缩进*/}

盒子模型

外边距: 盒子间的距离margin
内边距: 一个盒子里, 内容和边框的距离padding
宽width/高height/边框border: 一个盒子里的

padding设置内边距padding-left左边距 padding-top上边距 padding-bottom下边距padding-right右边距

HBuilder HTML相关推荐

HBuilder简单入门
HBuilder官网转载于:https://www.cnblogs.com/knuzy/p/9158440.html
【转】Hbuilder MUI 页面刷新及页面传值问题
文章来源:http://www.111cn.net/sys/CentOS/67213.htm 一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面 ...
转载：HBuilder常用快捷键
原文:http://www.cnblogs.com/DCL1314/p/8625110.html HBuilder常用快捷键 1.文件新建 Ctrl + N 关闭 Ctrl + F4 全部关闭 Ct ...
HTML5+MUI+HBuilder 之初探情人
07,08年那会儿正当Java火爆,C/C++仍是广泛运用的一门语言的时候,所以我的大学都献给了C/C++和Java.当诺基亚的倒闭成为按键机时代衰落的标志时,移动APP的开发也如破堤之洪.爆炸式的崛 ...
Hbuilder开发移动App（1）
奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技术越发的成熟 ...
使用Wamp搭建Php本地开发环境，HBuilder调试
初涉Php,此处做点笔记,希望下次不要能够轻松应对,至少不要在入同一个坑本文摘要: wamp和HBuilder和Mysql5.7的安装包 Wamp的使用,包括80端口,443端口的占用问题 HBui ...
Hbuilder Android证书申请
Hbuilder Android证书申请 1.安装JDK 2.在cmd下,进入到JDK的bin目录,输入: keytool -genkey -alias yourapp -keyalg RSA -va ...
mac Hbuilder 无法打开的解决方案
mac Hbuilder 无法打开的解决方案参考文章: (1)mac Hbuilder 无法打开的解决方案 (2)https://www.cnblogs.com/silyvin/p/9106820. ...
Hbuilder 常用快捷键汇总
朋友推荐用Hbuilder编辑器,看了下Hbuilder官网和那视频,感觉牛逼哄哄的, 自己也就体验了一下,打开Hbuilder的快捷键列表,每个快捷键都体验了一下,以下展示出来的,每一个都是精华, ...
hbuilder入门之基本配置(php)
1.去Hbuilder官网下载最新的Hbuilder,安装即可. 2.打开Hbuilder,会发现有个HelloHbuilder文件,里面有个lession1.text,这个文件是属于入门文件,可以仔 ...

HBuilder HTML

总结

3,提交数据

4JDBC接收数据并且提取用户输入的数据

选择器：

盒子模型

HBuilder HTML相关推荐

最新文章

热门文章