Javaweb 第1天 HTML和CSS课程

HTML和CSS课程

今日大纲

● 了解Java Web开发

● HTML常用标签

● CSS的使用

*************************************************************************************************

1. 了解Java Web开发

1.1 C/S 和 B/S程序的区别

1、C/S（Client----Server）程序就是在PC机上需要安装或者绿色版的程序。 QQ、WOW、LOL、CF。

2、B/S（Browser---Server）程序就在浏览器上运行的程序（网站）。Sina，baidu，yahoo

3、C/S程序需要安装，更新麻烦。

4、B/S不需要安装，不需要更新，浏览器刷新即可。

5、APP：Application 目前基本上用来专指手机上面的应用程序。

1.2 web阶段课程简介

1.2.1 第一部分

html：做网页

css：美化网页

javascript：操作网页上元素

xml：主要用于框架技术的配置文件

mysql：数据库，存放网站用户的数据

jdbc：用java语言来操作mysql

servlet：用java语言做网站

session和cookies：主要是用来做用户登录

1.2.2 第二部分

jsp：简化servlet

DBUtil：简化jdbc

jstl和el表达式：简化jsp

过滤器和监听器：增加网站功能

文件上传和下载：增加网站功能

国际化：让不同区域的客户端访问网站显示不同的语言

*************************************************************************************************

2. HTML快速入门

2.1 HTML的概念

HTML（Hyper Text Markup Language 超文本标识语言）

是w3c组织制定的一种用来制作超文本文档的简单标记语言。

w3c组织：万维网联盟。w3c制定了一些列的web相关规范（css,js,xml）。其中包括html。

官网：http://www.w3school.com.cn/ ，在官网中，可以去查看html的相关规范。

1、文本：txt中的内容？没有任何格式的普通的文字信息。普通的字符串。

2、超文本：在html中，通过标记（标签）把文本进行标记，它所展现出来的内容，不在仅仅是文本。可以有，图片，音频，超链接。

3、标记：标签。<标签名> ------标签名是w3c组织定义好的。而我们学习html，就是学习w3c已经定义好的标签。html就是由一系列的标签做组成的。浏览器会把不同的标签（标签名不同的）显示出不同的效果。

HTML文档

用HTML编写的超文本文档称为HTML文档。

HTML 文档包含了HTML 标签及文本内容（html文件本身就是一个文本文档，只不过是后缀名，扩展名不相同。html的扩展名是html、htm、xhtml

我们通常使用html作为扩展名，HTML文档也叫做 web 页面

HTML文档的编写方法：

1、手工直接编写记事本等，存成.htm .html格式

2、使用可视化HTML编辑器Frontpage、Dreamweaver等

3、由Web 服务器（或称HTTP 服务器）一方实时动态地生成。

*************************************************************************************************

2.3 使用记事本编写HTML

2.3.1 HTML示例

1、html本身----文本文件。新建文本文件。

2、更改文本文件的后缀名，html，htm，xhtml =======建议大家：使用html作为扩展名。

3、用文本编辑器编辑这个文件。（html是不需要编译的。）

4、在浏览器中查询效果。

2.3.2 HTML标签

标签分为单标签和双标签。

单标签:<标签名 /> 后面的斜杠表示标签的结束。通常叫做标签的闭合。

双标签:<标签名> 内容(普通的文字，或者其他标签) </ 标签名>

前面的标签，叫做开始标签

后面的标签，叫做结束标签

注意：书写双标签的时候，把开始标签和结束标签同时书写，然后再去书写标签的内容。防止少些结束标签。

在html中。不区分大小写的。建议大家以后都小写。

标签的属性

1.什么是属性

这里的属性指的是标记的属性

2.属性语法

<标记名字属性1 属性2 属性3 .....>

2.3.3 HTML组成

<html> ------理解成html的开始；定义一个html文档。整个页面的开始

<head> -----定义html中头部的信息，不作为浏览器显示的内容。（不会再浏览器的窗体中显示。）

例如：页面的描述，标题等等

</head>

<body>

定义了html 的主体。显示在浏览器的内容。

</body>

</html> ------理解成html的结束

代码：

<html>

<head>

</head>

<body>

<b>Hello</b>World

</body>

</html>

*************************************************************************************************

2.4 使用MyEclipse编写HTML

1、建立web工程

File -> New -> Web Project

选择下一步（Next）、下一步（Next），到下面的界面时候注意：

点击Finish（完成）

2、创建html文件

通常我们会在项目中的WebRoot目录下创建html文件（页面文件）

