JavaWeb之HTML和CSS

JavaWeb 专栏收录该内容
7 篇文章 0 订阅

标签命令汇总:

tr:行 td:单元格 b:加粗

font字体标签
br换行
a超链接标签
ul无序标签列表
ol有序标签列表
lilist
ul无序标签列表
href设置链接地址

一、概述

1、B/S软件结构

JavaSE中,C/S结构:客户端(Client)——服务端(Server)
JavaWeb中,B/S结构:浏览器(Browser)——服务器(Server)

2、前端开发流程

PS制作效果图——>前端工程师:做成静态网页——>Java程序员:将静态网页改为动态网页

3、网页的组成部分

内容(结构,页面中的内容,使用HTML展现)、表现(布局,颜色,大小等,使用CSS实现)、行为(页面中元素与输入设备交互的响应,一般使用JS技术实现)

4、HTML简介

(Htper Text Markup Language:超文本标记语言)
通过标签来标记要显示的网页中的各个部分,网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示)

5、创建HTML文件

(1)创建一个web工程(静态的);
(2)在工程下创建HTML页面;
在这里插入图片描述
在这里插入图片描述

6、HTML书写规范

<html>                          整个页面的开始
     <head>                     头信息
         <title>标题</title>    标题
     </head> 
     <body>                     body为页面主体内容
           页面主体内容
     </body>
</html>                         这个HTML页面的结束

案例:

<!DOCTYPE html><!--约束,声明-->
<html lang="zh_CN"><!--html标签,表示HTML的开始 lang="zh_CN"表示中文,html标签中一般分为两部分:head和body-->
<head><!--头部信息,一般包含三部分:title标签,css样式,js代码-->
    <meta charset="UTF-8"><!--表示当前页面使用UTF-8字符集-->
    <title>标题</title><!--标题-->
</head>
<body><!--整个HTML页面显示的主体内容-->
    hello
</body>
</html>

在这里插入图片描述
HTML代码注释:<!-- 注释内容-->

7、HTML标签介绍

(1)标签拥有自己的属性
①基本属性:bgcolor=“red”,eg:<body bgcolor="blue"> ——背景颜色改为绿色
②事件属性:οnclick=“alert(‘你好!’);” ——可以直接设置事件响应后的代码

<body οnclick="alert('你好')">

——alert()是JS语言提供的一个警告框函数,它可以接收任意参数,参数就是警告框的函数信息。
点击主体内容的那一行,出现警告框:
在这里插入图片描述

<body οnclick="alert('你好')"><!--整个HTML页面显示的主体内容-->
    hello
<button οnclick="alert('你好帅!')">按钮</button>
</body>

点击按钮,跳出显示框:
在这里插入图片描述
(2)标签又分为:单标签和双标签。
① 单标签格式: <标签名 />
eg1:换行br

第一行<br/>第二行

在这里插入图片描述

hr:水平线

② 双标签格式:<标签名> …封装的数据…</标签名>
——大部分是双标签

二、HTML常用标签

1、font标签(字体标签)

——字体标签,可以修改文本的字体、大小、颜色。
【案例】在网页上显示:我是字体标签,并修改字体为宋体,颜色为红色

<body>
    <!--字体标签:
    需求:在网页上显示——我是字体标签,并修改字体为宋体,颜色为红色-->
    <font color="red" face="宋体" size="7">我是字体标签(红色宋体)</font>
</body>

在这里插入图片描述

2、特殊字符

(1)< 和>

我是<br>标签

在这里插入图片描述
如果要输出特殊字符 < 和 > ,可以用 &lt 代表 <,用&gt代表 > :

我是&lt;br&gt标签

在这里插入图片描述

(2)空格——&nbsp

通常情况下,HTML会裁掉文档中的空格,加入输入10个空格,会被裁掉9个,使用&nbsp可以在文档中增加空格

<body>
我是&nbsp;&nbsp;&nbsp;&nbsp;标签
</body>

在这里插入图片描述

3、标题标签

——h1 到 h6(h7不行)
【案例】演示标题1到标题6的

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>3.标题标签.html</title>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>

