WEB_BASIC---01 Web概述、HTML概述、文本处理、图像和超链接、表格、菜单_网页中文本的处理,图像的处理,表格,表单,超链接,css,css加div布局模板,spry菜-CSDN博客

本文链接：https://blog.csdn.net/Mind_programmonkey/article/details/79717075

本文介绍了HTML的基本概念及其在网页制作中的应用，包括标签使用、页面布局、多媒体元素嵌入及超链接设置等内容。

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

一、Java知识体系结构

二、HTML、CSS、JavaScript、jquery

HTML:用来勾勒出网页的结构和内容

CSS:用来美化网页

JavaScript：让网页呈现动态的数据和效果

jQuery：框架，提高JavaScript开发效率

三：Web三要素

游览器：向服务器发起请求，下载服务器中的网页，然后执行HTML显示出内容

服务器：接受游览器的请求，发送相应的页面到游览器

HTTP通信协议：游览器与服务器的通信协议

四：HTML工作原理

网页存储在服务器上，网页运行在游览器上。

五HTML：超文本标记语言

HTML和XML的联系

（1）XML：可扩展标签语言；标签、属性、标签的嵌套关系都可扩展扩展：自定义

用来存储或传输数据

（2）HTML：超文本标签语言：语法是固定的（w3c），用来显示数据。有一些特定版本严格遵守XML规范，可以将HTML理解为标签固定的XML

补充:1.创建WEB项目

---必须切换到JavaEE视图（Eclipse右上角JavaEE）

---默认创建有错误，选择项目下的Deployment，右键点击Generate...

例子：

<!-- 声明网页的版本 -->
<!DOCTYPE html>
<html>
	<!-- 对网页做基本的配置 -->
	<head>
		<!--声明网页的编码  -->
		<meta charset="utf-8">
		<!-- 声明网页的标题 -->
		<title>这是练习网页</title>
	</head>
	<!-- 写网页的具体内容 -->
	<body>
		hello HTML!你好对的
	</body>
</html>

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
<body>
	<!-- 1.标题 -->
	<h1>王老师</h1>
	<h2>吕老师</h2>
	<h3>陈老师</h3>
	<h4>大老师</h4>
	<!-- 2.段落 -->
	<p>你好！世界</p>
	<p>hello!World</p>
	<!-- 3.1有序列表 -->
	<ol>
		<li>湖南省</li>
		<li>湖北省</li>
		<li>河北省</li>
	</ol>
	<!-- 3.2无序列表 -->
	<ul>
		<li>北京</li>
		<li>上海</li>
		<li>广州</li>
	</ul>
	<!-- 3.3嵌套列表 -->
	<ol>
		<li>
			河北省
			<ul>
				<li>石家庄</li>
				<li>唐山</li>
			</ul>
		</li>
		<li>
			山东省
			<ul>
				<li>济南</li>
				<li>青岛</li>
			</ul>
		</li>
	</ol>
</body>
</html>

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分区元素演示</title>
</head>
<body>
	<!-- log区 -->
	<div>
		<p>此处摆放一张图片</p>
	</div>
	<!-- 内容区 -->
	<div style="color:red;">
		<h1>宫保鸡丁的开发步骤</h1>
		<p>首先准备只鸡</p>
		<p>放上油</p>
		<p>再放鸡丁炒炒</p>
		<p>出锅</p>
	</div>
	<!-- 版权区 -->
	<div>
		<p>版权所有，违者必究</p>
	</div>
</body>
</html>

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 行内元素 -->
	<p>
		北京市<span style="color:red">海淀区</span>
	</p>
	<!-- 空格折叠 -->
	<p>
		<a href="#libai">窗前</a>  明月光<br>
		疑是  地上霜<br>
		举头  望明月<br>
		低头  思故乡<br>
	</p>
	
	<!-- 图片（行内，左右排列） -->
	<!-- （1）绝对路径：从盘符开始写出图片的完整路径
			这样写有明显的缺点：路径写的很长，麻烦 -->
	<!-- (2)相对路径：只需要写出图片和网页的相对位置即可 -->
	<p>
		<!-- 图片和网页平级 -->
		<img alt="" src="01.jpg">
		<!-- 图片在网页下级 -->
		<img alt="" src="a/01.jpg">
		<!-- 图片在网页上级 -->
		<img alt="" src="../03.jpg">
		<!-- 一般情况 -->
		<img alt="" src="../images/04.jpg">
	</p>
	<!-- 超链接（行内） -->
	<!-- 超链接的一般用法 -->
	<p>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.sdust.edu.cn/" target="_blank">山东科技大学</a>
	</p>
	<!-- 超链接的特殊用法   将超链接连接到本网页的某个位置-->
	<!-- 
	(1)这个位置叫做锚点
	(2)必须提前声明锚点
	 -->
	<p>
	 	<a name="libai">李白</a>是个诗人，会吟诗作对，花前月下，酒肉穿肠
	 </p>
	 <!-- 顶部默认就是锚点，没有名字 -->
	 <p>
	 	<a href="#">回到顶部</a>
	 </p>
	 <!-- 8表格（块） -->
	 <!-- 8.1表格的基本结构 -->
	 <table border="1" cellspacing="0" width="30%">
		<tr>
			<td>老师1</td>
			<td>老师2</td>
		</tr>
		<tr>
			<td>老师3</td>
			<td>老师4</td>
		</tr>
	</table>
	 <!-- 8.2跨行 -->
	 <table border="1" cellspacing="0" width="30%">
		<tr>
			<td rowspan="2">老师1</td>
			<td>老师2</td>
		</tr>
		<tr>
			<td>老师4</td>
		</tr>
	</table>
	 <!-- 8.3跨列 -->
	 <table border="1" cellspacing="0" width="30%">
		<tr>
			<td colspan="2">老师1</td>
		</tr>
		<tr>
			<td>老师3</td>
			<td>老师4</td>
		</tr>
	</table>
	 <!-- 8.4行分组 -->
	
</body>
</html>

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
	<table border="1" cellspacing="0" width="30%">
		<thead>
			<tr>
				<td>编号</td>
				<td>名称</td>
				<td>金额</td>
			</tr>
		</thead>
		<tbody style="color:blue;">
			<tr>
				<td>1</td>
				<td>鼠标</td>
				<td>50</td>
			</tr>
			<tr>
				<td>2</td>
				<td>键盘</td>
				<td>100</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="2">总共</td>
				<td>150</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>