javaweb学习笔记_day1

来源：互联网发布：苹果app下载不了软件编辑：程序博客网时间：2024/04/29 20:24

Javaweb学习笔记

Day1：javaweb的简介以及各种标签语言的介绍

知识点结构图：

一：HTML语言：

1.1 html的简介：( 什么是html)

hyperText Markup Language :超文本标记语言，网页语言

超文本：超出文本的范畴，可以使用HTML来轻松实现

标记：html所有操作都是通过标签来实现的，标记就是标签

网页：

第一个html程序

html后缀是.html，直接通过浏览器就可以实现

1.2html规范：

1：一个HTML文件开始标签和结束标签 <html> </html>

2:html包含两个部分

（1）<html>设置一些信息</html>

(2)<body>在网页上要显示的内容都放在body里面</body>

3:html标签有开始标签，有结束标签

4:html不区分大小写

5:有些标签，没有结束标签，在标签内结束比如换行<br/><hr/>

1.3html操作思想：

网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把操作

数据通过修改标签属性值来实现标签内样式的变化。

一个标签就相当于一个容器，想要修改容器内数据样式，只需要改变容器的属性值，就可以改变容器内数据样式的变化

二:html中常用标签

2.1文字标签：修改文字样式

属性：

*color:文字颜色两种表示方式：1，英文单词：red green 2.使用十六进制数表示#ffff 通过工具实现不同的颜色

*size：文字大小，取值范围1-7，超出7之后，默认还是7

2.2注释标签

-html注释：一种

-java注释：三种

2.3标题标签，水平标签，和特殊字符

*标题标签：

从h1到h6,大小依次变小，同时会自动换行

*水平标签

- <hr/>

-属性

**size:大小，取值范围1-7，超出7之后，默认还是7

**color:

代码：<hr size= "5" color= "red"/>

*特殊字符

-想要在网页上显示 <html>:是网页的开始

-需要对特殊字符进行转义

* < ： <

*> ： &gt:

*空格： &nbsp

*& : &amp

2.4列表标签

-比如显示这样的效果

传智播客

财务部

学工部

人事部

** <dl></dl>：表示列表的范围

** 在dl里面 <dt></dt>:上层内容

** 在dl里面 <dd></dd>：下层内容

-代码

<dl>

</dl>

-想要在页面上显示这样的效果（加排序）

1. 财务部

2. 学工部

3.人事部

a.财务部

b.学工部

c.人事部

i:财务部

ii:学工部

iii:人事部

**<ol></ol>:有序列表的范围

-属性：type:设置排序方式 a,i等，默认是1

**在ol标签里面<li>具体内容</li>

代码：

</ol>

--想要在页面上显示这样的效果（无排序）

特殊符号（方框）财务部

特殊符号（方框）学工部

**<ul></ul>表示无序列表的范围

属性：type :空心圆circle ,实心圆disc(默认)，实心方块：square，

在ul里面<li></li>

代码：

</ul>

2.5图像标签（***）重点

属性：

-src:图片路径

-width:图片宽度

-height:图片高度

-alt：图片显示的文字，把鼠标移动到图片上，停留片刻会显示内容（有些浏览器不显示，）

6.路径的介绍

*分类：两类

绝对路径：加盘符的位置

相对路径：一个文件相对于另一个文件的位置

三种：

**html文件和图片文件都在同一个路径下，可以直接写图片文件名称

**图片在html的下层目录

在002.html中，使用img文件夹下面的a.jpg

E:\BaiduYunDownload\javaweb\javaweb笔记\javaweb程序笔记\day1\ 002.html

E:\BaiduYunDownload\javaweb\javaweb笔记\javaweb程序笔记\day1\ img\a.jpg

首先找出两张路径相同的部分，可以直接用img\a.jpg路径来表示

**图片在html的上层目录

E:\BaiduYunDownload\javaweb\javaweb笔记\javaweb程序笔记\day1\002.html

E:\BaiduYunDownload\javaweb\javaweb笔记\javaweb程序笔记\day1\a.jpg

可以直接用..\a.jpg表示图片在html文件的上一次目录，如果图片在html文件的上上层目录的话，就多用..\来表示上一层目录

8 ，超链接标签（重点***）

两种： *链接资源

-<a href="链接到资源的路径">显示在页面上的内容</a>

** href:链接的资源地址

**target:设置打开方式（默认为当前页打开）

--—_blank：在一个新窗口打开

--—_self：在当前页打开

当超链接不需要到任何地址，在href中加#

<ahref="#">这是超链接</a>

*定位资源

** 如果想要定位资源，：定义一个位置

**回到这个位置

**引入一个标签：pre(原样输出)

9.表格标签（很重要的标签****）

可以对数据进行格式化，是数据更加清晰，完整

*<table></table>:表示表格的范围（表是没有列的概念，只用单元格来表示

