javaweb基础打卡09

最新推荐文章于 2024-11-15 18:38:47 发布

bubupp

最新推荐文章于 2024-11-15 18:38:47 发布

阅读量108

点赞数

分类专栏： Javaweb基础文章标签： java html

本文链接：https://blog.csdn.net/weixin_42411963/article/details/110396917

版权

Javaweb基础专栏收录该内容

31 篇文章 1 订阅

订阅专栏

本文介绍了JavaWeb的开发背景，详细阐述了C/S和B/S架构的优缺点，重点讲解了B/S架构中的静态资源和动态资源。在HTML基础部分，讲解了HTML的基本概念、语法特性，包括标题、段落、换行、图片、列表、链接、表格等常见标签的使用，并给出了一个旅游网站首页的案例，展示了如何利用HTML进行布局设计。

摘要由CSDN通过智能技术生成

web概念概述

1.JavaWeb：
	使用Java语言开发基于互联网的项目
2.软件架构：
	1.C/S：Client/Server 客户端/服务器端
		- 在用户本地有一个客户端程序，在远程有一个服务器端程序
		- 如：QQ，迅雷...
		- 优点：
			1.用户体验好
		- 缺点：
			1.开发、安装、部署、维护麻烦
	2.B/S：Browser/Server 浏览器/服务器端
		- 只需要一个浏览器，用户通过不同的网址（URL），可以访问不同的服务器端程序
		- 优点：
			1.开发、安装、部署、维护简单
		- 缺点：
			1.如果应用过大，用户的体验可能会受到影响
			2.对硬件要求过高
3.B/S架构详解：
	- 资源分类：
		1.静态资源：
			- 使用静态网页开发技术发布的资源
			- 特点：
				1.所有用户访问，得到的结果是一样的
				2.如：文本，图片，音频，视频，HTML，CSS，JavaScript
				3.如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
		2.动态资源：
			- 使用动态网页开发技术发布的资源
			- 特点：
				1.所有用户访问，得到的结果可能不一样
				2.如：jsp/servlet，php，asp...
				3.如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
	- 我们要学习动态资源，必须先学习静态资源！
	- 静态资源：
		1.HTML：用于搭建基础网页，展示页面的内容
		2.CSS：用于美化页面，布局页面
		3.JavaScript：控制页面的元素，让页面有一些动态的效果

HTML

1.概念：是最基础的网页开发语言
	- Hyper Text Markup Language 超文本标记语言
		- 超文本：
			超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。		
		- 标记语言：
			- 由标签构成的语言。<标签名称> 如 html，xml
			- 标记语言不是编程语言
2.快速入门：
	- 语法：
		1.html文档后缀名 .html 或者 .htm
		2.标签分为：
			1.围堵标签：有开始标签和结束标签。如<html> </html>
			2.自闭和标签：开始标签和结束标签在一起。如<br/>
		3.标签可以嵌套：
			需要正确嵌套，不能你中有我，我中有你
			错误：<a><b></a></b>
			正确：<a><b></b></a>
		4.在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引起来
		5.html的标签不区分大小写，但是建议使用小写。
	- HelloWorld代码：
		<html>
		
			<head>
				<title>title</title>
			</head>		
			
			<body>
				<font color='red'>Hello World</font><br/>				
				<font color='green'>Hello World</font>
			</body>
			
		</html>
