Java Web开发基础教学

苏冷.w

已于 2024-03-06 18:07:36 修改

阅读量475

点赞数 10

文章标签： java visual studio web

于 2024-02-28 17:29:41 首次发布

本文链接：https://blog.csdn.net/m0_73490019/article/details/136348839

版权

第一章网页开发基础

1.1 什么是HTML？

HTML的英文全称是Hyper Text Markup Language,即超文本标记语言。HTML命令可以是说明文字、图形、动画、声音、表格、链接等。

1.1.1 HTML5的文档结构

一个HTML文档通常以.html或.htm为扩展名，网页制作的工具有很多，常见的有Dreamweaver,WebStorm等。

接下来通过一个基本的HTML5文档来讲解其内部构成，如例1-1所示。

例1-1 demo1-1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的第一个网页！</title>
	</head>
	<body bgcolor="pink">
       <p><font size="30">同学们新年好！</font></p>
	</body>
</html

<!DOCTYPE html>文档类型说明、<html>根标记、<head>头部标签和</body>主体标记。

1.1.2 HTML5的常用标记

1.1.2.1 HTML5结构化的语义标记

例1-2 HTML5新增的语义标记

标记	说明
<header>	标记头部区域的内容，包括网站名称、主题或者主要信息
<nav>	用于定义页面的导航链接部分区域
<section>	将页面中的内容划分为独立的区域，用于显示章节或段落
<article>	标记页面中独立的主题内容区域，通常使用<section>标记进行划分
<aside>	定义页面主区域内容之外的内容，比如侧边栏
<footer>	标记页面或一个区域的底部。位于页脚，通常包含作者、著作权的信息、链接的使用条款、联系信息等。
<figure>	标记独立的流内容，包括图像、图表、照片、代码等。
<address>	标记文档中中的联系信息，包括文档作者、电子邮箱、地址、电话等。

1.1.2.2 <div>和<span>标记

<div>是一个块级元素，<span>标签是行内标签，<div>和<span>都可以称为“图层”。

1.1.2.3 文字与段落标记

（1）size属性：设置文字的字号

（2）face属性：设置文本的字体效果

（3）color属性：设置文字的颜色

<b>、<strong>	设置字体为粗体字样式
<i>、<em>	设置字体为倾斜样式
<u>	设置为带下划线的文字
<sup>	设置文字为上标样式
<sub>	设置文字为下标样式
<s>、<strike>	给文字添加删除线

1.1.2.4图像标记

1.如何在HTML中加入图片？

要想在HTML网页中显示图像，我们首先需要<img>标签用于定义网页的图片显示，其基本语法是：

<img src="图像  URL">

例 demo1-2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的第一个网页！</title>
	</head>
	<body bgcolor="pink">
     <p><font size="30">    同学们新年好！</font></p>
<img src="D:\图片\q.jpg"with=""120""height=""130"" boder="1"/>	//加入图片后设置的宽高和边框
</body>
</html>

运行结果：

1.1.2.5表格标记

是设计网页时经常会用到表格来组织页面信息，在HTML页面中创建表格的基本语法格式如下：

    <table>
           <tr>
               <td>单元格内容</td>
            </tr>
    </table>

定义表格常用的标记有：

（1）<table>表格标记，用于插入表格

（2）<caption>标题标记，显示表格标记

(3)<th>表头标记，用于设置表头信息

（4）<tr>行标记，用于插入行

（5）列标记，用于插入列

常用的表格属性有：

（1）width:表格的宽度

（2）border:边框粗细

（3）frame:设置表格的边框样式

（4）rules:设置表格内部边框的属性

例demo1-2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格的属性</title>
<style>
td{
font-size:14px;
color:red;
text-align:center;
}
</style>
	</head>
	<body bgcolor="yellow">
<center>
                    <table width="1400" frame="border"rules="all">
<caption>计算机学习</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td>李三</td>
<td>女</td>
<td>高等数学</td>
<td>100</td>
<td></td>
</tr>
<tr>
<td>张倩</td>
<td>女</td>
<td>英语</td>
<td>90</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>html</td>
<td>100</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>java</td>
<td>80</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>安卓开发</td>
<td>79</td>
</tr>
<tr>
<td>黄麻子</td>
<td>女</td>
<td>sql数据库</td>
<td>95</td>
</tr>
</table>
</center>
	</body>