属性：

-border:表格线

-bordercolor：表格颜色

cellspacing;单元格之间的距离

width：表格的宽度

height：表格的高度

**在table里面<tr></tr> 有几行就写几个tr

属性：

设置显示方式align:center,left,right

***在tr里面<td></td> 单元格（<th></th>也可以表示单元格，表示居中和加粗）

属性设置显示方式align:center,left,right

画图分析表格的方法：

-首先定义一个表格的范围使用table

-定义一行使用tr

-定义一个单元格用td

**表格的标题

代码：

合并单元格：

-rowspan:跨行

-colspan:跨列

**<td colspan="3">人员信息</td>

10表单标签（最重要标签**********）：

*可以提交数据到开心网的服务器，这个过程可以使用表单标签来实现

*<form></form>:定义一个表单

属性：

action：提交到的路径，默认是提交到当前页面

method：表单提交方式

常用有两种：get和post。默认是get请求（get请求可以直接看到参数值。post请求不会看到参数值）

面试题目：get和post的区别

1.get会携带提交的参数，而post不会，post参数是在请求体中

2.get安全性较低，而post安全性较高

3.get请求有数据大小的限制。而post无限制

**enctype:一般请求下是不需要这个属性，做文件上传的时候需要设置这个属性（第22天讲文件上传时候有用）

输入项：可以输入或者选择内容的部分

-大部分的输入项，使用<inputtype="输入项的类型"/>

**普通的输入项：<inputtype="text"/>

**密码的输入项：<input type="password"/>

**单选输入项：<input type ="radio"/>

-在里面需要属性name

-name属性值必须要相同

-必须有一个value值

实现默认选中属性：<checked="checked"/>

**复选输入项：<inputtype="checkbox"/>

-在里面需要属性name

-name属性值必须要相同

-必须有一个value值

实现默认选中属性：<checked="checked"/>

**文件输入项<input type="file"/>

**下拉输入项（不是在input标签里面）

<optionvalue="1994">1994</option>

</select>

**文本域

**隐藏项

提交按钮：

file:///E:/BaiduYunDownload/javaweb/javaweb笔记/javaweb程序笔记/day1/表单标签-1.html?birth=1993

file:///E:/BaiduYunDownload/javaweb/javaweb笔记/javaweb程序笔记/day1/表单标签-1.html?phone=11&password=11&sex=on&love=on&birth=1993

file:///E:/BaiduYunDownload/javaweb/javaweb笔记/javaweb程序笔记/day1/表单标签-1.html?phone=123&password=123&sex=male&love=pp&birth=1993

** 输入项都要加属性name,才能将数据提交到

**?输入项name的值=输入的值&，参数类似于key-value的形式

**使用图片提交

**重置按钮:回到输入项的初始状态

**普通按钮：和明天的js一起有用

1.11使用表单标签来实现注册页面

-使用表格实现页面效果

-超链接不想要他有效果href= "#"

-如果表格的单元格没有内容，则用占位符 &nbsp

-使用图片提交表单，<inputtype="image" src="图片路径"/>

1.12.html中其他常用标签

b,s,u,i,pre,sub,sup,div,span

b:加粗

s:加删除线

u:加下划线

i:斜体

pre:原样输出

sub:下标

sup：上标

div:自动换行

span：不会自动换行，在一行显示

p:段落标签，比br标签多一行

1.13 html的头标签使用

*html组成部分：head和body

**在head里面的标签就是头标签

**title：：表示在标签上显示的内容

**<meta>标签:设置页面的一些相关内容

设置几秒跳转，跳转到哪个路径

**base标签：设置超链接的基本设置

可以统一设置超链接的打开方式

**link标签：引入外部文件

**明天css，可以使用link标签使用css文件

1.14；框架标签（非重点，会用就行）

属性：

-rows:按照行进行划分

**<frameset rows="80,*">

表示：将页面按行分为两部分，第一行是80，下面所有的都属于第二行

-cols:列

**<frameset cols="80,*">

<frame>

-具体显示的页面

-<frame name="lower_left"src="b.html"

*使用框架标签的时候，不能写在body里面，必须将body删除

<framename="top" src="aaa.html"/>

</frameset

<body>

如果在左边的页面中设置超链接属性，想让内容显示在右边的页面中

-设置超链接属性，target值改为右边页面的名称

<a href ="aaa.html" target=""right>chaolianjie</a>

1.15：扩张a标签(了解)

-百度是网络资源

-当a标签里面访问网络资源时候，必须要加一个协议http: 表示一个网络

的公共协议，如果加上http协议之后，自动识别访问资源是一个网络资源

-当浏览器里面找到相关协议，首先看这个协议是不是公共协议。如果不是公共协议，会去

本地电脑找支持这个协议的应用程序

1 0