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注释：一种 <!--html-->
-java注释：三种
2.3标题标签，水平标签，和特殊字符
*标题标签：
<h1></h1> ... <h6></h6>
从h1到h6,大小依次变小，同时会自动换行
*水平标签
- <hr/>
-属性
**size:大小，取值范围1-7，超出7之后，默认还是7
**color:
代码：<hr size= "5" color= "red"/>
*特殊字符
-想要在网页上显示 <html>:是网页的开始
-需要对特殊字符进行转义
* < ： <
*> ： >:
*空格：  
*& : &
2.4列表标签
-比如显示这样的效果
传智播客
财务部
学工部
人事部
** <dl></dl>：表示列表的范围
** 在dl里面 <dt></dt>:上层内容
** 在dl里面 <dd></dd>：下层内容
-代码
<dl>
<dt>传智播客</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
-想要在页面上显示这样的效果（加排序）
1. 财务部
2. 学工部
3.人事部
a.财务部
b.学工部
c.人事部
i:财务部
ii:学工部
iii:人事部
**<ol></ol>:有序列表的范围
-属性：type:设置排序方式 a,i等，默认是1
**在ol标签里面<li>具体内容</li>
代码：
<!--有序列表-->
<ol type="i">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
--想要在页面上显示这样的效果（无排序）
特殊符号（方框）财务部
特殊符号（方框）学工部
**<ul></ul>表示无序列表的范围
属性：type :空心圆circle ,实心圆disc(默认)，实心方块：square，
在ul里面<li></li>
代码：
<!--无序列表-->
<ul type="square">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
2.5图像标签（***）重点
<img src="图片路径"/>
属性：
-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>
*定位资源
** 如果想要定位资源，：定义一个位置
<a name="top">顶部</a>
**回到这个位置
<a href="#top">回到顶部</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
**表格的标题
<caption></caption>
代码：
<table border="1"bordercolor="#CC9900" cellspacing="0" width="400"height="500">
合并单元格：
-rowspan:跨行
<td colspan="3">人员信息</td>
-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标签里面）
<select name="birth">
<option value="1993"selected="selected">1993</option>
<optionvalue="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
</select>
**文本域
<textarea cols="" rows=""></textarea>
**隐藏项
<input type="hidden"/>
提交按钮：
<input type="submit" value="注册"/>
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的形式
**使用图片提交
<input type="image" src=""/>
**重置按钮:回到输入项的初始状态
<input type="reset"/>
**普通按钮：和明天的js一起有用
<input type="button"value=""/>
1.11使用表单标签来实现注册页面
-使用表格实现页面效果
-超链接不想要他有效果href= "#"
-如果表格的单元格没有内容，则用占位符  
-使用图片提交表单，<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>标签:设置页面的一些相关内容
设置几秒跳转，跳转到哪个路径
<meta http-equiv="refresh"content="3;url=图像标签-2.html"/>
**base标签：设置超链接的基本设置
可以统一设置超链接的打开方式
<base target="_blank"/>
**link标签：引入外部文件
**明天css，可以使用link标签使用css文件
1.14；框架标签（非重点，会用就行）
<frameset>
属性：
-rows:按照行进行划分
**<frameset rows="80,*">
表示：将页面按行分为两部分，第一行是80，下面所有的都属于第二行
-cols:列
**<frameset cols="80,*">
<frame>
-具体显示的页面
-<frame name="lower_left"src="b.html"
*使用框架标签的时候，不能写在body里面，必须将body删除
<frameset rows="100,*">
<framename="top" src="aaa.html"/>
<frameset cols="80,*"/>
<frame name="left" src="ccc.html"/>
<frame name="right" src="fff.html"/>
</frameset
<body>
<h1>cccc</h1>
<a href="aaa.html"target="right">c超链接1</a>
<a href="aaa.html"target="right">c超链接2</a>
<a href="xxx.html"target="right">c超链接3</a>
如果在左边的页面中设置超链接属性，想让内容显示在右边的页面中
-设置超链接属性，target值改为右边页面的名称
<a href ="aaa.html" target=""right>chaolianjie</a>
1.15：扩张a标签(了解)
-百度是网络资源
-当a标签里面访问网络资源时候，必须要加一个协议http: 表示一个网络
的公共协议，如果加上http协议之后，自动识别访问资源是一个网络资源
-当浏览器里面找到相关协议，首先看这个协议是不是公共协议。如果不是公共协议，会去
本地电脑找支持这个协议的应用程序
扫一扫
2431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