3.标签：
	1.文件标签：构成html最基本的标签
		1.html：html文档的根标签
		2.head：头标签。用于指定html文档的一些属性。引入外部的资源
		3.title：标题标签
		4.body：体标签
		5.<!DOCTYPE html>：html5中定义该文档是html文档
	2.文本标签：和文本有关的标签
		- 注释：<!-- 注释内容 -->
		1.<h1> to <h6>：标题标签	<h1> </h1>
			- h1~h6：字体大小逐渐递减
		2.<p>：段落标签 	<p> </p>
		3.<br>：换行标签	<br> 或者 <br/>
		4.<hr>：展示一条水平线		<hr/> 或者 <hr>
			- 属性：
				1.color：颜色
				2.width：宽度
				3.size：高度
				4.align：对齐方式
					- center：居中
					- left：左对齐
					- right：右对齐
				<hr color="red" width="200" size="10" align="left"/>	
		5.<b>：字体加粗		<b> </b>
		6.<i>：字体斜体		<i> </i>
		7.<font>：字体标签	<font> </font>
			- 属性：
				1.color：颜色
				2.size：大小
				3.face：字体
				<font color="red" size="5" face="楷体">白日依山尽</font>
		8.<center>：文本居中	<center> </center>
		- 属性定义：
			- color：
				1.英文单词：red,green,blue		color="red"
				2.rgb(值1,值2,值3)：值的范围：0~255。如rgb(0,0,255)		
				3.#值1值2值3：值的范围：00~FF之间。如：#FF00FF		color="#FF00FF"
			- width:
				1.数值：width="20"，数值的单位，默认是px(像素)
				2.数值%：width="50%"，占比相对于父元素的比例
		- 特殊符号：
			空格：&nbsp;
			版权：&copy;
	3.图片标签：
		1.img：展示图片
			- 属性：
				1.src：指定图片的位置
					- 相对路径是以.开头的路径
						* ./：代表当前目录(默认)  	<img src="./image/jiangwai_1.jpg">
						* ../：代表上一级目录	<img src="../image/jiangwai_1.jpg">
		例如：	<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>		
	4.列表标签：
		1.有序列表：
			- ol：<ol> </ol>
			- li：<li> </li>
			<ol type="A" start="5">
				<li>睁眼</li>
				<li>看手机</li>
				<li>穿衣服</li>
				<li>洗漱</li>
			</ol>
		2.无序列表：
			- ul：<ul> </ul>
			- li：<li> </li>			
			<!-- 
				<ul type="disc">  实心圆（默认）
				<ul type="square"> 方块
				<ul type="circle">  圆圈
			-->
			<ul type="disc"> 
				<li>睁眼</li>
				<li>看手机</li>
				<li>穿衣服</li>
				<li>洗漱</li>
			</ul>
	5.链接标签：
		1.a：定义一个超链接
			- 属性：
				1.href：指定访问资源的URL（统一资源定位符）	<a href="https://www.baidu.com">点我</a>
				2.target：指定打开资源的方式
					1. _self：默认值，在当前页面打开	<a href="https://www.baidu.com" target="_self">点我</a>
					2. _blank：在空白页面打开	<a href="https://www.baidu.com" target="_blank">点我</a>
			- 特殊链接情况：
				1.链接当前目录文件：	<a href="5_列表标签.html">列表标签</a><br>
				2.链接邮件：	<a href="mailto:baidu@baidu.cn">联系我们</a><br>
				3.图片链接：	<a href="https://www.baidu.com"><img src="image/jiangwai_1.jpg"></a>	
	6.div和span：
		div：每一个div占满一整行。块级标签		<div> </div>
        span：文本信息在一行展示，行内标签 内联标签		<span> </span>
	7.语义化标签：html5中为了提高程序的可读性，提供了一些标签。
		1.header:	<header> </header>
		2.footer:	<footer> </footer>
	8.表格标签：
		1.table：定义表格	<table> </table>
			1.width：宽度	
			2.border：边框	
			3.cellpadding：定义内容和单元格的距离。一般指定为0	
			4.cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条	
			5.bgcolor：背景色
			6.align：对齐方式
			<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="gray" align="center"> </table>
		2.tr：定义行	<tr> </tr>
			1.bgcolor：背景色
			2.align：对齐方式
			<tr bgcolor="#deb887" align="center"> </tr>
		3.td：定义单元格	<td> </td>
			1.colspan：合并列	
			2.rowspan：合并行	
			<td colspan="2">1</td>
		4.th：定义表头单元格	<th> </th>
			<th rowspan="2">编号</th>
		5.caption：表格标题		<caption> </caption>			
		6.thead：表示表格的头部分	<thead> </thead>
		7.tbody：表示表格的体部分	<tbody> </tbody>
		8.tfoot：表示表格的脚部分	<tfoot> </tfoot>

案例：旅游网站首页

1.确定使用table来完成布局
2.如果某一行只有一个单元格，则使用<tr><td></td></tr>
3.如果某一行有多个单元格，则使用
	<tr>
		<td>
			<table> </table>
		</td>	
	</tr>
	
table快速编辑：table alt+/ 选择table+
tr快速编辑：tr alt+/ 选择table+