感想:学习javaweb之路,任重而道远。

学习笔记:

5.表格标签

5.1<table></table>

表格标签,用于效果中定义一个表格

5.2<tr></tr>

表格的行标签,用于在效果中定义一个表格行

5.3<td></td>

第一步:定义一个表格<table></table>

第二步:定义表格中的一行<tr></tr>

第三步:在表格一行中定义单元格<td></td>

<table>

<tr>

<td>姓名</td>

<td>数学</td>

<td>语文</td>

<td>总分</td>

</tr>

<tr>

<td>小明</td>

<td>100</td>

<td>100</td>

<td>200</td>

</tr>

<tr>

<td>小红</td>

<td>100</td>

<td>100</td>

<td>200</td>

</tr>

</table>

你会发现这样出来的表格没有线,这时候就需要用到<table></table>中的border和width

<table></table>

border:设置表格的边框粗细。默认为0像素。

width:设置表格的宽度。可以设置为像素或者百分比。

<table border="10px" width="100%">

5.4 <th></th>

表格的表头单元格标签,用于效果中定义一个表格行中的表头单元格。默认将表格内内容居中加粗。(这也是与<td></td>的唯一区别。)

<table border="10px" width="100%">

<tr>

<th>姓名</th>

<th>数学</th>

<th>语文</th>

<th>总分</th>

</tr>

<tr>

<td>小明</td>

<td>100</td>

<td>100</td>

<td>200</td>

</tr>

<tr>

<td>小红</td>

<td>100</td>

<td>100</td>

<td>200</td>

</tr>

</table>

5.5单元格合并

<td></td>或者<th></th>都有两个单元格的合并属性。

colspan:跨列合并两个单元格。

rowspan:跨行合并两个单元格。

合并步骤:

第一步:确定合并哪几个单元格,确定是跨列还是跨行合并。

第二步:在第一个出现的单元格上书写合并单元格的属性。

第三步:想要合并几个属性值就书写几。

第四步:被合并的单元格在代码中必须删除

<table border="1px" width="100%">

<tr>

<td colspan="2">1</td>

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

<tr>

<td rowspan="2">6</td>

<td>7</td>

<td>8</td>

<td>9</td>

<td>10</td>

</tr>

<tr>

<td>12</td>

<td>13</td>

<td>14</td>

<td>15</td>

</tr>

</table>

而如果忘记删除要合并的单元格就会是下面这样:

复杂的单元格合并问题进行拆解

6.块标签 </div></div>  <span></span>

6.1<span></span>

行级别的块标签,用于效果中一行上定义一个块,进行内容显示。

有多少内容就占用多少空间。<span></span>不会自动换行。

适用于少量数据显示。

6.2<div></div>

块级别的块标签,用于效果中定义一块,默认占满一行,进行内容的显示。

适用于大量数据显示。

<div>我是div1</div>

<div>我是div2</div>

<span>我是span1</span>

<span>我是span2</span>

7.表单标签

7.1表单

表单作用:用来提交用户输入的数据,提交给服务器的程序,相当于一个web程序的入口。

7.2表单标签

制作一个表单的步骤:

第一步:定义一个表单。<form>表单内容</form>

第二步:在表单中去定义对应的表单输入项。

<input/>

<select></select>

<textarea></textarea>

7.3输入项标签

<input/>标签

表单输入项标签之一,用户可以在该标签上通过填写和选择进行数据输入。

type属性设置该标签的种类:

text文本框,默认

password密码框,内容为非明文

radio单选框:在同一组内有单选效果,使用name属性对单选框、复选框进行分组。只要name属性相同就是同一组。

 

checkbox复选框

submit:提交按钮用于控制表单提交数据。

reset:重置按钮,用于将表单输入项恢复到默认状态。

file:附件框,用于文件上传。

hidden:隐藏域,一般用作提交服务器需要拿到,但用户不需要看到的数据。

Button:普通按钮。

name:单选框、复选框进行数据分组。/设置该标签对应的参数名。

value:设置该标签对应的参数值。

checked:设置单选框/复选框的默认选中状态。

readonly:设置该标签的参数值只读,用户无法手动更改

disabled:设置该标签不可用,参数值无法更改,且参数值也无法提交。

</head>

<body>

<!-

表单点击提交按钮,提交数据时。

?参数列表

参数列表的格式:

参数1=参数值1&参数2=参数值2&参数3=

on表示选中

?sex=on

单选框,用户只能选择,不能输入,咱们需要给他指定value属性,否则提交的都是on

文本框,用户可以自由输入。

->

<form>

用户名:<input type="text" name="username" value="张三"/><br/>

密码:<input type="password" name=""password" value="123456"/><br/>

性别:<input type="radio" name="sex" value="man" checked>男

<input type="radio" name="sex" value="woman">女<br/>

<input type="submit" value="提交"/>

</form>

</body>

这时候需要观看系统学习javaweb重点1