</html>

运行结果：

1.1.2.6 列表标记

列表标记主要有无序列表和有序列表。

（1）无序列表

无序列表i哦是一个没有特定顺序的列表项的集合，也称为项目列表，语法格式如下：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
       ...
    <li>列表项3</li>
</ul>

例demo1-3.html 无序列表

<!DOCTYPE html>
<html>
<head>
<title>无序列表</title>
</head>
<body bgcolor="yellow">
<br>
<ul>
   <li type="circle">Python
   <li type="circle">C
   <li type="circle">Java
   <li type="disc">C++
   <li type="disc">C#
   <li type="disc">PHP
   <li type="square">SQL
   <li type="square">R
   <li type="square">Ruby
</ul>
</body>
</html>

运行结果如下：

无序列表标签<ul>的type属性，用户可以指定出现在列表列表项千的项目符号的样式，主要有：disc(实心圆点) 、circle(空心圆点)、square(实心方块)、none(无项目符号)。

（2）有序列表

有序列表的<ol>标签

例demo1-5有序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>有序列表</title>
		<style type="text/css">
			div{
				font-size: 18px;
			}
		</style>
	</head>     
	<body bgcolor="yellow">
		<br>
<ol type="A">
<li>Python
<li>C
<li>java
<li>c++
<li>C#
<li>PHP
<li>SQL
<li>R
<li>Ruby

</ol>
	</body>
</html>

运行结果图如下：

1.1.2.7 超链接标记

HTML中使用超链接与网络上的另一个文档相连，其基本的语法格式如下：

<a href="跳转目标"target="目标窗口的弹出方式">超链接文本内容</a>

<a></a>标记是一个行内白哦及，用于定义超链接，href属性规定链接的目标，target属性用于指定页面的打开方式，其取值有4种：

（1）_blank:链接目标在新窗口中打开

（2）_self:默认值，链接目标在原窗口中打开

（3）_parent:链接目标在当前窗口打开，若早框架网页中，则在上一层框架打开目标网页

（4）_top:链接目标在浏览器窗口打开，若有框架，则网页中所有框架将被删除

例demo1-6超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>超链接</title>
	</head>     
	<body bgcolor="yellow">
	<a href="https://www.tsinghua.edu.cn/"target="_blank">清华大学</a><br/>
在原窗口中打开：
<a href="https://www.baidu.com/index.html"target="_self"></a>
	</body>
</html>

运行结果：

点击“清华大学”可进入该学校的网址

1.1.2.8表单标记

一个完整的表单通常由表单控件、提示信息和表单域3个把部分构成。

（1）表单控件：包含具体的表单功能项，如单行文本输入框，密码输入框、复选框、提交按钮等。

（2）提示信息：一个表单通常还需要包含一些说明性的文字，提示用户进行填写和操作。

（3）表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可用它来处理表单数据所用程序的url地址

在HTML中，<form>标记用于定义表单域，其基本语法：

<form action="url地址"method="提交方式"name="表单名称">
各种表单控件
</form>

method属性用于设置表单数据的提交方式，其取值为get或post。

action属性值可以是相对路径或绝对路径。

name为表单标签的常用属性。

例demo1-7.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表单标记</title>
</head>
<body bgcolor="yellow">
<form action="/w.jsp" method="post">
用户名：<input type="text" name="userName"><br>
密码：<input type="text" name="password"><br>
<input type="submit" value="登录" >
</form>
</body>
</html>

运行结果：

1.2CSS技术

CSS是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言，用于为HTML文档定义布局。

1.2.1 CSS规则

css中包括3个部分内容：选择符、属性和属性值。语法格式为：