在WebRoot目录点击右键，选择New -> HTML(Advanced Templates),

如果有的同学没有就在最下面的Other里面找，Other里面的html位置为：

点击Finish，HTML文件创建成功。

如不需要以MyEclipse可视化编辑模式打开，可以参照资料中的《myeclipse配置1.doc》中的 -- 4、更改html的默认打开方式进行修改

MyEclispe生成的HTML模版文件详解：

3、在模版页面基础上编写HTML代码

body中的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>宝宝心里苦</title>

</head>

<body>

Hello

<br />

world

<br />

</body>

</html>

4、运行：

在要运行的HTML文件上点击鼠标右键，选择MyEclispe -》 Open in Explorer

即可快速到达工作台目录，双击HTML文件即可通过浏览器方式打开运行

*************************************************************************************************

3. HTML常用标签

3.1 基本标签

3.1.1 注释

注释在页面展现的时候看不见，但是在html源代码中可以看见。

3.1.2 标题

h后面的数字可以1~6，代表不同大小级别的标题

3.1.3 水平线

<hr/>

"/>"表示单标签的闭合----闭合表示结束。

3.1.4 换行

<br/>

html代码中按回车，页面展示并不会真的换行，必需使用<br/>

3.1.5 段落

<p>这里是一个段落</p>

HTML 会自动在段落前后添加一个额外的空行。

3.1.6 字体

定义html中的字体的大小，颜色，以及字体类型（宋体，楷体）

属性：

size：定义字体的大小

color：定义字体的颜色

face：定义字体的类型-------需要用户的电脑支持。如果不支持，就采用默认的字体。

颜色在网页上有三种表示方法：

1、英语单词

2、三原色 #颜值颜值颜值

3、rgb(0~225,0~225,0~225);

基本标签代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<!-- 这里是注释，

可以单行可以多行 -->

<br/>

<p>HTML 会自动在段落前后添加一个额外的空行。</p>

定义html中的字体的大小，颜色，以及字体类型（宋体，楷体）

</font>

定义html中的字体的大小，22222222222

</font>

定义html中的字体的大小，22222222222

</font>

</body>

</html>

*************************************************************************************************

3.2 图片和多媒体标签

3.2.1 图片

img标签，定义了一个图片。（img是一个单标签）

互联网中存在很多的图片资源，浏览器显示的时候，找到img标签，浏览器就会显示出那个图片

属性

src：指定图片的位置

定义图片的宽度

height :定义图片的高度

如果同时定义高度和宽度可能图片会失真。

定义其中的一个，图片会按照原理的百分比进行缩放

alt：鼠标放上去显示文本，已经过期不能用的方法，现在用title来取代

相对路径的写法：

文件名当前目录

../文件名上一级目录

3.2.2 视频（了解）

语法：<embed src="多媒体文件名称" width=宽度 height=高度 loop=播放次数>

3.2.3 背景音乐（了解）

语法：<bgsound src=背景音乐位置 loop=循环次数>

图片标签代码：

*************************************************************************************************

3.3 超链接标签

3.3.1 基本超链接

语法：<a href=资源地址>链接文字</a>

3.3.2 新开方式超链接

target属性:用于指定打开链接的目标窗口，默认属性为原窗口，如果是打开一个新窗口，可以设置target=_blank。

3.3.3 锚点

通俗简单地说，比如一篇很长的文章，你想按分段精确来看，那就可以用到锚点了。

1、设置锚点：

<a name="mao">bbbbbb</a>

2、指定超链接跳转到锚点：

<a href="#mao">跳转到锚点连接</a>

3、不发生任何跳转

超链接代码：

<a target="_blank" href="3.2.1.图片.html">我的链接新开</a>

<br /> 很长很长的文章

<br />很长很长的文章

。。。。

。。。。

<br /> 很长很长的文章

<br />很长很长的文章

*************************************************************************************************

3.4 列表标签

3.4.1 定义列表

基本语法：

<dl>

<dt>名称<dd>说明

</dl>

<dt>定义组成列表项名称部分

<dd>解释说明定义的项目名称

代码：

<dl>

<dt>联系人

<dd>毛赟

<dt>电话

<dd>17077782591

<dt>住址

<dd>暴风城

</dl>

3.4.2 无序列表

基本语法:

<ul>

</ul>

ul标签的type属性：

type="disc": (默认)实心圆

type="circle" : 空心圆

type="square" : 实心矩形

代码：

</ul>

3.4.3 有序列表

基本语法

</ol>

Type:设定符号类型，属性值有1,A,a,i,I

Start:设定列表的符号从第几项开始

