Day01---JavaWeb概述及HTML

一、今日内容

1.JavaWeb概述
2.HTML
3.HTML练手案例

二、JavaWeb概述

1.什么是 JavaWeb
* 使用java语言基于互联网开发的项目
2.软件架构
	1. C/S: Client/Server 客户端/服务器端
		* 特点:在用户本地有一个客户端程序,在远程有一个服务端程序
		* 优点:用户体验感好
		* 缺点:开发、安装、部署、维护 麻烦
	2. B/S:Browser/Server 浏览器/服务器端
		* 特点:用户通过浏览器,输入网址,远程有一个服务器响应
		* 优点:开发、安装、部署、维护 简单
		* 缺点:
			1. 相对与C/S架构来说,用户体验感要差一些
			2. 比较吃硬件,硬件越好,用户体验越好
3.B/S架构详解

因为是学习javaweb,C/S架构就不详细说了,接下来详细了解一下B/S架构:

1. 资源分类
	1. 静态资源
		* 使用静态网页开发技术发布的资源
		* 特点:
			* 所有用户访问,得到的结果是一样的。
			* 如:文本、图片、视频、**HTML、CSS、javascript**
			* 如果用户请求的是静态资源,**服务器会直接将静态资源发送给浏览器**,浏览器通过内置的津泰资源解析引擎,可以展示静态资源
	2. 动态资源
		* 使用动态网页开发技术发布的资源
		* 特点:
			* 所有用户访问,得到的结果可能不一样。
			* 如:jsp/servlet、.net、php、asp...
			* 如果用户请求的是动态资源,**服务器会执行动态资源,将动态资源转为静态资源** ,再将动态资源发送给浏览器
2. 结论:
	* 要学习动态资源,必须先学习静态资源。
	* 浏览器只能解析静态资源
3. 接下来,学习静态三剑客:
	* HTML
	* CSS
	* JavaScript

Day01---JavaWeb概述及HTML_第1张图片

三、HTML

1.什么是HTML
Hyper Text Markup Language 超文本标记语言
	* 超文本:用超链接的方式,将各个不同空间的信息像蜘蛛网一样连接起来
	* 标记语言:由标签构成的语言。<标签名>
		*	注意:标记语言不是编程语言
2.HTML学习
(1)语法
1. html文档后缀名 .html 或者 .htm
2. 标签分为:
		1. 围堵标签:有开始标签和结束标签。如  
		2. 自闭和标签:开始标签和结束标签在一起。如 
3. 标签可以嵌套: 需要正确嵌套,不能你中有我,我中有你 错误: 正确: 4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来 5. html的标签不区分大小写,但是建议使用小写。
(2)标签学习:
1. 文件标签:
	* :html5中定义该文档是html文档
	* html:根标签
	* head:头标签
	* title:标题标签
	* body:体标签
2. 文本标签:
	* 
	* 

标题

*

段落

*
: 换行 *
: 水平线 * 加粗 * 斜体 * 字体 * size * color * face:字体 *
居中
* 属性定义: * color: 1. 英文单词:red,green,blue 2. rgb(值1,值2,值3) 0-255 3. #值1值2值3 00-FF eg:FF00FF * width: 1. 数值:width=‘20’ 单位默认是px(像素) 2. 数值%:占父元素的比例 3. 图片标签: 4. 列表标签: * 有序列表:
  1. 序列1
  2. 序列2
* 无序列表:
  • 序列1
  • 序列2
5. 连接标签:文字 * 属性 href:目标网址 target在哪里打开页面(当前页面/空白页) 6. div和span:这两个没有任何的样式,一般和css一起使用 * div:每一个div占一整行。块级标签 * span:文本信息在一行内展示。行内标签 7. 语义化标签:html5中为了提高程序的可读性,提供了一些标签。他和div和span都没有任何的样式,只是方便程序员阅读。可以理解为一个div,只是名字与div不一样。 *
*
8. 表格标签 *
:定义表格 * :定义表单标题 * :定义标题头 * ::定义行 * :定义列 * colspan:合并列 * rowspan:合并行 * table的语义化标签 * * *

下面举一个表格合并的例子:
Day01---JavaWeb概述及HTML_第2张图片
上面表格代码:

<table border="1">
        <caption>学生信息表</caption>
        <tr>
            <!--注意此处占三行在第一行设置-->
            <td rowspan="3">学院</td>
            <td>学号</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>2017115010225</td>
            <td>张三</td>
        </tr>
        <tr>
            <td>2017115010224</td>
            <td>李四</td>
        </tr>
    </table>