选择符{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

（1）选择符

又称选择器，是CSS中很重要的概念，所有HTML中的标记都是通过CSS选择符进行控制的。

属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。

属性值：为某属性的有效值，属性与属性值之间可任意用“：”分隔。

例如：

div{boeder:1px solid #000;width:600px;height:400px;}

div为选择器，表示CSS样式作用的HTML对象，border,width,height为 CSS属性，分别表示边框，宽度和高度。

1.2.2CSS选择器

HTML文档是由多个不同标记组成的，而标记选择器就是声明那些标记采用的样式。

1.2.2.2类别选择器

非常快捷，但是有一定的局限性，如果页面声明标记选择器，那么页面中所有该标记内容会有相应的变化。

例demo1-8.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>列别选择器</title>
<style>
.one{
text-indent:3em;
font-family:SimHer;
font-size:26px;
color:red;
}
.b{
font-family:宋体;
font-size:30px;
color:green;
}
.c{
text-indent:2em;
font-family:宋体;
font-size:40px;
color:maroon;
}
</style>
</head>
<body bgcolor="yellow">
<p class="one">江山如此多娇，引无数英雄竞折腰！</p ><p class="b">风吹云动天不动，水推船移不愿意，刀切莲藕丝不断，山高水远情不离！</p ><p class="c">花开山岗红艳艳，绿水青山不知是何年，离家的日子又到冬天，谢谢最亲的人挂牵!</p >
</body>
</html>

运行结果为：

1.2.2.3 ID选择器

ID选择器使用“#”进行标识，后面紧跟ID名。

例demo1-9.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>列别选择器</title>
<style>
#one{
text-indent:3em;
font-family:SimHer;
font-size:26px;
color:red;
}
#b{
font-family:宋体;
font-size:30px;
color:green;
}
#c{
text-indent:2em;
font-family:宋体;
font-size:40px;
color:maroon;
}
</style>
</head>
<body bgcolor="yellow">
<p id="one">江山如此多娇，引无数英雄竞折腰！</p ><p id="b">风吹云动天不动，水推船移不愿意，刀切莲藕丝不断，山高水远情不离！</p ><p id="c">花开山岗红艳艳，绿水青山不知是何年，离家的日子又到冬天，谢谢最亲的人挂牵!</p >
</body>
</html>

运行结果为：

1.2.3 CSS样式的引入方式

1.2.3.1行内式

行内式是在某个元素内通过使用style属性实现的，它只针对某个元素，而不会影响整个文件，例如：

<div style="color:red;width:200px;height:100px;"></div>

1.2.3.2内嵌式

内嵌式使用<style>标签将CSS属性名和属性值引入HTML页面中，例如：

<head>
<style type="text/css">
div{
width:200px;
height:100px;
color:red;
}
</style>
</head>

1.2.3.3链接式

基本格式：

<link type="text/css"; rel="stylesheet"; href="CSS样式文件的地址">

例demo1-10.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS样式的引入</title>
<link type="text/css"; rel="stylesheet"; href="D:/zhen/liu.css">
</head>
<body bgcolor="yellow">
<p >江山如此多娇，引无数英雄竞折腰！</p >
<p >风吹云动天不动，水推船移不愿意，刀切莲藕丝不断，山高水远情不离！</p >
</body>
</html>

在css样式中输入代码：

p{
text-indent:3em;
font-size:40px;
color:red;
}

运行效果为：

1.2.3.4导入式

导入式和链接式的功能基本相同，只是语法和动作方式略有不同。其语法如下：

<style>
@import"D:/zhen/qq.css"
</style>

例demo1-11.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS样式的引入</title>
<style>
@import"D:/zhen/qq.css"
</style>
</head>
<body bgcolor="yellow">
<p id="one" >江山如此多娇，引无数英雄竞折腰！</p >
<p id="two"  >风吹云动天不动，水推船移不愿意，刀切莲藕丝不断，山高水远情不离！</p >
</body>
</html>

在CSS样式中输入代码：

#one{
text-indent:3em;
font-size:40px;
color:red;
}
#two{
font-family:宋体;
text-indent:3em;
font-size:50px;
color:pink;
}

运行效果：

苏冷.w

关注

10
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Java Web开发基础教学

第一章 网页开发基础

1.1 什么是HTML？

1.1.1 HTML5的文档结构

1.1.2 HTML5的常用标记

1.1.2.1 HTML5结构化的语义标记

1.1.2.2 <div>和<span>标记

1.1.2.3 文字与段落标记

1.1.2.4图像标记

1.1.2.5表格标记

1.1.2.6 列表标记

（1）无序列表

（2）有序列表

1.1.2.7 超链接标记

1.1.2.8表单标记

1.2CSS技术

1.2.1 CSS规则

1.2.2CSS选择器

1.2.2.2类别选择器

1.2.2.3 ID选择器

1.2.3 CSS样式的引入方式

1.2.3.1行内式

1.2.3.2内嵌式

1.2.3.3链接式

1.2.3.4导入式

第一章网页开发基础