在这里插入图片描述
设置左中右对齐:
align="left"左对齐(默认)

<body>
    <h1 align="left">标题1</h1>
    <h2 align="center">标题2</h2>
    <h3 align="right">标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>

在这里插入图片描述

4、超链接标签(*重点!)

——网页中,所有点击之后,可以跳转的内容,都是超链接

  • a标签是超链接;
  • href属性:设置链接地址;
  • target属性:设置哪个目标进行跳转
    ——self :表示当前页面(默认值)
    ——blank :表示打开新页面来进行跳转
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超链接标签.html</title>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

在这里插入图片描述
【案例二】target="_blank":打开新的页面进行跳转
_self:默认的跳转属性,表示在当前页面进行跳转

<body>
    <a href="http://www.baidu.com" target="_self">百度_self</a><br/>
    <a href="http://www.baidu.com" target="_blank">百度_blank</a>
</body>

在这里插入图片描述

5、列表标签(有序、无序)

——无序列表(大部分)、有序列表

  • 无序:ul(unorder list)
  • 有序:ol(order list)

【无序ul】使用无序,列表方式,把四大天王展现出了

<body>
    <ul>
        <li>刘德华</li>
        <li>郭富城</li>
        <li>张学友</li>
        <li>黎明</li>
    </ul>
</body>

type属性可以修改列表项前面的符号

<ul type="none">

在这里插入图片描述
【有序ol】

<body>
    <ol>
        <li>刘德华</li>
        <li>郭富城</li>
        <li>张学友</li>
        <li>黎明</li>
    </ol>
</body>

在这里插入图片描述

6、img标签(显示图片)

——img标签是图片标签,用来显示图片,src属性可以设置图片的路径
web中的路径分为:相对路径和绝对路径

  • 相对路径:
    . ./表示当前文件所在目录
    ./表示当前文件所在的上一级目录
    文件名:表示当前文件所在目录的文件,相当于./文件名 ./可以省略
  • 绝对路径:
    正确格式:http://ip:port/工程名/资源路径
    width:图片宽度
    height:图片高度
    border:图片边框大小
    alt:当指定路径找不到图片时,用来代替显示的文本内容
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>img标签.html</title>
</head>
<body>
    <img src="../imgs/1.jpg"/>
</body>
</html>

在这里插入图片描述
修改图片显示的宽高、大小:

<body>
    <img src="imgs/1.jpg" width="400" height="500"/>
</body>

显示多张图片:

<body>
    <img src="imgs/1.jpg" width="400" height="500"/>
    <img src="imgs/2.jpg" width="400" height="500"/>
    <img src="imgs/3.jpg" width="400" height="500"/>
    <img src="imgs/4.jpg" width="400" height="500"/>
    <img src="imgs/5.jpg" width="400" height="500"/>
    <img src="imgs/6.jpg" width="400" height="500"/>
</body>

在这里插入图片描述
alt:当指定路径找不到图片时,用来代替显示的文本内容

<img src="imgs/001.jpg" width="400" height="500" alt="找不到图片"/>

7、table标签

  • 需求1:做一个带表头的,三行三列的表格,并显示边框
  • 需求2:修改表格的宽度,高度,表格的对齐方式,单元格间距

table:表格标签 border:设置表格标签 width:设置表格宽度 height:设置表格高度
tr:行标签 th:表头标签 (th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本)
td:单元格标签 align:设置单元格文本对齐方式
b:加粗标签

<body>
		<table align="center" border="1" width="300" height="300" cellspacing="0">
			<!--设置单元格格式(宽高线粗),将整个表格居中,并设置单元格间距为0-->
			<tr>
				<td align="center"><b>1.1</b></td> <!--效果等同于下面的th-->
				<th>1.2</th> <!--th:元素内部的文本通常会呈现为居中的粗体文本-->
				<th>1.3</th>
			</tr>			<tr>
				<td>2.1</td>
				<td>2.2</td>
				<td>2.3</td>
			</tr>			<tr>
				<td>3.1</td>
				<td>3.2</td>
				<td>3.3</td>
			</tr>
		</table>
	</body>

在这里插入图片描述