系统学习 javaweb2----HTML语言2的更多相关文章

  1. MES系统学习

    MES系统是当今制造型企业信息化的热点,而统一建模语言UML是面向对象建模的标准语言,在软件工程发挥着重要作用.MES系统如何进行UML建模呢,今天和大家重点讨论一下MES系统的UML建模方法,请看本 ...

  2. 值得学习的C语言开源项目

    值得学习的C语言开源项目   - 1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工 ...

  3. 001 今天开始系统学习C#

    2016-01-16 之前只是大概了解过c#语言,感觉掌握不牢靠.现在开始系统学习C#.现以该博客作为学习笔记,方便后续查看.C# 目标:系统掌握c#知识 时间:30天 范围:C#基础,Winform ...

  4. Linux系统学习笔记:文件I/O

    Linux支持C语言中的标准I/O函数,同时它还提供了一套SUS标准的I/O库函数.和标准I/O不同,UNIX的I/O函数是不带缓冲的,即每个读写都调用内核中的一个系统调用.本篇总结UNIX的I/O并 ...

  5. IOS学习笔记06---C语言函数

    IOS学习笔记06---C语言函数 --------------------------------------------  qq交流群:创梦技术交流群:251572072              ...

  6. Hibernate的系统 学习

    Hibernate的系统 学习 一.Hibernate的介绍 1.什么是Hibernate? 首先,hibernate是数据持久层的一个轻量级框架.数据持久层的框架有很多比如:iBATIS,myBat ...

  7. ios开发学习笔记001-C语言基础知识

    先来学习一下C语言基础知识,总结如下: 在xcode下编写代码. 1.编写代码 2.编译:cc –c 文件名.c 编译成功会生成一个 .o的目标文件 3.链接:把目标文件.o和系统自带的库合并在一起, ...

  8. 【C/C++开发】值得学习的C语言开源项目

    值得学习的C语言开源项目 - 1. Webbench Webbench是一个在Linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的 ...

  9. ndk学习之C语言基础复习----虚拟内存布局与malloc申请

    在这一次中来学习一下C语言的内存布局,了解它之后就可以解释为啥在用malloc()申请的内存之后需要用memset()来对内存进行一下初始化了,首先来了解一下物理内存与虚拟内存: 物理内存:通过物理内 ...

随机推荐

  1. ZOJ-1234 UVA-10271 DP

    最近觉得动态规划真的很练脑子,对建模以及思维方法有很大帮助,线段树被卡到有点起不来的感觉 最近仔细思考了一下动态规划的思想,无非是由局部最优解得到全局最优解,由此类推,发现,像最短路和最小生成树其实都 ...

  2. JNI传递修改自定义Java Class数组数据

    声明:迁移自本人CSDN博客https://blog.csdn.net/u013365635 结合前面讲的2篇关于JNI的文章,这里直接把代码贴上,主要是要知道如果传递自定义Class Array的时 ...

  3. 吴裕雄--天生自然 PHP开发学习:Switch 语句

    <?php $favcolor="red"; switch ($favcolor) { case "red": echo "你喜欢的颜色是红色! ...

  4. JavaScript学习总结(三)

    在学习完了基本的内容之后,我们来学习一下JavaScript中的对象部分以及如何自定义对象的问题. String对象 创建字符串的方式共有两种: 方式1:new String("内容&quo ...

  5. C语言-字、半字、内存位宽相关

    1.32位系统:32位系统指的是32位数据线,但是一般地址线也是32位,这个地址线32位决定了内存地址只能有32位二进制,所以逻辑上的大小为2的32次方.内存限制就为4G.实际上32位系统中可用的内存 ...

  6. JS用例

    showBtn :class="{getInput:showBtn}"v-if="showBtn" showBtn: true, this.showBtn = ...

  7. UML类图说明

    1:示例 这是一个使用UML表示的类图的结构,通过箭头,菱形,实线以及虚线来代表一些类之间的关系,后面将按照上面的例子一一介绍说明. 上图中,abstract 车是一个抽象类.小汽车和自行车是继承了车 ...

  8. 吴裕雄--天生自然ShellX学习笔记:Shell 输入/输出重定向

    大多数 UNIX 系统命令从你的终端接受输入并将所产生的输出发送回​​到您的终端.一个命令通常从一个叫标准输入的地方读取输入,默认情况下,这恰好是你的终端.同样,一个命令通常将其输出写入到标准输出,默 ...

  9. Disruptor的简单介绍与应用

    前言 最近工作比较忙,在工作项目中,看了很多人都自己实现了一套数据任务处理机制,个人感觉有点乱,且也方便他人的后续维护,所以想到了一种数据处理模式,即生产者.缓冲队列.消费者的模式来统一大家的实现逻辑 ...

  10. python-day5爬虫基础之正则表达式2

    dot: '.'匹配任意的字符 '*'匹配任意多个(0到多个) 如图所示, 程序运行结果是abc,之所以没有匹配\n,是因为\n是换行符,它就代表这个字符串是两行的,而正则表达式是一行一行去匹配的.在 ...