java网页设计_java和网页设计有关吗-CSDN博客

本文链接：https://blog.csdn.net/tyutjavalily/article/details/40405351

本文概述了网页设计的基础概念，包括www、URL、HTTP、HTML等关键组件及其作用，详细介绍了HTML标签、属性、超链接、表单、框架等核心元素的使用方法，并深入探讨了CSS的基本语法和常用属性，提供了实现网页样式与布局的实践指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页设计的概述

1，www: World Wide Web 万维网，是信息检索服务系统，用户主要通过网页的形式进行访问

2，URL(Uniform Resource Locator) ，统一资源定位符，是一种地址

3，HTTP（Hyper TextMarkup Language）超文本传输协议，是应用层协议，从www服务器传输超文本导本地浏览器的传,送协议。

4，HTML（Hyper TextMarkup Language），传输文本标记语言，是www的描述语言

5，浏览器：可以显示网页服务或者文件系统HTML文件内容，并让用户与这些文件进行交互。

6，B/S（Browser/Server）,即浏览器和服务器架，工作的方式是：用户通过浏览器提出URL请求到服务器，服务器返回网页的html文件

7，静态网页和动态网页：

静态网页：纯粹的HTML页面

动态网页：根据具体的情况变化的网页

常用的动态网页的技术:JSP、PHP、ASP

8，常用的网页的设计技术：

HTML：超文本标记语言

CSS：层叠样式表

JavaScript：客户端脚本语言

Flash：Flash动画

美工：网站设计图的设计与制作

Web标准：高级网站的重构技术

9，常用的网站的设计工具：

Dreamweaver,Fireworks,Flash,Photoshop

HTML基础

一、HTML的标签：

1，标题标签：<h1>到<h6>的内容会自动加粗并且显示为黑体，而且会自动换行

2，分段标签：<p></p>

换行标签：<br/>

注意：在html文件中会自动的截取空格，即使有多个空格也会当做一个空格处理

3，常用的格式标签：

<em></em> 斜体

<strong></strong>粗体

<sub></sub>下标

<sup></sup>上标

4，注释语句的标签：

5，列表标签：

1）有序列表：

<ol type=”a”>标签会另起一行显示。要和<li>标签配合使用

ol的属性：

l: 阿拉伯数字序列

a: 小写字母

A：大写字母

i: 小写的罗马

I: 大学的罗马

例子：

<html>

<head>

</head>

<body>

<h2>我最喜欢的娱乐方式</h2>

<ol>

</ol>

</body>

</html>

2)无序的列表

<ul>

ul的属性：

disc: 默认的是黑圆点

circle: 默认的是空心圆

square: 方块

3)定义类表

<dl></dl>标签会另起一行显示

<dt></dt> 定义的题目

<dd>: 定义的描述

例子：

<html>

<head>

</head>

<body>

<h2>热门游戏推荐</h2>

<dl>

<dd>是一种团队合作为主的射击类网络游戏</dd>

<dd>一款强调休闲，时尚和交友的在线多人3D界面音乐舞蹈游戏</dd>

</dl>

</body>

</html>

二、HTML的属性：

1，align ：对齐的方式

2，style：控制网页的内容的样式

color: 颜色

font-size:字号

3，背景颜色：background-color 背景颜色值可以使用16进制来表示，且可以缩写，例如：#ffccff 可以缩写为 #fcf

