day01
HTML
1、html的简介
(1)什么是html?HyperText Mark-up Language ,超文本标记型语言,是网页的语言。
* 超文本:超出文本的范畴
* 标记:理解为标签,html中所有的操作都是通过标签来实现的
* html是做网页。
* 第一个html程序
= 代码 <font color="red" size="5">这是我的第一个html程序</font>
(2)html程序遵循一定的规范
第一个:html程序以<html>开始,同时</html>结束
* 比如创建java里面方法,public void add() { 方法体 }
第二个:html程序包含两部分内容:head和body
* <html>
<head>设置页面信息</head>
<body>显示到页面上的内容</body>
</html>
第三个:html的标签有开始标签,同时也要结束标签
第四个:html的代码不区分大小写的
第五个:有些标签没有结束标签,需要在标签内结束 <br/>
* 实现换行的操作,使用标签实现的<br>, 没有</br>
(3)html的操作思想
* 在网页中可能有很多的数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据包起来
(封装),通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器,通过修改容器的属性值,
实现容器内数据样式的变化。
2、字体标签
(1)文字标签 <font>
* <font color="设置文字颜色" size="文字的大小">要操作的文字的内容</font>
** 常用两个属性
*** color:设置文字的颜色
**** 有三种表示方式
第一种:直接使用英文单词进行表示 red green yellow......
第二种:使用十六进制数字进行表示 #ffffff,
** 通过RGB
第三种:使用RGB颜色值配置 rgb(255,0,0)
*** size:设置文字的大小
**** 文字大小值范围:1-7,如果值超过了7,使用还是7的效果
(2)标题标签
* <h1></h1> <h2></h2>.......<h6></h6>
** 标题标签可以自动换行,从h1到h6字体的大小依次变小的
(3)水平线标签
* <hr/>
* 属性
** color:表示设置水平线颜色
** size:设置水平线的粗细,范围1-7
(4)注释标签
* 在java里面有几类注释?三类注释
** 单行注释,多行注释,文档注释
* 在html中注释 <!-- 注释的内容 -->
** 使内容不在html页面中进行显示
(5)特殊字符
* 实现空格的操作
3、列表标签
(1)想要实现:
传智播客
java学院
人事部
学工部
* 首先需要使用 <dl></dl>: 定义列表的范围
* 之后在dl标签里面,<dt></dt>: 定义上层内容
* 在dl标签里面, <dd></dd>: 定义下层内容
** 代码
<dl>
<dt>传智播客</dt>
<dd>java学院</dd>
<dd>人事部</dd>
<dd>学工部</dd>
</dl>
(2)有序列表标签
1.java学院
2.人事部
3.学工部
a.java学院
b.人事部
c.学工部
i.java学院
ii.人事部
iii.学工部
* 使用 <ol></ol>: 定义有序列表的范围
** ol标签上面有属性 type:排序的方式
** type属性里面的值 1 a i
* 之后在ol标签里面:<li></li>: 封装具体的内容
** 代码
<ol>
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ol>
(3)无序列表标签
(特殊符号)java学院
(特殊符号)人事部
(特殊符号)学工部
* 首先使用标签 <ul></ul>: 定义无序列表的范围
** ul标签上面有属性 type:设置特殊符号
** type属性里面的值 disc circle square
* 之后在ul标签里面: <li></li>: 封装具体的内容
** 代码
<ul>
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ul>
4、图形标签
(1)在html中显示图片
(2)标签:<img src="图片的路径名称"/>
(3)属性:
* src:图片的路径名称
* width:图片宽度
* height:图片的高度
* border:图片的边框的粗细
* alt: 显示在图片上面的内容
** 鼠标移动到图片上面,稍等片刻出现文字
** 如果图片找不到,显示alt的内容
*** 这个属性在某些浏览器不能显示的
5、超链接标签
(1)什么是超链接:点击打开新的内容
(2)标签:<a href="链接到的地址">显示在页面上的内容</a>
* 代码 <a href="hello.html">显示在页面上的内容</a>
(3)属性
* href:链接到地址
* target:超链接的打开方式
** 在默认的情况下,打开方式在当前的页面打开
** target里面的值:_self,当前页面打开; _blank,在新标签页打开
6、表格标签
操作技巧:
首先数表格里面有多少行,数每行里面有多少个单元格
(1)什么是表格:对数据进行格式化,使数据显示更加清晰,结构分明
(2)标签
* 首先定义表格的范围:<table></table>
** 属性
*** border:设置表格线
*** bordercolor:设置表格线的颜色
*** cellspacing: 设置单元格之间的距离
*** cellpadding: 设置文字和单元格之间的距离
*** width: 设置表格的宽度
*** height:设置表格的高度
* 在table标签里面表示行: <tr></tr>
** 属性
*** align:设置对齐方式,值 left center right
* 在tr标签里面表示列: <td></td>
** 属性
*** align:设置某个单元格对齐方式
* 在tr标签里面也可以表示单元格:<th></th>
** 实现居中和加粗的效果
(3)合并单元格
* 是在td标签上面进行的操作,使用两个属性
** rowspan:跨行
*** 代码 <th rowspan="4">人员信息3人</th>
** colspan:跨列
*** 代码 <td colspan="3">统计信息3人</td>
(4)标题标签:<caption>标题内容</caption>
7、表单标签
(1)什么是表单?把输入的数据提交到服务器上(存到服务器),这个过程称为表单
(2)使用表单标签实现数据提交到服务器上这个过程
(3)form 标签:如果写表单,首先定义表单的范围
* 属性
** action:提交的服务器的地址
** method:表单的提交方式(有很多种,常见的有两种 get和post)
*** 代码
<form action="hello.html" method="get"></form>
** get和post提交,在默认情况下,提交方式是get提交
*** get提交方式会在地址栏携带数据,安全性很差
*** post提交方式地址栏不会携带数据,安全性比较高,数据在请求体里面(讲到http协议时候详细说)
(4)输入项:可以输入内容或者选择内容的地方
** 要求1:输入项里面必须要有name属性
** 要求2:在单选输入项和复选输入项以及下拉选择输入项里面
都需要有属性value,设置的值
* 输入项需要写到form标签里面
* 大部分输入项是通过标签input进行封装操作的
** <input type="输入项的类型"/>
第一个:普通输入项 <input type="text"/>
第二个:密码输入项 <input type="password"/>
第三个:单选输入项 <input type="radio"/>
** 要求:单选输入项里面必须有name属性,同时name的属性值必须要相同
** 设置默认选中,使用属性 checked="checked"
第四个:复选输入项 <input type="checkbox"/>
** 要求:单选输入项里面必须有name属性,同时name的属性值必须要相同
** 设置默认选中,使用属性 checked="checked"
第五个:文件输入项,上传文件的。<input type="file"/>
第六个:隐藏项,这个值不会显示在页面上,但是提交表单也可以提交到服务器上
<input type="hidden"/>
第七个:普通按钮 <input type="button"/>
*** 可以写value属性,设置输入项的默认值
(5)下面的两个输入项不是使用input标签进行封装的
第八个:下拉选择输入项
* <select>
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
</select>
* 使用属性 selected="selected" 默认选中
第九个:文本域
* <textarea cols="10" rows="5"></textarea>
(6)提交按钮和其他的按钮
* 提交按钮: <input type="submit"/>
** 属性 value:设置提交按钮显示的内容
** 点击提交按钮:地址发生了变化
file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?sex=on&love=on&love=on
** 在输入项上面写name属性之后,提交表单
file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html
?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test
** 在单选框、复选框和下拉选择框里面设置了value之后,提交表单
file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html
?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test
* 重置按钮:<input type="reset"/>
** 属性 value:设置重置按钮显示的内容
** 不是做清空表单输入项的操作,使表单输入项回到初始状态
* 使用图片进行提交:<input type="image" src="图片路径"/>
8、其他的标签的使用
(1)pre:原样输出
p:段落标签
s:删除线
u: 下划线
b:加粗
i:斜体
(2)div : 自动换行
span:在一行进行显示
9、案例:注册页面
(1)如果单元格里面没有内容,使用占位符替代(使用空格 )
(2)想要一个超链接没有效果,在href属性值写成#
day01
CSS
1、css的简介
(1)什么是css?层叠样式表
* 样式表:有很多的属性和属性值,来设置内容样式
* 层叠:一层一层的,样式的优先级。
** 优先级: 最终以谁的样式为准
* 使用css目的是:把网页的内容和样式进行分离,利用代码的维护。
* 想要使用css,不能单独使用,要和html结合使用
* css和html的如何结合使用。
2、css和html的结合方式
(1)css和html有四种结合方式
第一种:使用html标签里面的属性 style="css的代码"
* 代码 <div style="background-color:red;color:blue;">
第二种:使用html的标签
* <style type="text/css">
css的代码;
</style>
* 代码
<style type="text/css">
div {
background-color:red;
color:black;
}
</style>
第三种:使用html标签实现 link,写在head里面
* 首先创建css文件,在css文件里面写css代码
* 在html中使用link标签引入css文件
* 代码 <link rel="stylesheet" type="text/css" href="1.css"/>
第四种:使用html的style标签,在标签里面使用语句样式操作
* 首先创建css文件,在css文件里面写css代码
* 写style标签,在标签里面 @import url(css路径);
3、css的选择器
(1)css优先级
* 在一般情况下,优先级是后加载的优先级高
(2)格式规范: 属性名称1:属性值1;属性名称2:属性值2;
(3)选择器:作用在哪个标签上(要对哪个标签里面的内容进行操作)
* css有三个基本选择
第一个:标签选择器
** 使用标签名称作为选择器
div {
background-color: red;
}
第二个:class选择器
** 每个html标签上面都有一个属性class,通过设置class属性的值
** 代码
.haha {
background-color:red;
}
第三个:id选择器
** 每个html标签都有一个属性id,通过设置id的属性值
** 代码
#hehe {
background-color:green;
}
(4)选择器的优先级
* style > id选择器 > class选择器 > 标签选择器
4、css的扩展选择器
(1)关联选择器
* 设置嵌套标签的样式
** 代码
div p {
background-color:red;
}
(2)组合选择器
* 设置不同的标签具有相同的样式
* 代码
div,p {
background-color:green;
}
(3)伪元素选择器
* 比如超链接为例,
* 状态:原始状态、鼠标放上去的状态、点击状态、点击之后的状态
:link :hover :active :visited
HTML
1、html的简介
(1)什么是html?HyperText Mark-up Language ,超文本标记型语言,是网页的语言。
* 超文本:超出文本的范畴
* 标记:理解为标签,html中所有的操作都是通过标签来实现的
* html是做网页。
* 第一个html程序
= 代码 <font color="red" size="5">这是我的第一个html程序</font>
(2)html程序遵循一定的规范
第一个:html程序以<html>开始,同时</html>结束
* 比如创建java里面方法,public void add() { 方法体 }
第二个:html程序包含两部分内容:head和body
* <html>
<head>设置页面信息</head>
<body>显示到页面上的内容</body>
</html>
第三个:html的标签有开始标签,同时也要结束标签
第四个:html的代码不区分大小写的
第五个:有些标签没有结束标签,需要在标签内结束 <br/>
* 实现换行的操作,使用标签实现的<br>, 没有</br>
(3)html的操作思想
* 在网页中可能有很多的数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据包起来
(封装),通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器,通过修改容器的属性值,
实现容器内数据样式的变化。
2、字体标签
(1)文字标签 <font>
* <font color="设置文字颜色" size="文字的大小">要操作的文字的内容</font>
** 常用两个属性
*** color:设置文字的颜色
**** 有三种表示方式
第一种:直接使用英文单词进行表示 red green yellow......
第二种:使用十六进制数字进行表示 #ffffff,
** 通过RGB
第三种:使用RGB颜色值配置 rgb(255,0,0)
*** size:设置文字的大小
**** 文字大小值范围:1-7,如果值超过了7,使用还是7的效果
(2)标题标签
* <h1></h1> <h2></h2>.......<h6></h6>
** 标题标签可以自动换行,从h1到h6字体的大小依次变小的
(3)水平线标签
* <hr/>
* 属性
** color:表示设置水平线颜色
** size:设置水平线的粗细,范围1-7
(4)注释标签
* 在java里面有几类注释?三类注释
** 单行注释,多行注释,文档注释
* 在html中注释 <!-- 注释的内容 -->
** 使内容不在html页面中进行显示
(5)特殊字符
* 实现空格的操作
3、列表标签
(1)想要实现:
传智播客
java学院
人事部
学工部
* 首先需要使用 <dl></dl>: 定义列表的范围
* 之后在dl标签里面,<dt></dt>: 定义上层内容
* 在dl标签里面, <dd></dd>: 定义下层内容
** 代码
<dl>
<dt>传智播客</dt>
<dd>java学院</dd>
<dd>人事部</dd>
<dd>学工部</dd>
</dl>
(2)有序列表标签
1.java学院
2.人事部
3.学工部
a.java学院
b.人事部
c.学工部
i.java学院
ii.人事部
iii.学工部
* 使用 <ol></ol>: 定义有序列表的范围
** ol标签上面有属性 type:排序的方式
** type属性里面的值 1 a i
* 之后在ol标签里面:<li></li>: 封装具体的内容
** 代码
<ol>
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ol>
(3)无序列表标签
(特殊符号)java学院
(特殊符号)人事部
(特殊符号)学工部
* 首先使用标签 <ul></ul>: 定义无序列表的范围
** ul标签上面有属性 type:设置特殊符号
** type属性里面的值 disc circle square
* 之后在ul标签里面: <li></li>: 封装具体的内容
** 代码
<ul>
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ul>
4、图形标签
(1)在html中显示图片
(2)标签:<img src="图片的路径名称"/>
(3)属性:
* src:图片的路径名称
* width:图片宽度
* height:图片的高度
* border:图片的边框的粗细
* alt: 显示在图片上面的内容
** 鼠标移动到图片上面,稍等片刻出现文字
** 如果图片找不到,显示alt的内容
*** 这个属性在某些浏览器不能显示的
5、超链接标签
(1)什么是超链接:点击打开新的内容
(2)标签:<a href="链接到的地址">显示在页面上的内容</a>
* 代码 <a href="hello.html">显示在页面上的内容</a>
(3)属性
* href:链接到地址
* target:超链接的打开方式
** 在默认的情况下,打开方式在当前的页面打开
** target里面的值:_self,当前页面打开; _blank,在新标签页打开
6、表格标签
操作技巧:
首先数表格里面有多少行,数每行里面有多少个单元格
(1)什么是表格:对数据进行格式化,使数据显示更加清晰,结构分明
(2)标签
* 首先定义表格的范围:<table></table>
** 属性
*** border:设置表格线
*** bordercolor:设置表格线的颜色
*** cellspacing: 设置单元格之间的距离
*** cellpadding: 设置文字和单元格之间的距离
*** width: 设置表格的宽度
*** height:设置表格的高度
* 在table标签里面表示行: <tr></tr>
** 属性
*** align:设置对齐方式,值 left center right
* 在tr标签里面表示列: <td></td>
** 属性
*** align:设置某个单元格对齐方式
* 在tr标签里面也可以表示单元格:<th></th>
** 实现居中和加粗的效果
(3)合并单元格
* 是在td标签上面进行的操作,使用两个属性
** rowspan:跨行
*** 代码 <th rowspan="4">人员信息3人</th>
** colspan:跨列
*** 代码 <td colspan="3">统计信息3人</td>
(4)标题标签:<caption>标题内容</caption>
7、表单标签
(1)什么是表单?把输入的数据提交到服务器上(存到服务器),这个过程称为表单
(2)使用表单标签实现数据提交到服务器上这个过程
(3)form 标签:如果写表单,首先定义表单的范围
* 属性
** action:提交的服务器的地址
** method:表单的提交方式(有很多种,常见的有两种 get和post)
*** 代码
<form action="hello.html" method="get"></form>
** get和post提交,在默认情况下,提交方式是get提交
*** get提交方式会在地址栏携带数据,安全性很差
*** post提交方式地址栏不会携带数据,安全性比较高,数据在请求体里面(讲到http协议时候详细说)
(4)输入项:可以输入内容或者选择内容的地方
** 要求1:输入项里面必须要有name属性
** 要求2:在单选输入项和复选输入项以及下拉选择输入项里面
都需要有属性value,设置的值
* 输入项需要写到form标签里面
* 大部分输入项是通过标签input进行封装操作的
** <input type="输入项的类型"/>
第一个:普通输入项 <input type="text"/>
第二个:密码输入项 <input type="password"/>
第三个:单选输入项 <input type="radio"/>
** 要求:单选输入项里面必须有name属性,同时name的属性值必须要相同
** 设置默认选中,使用属性 checked="checked"
第四个:复选输入项 <input type="checkbox"/>
** 要求:单选输入项里面必须有name属性,同时name的属性值必须要相同
** 设置默认选中,使用属性 checked="checked"
第五个:文件输入项,上传文件的。<input type="file"/>
第六个:隐藏项,这个值不会显示在页面上,但是提交表单也可以提交到服务器上
<input type="hidden"/>
第七个:普通按钮 <input type="button"/>
*** 可以写value属性,设置输入项的默认值
(5)下面的两个输入项不是使用input标签进行封装的
第八个:下拉选择输入项
* <select>
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
</select>
* 使用属性 selected="selected" 默认选中
第九个:文本域
* <textarea cols="10" rows="5"></textarea>
(6)提交按钮和其他的按钮
* 提交按钮: <input type="submit"/>
** 属性 value:设置提交按钮显示的内容
** 点击提交按钮:地址发生了变化
file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?sex=on&love=on&love=on
** 在输入项上面写name属性之后,提交表单
file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html
?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test
** 在单选框、复选框和下拉选择框里面设置了value之后,提交表单
file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html
?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test
* 重置按钮:<input type="reset"/>
** 属性 value:设置重置按钮显示的内容
** 不是做清空表单输入项的操作,使表单输入项回到初始状态
* 使用图片进行提交:<input type="image" src="图片路径"/>
8、其他的标签的使用
(1)pre:原样输出
p:段落标签
s:删除线
u: 下划线
b:加粗
i:斜体
(2)div : 自动换行
span:在一行进行显示
9、案例:注册页面
(1)如果单元格里面没有内容,使用占位符替代(使用空格 )
(2)想要一个超链接没有效果,在href属性值写成#
day01
CSS
1、css的简介
(1)什么是css?层叠样式表
* 样式表:有很多的属性和属性值,来设置内容样式
* 层叠:一层一层的,样式的优先级。
** 优先级: 最终以谁的样式为准
* 使用css目的是:把网页的内容和样式进行分离,利用代码的维护。
* 想要使用css,不能单独使用,要和html结合使用
* css和html的如何结合使用。
2、css和html的结合方式
(1)css和html有四种结合方式
第一种:使用html标签里面的属性 style="css的代码"
* 代码 <div style="background-color:red;color:blue;">
第二种:使用html的标签
* <style type="text/css">
css的代码;
</style>
* 代码
<style type="text/css">
div {
background-color:red;
color:black;
}
</style>
第三种:使用html标签实现 link,写在head里面
* 首先创建css文件,在css文件里面写css代码
* 在html中使用link标签引入css文件
* 代码 <link rel="stylesheet" type="text/css" href="1.css"/>
第四种:使用html的style标签,在标签里面使用语句样式操作
* 首先创建css文件,在css文件里面写css代码
* 写style标签,在标签里面 @import url(css路径);
3、css的选择器
(1)css优先级
* 在一般情况下,优先级是后加载的优先级高
(2)格式规范: 属性名称1:属性值1;属性名称2:属性值2;
(3)选择器:作用在哪个标签上(要对哪个标签里面的内容进行操作)
* css有三个基本选择
第一个:标签选择器
** 使用标签名称作为选择器
div {
background-color: red;
}
第二个:class选择器
** 每个html标签上面都有一个属性class,通过设置class属性的值
** 代码
.haha {
background-color:red;
}
第三个:id选择器
** 每个html标签都有一个属性id,通过设置id的属性值
** 代码
#hehe {
background-color:green;
}
(4)选择器的优先级
* style > id选择器 > class选择器 > 标签选择器
4、css的扩展选择器
(1)关联选择器
* 设置嵌套标签的样式
** 代码
div p {
background-color:red;
}
(2)组合选择器
* 设置不同的标签具有相同的样式
* 代码
div,p {
background-color:green;
}
(3)伪元素选择器
* 比如超链接为例,
* 状态:原始状态、鼠标放上去的状态、点击状态、点击之后的状态
:link :hover :active :visited