ol标签的type属性：

type="1": (默认)数字

type="a" : 英文字母

type="i" : 罗马字母

代码：

</ol>

*************************************************************************************************

3.5 表格标签（重点）

3.5.1 基本表格

基本语法：

<table>

<tr>

</tr>

</table>

语法说明：

<table>: 定义表结构

<tr>: 定义行结构

<td>: 定义列结构

代码：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

3.5.2 合并单元格

在td标签上有连个属性-----属性值：数字，表示跨行或者跨列的个数。

1、colspan：跨列

代码：

<tr>

<td colspan="2">姓名加性别</td>

</tr>

<tr>

</tr>

</table>

2、rowspan：跨行

代码：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

3.5.3 表头

<th></th> 与td 效果一样，变得粗一些，可以做表格第一行表示列名

代码：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

*************************************************************************************************

3.6 布局标签

3.6.1 div标签

使用div去进行页面的布局。后面会讲到 div + css

代码：

div会默认换行

3.6.2 span标签

代码：

span不会默认换行

*************************************************************************************************

3.7 表单元素标签（重中之重）

3.7.1 表单标签

基本语法：

</form>

name:设置表单名称

method：设置表单发送的方法，可以是"post"或者"get"

action：设置表单发送地址

3.7.2 文本框

value="" : 表示元素初始的默认值

3.7.3 密码框

3.7.4 单选按钮

checked="checked" : 表示该单选按钮选中

3.7.5 复选框

checked="checked" : 表示该复选框选中

3.7.6 文件域

用于上传文件

3.7.7 下列列表

</select>

selected="selected" ：表该下拉子选项被选择

3.7.8 文本域

<textarea rows="" cols="">很多文字的，需要多行的时候使用</textarea>

rows="" ：占几行

cols="" ：占几列

3.7.9 普通按钮

3.7.10 提交按钮

3.7.11 重置按钮

表单元素标签代码：

用户名：<input type="text" value="maoyun" /><br/>

密码：<input type="password" /><br/>

性别：

男<input type="radio" name="sex" checked="checked" />

女<input type="radio" name="sex" /> <br/>

兴趣爱好：

唱歌<input type="checkbox" />

跳舞<input type="checkbox" checked="checked" />

吃饭<input type="checkbox" />

睡觉<input type="checkbox" />

<br/>

用户头像:<input type="file">

<br/>

所在地：

</select>

<br/>

自我介绍：

<br/>

<textarea rows="5" cols="30">这家伙很懒，什么也没留下</textarea>

<br/>

</form>

*************************************************************************************************

3.8 字符实体

最常用的字符实体

显示结果	描述	实体名称	实体编号
	空格	半角的不断行的空白格（推荐使用） &ensp; 半角的空格 &emsp; 全角的空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'

其他字符实体

显示结果	描述	实体名称	实体编号
￠	分	¢	¢
£	镑	£	£
¥	日圆	¥	¥
§	节	§	§
©	版权	©	©
®	注册商标	®	®
×	乘号	×	×
÷	除号	÷	÷

字符实体最主要的作用是可以网页上显示html特定的标签语法字符，比如<br/>

代码：

<br/>

<br/>

2222222     33333333333

2222222 &emsp;&emsp; 33333333333

*************************************************************************************************

3.9 框架标签（了解）

框架标签：把页面分割成几个部分。并且把其他页面，引入该页面。

frameset标签：把页面分割成若干个部分。负责切割页面

rows属性：把页面分割成若干个行，

rows="10%,90%"

用"逗号"分开，表示分割成几行,并且指定每行的高度

例如 rows="20%，*" 把页面分割成两个部分。（把页面分割成2行）

cols 属性：把页面分割成若干的列。用"逗号"分开，表示分割成几列，表示每一列的宽度

举例：cols=" 20%,*" 表示把页面分割两个部分。左右，左边占有页面的20% 宽度，剩下的右侧的宽度

frame标签：引入其他的页面资源。书写在frameset标签内

frame的属性介绍：

src属性：引入其他页面的资源路径。

注意：不能和body标签一起使用

代码：

</frameset>

*************************************************************************************************

4. CSS 快速入门

4.1 CSS简介

CSS(Cascading Style Sheet,层叠样式表)是一种标记性语言，与HTML是"表兄弟"。

样式表技术诞生于1996年，需要浏览器支持，现在大多数浏览器都支持CSS。

它允许在html文档中加入样式，如字体类型、颜色、大小等。

对于设计者来说它是一个非常灵活的工具，可以将所有有关于文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供html调用而不必再把繁杂的样式定义编写在文档结构中