4，几种常用的颜色：aqua 英['ækwə] 美[ˈækwə, ˈɑkwə] n. 浅绿色，水绿色,

Fuchsia /fjushe/ :紫红色，Lime/laime/绿黄色 maroon /merun/酱紫色

Navy 海军蓝，olive ：橄榄色，silver：银色，teal：蓝绿色

5,<div>:块状容器，默认的状态就是占据整个一行

<span>:行间容器，默认的状态就是行间的一部分，占据的行间的长短由内容的多少来决定

6，<marquee>:滚动字幕

属性有：direction: 移动的方向

loop：循环的次数

scrollamount:移动的速度

align:对齐的方式

Onmouseover：鼠标经过

Onmouseout：鼠标离开

7，字符实体：

显示一个空格：  

小于： &lt

大于： >

&符号： &

双引号： "

版权： &copy

注册商标：&reg

乘号：&times

除号：&divide

人民币：¥

镑： £

8,文件的路径：

绝对路径和相对路径;

相对路径中：网页和要链接的东西在同一个目录下

三种情况：

Src=”**.jpg” :当前目录

Src=”**/**.jpg”:下级目录

Src=”../**.jpg”:当前目录的上一层

9，<image src=”URL” title=””/>

这里的src的属性值URL是图片的路径和名称，一般是相对的路径

这里的title的属性值是鼠标经过的时候显示的文字的提示

10，background-image：url() :是style的一个子属性，给页面添加背景图片，url的参数值是背景图片的路径

三、超链接

1，外部链接和内部链接：格式为：<a herf=“URL”>超链接名</a>

注意：当url为# 的时候表示是空链接

2，title属性：超链接的说明文字，当鼠标悬浮在上面的时候，会出现超链接进行说明

target=”_blank”:在新的浏览窗口中打开超链接。

target的属性：

_self: 在当前的窗口中打开链接

_blank:在新的窗口中打开链接

_top:在顶层的框架中打开链接

_parent:在当前窗口的上一层里打开链接

framename:在指定的框架中打开链接

3，描点链接：

1，创建命名描点，格式：<aid=”描点名称”>具体的内容</a>

2, 链接到命名的描点,格式：<a herf=”#描点名称”>超链接</a>

例子：

<html>

<head>

</head>

<body>

<ul>

<li><aherf="#ch1">第一章开始</a></li>

<li><aherf="#ch2">第二章故事</a></li>

<li><aherf="#ch3">第三章结尾</a></li>

</ul>

<h2><a id="ch1">第一章开始</a></h2>

………

…………

<h2><a id="ch2">第二章故事</a></h2>

<h2><a id="ch3">第三章结尾</a></h2>

……】

……

</body>

</html>

四、表格的基本的标签

1，表格标签<table>

2, 表格标题<caption>

3, 行标签<tr>

4, 单元格标签<td>

5,表头标签:<th> 默认的是粗体居中显示

6，<th colspan="3">期末成绩</th> :colspan:表示单元格需要合并的列数

<th rowspan="3">期末成绩</th>：rowspan:表示的是单元格需要跨越的行数

7，表格的编组标签：

表头：<thead>

表格内容：<tbody>

脚注： <tfoot>

五、表单

1，HTML的表单的作用是采集和提交用户输入的信息

格式：

<form>

表单的内容

</form>

2,表单中常用的控件

input type=”text” 单行的文本框输入

input type=”password” 密码输入框

input type=”radio” 单选框

input type=”checkbox” 复选框

input type=”submit” 将表单中的信息提交给action所指向的文件

input type=”reset” 清楚用户所填的所有的信息，回到初始的状态

input type=”image” 图片提交按钮

input type=”file” 文件提交按钮

input type=”button” 普通的按钮

select 下拉框

textarea : 多行文本输入框

3，文本域和按钮：

注意：name没有视觉的系那是，它是在服务器端调用表单信息的时候使用的

value=“预设内容”

maxlength=”数值”：设定此空间可输入的最长的长度

例子：

<form>

<h3>简单的登录页面</h3>

姓名：<input type="text"name="your_name" size="20"/><br/>

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

确认密码：<inputtype="password" name="pasl"/><br />

您的主页的地址：<inputtype="text" name="add" value="http://"/><br/>

<inputtype="submit" value="发送">

<inputtype="reset" value="重设">

</form>

4，多行文本和下拉菜单

<form>

您的性别是：<br />

<input type="radio"name="sex" value="boy"/>男生

<input type="radio"name="sex" value="girl" checked="checked"/>女生

您最喜欢的休闲的活动是：<br />

<input type="checkbox"name="enjoy" value="music"/>听音乐

<input type="checkbox"name="enjoy" value="moive"/>看电影

</form>

注意：checked 是默认的选项，可以减少部分用户的输入操作，提升表单的可用性

<form>

您的性别是：<br />

<input type="radio"name="sex" value="boy"/>男生

<input type="radio"name="sex" value="girl" checked="checked"/>女生

您最喜欢的休闲的活动是：<br />

<input type="checkbox"name="enjoy" value="music"/>听音乐

<input type="checkbox"name="enjoy" value="moive"/>看电影

</form>

注意：这里的<option>标签是下拉菜单的选择项

5，表单中的两个重要的属性：action和method:

例子：

<h2>关于这本书的建议</h2>

<formaction="http://www.baidu.com.cn" method="post">

<tr>

<tdwidth="200"><label for="cl">这本书对您是否有帮助？</label></td>

<tdwidth="300">

有<input type="radio" name="help"id="cl"/>

无<input type="radio" name="help"/>

</td>

</tr>

<tr>

<td><labelfor="sug">请留下您的宝贵的建议：</label></td>

</tr>

<tr>

<tdcolspan="2">

<inputtype="submit" value="提交">

<inputtype="reset" value="重置">

</td>

</tr>

</table>

</form>

注意：

1，表单中的控件：用户可以输入文字信息或从选项中选择进行提交的操作

2，表单中的action：指明了处理表单信息的文件

3，表单中的method:表示了发送表单信息的方式

method有两个值：get和post。get将表单中的name和value信息经过编码之后，通过url发送，信息量较小。post将表单的内容通过http发送，在地址栏看不到表单提交的信息，信息量较大。

4，<label for="cl"> 其中的for属性指定与该标签相关联的表单标签控件，单机label标签内的这段文字的时候，对应的单选控件会响应

Label标签的好处：无论用户单击文本还是单选按钮，对应的单选按钮都会产生响应，从而提升表单的可用性，改善表单的交互问题。

六、框架

1，框架集：可以在一个浏览器窗口同时显示多个网页

2，框架集的定义：<frameset>...</frameset

3，<frame>这个标签可以设定单个的标签页面，有很多的属性

src属性：网页的路径和文件名

name属性：框架的名称

frameborder属性：框架的边框，只有0和1两种属性，0是不显示，1是显示

scrolling属性：是否显示滚动条效果。yes是显示卷轴，no是不显示，auto是视情况而定

Noresize属性：使用者不可以改变边框的大小

target=”_top”: 在顶层框架中打开

Target=”_parent”在当前框架的上一层打开

4，<iframe>是Inline Frame的意思

5，<embed>标签的作用是播放多媒体

属性：

src=”main.mpg” :视频的源文件

loop=true ：视频循环播放

align=”middle” :居中显示

quality=”high” :质量为高

allowscriptaccess=”allways”:允许脚本

mode(wmode)=”transparent”：背景透明

6，<bgsound>：背景音乐

loop=-1，是无限循环

CSS 基础

一、入门

1,CSS的优点：

² CSS让内容和样式相互的隔离，让HTML页面更容易的理解，让网页代码更少，减轻服务器的负担

² CSS更精细、灵活地控制网页的内容形式

2，CSS的语法：

CSS样式定义在HTML的头部，定义的格式是：

样式名1{样式属性：属性值1；样式属性2：属性值；}

样式名2{样式属性: 属性值1; 样式属性2：属性值；}

</style>

例子：

<html>

<head>

<title>第一个CSS</title>

<!--

h2{

color:green;

}

span{

color:red;

font-size:20px;

}

-->

</style>

</head>

<body>

<span>span标签</span>

<span>span标签2</span>

</body>

</html>

是越过标记

二、常用的属性

1，css的常用的属性：

字体名称属性：font-family

字体大小属性：font-size;;

字体风格属性：font-style;

字体浓淡属性：font-weight

字体颜色属性：color

字体对齐的方式：text-align

文本修饰属性:text-decoration（underline,overline,line-through,none）

行高属性：line-height

字间距离属性：line-spacing

高度：height

宽度：width

边框:border

列表的样式类型：list-style-type

行首缩进：text-indent

2,标签选择器：就是使用HTML已经有的标签作为名称的选择器,例如：h1,h2等等

例子：

<html>

<head>

<styletype="text/css">

li{

line-height:24px;

height:24px;

}

color:#906;

text-decoration:none;

font-size:14px;

}

span{

color:#039;

font-size:12px;

}

</style>

</head>

<body>

<li>

<a href="#">网页三剑客</a>

</li>

<li>

<a href="#">css选择器与html标签</a>

<span>紧密结合的</span>

</li>

</body>

</html>

3，ID选择器：id选择器是以#开头的

例子：

<html>

<head>

#box{

background-color:#fee;

border:1pxsolid #999;

height:200px;

width:500px;

}

</style>

</head>

<body>

<div id="box">盒子BOX</div>

</body>

</html>

4，CLASS选择器：命名以 “.”开头：

例如：

.list{

font-size:36px;

background-color:#cf9;

}

注意：类选择器可以进行个性化处理，可以使用多次

例子：

<html>

<head>

<title>类选择器与标签选择器</title>

<style type="text/css">

font-size:14px;

line-height:30px;

color:#036;

text-decoration:none;

}

.red{

color:#foo;

}

</style>

</head>

<body>

<ul>

<li><a href="#"class="red">基于psd设计图的网页设计流程与实例</a></li>

<li><ahref="#">Dreamweaver框架的介绍与应用</a></li>

</body>

</html>

5,css注释的基本的语法：/**/

6,CSS的位置：

1，内嵌样式：只是在所在的标签中有作用：

<span style="font-size:5em; color:red">红色的5em大小的字</span>

2，内部样式表：写在HTML的<head>和</head>之间，内部样式表只是在所在的网页中有效。（我们前面写的就是）

3，外部样式表：CSS定义在HTML 的外部，以一个文件的形式存在。

内部的CSS只能够被一个网页所引用，而外部的CSS可以被多个网页所引用。

链接或者导入：把外部的CSS和Html文件关联在一起

CSS被多个网页引用的好处：保持一致的风格，完成美观，统一的网站页面设计。

在外部样式表中，每个css文件都会对服务器提出一个单独的请求，增加服务器的负担。

加载外部css的两种方法:

Link和@import：

使用link的方式:link href="font.css" rel="styleheeet"type="text/css"/>

使用@import的方式：

@importurl("font.css");

</style>

7，css为伪类:用于对超链接的显示效果的定义

<html>

<head>

<title>CSS选择类型</title>

font-size:14px;

line-height:30px;

text-decoration:none;

text-align:center;;

height:30px;

width:150px;

display:block;

}

a:link{

color:#036;

background-image:url(link.gif);

}

a:visited{

font-weight:bold;

text-decoration:line-through;

background-image:url(linl.gif);

}

a:hover{

font-weight:bold;

text-decoration:line-through;

background-image:url(link.gif);

}

a:hover{

font-weight:bold;

color:#90c;

background-image:url(hover.gif);

letter-spacing:2px;

}

a:active{

color:#f00;

letter-spacing:3px;

text-decoration:underline;

font-style:normal;

}

</style>

</head>

<body>

<a href="#">ID选择器</a>

<a href="#">标签选择器</a>

</body>

</html>

a:link :网页中超链接的显示的样式

a:visited :访问过的超链接的显示样式

a：hover ：鼠标在超链接的上方的时候超链接的显示的

a:active :正在单击的时候超链接显示的样式

8,css的叠层:在同一网页中定义多个相同名称的css的样式的情况叫做叠层。

相同名称优先级的顺序是：内嵌、内部、外部

9.CSS的属性有：

letter-spacing:字母间距

text-align: 水平居中

text-indent:首行缩进

框模型

1, padding:填充，内边距

2，border:边框

3，margin: 边界，外边距

4，content：内容

CSS布局

1，HTML元素的主要：块元素和内嵌元素

2，