(3)表单学习:
* 表单概念:用于采集用户输入的数据。用于和服务器交互。
* form:用于定义表单。定义表单作用的范围,在该标签内的,用户输入的数据才能够被提交到服务器。
	* 属性:
		* action:指定提交的URL
		* method:指定提交的方式
			* 分类:一共有7种,2种比较常见
				* get:
					1. 请求的参数会在地址栏显示。
					2. 请求的参数长度是有限制的
					3. 可能被别人看见参数,不太安全
				* post:
					* 请求的参数封装在请求体中,不会在地址栏中显示
					* 请求参数的长度没有限制
					* 比较安全
* 表单项标签
	1. :可以通过type属性,改变input表单项的样式
		* type属性值:
			* text:文本输入框,默认值
			* password:密码输入框,会隐藏用户输入的密码
			* radio:单选框
				* 注意:
					1. 要想多个单选框实现单选的效果,这多个单选框的name属性的值必须一样
					2. 一般会给每一个单选框指定一个value属性,指定其被选中后提交的值
					3. checked属性(checked=“checked”)可以指定默认选中哪个
			* checkbox:复选框
				* 注意:
					1. 一般会给每一个复选框一个value属性,指定其被选中后提交的值
					2. checked属性(checked=“checked”)可以指定默认选中哪几个复选框
			* file:文件选择框
			* hidden:隐藏域,用于提交一些默认的信息
			* 按钮:因为按钮没有值需要提交,所以不用设置name属性,value属性是显示其按钮上的字
				1. submit:提交按钮,可以提交表单
					* 设置value属性值,其会以文字的形式显示在按钮上
				2. button:普通的按钮,不可以提交表单,一般和JavaScript结合使用
				3. image:图片提交按钮,可以提交表单
					* src属性指定图片的路径  
			* color:取色器
			* date:日期,不含小时分钟
			* datetime:日期,含小时分钟
			* email:邮箱,可以自动检测邮箱填写是否规范
			* number:数字
	2. :下拉列表,需要设置name属性
		* 子元素:  需要设置value属性
	3. textarea:文本域
		* 属性:
			* cols:指定列数,每一行有多少个字符
			* rows:默认多少行,当然不够的会自动填充
	4.补充:
		1. :他不是表单项,用来指定输入项的文字描述信息,比如:账号、密码
			* 注意:
				* lable的for属性一般会和其对应的 input 的 id属性值 对应。如果对应了,则点击lable区域,光标会自动跳转聚焦到其对应的 input 输入框
		2. 表单项要想被提交,表单项必须指定其name属性

四、HTML练手案例

用HTML展示如下效果:
Day01---JavaWeb概述及HTML_第3张图片
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="get">
        <table border="1">
            <!--第一行-->
            <tr>
                <td><label for="username">用户名</label></td> <td><input type="text" name="username" id="username" placeholder="请输入账号"/></td>
            </tr>
            <!--第二行-->
            <tr>
                <td><label for="passwd">密码</label></td>  <td><input type="password" name="passwd" id="passwd" placeholder="请输入密码"/></td>
            </tr>
            <!--第三行-->
            <tr>
                <td><label>邮箱</label></td>  <td><input type="email" name="email" placeholder="请输入邮箱"/></td>
            </tr>
            <!--第四行-->
            <tr>
                <td><label>姓名</label></td>  <td><input type="text" name="name" placeholder="请输入真实姓名"></td>
            </tr>
            <!--第五行-->
            <tr>
                <td><label for="phoneNum">手机号</label></td> <td><input type="number" name="phoneNum" id="phoneNum" placeholder="请输入手机号"/></td>
            </tr>
            <!--第六行-->
            <tr>
                <td><label>性别</label></td>
                <td><input type="radio" name="sex" value="male" checked/><input type="radio" name="sex" value="female"/></td>
            </tr>
            <!--第七行-->
            <tr>
                <td><label>出生日期</label></td>    <td><input type="date" name="birthday"/></td>
            </tr>
            <!--第八行-->
            <tr>
                <td><label>验证码</label></td>
                <td><input type="text" name="capter"/>  <img src="../img/verify_code.jpg"></td>
            </tr>
            <!--第九行-->
            <tr align="center">
                <td colspan="2"><input type="submit"/></td>
            </tr>
        </table>

    </form>
</body>
</html>

你可能感兴趣的:(#,JavaWeb,HTML)