zoukankan html css js c++ java

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>

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

6. 总结

查看全文

相关阅读:
一分钟明确 VS manifest 原理
 关于“鸡脚神”的看法
 Android中Context具体解释 ---- 你所不知道的Context
解决android3.0版本号以上应用接收不到开机广播问题
 什么是流利语法Fluent Syntax
vi 命令使用方法
 TinyXml高速入门（一）
reactor设计模式
 ActivityGroup+LinearLayout实现iphone风格的底部tab菜单
 使用ActivityGroup来切换Activity和Layout

原文地址：https://www.cnblogs.com/beyondcj/p/6270849.html