【需求】表格跨行跨列

	<body>
	<!--五行五列表格
	    第一行第一列单元格跨两列——colspan,
	    第二行第一列单元格跨两行——rowspan,
	    第四行第四列单元格跨两行两列-->
		<table border="1" width="500" height="500"cellspacing="0">
			<tr>
				<td colspan="2">1.1</td>
				<td>1.3</td>
				<td>1.4</td>
				<td>1.5</td>
			</tr>			<tr>
				<td rowspan="2">2.1</td>
				<td>2.3</td>
				<td>2.3</td>
				<td>2.4</td>
				<td>2.5</td>
			</tr>			<tr>
				<td>3.2</td>
				<td>3.3</td>
				<td>3.4</td>
				<td>3.5</td>
			</tr>			<tr>
				<td>4.1</td>
				<td>4.2</td>
				<td>4.3</td>
				<td colspan="2" rowspan="2">4.4</td>
			</tr>			<tr>
				<td>5.1</td>
				<td>5.2</td>
				<td>5.3</td>
			</tr>
		</table>
	</body>

在这里插入图片描述
将内容换成图片:

<td colspan="2" rowspan="2"> <img src="../imgs/2.jpg" width="200" height="200"/></td>

在这里插入图片描述

8、iframe框架标签(文档中的文档)

——可以在一个HTML页面上打开一个小窗口,去加载一个单独的页面

<body>
	单独完整的页面<br/><br/>
    <iframe src="3.标题标签.html" width="500" height="300"></iframe><br/>
    <iframe src="4.超链接.html" target="_self"></iframe>
</body>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.html</title>
</head>
<body>
	单独完整的页面<br/><br/>
    <iframe src="3.标题标签.html" width="500" height="300" name="跳转到该标签去显示"></iframe><br/>
    <ul>
        <li><a href="5.img标签.html" target="跳转到该标签去显示">5.img标签</a></li>
        <li><a href="1.font标签.html">1.font标签</a></li>
        <li><a href="2.特殊字符.html">2.特殊字符</a></li>
    </ul>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

9、表单显示

什么是表单?——就是HTML页面中,用来收集用户信息的所有元素集合,然后把这些信息发送给服务器。

(1)需求:创建一个个人信息注册表单,包含用户名、密码、确认密码、性别(单选)、计算机技能(多选)、国籍(下拉列表),隐藏域,自我评分(多行文本域),重置,提交
(2)分析

  • form:就是表单; input type=“text”:单行输入框 ,value:设置默认内容;input type=“password”:密码输入框
  • [性别] input type=“radio”:单选框 name属性可以对其进行分组 check=“check”:默认选中
  • [兴趣爱好] input type=“checkbox”:复选框
  • [国籍] select标签是下拉列表框,option标签是下拉列表框中的选项(加上checked="checked"的是默认选项)
  • [自我评价] textarea:表示多行文本输入框,rows:多少行,cols:每行显示多少字符,起始标签和结束标签之间的是默认值
  • [重置] input type=“reset” value属性修改按钮上的字
  • [提交] input type=“submit”:提交按钮
    form中的action属性设置提交的服务器地址,method属性设置提交的方式GET(默认值)或POST
  • [附件上传] input type=“file”:附件上传域,
  • [隐藏域] input type=“hidden” 当我们要发送某些信息,而这些信息不需要用户参与,就可以使用(提交的时候同时发送给服务器)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.html</title>
</head>
<body>
     <form action="http://localhost:8080" method="get">
        <input type="hidden" name="action" value="login">
        <h1 align="left">用户注册</h1>
        用户名称:<input type="text" value="默认值"/><br/>
        用户密码:<input type="password"/><br/>
        确认密码:<input type="password"/><br/>
        性别:<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女<br/>
        计算机技能:<input type="checkbox" />Java<input type="checkbox"/>JS<input type="checkbox"/>C++<input type="checkbox"/>python<br/>
        国籍:<select>
                  <option>--请选择国籍--</option>
                  <option>中国</option>
                  <option>美国</option>
                  <option>日本</option>
                  <option>英国</option>
             </select><br/><br/>
        自我评价:<textarea rows="10" cols="40">须包括自己的特长爱好,性格等信息</textarea><br/><br/>
        <!--重置--><input type="reset"/>
        <!--提交--><input type="submit"/><br/>
        附件:<input type="file"/>
    </form>