CSS语法规则：

样式符attributes1:values1;attributes2:values2;…

关于样式表的语法，要注意以下几个问题。

1、属性和属性值之间用":"分隔。

2、当有多个属性时，用";"进行区分。

3、在书写属性时属性之间使用空格换行等，并不影响属性的显示。

4、如果一个属性有几个值，则每个属性值之间用空格分隔开。

*************************************************************************************************

4.3 CSS样式加载方式（重点）

4.3.1 行内样式

几乎所有的html标签上都有style属性

在style属性中书写css代码：

代码：

注意：行内样式的作用范围只会影响到当前某行的html的元素

*************************************************************************************************

4.3.2 内部样式

使用上面的行内样式，如果出现了多个标签需要相同的样式，这时会出现css代码严重重复

在<head></head>中编写样式代码，可以影响到整个页面的相关元素

格式：

CSS代码

</style>

<head></head>中的代码：

div{

color: red;

width: 100px;

height: 100px;

/*solid 实线 CSS的注释*/

border: 1px solid;

}

</style>

<body></body>中的代码：

<br/>

*************************************************************************************************

4.3.3 外部样式

使用上面的内部样式，如果出现了多个页面需要相同的样式，这时会出现css代码严重重复

外部样式：通过外部定义一个css文件，定义全局的样式，然后在html中将css文件引入进来，则会对此页面产生效果。如果其它页面需要，按照此方法即可。

1、编写一个css文件（该文件的扩展名为.css）,写入如下内容：

div{

color: blue;

width: 100px;

height: 100px;

/*solid 实线 CSS的注释*/

border: 1px solid;

}

2、在<head></head>中写入：

注意：也可以通过内部样式的方式来引入外部样式（了解）

@IMPORT url("css/mao.css");

</style>

*************************************************************************************************

4.3.4 加载方式的优先级

就近原则：谁离html元素距离近，就按谁的做

行内样式 > 内部样式 > 外部样式

代码：

div{

color: blue;

width: 100px;

height: 100px;

/*solid 实线 CSS的注释*/

border: 1px solid;

}

head：

div{

color: yellow;

}

</style>

body：

*************************************************************************************************

4.4 CSS样式选择器（重点）

样式选择器是指选择样式的方式，主要运用与内部样式和外部样式。

4.4.1 标签名选择器

通过html标签名来进行选择

写法：

标签名{属性：属性值；。。。。}

标签名：html中标签的名字，例如div，span。。。img，a

作用：会把css代码作用到所有的该标签名的标签。

<head></head>中的代码：

div {

color: red;

width: 100px;

height: 100px;

/*solid 实线 CSS的注释*/

border: 1px solid;

}

input{

color: red;

width: 100px;

height: 100px;

/*solid 实线 CSS的注释*/

border: 1px solid;

}

</style>

<body></body>中的代码：

<br />

<br/>

*************************************************************************************************

4.4.2 id选择器

通过html元素标签的id属性来进行选择。

语法：

#id的值{属性：属性值；属性：属性值；。。。。。}

id的值：每个html标签，几乎都有id的属性。（可以唯一的定位到一个具体的标签）。

作用范围：标签中的id值和 css选择器中的id值相同，才会有作用

<head></head>中的代码：

#div1{

border: 1px solid;

width: 100px;

height: 100px;

border-color: red;

}

#div2{

border: 2px solid;

width: 100px;

height: 100px;

border-color: blue;

}

</style>

<body></body>中的代码：

<br />

注意：id="xxx" 千万不要加 "#" 符号

*************************************************************************************************

4.4.3 类选择器

根据html元素标签的class属性进行选择。

语法：

class的值{属性：属性值；。。。。}

class的值：每个html标签几乎都有一个class属性。和选择器中的class的值去对应。

<head></head>中的代码：

.beauty

{

border: 5px solid;

width: 100px;

height: 100px;

border-color: blue;

}

</style>

<body></body>中的代码：

<br />

<br />

注意：class="xxx" 千万不要加 "点" 符号

*************************************************************************************************

4.4.4 选择器的优先级别

具体原则：谁表现的更具体，影响的范围越小，就按谁的做。

id > class > 标签名

<head></head>中的代码：

/*标签名选择器*/

div{

color: red;

}

/*class选择器会覆盖标签名选择器*/

.beauty

{

color: yellow;

}

/*id选择器会覆盖 class选择器*/

#div1

{

color: blue;

}

</style>

<body></body>中的代码：

*************************************************************************************************

