学习目的
- 了解系统架构的分类
- 了解HTML的概念
- 掌握HTML的组成结构
- 掌握HTML的基础使用
一、系统结构
- 概念
系统结构,是构成一个系统的 要素间的相互联系、相互作用的方式和秩序,或是系统联系的全体集合。联系就是系统要素之间相互作用,相互依赖的关系,它是要素构成系统的媒介。
要素间的联系可以从三个方面体现: 联系的形式,联结链的多少,联系的强度。 - 常见分类
- B/S架构:要素是B和S,主要描述B和S之间的联系
- C/S架构:要素是C和S,主要描述C和S之间的联系。
1.1 B/S架构
- 概念
B/S架构全称 Browser / Server架构,是 浏览器 / 服务器的一种交互形式。
B是 Browser浏览器;S是 Server服务器端。浏览器端只加载由HTML、CSS、Javascript编写的超文本框架等,所有的数据和业务由服务器端获取和处理,然后通过网络将所需要的数据 从服务器端传送到浏览器端进行显示。 - 优点
- 升级方便:只升级服务器端代码即可,浏览器只做展示,不做数据和业务处理;
- 维护成本低。
- 缺点
- 速度慢:数据需要通过网络从服务器端传送过来,需要时间;
- 体验不好、界面不炫酷。
- 应用
企业内部的解决方案都是采用B/S架构的系统,因为企业内部办公需要的一些系统不需要炫酷,不需要特别好的用户体验,只要能做数据的增删改查即可。并且企业内部更注重维护的成本。 - 常见B/S架构代表
- 京东
- 百度
- 天猫
1.2 C/S架构
- 概念
C/S架构全称 Client / Server架构,是客户端/服务器端的一种交互形式。所需要的数据和业务处理一同包装在客户端软件中,只需要下载一个客户端(安装包),就可以使用数据,不需要耗时等待数据从服务器端传送过来。 - 优点
- 速度快:所需要的(页面)数据都连同客户端一起下载到本地当中,使用时不需要从服务器端等待网络下载传送,数据在本地;
- 体验好,界面炫酷。
- 缺点
- 升级麻烦:每一次升级,都需要升级客户端,因为每一次新版本的客户端页面(数据)发生了变化改动;
- 维护成本较高。
- 应用
娱乐型的系统多数是C/S架构的。 - 常见C/S架构代表
- 微信
- 支付宝
1.3 前后端分离
- 概念
前后端分离指的是前端与后端的交互只有数据,而不会涉及到业务本身。前端的业务由前端完成,后端的业务由后端完成,前端与后端的连接关系只有数据。 - 本质
前后端分离 = 前端(使用数据)+ 容器(存储数据)+后端(获取并返回数据)
1.3.1 前端(浏览器端)
- 相关技术
浏览器端Browser主要支持的语言有HTML(超文本标签语言)、CSS (层叠样式表)、JavaScript(java脚本语言)。 - 作用
主要使用前端相关技术,将数据用一种用户接受的表现形式展现给用户。包括各种图片、音频、视频、动态效果等。前端页面上的图片需要UI设计师完成。
1.3.2 后端(服务器端)
- 相关技术
服务器端Server只要支持的语言有很多:C、C++、Java、python等。(本人主要是使用Java语言完成服务器端的开发)
1.3.3 未分离
- 描述
在前后端未分离时,前端页面看到的(数据)效果,需要由后端控制。后端可以渲染页面或重定向,即后端需要控制前端的展示,导致前端与后端的耦合度很高。 - 特点
前后端未分离模式比较适合纯网页应用。
但是当后端对接App时,App可能并不需要后端返回一个HTML网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端App应用,为了对接App后端还需再开发一套接口。
1.3.4 分离
- 描述
在前后端分离的应用模式中,后端仅返回前端所需的数据,不再渲染HTML页面和控制前端的效果。至于前端用户看到什么效果,则是从后端请求返回的数据,如何加载到前端中都由前端自己决定。网页有网页的处理方式,App有App的处理方式,但无论哪种前端,所需的数据基本相同,后端仅需开发一套逻辑对外提供数据即可。 - 特点
在前后端分离模式中,前端与后端的耦合度相对较低。
在前后端分离模式中,通常将后端开发的每个视图都称为一个接口(视图又称"数据表的第三角度"),或者API,前端通过访问接口来对数据进行增删改查。
W3C 世界万维网联盟
- 概念
W3C全称 World Wide Web Consortium。 - 贡献
W3C为世界万维网的开发制定了很多规范,每一个参与世界万维网开发的企业、公司、开发人员都需要遵循W3C制定的相关规范。常见的有HTML规范、XML规范、http协议、https协议等。 - W3C制定了与HTML
W3C制定了HTML的规范,每个浏览器生产厂家都会遵守规范,HTML程序员也会按照这个遵循规范去开发HTML页面。HTML规范目前最高的版本是HTML5.0,简称H5。
二、HTML
- 概念
HTML全称 Hyper Text Markup Language ,意为超文本标记语言。所谓超文本即是指 流媒体、图片、声音、视频等类型的数据,超越文本类型的数据。 - HTML构成
每一个HTML由大量的标签组成,每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名="属性值" 属性名="属性值"> </标签>
</标签>
</标签>
- 开发特点
HTML开发只需要使用普通的文本编辑器即可,但创建的文件扩展名必须是.html或者.htm。当然HTML也有专业的开发工具,如:DreamWeaver、HBuilder等。 - 执行方式
直接采用浏览器打开HTML文件就是运行。 -
浏览器示例
- 对应代码示例
<!--加上以下第一行代码表示HTML5语法,去掉则表示HTML4.0-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题,显示在网页左上角-->
<title>网页的标题</title>
</head>
<!--体-->
<body>
网页的主体内容,欢迎学习HTML!
</body>
<!--
</HTML>
2.1 HTML标签
- 定义
HTML 文档和 HTML 元素是通过 HTML标签进行标记的。HTML标签由开始标签和结束标签组成,开始标签是被括号包围的元素名(如<head>),结束标签是被括号包围的斜杠和元素名(如</head>)。但某些 HTML元素没有结束标签(如换行标签<br />)。 - 使用
HTML的标签中,除了用以标明整个文件内容的<html></HTML>文件标签,用以标明HTML文件头部部分的<head></head>文件头标签,还有用以标明HTML文件主体内容部分的<body></body>文件体标签,此三种标签构成整个HTML文件的文件主体,缺一不可。但除此之外,还有许多的嵌套于文件头或文件主体内的标签,改些标签才是完整表达出HTML文件的实际内容。 - 分类
- <meta charset="gbk">:<meta>标签是HTML中用于声明HTML文件格式的一种标签,该标签使用 charset属性可以声明浏览器可以使用哪一种字符编码方式打开该HTML文件;
<head>
<!--告诉浏览器采用哪一种字符集打开页面-->
<!--不是设置当前编辑器 编写页面的字符编码方式-->
<meta charset="gbk">
</head>
- <hn>标题</hn>:HTML标题标签,n为数字123456,每一个数字使该标签的字体形成大小分级。<h1></h1>是最大级别标题(一级标题),<h6></h6>是最小级别标题(六级标题);
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- <p>分段</p>:HTML段落标签,<p></p>使得HTML内的长文本内容可以分段落表示,不会自成一段(用户可读性差);
<!--以下分为四段落,不使用分段标签,则以下自成一段-->
<p>此处有八百字</p>
<p>此处有八百字</p>
<p>此处有八百字</p>
<p>此处有八百字</p>
- <font color="颜色" size="大小">字体</font>:HTML中用于设置字体的标签,该标签内可以通过标签的属性来设置字体的大小和颜色等;
<font color="green" size="50">绿色50像素的字体</font>
- <b>加粗</b>:HTML中用于对文字进行加粗显示的标签;
<b>此文字会粗体显示</b>
- <i>斜体</i>:HTML中用于对文字进行斜体显示的标签;
<i>此文字会斜体显示</i>
- <del>删除字</del>:HTML中用于对文字进行删除 / 划掉显示的标签(在文字中间划一横表示过时或删除);
<del>表示过期的字</del>
- <ins>插入字</ins>:HTML中使用下划线表示该文字属于插入内容的标签;
<ins>表示插入的字</ins>
- 底数幂数
<!--10的平方-->
10<sup>2</sup>
<!--e的四次幂-->
e<sup>4</sup>
- 底数基底数
<!--10n-->
10<sub>n</sub>
<!--表示对数lne-->
ln<sub>e</sub>
- <a href="链接地址">链接点</a>:HTML引入超链接的标签,在起始标签<a>的内部使用 href=属性引入超链接,而起始标签和结束标签之间仅是一个文本转向点;
<a href="https://www.baidu.com/">百度一下</a>
- <img src="图片地址" width="宽度" height="高度" />:HTML引入图片的标签,<img>标签是起始和结束都在一个标签内(称为独目标签);
<img src="图片.jpg" width="120px" height="60px" />
- <br>:HTML中用于对文本内容进行换行的标签,也是独目标签,使用该标签可以让长字段文本换行显示(不能使用回车键换行);
此处未换行<br>
该行已换行
- <hr color="颜色" width="宽度">:HTML中用于显示一条横线(分割线)的标签,也是独目标签,使用该标签可以让指定位置出现一个横线,且可以通过color和width属性设置横线的宽度和颜色;
<hr color="red" width="60%">
- <pre>预留格式内容</pre>:<pre></pre>是HTML中的预留格式标签,即在该预留格式内的文本内容,其编写的格式是怎样就会怎样,而不是会自成一行,在该标签内的内容若已有换行则不需要<br>换行符换行;
<!--不使用预留格式标签,显示是自成一行-->
public class A{ public static void main(String[] args){ System.out.println(); } }
<!--以下内容保留原有的编写格式-->
<pre>
public class A{
public static void main(String[] args){
System.out.println();
}
}
</pre>
2.2 HTML实体符
- 概念
HTML中用于表示数量关系的符号,因为HTML的所有标签都以<>符号括起来表示,因此不能使用< >符号来表示日常的数量关系。必须提供HTML可以辨识的用于表示大于、小于、等于的关系符,也成为实体符。 - 特点
所有的实体符都使用 &符号开始,以;分结束。 - 分类
- 小于< 以&号开始 ;号结束
<!--错误表示a小于c,直接使用<号:a<c -->
a<c
- 大于> 以&号开始 ;号结束
<!--错误表示a大于b,直接使用>号:b<a -->
a>b
- 空格 以&号开始 ;号结束
<!--错误表示 空格 -->
a b
2.3 HTML表格
- 定义
HTML的表格类似于数据库中的表格,由于所有的前端页面 是根据后端从数据库中请求的数据 传送过来进行渲染的,因此可以理解为数据库中的表数据也要在HTML中使用表格显示,才满足"规格"。 - 表格标签
- <table align="" border = "npx" width="" height=""></table>:HTML中引入的表格标签,该标签确定了HTML中的表格大体结构是,是一个最大的外部表格框架;在表格标签内部还可以使用标签的属性来描述不同的表格框架风格;
<body>
<!--定义表格,边框为1像素,宽度为60%,高度为40像素-->
<table border = "1px" width="60%" height="40px">
</table>
</body>
- <tr align=""></tr>:HTML表格中的行标签,HTML表格大体框架下的次级标签,可以使用align属性声明该行的内容显示的位置(left居左,center居中,right居右);
<!--定义一张拥有三行的表格,指定行的内容采用"居左显示"-->
<table>
<tr align="left"></tr>
<tr></tr>
<tr></tr>
</table>
- <td align=""></td>:HTML表格中的行的列标签,又称单元格,每一行可以拥有n个单元格,HTML的表格不支持列(因为列的可使用性不好),可以使用align属性声明该单元格的内容显示的位置(left居左,center居中,right居右)。
<!--定义一张拥有 三行三列的表格,指定列的内容采用"居中显示"-->
<table>
<tr>
<td align="center"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
- <th></th>:HTML另外一种单元格标签,和<td>一样都是属于单元格,区别就是<th>会默认对单元格的内容加粗和居中显示,一般用于表格的首行单元格;
<!--定义一张拥有 三行三列的表格,指定列的内容采用"居中显示"-->
<table>
<tr>
<th>自动居中</th>
<th>自动加粗</th>
<th>用于表格的头部</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
- 行单元格合并:行单元格合并指的是在同一个<tr></tr>行内,对该行的两个或多个<td></td>单元格进行合并。合并步骤是先找到该行内需要合并的单元格,在其中一个单元格内使用属性colspan="合并的单元格个数",其他需要被合并的单元格则删除;
<!--合并同一行内的单元格-->
<table align="center">
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td rowspan ="3">我</td>
<!-- 将需要合并的单元格删除
<td>爱</td>
<td>你</td>
-->
</tr>
</table>
- 列单元格合并:列单元格合并指的是在 多个或跨行的<tr></tr>内,对跨行的两个或多个<td></td>单元格进行合并。合并步骤是先找到需要跨越的行,再找到需要合并的单元格,然后在跨行的第一行的单元格内使用属性colspan="单元格个数",其他行需要被合并的单元格则删除;
<!--合并跨行的单元格-->
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td colspan = "2">5</td>
<td>2</td>
<td>0</td>
</tr>
<tr>
<!-- 将需要合并的单元格删除,一般删除与第一行平行的下面行的单元格
<td>我</td>
-->
<td>爱</td>
<td>你</td>
</tr>
</table>
- <thead></thead>:HTML表格的表头标签,使用该标签对表格无实际影响,只是便于JS的位置标识;
- <tbody></tbody>:HTML表格的表体标签,使用该标签对表格无实际影响,只是便于JS的位置标识;
- <tfoot></tfoot>:HTML表格的表尾标签,使用该标签对表格无实际影响,只是便于JS的位置标识。
- 特点
先有表格标签<table>,再有行标签<tr>,最后才是行标签中嵌套的单元格标签<td>。
2.4 HTML背景/图片
- 定义
HTML提供在<body>标签中设置不同的属性 来设置HTML文件的背景颜色或背景图片,从而完成对该HTML文件背景的显示。
但背景图片和引入图片不相同,背景图片是铺在整个HTML文件背景的图,而引入图片是浮动在HTML文件上的图。 - 分类
- <body bgcolor="颜色">:在<body>标签中使用bgcolor属性来设置HTML文件的背景颜色,颜色的属性值可以是十六进制数、RGB值 或颜色名;
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
- <body background="图片路径">:在<body>标签中使用background属性来设置HTML文件的背景图片,背景图片的路径可以是图片的相对路径 、绝对路径或服务器路径等。
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
-
<img src="URL" width="宽度" alt="文本" />:HTML中提供了<img>标签,表示在HTML文件中可引入外部图片,但该图片并不是HTML文件一直"粘贴"分不开的,当网络延迟或无网络时,该图片就不会在HTML文件中显示,而是显示出<img>标签的alt属性的值;
设置图片大小只设置width属性,设置height属性则会让图片失真;
此外还提供title属性,当鼠标指向该图片悬停时,显示出title的值;alt属性设置图片加载失败时的文本内容。
<img src="boat.gif" alt="当图片无法加载时,显示此处的内容">
2.5 HTML超链接
- 定义
HTML提供了<a>标签用于在HTML文件中引入超链接指向其他文件内容 或其他URL资源。其中,在<a></a>标签之间还可以嵌套<img />图片标签,用于表达该图片也是一个超链接。
更重要一点,<a>标签拥有一个target属性,可以指定该超链接即将跳转后的显示位置。 - 分类
- <a href="资源路径">链接文本标识 </a>:用于引入普通文本的超链接;
<a href="https://www.baidu.com/"> 百度</a>
<a href="https://www.bilibili.com/"> 哔哩哔哩</a>
<a href="https://www.jianshu.com"> 简书</a>
<a href="https://www.w3school.com.cn/"> w3school</a>
- <a href="资源路径"><imp src="图片地址" /> </a>:用于引入图片的超链接;
<a href="https://www.baidu.com"><imp src="百度的logo图片" /> </a>
<a href="https://www.tmall.com"><imp src="天猫的logo图片" /> </a>
- target属性
- <a href="资源路径" target="_blank">新窗口打开 </a>:
- <a href="资源路径" target="_self">本窗口打开 </a>:
- <a href="资源路径" target="_top">顶级窗口打开 </a>:
- <a href="资源路径" target="_parent">父窗口打开 </a>:
-
图解
2.6 HTML列表
- 定义
HTML文件中提供的关于列表选项的标签,又分为有序列表<ol> 和无序列表<ul>,其中每个列表项之下又有多个子选项<li>。 - 分类
-
<ol> </ol>:HTML中的有序列表框架,<ol>限定了整个列表框架是有序的,其下面可以由多个列表选项<li>;
其中<ol>标签还可以使用 type属性指定有序列表框架下的列表选项的序列符,使用 start属性指定有序列表选项的起始位;
<!--有序列表,选项的序列符为a,b,c,d,起始位从20开始-->
<ol type = "a" start="20">
<li>中国</li> //20
<li>美国</li> //21
<li>英国</li> //22
<li>德国</li> //23
</ol>
- <ul> </ul>:HTML中的无序列表框架,<ul>没有对整个列表框架进行顺序限定,其下面可以由多个列表选项<li>;其中<ol>标签还可以使用 type属性指定该列表框架下的列表选项的图标;
<!--无序列表,选项的图标为circle圆圈-->
<ul type = "circle">
<li>中国</li>
<li>美国</li>
<li>英国</li>
<li>德国</li>
</ul>
- <li> </li>:<li>是HTML文件的列表框架中用于描述列表选项的标签,每一个列表之下可以有多个子选项,但子选项<li>之下还可以嵌套列表框架<ol>或<ul>;
<!--列表选项,可嵌套列表-->
<ul type = "circle">
<li>中国
<ul type = "square">
<li>北京</li>
<li>上海</li>
<li>深圳
<ul type = "circle">
<li>罗湖区</li>
<li>南山区</li>
<li>福田区</li>
<li>宝安区</li>
</ul>
</li>
<li>广州</li>
</ul>
</li>
<li>美国</li>
<li>英国</li>
<li>德国</li>
</ul>
2.7 HTML表单(最重点)
- 定义
HTML表单指的是一个页面中用于某块区域信息的表格,在日常的HTML开发中,基本上所有的数据都是以表单的形式提交,(单个提交的数据太乱又复杂)。 - 作用
表单用于在浏览器中接收用户输入的信息,收集用户信息,然后将收集的数据提交给服务器。 - 原理
表单最终是需要将数据提交给服务器的,在form标签里提供一个action属性--用来指定服务器地址。action属性用来指定数据提交给哪个服务器,该属性和超链接<a>标签的href属性一样,都可以向服务器发送请求(request)。 - 标签
-
<form action="服务器地址"> </form>:HTML提供的用于显示一个表单框架的标签,使用<form>标签时即形成一个表单框架,可以在表单里面进行编辑各种子标签,以用于获取用户输入的数据;
使用表单的最终目的是获取用户的输入数据提交给服务器,从而可以完成将数据保存到数据库中;
<!--定义一个表单:form就是整个表单框架-->
<form>
<!--type="submit"是提交表单数据的按钮-->
<input type="submit" value="登录"/>
<!--type="button"是普通按钮,不具备提交表单数据-->
<input type="button" value="按钮上显示的文本"/>
</form>
<!--一个HTML文件可以又多个form表单-->
<form>
</form>
<form>
</form>
- <input type= "" name="" value="显示的文本信息"/>:HTML提供的用于在表单框架中获取用户数据的子标签(输入域),重点是提交表单数据必须使用该标签的type属性值 = submit;
<a href="http://www.baidu.com">百度</a>
<!--超链接和表单的提交按钮 都可以向服务器发送请求,但表单发送请求的同时可以携带数据 -->
<form action="http://www.baidu.com">
<input type="submit" value="百度" />
</form>
- <select name=""><select />:HTML提供的用于实现下拉列表标签,<select />是整个下拉列表的框架,其下面通过编写多个<option>下拉选项标签 实现一个多选的下拉列表;
<!-- multiple="multiple" 支持多选,size设置显示条目数量-->
<select multiple="multiple" size="2">
<option>河北省</option>
<option>河南省</option>
<option>山东省</option>
<option>山西省</option>
</select>
- <option value="">文本选项名</option>:HTML提供的用于在<select>下拉列表中实现多项选择的子选项标签,其value属性和<radio>的value属性一样,都是属于"选择按钮"必须手动设置value属性为提交给服务器的数据。
<!-- multiple属性="multiple" 支持多选-->
<select multiple="multiple">
<!-- value属性设置option被选后提交给服务器的数据-->
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="shandong">山东省</option>
<option value="shanxi">山西省</option>
</select>
- input输入域的属性
- type属性:限定了不同功能的输入域;
- value属性:若是按钮,则显示"按钮的文本信息",若程序员不手动设置按钮的显示文本,默认设置为"提交";
- name属性:用于指定 表单中需要提交数据的输入域,若该输入域没有使用name属性,则提交表单时,该输入域的数据不会提交给服务器。
- input输入域-type属性值
- type= checkbox复选框:将type属性设置为checkbox说明该<input>输入域是一个复选框;
- type= button按钮:将type属性设置为button说明该<input>输入域是一个按钮,button只是一个普通按钮,不具备提交表单数据的能力;
- type= submit提交表单数据:将type属性设置为submit说明该<input>输入域是一个复选框;
- type= text文本框:将type属性设置为 text说明该<input>输入域只是一个普通的文本框;
- type= radio单选按钮:将type属性设置为radio说明该<input>输入域是一个单选按钮;
- type= password密码:将type属性设置为password说明该<input>输入域是一个单选按钮;
- type= reset重置:将表单内所有的数据都重置清空;
- type= file:当type属性的值为file时,该输入域可以选择一个外部的文件作为数据进行提交,该属性值专门用于选择文件上传。
<form>
<!--type="submit"是提交表单数据的按钮-->
<input type="submit" value="登录"/>
<!--type="button"是普通按钮,不具备提交表单数据-->
<input type="button" value="按钮上显示的文本"/>
<!--type="checkbox"是复选框-->
<input type="checkbox" />
<!--type="text"是文本框-->
<input type="text" />
<!--type="radio"是单选框-->
<input type="radio" />
<!--type="password"是密码框-->
<input type="password" value="密码"/>
<!--type="reset"是重置清空表单数据-->
<input type="reset" value="清空" />
<!--type=file控件:文件上传专用-->
<input type="file" />
</form>
2.7.1 表单提交数据原理
- 提交的数据
表单提交的,永远是<input>输入域里使用name属性的那个输入域数据,只要使用了name属性的输入域,该输入域的数据才会提交给服务器;没有使用name属性的输入域,该输入域的数据就不会提交。 - 标签的属性value和用户输入的value数据
value属性和value值不是相同,value值是指name属性的那个输入域由用户输入的数据,value值是用户输入数据。 - 单元按钮提交
- 单选按钮输入域<radio>提交给服务器的数据由于没有用户输入,只能用户通过按钮选择,因此radio按钮的提交数据必须程序员使用value属性指定;
- 且为了让多个单选radio不被同时选上,多个单元按钮应该使用通过一个name属性;
- 且为了多个单选按钮拥有默认选值,则在某个单选按钮中使用checked属性表示默认选择。
-
表单数据提交图解
-
无法访问
当<form>表单中 submit提交数据 的action服务器地址不存在时,则会提示该action服务器地址无法访问,因此表单的数据也无法提交。
该情况常见于日常想要打开访问某个网站,输入网址(<input type="text">)按回车(<input type="submit">)后,请求无响应
2.7.2 表单与注册
- 需求
在HTML开发中,表单通常是用于获取浏览器中用户输入的数据,而最常见的使用场景便是 用户注册(获取表单数据、向服务器提交数据、往数据库中存入数据)、用户评论等。 - 代码示例
<!--表单中的action属性:写明表单数据需要提交到的 服务器地址-->
<form action="http://localhost:8080/jd/login">
<!--输入域中的name属性:写明需要提交数据到服务器的输入域-->
用户名<input type="text" name="username" /><br>
密码<input type="password" name="userpwd" /><br>
<input type="submit" value="登录" />
</form>
- 表单与注册
<!--action写明表单数据需要提交到的 服务器地址-->
<!--表单提交数据给服务器的格式:W3C的HTTP协议规定的格式
action的地址?name属性=value属性值&name属性=value属性值&name属性=value属性值&name属性=value属性值...
如:http://localhost:8080/jd/login?username=abc&userpwd=111
-->
<!--表单项<ipnut >中写了name属性的,一律会提交给服务器;当name没有写时,该项不会提交给服务器
-->
<!--当value没有写时,value默认值是空字符串"",会将空字符串提交给服务器
java代码得到的则是:String username = ""
-->
<form action="http://localhost:8080/jd/login">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpwd" /></td>
</tr>
<tr align="center">
<td colspan="2">
<!--submit必须放到form标签内部,放在form外部则提交无效-->
<input type="submit" value="登录" />
<input type="reset" value="清空" />
</td>
</tr>
</table>
</form>
2.7.3 表单提交方式 get和post(最重点)
- 示例
<!--注册的表单:action为提交的服务器地址,method为提交数据的方式-->
<form action="http://localhost:8080/jd/register" method="">
用户名
<input type="text" name="username"/>
<br>
密码
<input type="password" name="userpwd" />
<br>
确认密码
<input type="password"/>
<br>
性别
<input type="radio" name="gender" value="1" />男
<input type="radio" name="gender" value="0" checked/>女 <!--单选按钮的value必须手动指定-->
<br>
兴趣爱好
<input type="checkbox" name="interest" value="smoke"/>抽烟
<input type="checkbox" name="interest" value="drink" checked/>喝酒
<input type="checkbox" name="interest" value="fireHair" checked/>烫头
<br>
学历
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option> <!--默认选中-->
<option value="ss">硕士</option>
</select>
<br>
<!--textarea文本域没有value属性,用户填写的内容就是value-->
<textarea rows="10" cols="60" name="introduce"></textarea>
<br>
<input type="submit" value="注册" />
<input type="reset" value="清空" />
</form>
<!--get方式提交form表单数据:
http://localhost:8080/jd/register?username=jack&userpwd=111&gender=1&interest=smoke&interest=drink&grade=ss&introduce=jackgoodman
-->
<!--post方式提交form表单数据:看不到拥有name属性的输入域 提交的数据信息,但实际还是提交了
http://localhost:8080/jd/register
-->
<!--超链接提交的是get请求,不是post请求-->
<!--且超链接提交给服务器的数据固定不变的,只能在链接中写死提交的数据-->
<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
- 概念
get和post是HTML中对于<form>表单提交数据到服务器的一种方式,虽然最终目的都是提交数据给服务器,但是不同的提交方式在执行过程中数据的可见性不一致。 - 分类
- get方式提交表单数据:采用get方式提交时,用户提交的表单数据信息会显示在浏览器的地址栏上,method属性默认为get;
- post方式提交表单数据:采用post方式提交时,用户提交的表单数据信息不会显示在浏览器地址栏上。当用户提交的信息中含有敏感信息时(如:密码),建议采用post方式提交。
- 格式
<!--注册的表单:action为提交的服务器地址,method为提交数据的方式-->
<form action="http://localhost:8080/jd/register" >
<!--默认不写method属性,提交方式为get-->
</form>
<form action="http://localhost:8080/jd/register" method="get">
<!--指定提交方式为get-->
</form>
<form action="http://localhost:8080/jd/register" method="post">
<!--指定提交方式为post-->
</form>
2.8 HTML控件
- 定义
控件在HTML中指的是可以控制的组件,也是用于<input>输入域中的属性,控件通常是控制输入域的一些属性;常见的控件有文件控件、隐藏控件。 - 分类
- <input type="file" />:文件控件,用于<input>标签中,指定该输入域引入外部文件,提交表单的数据也是文件;
- <input type="hidden" />:隐藏控件,用于<input>标签中,当<input>输入域使用hidden后,该输入对浏览器用户不可见,但是实际提交表单数据时也会提交该输入域的数据;不过隐藏控件的输入域通常用来提交id等自增类型的数据;
<form action="http://localhost:8080/oa/save">
<!--隐藏域:网页上看不到,但表单数据依然会提交给服务器-->
<input type="hidden" name="userid" value="111" />
用户代码<input type="text" name="usercode" />
<input type="submit" value="提交" />
</form>
- <input type="text" value="" readonly />:仅读控件,使用该控件的输入域,浏览器用户在使用HTML时,仅能查看该输入域上默认的value值,不可修改(但依然可以提交表单数据到服务器);
- <input type="text" disabled />:默认不可用控件,使用该控件的输入域,也只读不能修改(但该输入域的默认数据不会提交表单到服务器)。
<form action="http://localhost:8080/taobao/save">
<!--仅能读取数据,用户不可修改,但依然会提交数据 -->
用户代码<input type="text" name="usercode" value="110" readonly />
<!--仅能读取数据,用户不可修改,也不能提交数据 -->
用户姓名<input type="text" name="username" value="zhangsan" disabled />
<input type="submit" value="提交数据" />
</form>
- <input type="text" maxlength="" />:输入域长度限定控件,使用maxlength属性的控件会限制用户输入的数据长度,不能超越限定长度的数据。
<!-- 该文本框中可输入的字符数量为 3-->
<input type="text" maxlength="3" />
2.9 元素id属性(最重点)
- 概念
在HTML文件中,任何标签元素(节点)都有id属性,id属性是该节点的唯一标识,因此在同一个HTML文档当中id值不能重复。 - 特点
id属性仅是标识作用,最大的用处是方便CSS样式和JS文件可以根据id找到标签的位置,从而对应上CSS样式渲染 或 JS动态处理。
表单提交的数据 只和name属性有关系,和id无关。 - 作用
javascript(简称JS)可以对HTML文档当中的任意(标签)节点进行增删改,在进行增删改之前需要先通过id拿到这个节点对象,id的存在让获取元素(节点)更方便。 - 实质
HTML文档本质是一棵树(称为DOM--Document文档树),树上有很多节点,每一个节点都有唯一的id。javascript主要就是对这棵DOM树上的节点进行增删改。 - 示例
<!--通过form表单的id 对该form进行CSS样式渲染 或JS动态加持-->
<form id="myform">
<!--通过"username" id 对该输入域进行增删改-->
<input type="text" id="username" name="username"/>
<!--通过"userpwd" id 对该输入域进行增删改-->
<input type="password" id="userpwd" name="userpwd"/>
</form>
2.10 div与span
- 描述
在HTML文件中,除了使用<table>标签可以让整个页面以表格形式整齐之外,HTML还提供了<div>和<span>标签让整个页面呈盒子形式,并且<table>的不易改动将会由<div>取代。<div>是HTML的一种盒子模型,也称为"图层",通过将HTML页面划分为一个大小可变的盒子,不仅可以使用坐标来确定<div>的位置,还能在<div>中嵌套<div>,从而达到更加灵活的格式。 - 作用
- <div>和<span>都是为了保证页面可以灵活的布局, 图层是一个一个的盒子,div嵌套div就是盒子套盒子;
- <div>和<span>都可以定位,只要定下div的左上角的x轴和y轴坐标即可;
- 现代网页开发中div布局使用最多,很少使用table进行布局。
- 特点
- div独自占用一行(默认情况下);
- span不会独自占用一行,而会在后面进行拼接。
- 示例
<!--一个HTML页面内可以有多个div,且每个div独占一行-->
<div id="div1">我是一个DIV</div>
<div id="div2">我是一个DIV</div>
<!--多个span不会各自占一行-->
<span id="span1">我是一个SPAN标签</span>
<span id="span2">我是一个SPAN标签</span>
<!--div中嵌套div,称为盒子模型里套盒子-->
<div id="div3">
<div>
<div>test</div>
</div>
</div>