</body>
</html>

在这里插入图片描述

表单格式化:

如果要让表单更加整齐,可以放在table中:
比如:

<table align="center">
	<tr>
		<td>用户名称:<td/>
		<td>
			<input type="text" value="默认值"/>
		<td/>
	<tr/>
</table>

表单提交

input type=“submit”:提交按钮
form中的action属性设置提交的服务器地址
method属性设置提交的方式GET(默认值)或POST

<form action="http://localhost:8080" method="get">
<input type="hidden" name="action" value="login">

<input type="submit"/>

点击提交:
在这里插入图片描述
表单提交时:数据没有发送给服务器的三种情况:
1.表单项没有name属性值
——给每个加上name=“XXX”

  <form action="http://localhost:8080" method="get">
        <input type="hidden" name="action" value="login">
        <h1 align="left">用户注册</h1>
        用户名称:<input type="text" name="username" value="默认值"/><br/>
        用户密码:<input type="password"/><br/>
        确认密码:<input type="password"/><br/>
        性别:<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女<br/>
        计算机技能:<input name="hobby" type="checkbox" />Java<input name="hobby" type="checkbox"/>JS<input name="hobby" type="checkbox"/>C++<input name="hobby" type="checkbox"/>python<br/>
        国籍:<select name="country">
                  <option>--请选择国籍--</option>
                  <option>中国</option>
                  <option>美国</option>
                  <option>日本</option>
                  <option>英国</option>
             </select><br/><br/>
        自我评价:<textarea name="desc" rows="10" cols="40">须包括自己的特长爱好,性格等信息</textarea><br/><br/>
        <!--重置--><input type="reset"/>
        <!--提交--><input type="submit"/><br/>
        附件:<input type="file"/>
    </form>

在这里插入图片描述
2、单选、复选都要添加value属性值,以便发送给服务器
3、表单项不在提交的form标签中

GET请求的特点:

1、浏览器地址栏的地址是:action属性[+?+请求参数]
请求参数的格式是:name=value & name=value
2、不安全(密码会被看到)
3、它有数据长度的限制,如果数据比较多,可以用method=“POST”

POST请求的特点:

1、浏览器地址栏中只要action属性值;
2、相对于GET请求要安全(由于第一条,你看不到包括密码在内的内容了);
3、理论上没有数据长度的限制。

10、其它标签:div、span、p.avi

div标签:默认独占一行
span标签:它的长度是封装数据的长度
p段落标签:默认会在段落的上方或下方空出一行来(如果已有就不再空)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其它标签</title>
</head>
<body>
    <!--需求:div、span、p标签的演示 -->
        <div>div标签1</div>
        <div>div标签2</div>
        <span>span标签1</span>
        <span>span标签2</span>
        <p>p段落标签1</p>
        <p>p段落标签2</p>
</body>
</html>

在这里插入图片描述

三、CSS技术

CSS:层叠样式,是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

1、CSS与HTML结合的第一种方式

——在标签的style属性上设置"key:value value",修改标签样式

<body>
    <div style="border:1px solid blue;">div标签1</div>
    <div style="border:1px solid blue;">div标签2</div>
    <span style="border:1px solid blue;">span标签1</span>
    <span style="border:1px solid blue;">span标签2</span>
</body>

在这里插入图片描述
缺点:
1、如果标签多了,样式多了,代码量很大;
2、可读性差;
3、CSS代码没有复用性。

2、CSS与HTML结合的第二种方式(同页面可复用)

样式可以复用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码 -->
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

后面的同一类标签无论定义了多少,都可以复用同一种样式。
在这里插入图片描述
缺点:仅能在一个页面中国进行复用,实际项目中会有很多页面。

3、CSS与HTML结合的第三种方式(页面间可复用)

——把CSS样式写成一个单独的CSS文件,通过link标签引入即可复用。
在这里插入图片描述
新建一个css样式脚本:

div{
    border: 1px solid red;
}
span{
    border: 1px solid blue;
}

通过link链接引入css样式代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link标签专门用来引入css样式代码 -->
    <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

——这样方便不同的页面都来引用该样式。

4、标签名选择器

格式:
标签名{
key:value value;
}

【案例】
在所有div标签上修改字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。并且修改所有span 标签的字体颜色为黄色,字体大小20个像素。边框为5像素蓝色虚线。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
	<style type="text/css">
		div{
			border: 1px solid yellow;
			color: blue;
			font-size: 30px;
		}
		span{
			font-size: 20px;
			color: yellow;
			border: 5px blue dashed;
		}
	</style>
</head>
<body>
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
</body>
</html>

在这里插入图片描述

5、id选择器(只可用一次)

格式:
#id属性值{
属性:值;
}

“#”开头的就是id选择器,不一样要用id这个词

——可以通过id值选择性地去使用这个样式。

【案例】
分别定义两个 div 标签:第一个div 标签定义 id 为 id001 ,然后根据id 属性定义css样式修改字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。
第二个div 标签定义 id 为 id002 ,然后根据id 属性定义css样式 修改的字体颜色为红色,字体大小20个像素。边框为5像素蓝色点线。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>
	<style type="text/css">
		#id001{
			color: blue;
			font-size: 30px;
			border: 1px solid yellow;
		}
		#id002{
			color: red;
			font-size: 20px;
			border: 5px blue dotted;
		}
	</style>
</head>
<body>
	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>
</body>
</html>

在这里插入图片描述

6、class类型选择器(可多次使用)

.class 属性值{
属性:值;
}

“.”开头的就是class选择器,不一定要用class这个词。

class选择器可以通过class属性有效地选择性地去使用这个样式。

【案例】
需求1:修改 class 属性值为 class01的 span 或 div 标签,字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。
需求2:修改 class 属性值为 class02的 div 标签,字体颜色为灰色,字体大小26个像素。边框为1像素红色实线。
–>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
	<style type="text/css">
		.class01{
			color: blue;
			border: yellow 1px solid;
			font-size: 30px;
		}
		.class02{
			color: grey;
			font-size: 26px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="class01">div标签class01</div>
	<div class="class02">div标签</div>
	<span class="class01">span标签class01</span>
	<span>span标签2</span>

</body>
</html>

在这里插入图片描述

7、组合选择器

选择器1,选择器2,…,选择器n{
属性:值;
}
——可以让多个选择器共用同一个css代码

【案例】
需求1:修改 class=“class01” 的div 标签 和 id=“id01” 所有的span标签,字体颜色为蓝色,字体大小20个像素。边框为1像素黄色实线。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
    <style type="text/css">
        #id01,.class01{
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>
   <div class="class01">div标签class01</div> <br />
   <span id="id01">span 标签</span>  <br /> 
   <div>div标签</div> <br />
   <div>div标签id01</div> <br />
</body>
</html>

在这里插入图片描述

8、css常用样式

(1)字体颜色:color:red;
(2)宽度:width:19px;
(3)高度:height:20px;
(4)背景颜色:background-color
(5)字体大小:font-size:20px
(6)边框:border:1px solid red;
(7)DIV居中:
margin-left:auto
margin-right:auto
(8)文本居中:text-align:center
(9)超链接去下划线:text-decoration: none;
(10)列表去除修饰

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css常用样式.html</title>
    <style type="text/css">
        div{
            color: red;
            border: 1px yellow;
            width: 300px;
            height: 300px;
            background-color: grey;
            font-size: 30px;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            text-decoration: none;
        }
        table{
            border: 1px blue solid;
            border-collapse: collapse;
        }
        td{
            border: blue 1px solid;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
<table>
    <ul>
        <li>早上好</li>
        <li>下午好</li>
        <li>晚上好</li>
    </ul>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
</table>
    <a href="http:/www.baidu.com">百度</a>
    <div>我是帅逼</div>
</body>
</html>

在这里插入图片描述

  • 6
    点赞
  • 0
    评论
  • 18
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值