文章目录
- 一、web概念概述
- 1.1 B/S架构详解
- 二、HTML
- 2.1 概念
- 2.2 标签
- 2.2.1 文件标签
- 2.2.2 文本标签
- 2.2.3 图片标签
- 2.2.4 列表标签
- 2.2.5 链接标签
- 2.2.6 块标签（没有样式，结合css使用）
- 2.2.7 语义化标签（提高可读性）
- 2.2.8 表格标签(可嵌套)
- 2.3 案例——旅游网首页（html简易实现）
- 三、表单标签
- 3.1 表单
- 3.2 表单项标签
- 3.3 案例——验证码
一、web概念概述
- JavaWeb：
- 使用java语言开发基于互联网的项目
- 软件架构：
- C/S：Client/Server 客户端/服务器端
- 在用户本地有一个客户端程序，在远程有一个服务器端程序
- 如：QQ、迅雷
- 优点：
- 用户体验好
- 缺点：
- 开发、安装、部署、维护麻烦
- B/S：Browser/Server 浏览器/服务器端
- 只需要一个浏览器，用户通过不同的网址（URL）可以访问远程不同的服务器端程序。
- 优点：
- 开发、安装、部署、维护简单
- 缺点：
- 如果应用过大，用户体验可能会受到影响
- 对硬件要求过高
1.1 B/S架构详解
- 资源分类
- 静态资源
- 使用静态网页开发技术发布的资源
- 特点
- 所用用户访问，得到的结果是一样的。
- 如：文本、图片、音频、视频、HTML、CSS、Javascript
- 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
- 动态资源
- 使用动态网页技术发布的资源
- 特点
- 所用用户访问，得到的结果可能是不一样的
- 如：jsp/servelet、php、asp…
- 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
- 要学习动态资源，必须先学习静态资源。
- 静态资源
- HTML：用于搭建基础网页，展示页面的内容
- CSS：用于美化页面，布局页面
- Javascript：控制页面的元素，让页面有一些动态的效果
二、HTML
2.1 概念
- 是最基础的网页开发语言
- Hyper Text Markup Language 超文本标记语言
- 超文本
- 超文本使用超链接的方法，将不同空间的文字信息组织在一起的网状文本。
- 标记语言：
- 由标签构成的语言。
<标签名称>，如html,xml - 标记语言不是编程语言
- 快速入门：
- 语法：
- html文档后缀名
.html或者.htm - 标签分为：
- 围堵标签：有开始标签和结束标签。如，
<html>、<html> - 自闭和标签：开始标签和结束标签在一起。如，
<br/>
- 标签可以嵌套：
- 需要正确嵌套，不能你中有我，我中有你
- 正确：
<a><b></b></a> - 错误：
<a><b></a></b>
- 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可以）引起来。
- html的标签不区分大小写，建议使用小写
<html>
<head>
<title>title</title>
</head>
<body>
<font color='red'>helloworld</font><br/>
<font color='green'>helloworld</font>
</body>
</html>2.2 标签
2.2.1 文件标签
- 构成html最基本的标签
-
html：html的根标签 -
head：头标签。用于指定html文档的一些属性，还可以引入外部的资源 -
title：标题标签。 -
body：体标签 -
<!DOCTYPE>：html5中定义该文档是html文档
2.2.2 文本标签
- 和文本有关的标签
- 注释：
<!-- 注释内容 -->
<h1> - <h6>：标题标签
- h1~h6：字体大小逐渐递减
-
<p>：段落标签 -
<br>：换行标签 -
<hr>：展示一条水平线 <center>：居中标签
- 属性：
-
color：颜色 -
width：宽度 -
size：高度 align：对齐方式
-
center：居中 -
left：左对齐 -
right：右对齐
-
<b>：字体加粗 -
<i>：字体斜体 <font>：字体标签
- 属性
-
color：颜色 -
size：大小 -
face：字体类型
- 属性定义
color
- 英文单词：red, green, blue
- rgb(值1,值2,值3)；值的范围：0-255 如：rgb(0,0,255)
-
#值1值2值3；值的范围：00~FF之间，如#FF00FF
width
- 数值：width = ‘20’，数值的单位，默认是px（像素）
- 数值%：占比，相对于父元素的比例
- 案例：公司简介
2.2.3 图片标签
<img>，展示图片的标签
- 属性
-
src：图片路径 -
align：对齐方式 -
width：宽度 -
height：高度 -
alt：若图片不显示，代替的文字信息
<!--展示图片-->
<img src="image/jingxuan_2.jpg" align="right" width="500" alt="古镇" height="500">
<!--
相对路径
以.开头的路径
./ 代表当前目录 ./image/1.jpg
../代表上一级目录
-->
<img src="./image/logo.jpg" > <!-- 代表当前目录下-->
<img src="../image/logo.jpg" > <!-- 代表上一级目录下-->2.2.4 列表标签
- 有序列表：
<ol>：order list
- 属性：
-
type：表示序号类型。如：A，罗马数字1等 -
start：表示序号从第几个开始
<!-- 有序列表 ol -->
早上起床干的事情
<ol type="A" start="2">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ol>-
li：listed 表示项目
- 无序列表：
<ul>：
- 属性
type：
-
disc：原点 -
square：方块 -
circle：圆圈
<!-- 无序列表 ul -->
早上起床干的事情
<ul type="disc">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
<!-- 无序列表 ul -->
早上起床干的事情
<ul type="square">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
<!-- 无序列表 ul -->
早上起床干的事情
<ul type="circle">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>2.2.5 链接标签
<a>
- 属性：
-
href：指定访问资源的URL（统一资源定位符） target：
-
_blank：新建空白页面，打开指定的访问资源 -
_self：在自己的页面中进行跳转。默认值
<!-- 超链接 a-->
<a href="https://www.baidu.com/"> 点我 </a> <br>
<!-- 新建空白页打开目标网址-->
<a href="https://www.baidu.com/" target="_blank"> 点我 </a><br>
<!-- 在当前页面跳转到目标网址-->
<a href="https://www.baidu.com/" target="_self"> 点我 </a><br>
<!-- 目标网址可以是本地资源-->
<a href="5_列表标签.html" target="_self"> 列表标签 </a><br>
<!-- mailto协议，点击后自动打开电脑上安装的邮箱软件-->
<a href="mailto:973157930@qq.com">联系我们</a>
<!-- 点击图片跳转连接-->
<a href="5_列表标签.html"><img src="image/banner_1.jpg" align="center" alt="标语"></a>2.2.6 块标签（没有样式，结合css使用）
-
<div>：每一个div占满一整行。块级标签 -
<span>：文本信息在一行展示,行内标签,内联标签
<!--
div:每一个div占满一整行。块级标签
span:文本信息在一行展示,行内标签,内联标签
-->
<!-- 只起到包裹作用,没有样式结合css改变样式-->
<span>文泽路小男孩</span>
<span>HDU小菜鸡</span> <br>
<hr>
<div>文泽路小男孩</div>
<div>HDU小菜鸡</div>2.2.7 语义化标签（提高可读性）
html5为了提高程序的可读性，提供的一些标签
<header><footer>
2.2.8 表格标签(可嵌套)
table：定义表格
-
width：宽度 -
border：边框 -
cellpadding：定义内容与单元格的距离 -
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合成一条 -
bgcolor：背景色 -
align：对齐方式
tr：定义行
-
bgcolor：背景色 -
align：对齐方式
td：定义单元格
-
colspan：合并行 -
rowspan: 合并列
-
th：定义表头单元格，表头单元格中内容会自动居中并加粗显示 -
caption：定义表名 -
thead：表示表格的头部分（类似于语义化标签，提高程序可读性） -
tbody：表示表格的体部分 -
tfoot：表示表格的脚部分
<table border = "1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<thead>
<caption>学生信息表</caption>
<tr>
<!-- <td>编号</td>-->
<!-- <td>姓名</td>-->
<!-- <td>成绩</td>-->
<!-- 表头-->
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr bgcolor="aqua" align="center">
<td>1</td>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>杨过</td>
<td>50</td>
</tr>
</tbody>
</table>2.3 案例——旅游网首页（html简易实现）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游网站</title>
</head>
<body>
<table width="100%" align="center">
<!-- 第一行 - top_banner-->
<tr>
<td>
<img src="./image/top_banner.jpg" align="center" width="100%" alt = "top_banner">
</td>
</tr>
<!-- 第二行 - 搜索框-->
<tr>
<td>
<table width="100%" align="center">
<tr align="center">
<td>
<img src="image/logo.jpg" align="center">
</td>
<td>
<img src="image/search.png" align="center">
</td>
<td>
<img src="image/hotel_tel.png" align="center">
</td>
</tr>
</table>
</td>
</tr>
<!-- 第三行 -选项-->
<tr>
<td>
<table bgcolor="#ffd700" align="center" width="100%" cellspacing="10">
<tr align="center">
<td>
<a href="" target="_blank">首页</a>
</td>
<td>
门票
</td>
<td>
酒店
</td>
<td>
香港车票
</td>
<td>
出境游
</td>
<td>
国内游
</td>
<td>
港澳游
</td>
<td>
报团定制
</td>
<td>
全球自由行
</td>
<td>
收藏排行榜
</td>
</tr>
</table>
</td>
</tr>
<!-- 第四行 -轮播图-->
<tr>
<td>
<img src="image/banner_3.jpg" width="100%" align="center">
</td>
</tr>
<!-- 第五行 -精选-->
<tr>
<td height="50">
<img src="image/icon_5.jpg">
<font size="5" face="微软雅黑" >
小男孩精选
</font>
<hr color="gold">
</td>
</tr>
<!-- 第六行 -精选-->
<tr>
<td>
<table width="100%" align="center" >
<tr >
<td align="center" >
<img src="image/jiangxuan_1.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 899</font>
</td>
<td align="center">
<img src="image/jiangxuan_1.jpg">
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 899</font>
</td>
<td align="center">
<img src="image/jiangxuan_1.jpg">
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 899</font>
</td >
<td align="center">
<img src="image/jiangxuan_1.jpg">
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第七行 -国内游-->
<tr>
<td height="50">
<img src="image/icon_5.jpg">
<font size="5" face="微软雅黑" >
国内游
</font>
<hr color="gold">
</td>
</tr>
<!-- 第八行 -国内游-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" >
</td>
<td align="center" >
<img src="image/jiangxuan_2.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 699</font>
</td>
<td align="center" >
<img src="image/jiangxuan_2.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 699</font>
</td>
<td align="center" >
<img src="image/jiangxuan_2.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 699</font>
</td>
</tr>
<tr >
<td align="center" >
<img src="image/jiangxuan_2.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 699</font>
</td>
<td align="center" >
<img src="image/jiangxuan_2.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 699</font>
</td>
<td align="center" >
<img src="image/jiangxuan_2.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第9行 -境外游-->
<tr>
<td height="50">
<img src="image/icon_5.jpg">
<font size="5" face="微软雅黑" >
境外游
</font>
<hr color="gold">
</td>
</tr>
<!-- 第10行 -境外游-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td rowspan="2">
<img src="image/jiangwai_1.jpg" >
</td>
<td align="center" >
<img src="image/jiangxuan_3.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 699</font>
</td>
<td align="center" >
<img src="image/jiangxuan_3.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 699</font>
</td>
<td align="center" >
<img src="image/jiangxuan_3.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 699</font>
</td>
</tr>
<tr >
<td align="center" >
<img src="image/jiangxuan_3.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 699</font>
</td>
<td align="center" >
<img src="image/jiangxuan_3.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 699</font>
</td>
<td align="center" >
<img src="image/jiangxuan_3.jpg" >
<p>
上海直飞三亚5天4页自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）
</p>
<font color="red" size="5">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第11行 -产品齐全-->
<tr>
<td>
<img src="image/footer_service.png" width="100%" align="center">
</td>
</tr>
</table>
</body>
</html>
三、表单标签
3.1 表单
- 概念：用于采集用户输入的数据。用于和服务器进行交互。
<form>:用于定义表单。可以定义一个范围，范围代表采集用户数据的范围
- 属性：
-
action:指定提交数据的URL method:指定提交方式
- 分类：一共7中，2种比较常用（面试题：
get与post的区别）
get：
- 请求参数会在地址栏中显示。会封装到请求行中（HTTP协议后讲解）
- 请求参数的长度是由限制的
- 不太安全
post：
- 请求参数不会在地址栏中显示。会封装在请求体中（HTTP协议后讲解）
- 请求参数的长度没有限制
- 较为安全
- 表单项中的数据想要被提交：必须指定其name属性
3.2 表单项标签
input：可以通过type属性值，改变元素展示的样式
type属性：
text：文本输入框（默认值）placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。效果比直接使用value设置默认值好。password：密码输入框radio：单选框
- 注意：
- 想要让多个单选框实现单选的效果，则多个单选框的
name属性值必须一样。 - 一般会给每一个单选框提供
value属性，指定其被选中后提交的值。 -
checked属性，可以指定默认值
checkbox：复选框
- 注意：
- 一般会给每一个单选框提供
value属性，指定其被选中后提交的值。 checked属性，可以指定默认值
file：文件选择框。hidden：隐藏域，用于提交某些信息。- 按钮：
-
submit：提交按钮。可以提交表单 -
button：普通按钮 image：图片提交按钮
- src属性指定图片的路径
<form action="#" method="get">
<!-- 用户名：<input type="text" name = "username" value="请输入用户名"><br>-->
<!-- 这个label是用来描述用户名的，for之后的属性内容与id属性内容需要一致-->
<label for="username">用户名</label>：<input type="text" name = "username" placeholder="请输入用户名" id = "username"><br>
密码：<input type="password" name = "password" placeholder="请输入密码"><br>
性别：<input type="radio" name = "gender" value="male" checked = "checked"> 男
<input type="radio" name = "gender" value="female"> 女
<br>
爱好：<input type = "checkbox" name = "hobby" value="shopping"> 逛街
<input type = "checkbox" name = "hobby" value="java" checked = "checked"> java
<input type = "checkbox" name = "hobby" value="game"> 游戏
<br>
图片：<input type="file" name = "file"><br>
隐藏域：<input type="hidden" name = "id" value = "aaa"><br>
取色器：<input type="color" name="color"><br>
生日：<input type="date" name = "birthday"><br>
生日：<input type="datetime-local" name = "birthday"><br>
邮箱：<input type="email" name = "email"> <br>
年龄：<input type="number" name = "age"> <br>
<input type="submit" value="登陆">
<input type="button" value = "一个按钮"><br>
<input type="image" src="img/regbtn.jpg">
</form>label：指定输入项的文字描述信息
- 注意：
-
label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
<!-- 用户名：<input type="text" name = "username" value="请输入用户名"><br>-->
<!-- 这个label是用来描述用户名的，for之后的属性内容与id属性内容需要一致-->
<label for="username">用户名</label>：<input type="text" name = "username" placeholder="请输入用户名" id = "username"><br>select：下拉列表
- 子元素：
option
省份：<select name = "province">
<option>--请选择--</option>
<option value="1" selected>北京</option>
<option value="2">上海</option>
<option value="3">杭州</option>
</select><br>textarea：文本域
-
cols：指定列数，每一行有多少个字符 -
rows：默认多少行。
自我描述：
<textarea rows="5" cols = "20"></textarea><br>3.3 案例——验证码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆界面——表单</title>
</head>
<body>
<form action = "#" method="post">
<table border="2" align="center" width="30%">
<!-- 用户名-->
<tr>
<td>
<label for = "username">用户名</label>
</td>
<td>
<input type="text" name = "username" placeholder="请输入账号" id="username">
</td>
</tr>
<!-- 密码-->
<tr>
<td>
<label for = "password">密码</label>
</td>
<td>
<input type="text" name = "password" placeholder="请输入密码" id="password">
</td>
</tr>
<!-- email-->
<tr>
<td>
<label for = "email">Email</label>
</td>
<td>
<input type="email" name="emal" placeholder="请输入Email" id="email">
</td>
</tr>
<!-- 姓名-->
<tr>
<td>
<label for = "name">姓名</label>
</td>
<td>
<input type="text" name = "name" placeholder="请输入真实姓名" id="name">
</td>
</tr>
<!-- 手机号-->
<tr>
<td>
<label for="tel">手机号</label>
</td>
<td>
<input type="text" name = tel placeholder="请输入您的手机号" id="tel">
</td>
</tr>
<!-- 性别-->
<tr>
<td>
<label >性别</label>
</td>
<td>
<input type="radio" name = "male" checked>男
<input type="radio" name = "female" >女
</td>
</tr>
<!-- 出生日期-->
<tr>
<td>
出生日期
</td>
<td>
<input type="date" name = "birthday">
</td>
</tr>
<!-- 验证码-->
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="checkcode">
<img src="img/verify_code.jpg">
</td>
</tr>
<!-- 注册按钮-->
<tr>
<td colspan="2" align="center">
<input type="button" name="submit" value="注册">
</td>
</tr>
</table>
</form>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