5. CSS特殊属性（了解）

5.1 伪类

伪类：根据标签的各种状态，去修饰标签的样式。

语法：

选择器：伪类｛属性：属性值；。。。。。｝

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link ( 有链接属性的时候显示 -- href 属性 )

a:visited ( 链接地址被访问过 )

　　a:hover ( 鼠标移动到超链接上面 )

a:active ( 鼠标点击瞬间 )

<head></head>中的代码：

a:LINK { /*有链接属性的时候显示 -- href 属性*/

color: black;

text-decoration: none; /*去掉下划线*/

}

a:VISITED { /*链接地址被访问过*/

color: gray;

text-decoration: none; /*去掉下划线*/

}

a:HOVER { /*鼠标移动到超链接上面*/

color: red;

}

a:ACTIVE { /*鼠标点击瞬间 */

color: blue;

}

</style>

<body></body>中的代码：

*************************************************************************************************

5.2 边框属性

盒子模型：在html中。每一个标签占有一定的空间。这个空间通常是矩形（长方形）的。

边框： border

外边距： margin

内边距： padding

<head></head>中的代码：

#div1 {

width: 400px;

height: 400px;

border: 5px solid;

border-color: red;

}

#div2 {

width: 200px;

height: 200px;

border: 15px solid;

border-color: blue;

margin: 10px;

padding: 10px;

}

#div3 {

width: 80px;

height: 80px;

border: 20px solid;

border-color: yellow;

}

</style>

<body></body>中的代码：

</div>

*************************************************************************************************

5.3 浮动属性

float属性作用：告诉浏览器该标签是否浮动，以及如何浮动。目的：布局

5.3.1 页面整体布局

float+div 可以做到页面的布局

<head></head>中的代码：

#div1 {

height: 100px;

background-color: red;

}

#div2 {

width: 20%;

float: left;/*从左浮动摆放*/

background-color: green;

height:800px;

}

#div3 {

float: left;/*从左浮动摆放*/

background-color: blue;

height:800px;

width: 80%;

}

</style>

<body></body>中的代码：

*************************************************************************************************

5.3.2 制作导航栏

<head></head>中的代码：

li {

list-style-type: none; /*去掉类型标记*/

float: right; /*浮动靠右摆放*/

margin: 10px;/*外边据间隔*/

}

<body></body>中的代码：

<ul>

</ul>

*************************************************************************************************

Javaweb 第1天 HTML和CSS课程

HTML和CSS课程

今日大纲

1. 了解Java Web开发

1.1 C/S 和 B/S程序的区别

1.2 web阶段课程简介

1.2.1 第一部分

1.2.2 第二部分

2. HTML快速入门

2.1 HTML的概念

2.3 使用记事本编写HTML

2.3.1 HTML示例

2.3.2 HTML标签

2.3.3 HTML组成

2.4 使用MyEclipse编写HTML

3. HTML常用标签

3.1 基本标签

3.1.1 注释

3.1.2 标题

3.1.3 水平线

3.1.4 换行

3.1.5 段落

3.1.6 字体

3.2 图片和多媒体标签

3.2.1 图片

3.2.2 视频（了解）

3.2.3 背景音乐（了解）

3.3 超链接标签

3.3.1 基本超链接

3.3.2 新开方式超链接

3.3.3 锚点

3.4 列表标签

3.4.1 定义列表

3.4.2 无序列表

3.4.3 有序列表

3.5 表格标签（重点）

3.5.1 基本表格

3.5.2 合并单元格

3.5.3 表头

3.6 布局标签

3.6.1 div标签

3.6.2 span标签

3.7 表单元素标签（重中之重）

3.7.1 表单标签

3.7.2 文本框

3.7.3 密码框

3.7.4 单选按钮

3.7.5 复选框

3.7.6 文件域

3.7.7 下列列表

3.7.8 文本域

3.7.9 普通按钮

3.7.10 提交按钮

3.7.11 重置按钮

3.8 字符实体

3.9 框架标签（了解）

4. CSS 快速入门

4.1 CSS简介

4.3 CSS样式加载方式（重点）

4.3.1 行内样式

4.3.2 内部样式

4.3.3 外部样式

4.3.4 加载方式的优先级

4.4 CSS样式选择器（重点）

4.4.1 标签名选择器

4.4.2 id选择器

4.4.3 类选择器

4.4.4 选择器的优先级别

5. CSS特殊属性（了解）

5.1 伪类

5.2 边框属性

5.3 浮动属性

5.3.1 页面整体布局

5.3.2 制作导航栏

6. 总结