不够完美又何妨？万物皆有裂隙，那是光进来的地方。
HTML复习笔记
JavaWeb相关概述
Javaweb：
- 使用Java语言开发基于互联网的项目
软件架构：
-
C/s:Client/server 客户端/服务器端
在用户本地有一个客户端程序，在远程有一个服务器端程序
如：QQ，迅雷…
优点：- 用户体验好
缺点：
- 开发、安装，部署，维护麻烦
-
B/S:Browser/server 浏览器/服务器端
只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序
优点：- 开发、安装，部署，维护简单
缺点：
- 如果应用过大，用户的体验可能会受到影响
- 对硬件要求过高
Java Web重点关注B/S加粗样式
- B/S架构详解
资源分类
1. 静态资源：
* 使用静态网页开发技术发布的资源。
* 特点：
* 所有用户访问，得到的结果是一样的。
* 如：文本，图片，音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2. 动态资源：
* 使用动态网页及时发布的资源。
* 特点：
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet,php,asp…
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
学习"动态资源",自然离不开静态资源.
静态资源：
- HTML：用于搭建基础网页，展示页面的内容
- CSS：用于美化页面，布局页面
- JavaScript：控制页面的元素，让页面有一些动态的效果
HTML概述
概念：是最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言
超文本:
- 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
标记语言:
- 由标签构成的语言。<标签名称> 如 html，xml
- 标记语言不是编程语言
HTML语法
基础语法：
- html文档后缀名 .html 或者 .htm
- 标签分为
- 围堵标签：有开始标签和结束标签。如
- 自闭和标签：开始标签和结束标签在一起。如 <br/>
- 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a> - 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来 – 要么都是单引,要么都是双引,我选单引
- html的标签不区分大小写，但是建议使用小写。
基本标签
文件标签:
1. 文件标签：构成html最基本的标签
操作:
自动生成:
UTF_8支持中文的字符编码
2. 文本标签：和文本有关的标签
还有一些格式标签:
<i> 定义斜体文本
<b>定义粗体文本
<font>HTML5不再支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色
关于<hr>标签
属性：
- color：颜色
- width：宽度
- size：高度
- align：对其方式
- center：居中
- left：左对齐
- right：右对齐
关于 <font>:字体标签
属性：
- color：颜色
- size：大小
- face：字体
属性定义：
- color：
- 英文单词：red,green,blue
- rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
- #值1值2值3：值的范围：00~FF之间。如： #FF00FF
- width：
- 数值：width=‘20’ ,数值的单位，默认是 px(像素)
- 数值%：占比相对于父元素的比例
<center>标签 HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!-- 我是一个注释呀! -->
为什么我的眼睛常含泪水?<br>
因为我对这土地爱得深沉!<br>
<h1>我爱ZZU</h1>
<h2>我爱ZZU</h2>
<h3>我爱ZZU</h3>
<h4>我爱ZZU</h4>
<h5>我爱ZZU</h5>
<h6>我爱ZZU</h6>
没有加p标签的段落
没有加p标签的段落
没有加p标签的段落
<br>
<h1>下面是加P标签的段落</h1>
<p>加p标签的段落</p>
<p>加p标签的段落</p>
<p>加p标签的段落</p>
<hr color="red" width="200" size="10" align="left"/>
<b>我是加粗的文本</b>
<br>
<i>我是倾斜的文本</i>
<br>
<font color="red" size="5" face="楷体">明月沉江春雾晓</font>
<center><font color="red" size="5" face="楷体">明月沉江春雾晓</font></center>
</body>
</html>
结果:
个人笔记,这里就多展示一些内容叭
简单的Demo:
这里关键是想引入一下字符表格
还有很多特殊的字符,用到的时候,再进行查阅,这里展示的都是比较常见的.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>郑州大学网上新闻与公告</title>
</head>
<body>
<h3 align="center">意大利文化部电影司中国事务部专员亚历桑德罗·希尔维斯特里一行来校访问</h3>
<hr color="#ddd700">
<p>4月12日，<font color="#b22222">意大利文化部电影司中国事务部专员亚历桑德罗·希尔维斯特里(Alessandro Silvestri)一行</font>来校访问。<b>校党委常委、副校长韩国河</b>会见了来访客人，国际交流与合作处、对外联络办公室、国际学院负责同志参加会见。</p>
<p>韩国河介绍了学校的基本情况，与桑德罗·希尔维斯特里就在电影学科领域开展国际合作、河南省历史文化与文物保护现状等内容进行了深入交流，并希望双方在科学研究、师生交流、电影拍摄制作实践和文物保护等方面加强合作。</p>
<p>亚历桑德罗·希尔维斯特表示，他此次来访代表意大利文化部，旨在与河南高校在文物保护、博物馆交流以及合拍电影等方面开展合作。</p>
<p><i>亚历桑德罗·希尔维斯特里现任意大利文化部电影司中国事务部专员，曾参与多部著名电影的制作和发行。</i></p>
<hr color="#ddd700">
<font color="gray" size="2">
<center>郑州大学 网上新闻与公告<br>
版权所有© 郑州大学 2000-2019<center>
</font>
</body>
</html>
结果:
图片标签
img：展示图片
属性：
- src：指定图片的位置
演示相对路径:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>郑州大学网上新闻与公告</title>
</head>
<body>
<!-- 相对路径 -->
<image src="images/image_demo.jpg" align="left" alt="登山" width="500" />
</body>
</html>
结果:
相对路径
以.开头的路径
./ 代表当前目录./image/1.jpg
(两个点)/ 代表上一级目录
引入网络中的图片:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>郑州大学网上新闻与公告</title>
</head>
<body>
<image src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-278444.jpg" align="left" alt="登山" width="500" />
</body>
</html>
链接
a:定义一个超链接
属性：
- href：指定访问资源的URL(统一资源定位符)
- target：指定打开资源的方式
- _self:默认值，在当前页面打开
- _blank：在空白页面打开
上面 引用网络上的图片就是src的作用之一
关于link 比较容易理解 等写CSS的复习笔记的时候,会用到
列表标签
这里比较重要的是
<ul><ol><li>标签
演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
</head>
<body>
<ul>
<li>早餐吃面条</li>
<li>中午吃面条</li>
<li>晚上吃面条</li>
</ul>
<ol>
<li>早餐吃面条</li>
<li>中午吃面条</li>
<li>晚上吃面条</li>
</ol>
</body>
</html>
结果:
算了,再多演示一点吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
</head>
<body>
<dl>
<dt>周一到周日饭谱</dt>
<dd>早上吃面条</dd>
<dd>中午吃面条</dd>
<dd>晚上吃面条</dd>
</dl>
</body>
</html>
结果:
块级标签
div和span：
- div:每一个div占满一整行。块级标签
- span：文本信息在一行展示，行内标签 内联标签
语义化标签：html5中为了提高程序的可读性，提供了一些标签。
- <header>：页眉
- <footer>：页脚
当然还有别的
它们这些标签结合CSS一起使用
完整:
表格标签
这里展示一下table的属性:
有些可能逐渐被淘汰了,但是还是要求了解一下
详细点:
table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgcolor：背景色
- align：对齐方式
tr：定义行
- bgcolor：背景色
- align：对齐方式
td：定义单元格
- colspan：合并列
- rowspan：合并行
th：定义表头单元格
- <caption>：表格标题
- <thead>：表示表格的头部分
- <tbody>：表示表格的体部分
- <tfoot>：表示表格的脚部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#fedba7" align="center">
<thead>
<!--thead没有任何样式变化-->
<tr >
<th>姓名</th>
<th>成绩</th>
<th>编号</th>
</tr>
</thead>
<tbody>
<tr bgcolor="green" align="center">
<td>1</td>
<td>梅西</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>贝克汉姆</td>
<td>51</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3</td>
<td>林俊杰</td>
<td>30</td>
</tr>
</tfoot>
</table>
</body>
</html>
结果:
用一个Demo综合演示一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
</head>
<body>
<!-- 采用table完成布局 -->
<!--最外层的table,用于整个页面的布局-->
<table width="100%" align="center">
<!--第一行-->
<tr>
<td>
<img src="images/top_banner.jpg" alt="旅游节" width="100%"></img>
</td>
</tr>
<!--第二行-->
<tr>
<!--直接布局,不好布局,进行嵌套-->
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="images/logo.jpg" alt="Logo"/>
</td>
<td>
<img src="images/search.png" alt="Search"/>
</td>
<td>
<img src="images/hotel_tel.png" alt="hotel_tel"/>
</td>
</tr>
</table>
</td>
</tr>
<!--第三行-->
<tr>
<td>
<table width="100%" align="center">
<tr bgcolor="#ffd700" align="center" height="45">
<td>
<a href="#">首页</a>
</td>
<td>
<a href="#">门票</a>
</td>
<td>
<a href="#">酒店</a>
</td>
<td>
<a href="#">郑州车票</a>
</td>
<td>
<a href="#">出境游</a>
</td>
<td>
<a href="#">港澳游</a>
</td>
<td>
<a href="#">抱团定制</a>
</td>
<td>
<a href="#">全球自由行</a>
</td>
<td>
<a href="#">收藏排行榜</a>
</td>
</tr>
</table>
</td>
</tr>
<!--第四行-->
<!--轮播图-->
<tr>
<td>
<img src="images/banner_3.jpg" alt="" width="100%" />
</td>
</tr>
<!--第五行-->
<!--轮播图-->
<tr>
<td>
<img src="images/icon_5.jpg" alt="" alt="小星星"/>
旅行精选
<hr color="#ffd700">
</td>
</tr>
<!--第六行-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="images/jingxuan_1.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_1.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_1.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_1.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第七行-->
<tr>
<td>
<img src="images/icon_6.jpg" alt=""/>
国内游
<hr color="#ffd700"/>
</td>
</tr>
<!--第八行-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td rowspan="2">
<img src="images/guonei_1.jpg" alt=""/>
</td>
<td>
<img src="images/jingxuan_2.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_2.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_2.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
</tr>
<tr>
<td>
<img src="images/jingxuan_2.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_2.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_2.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第九行-->
<tr>
<td>
<img src="images/icon_7.jpg" alt=""/>
境外游
<hr color="#ffd700"/>
</td>
</tr>
<!--第十行-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td rowspan="2">
<img src="images/jiangwai_1.jpg" alt=""/>
</td>
<td>
<img src="images/jingxuan_3.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_3.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_3.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
</tr>
<tr>
<td>
<img src="images/jingxuan_3.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_3.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
<td>
<img src="images/jingxuan_3.jpg" alt=""/>
<p>上海飞郑州7晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥8999</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第11行-->
<tr>
<td>
<img src="images/footer_service.png" width="100%"/>
</td>
</tr>
<!--第12行-->
<tr>
<td align="center" bgcolor="#ffd700" height="40">
<font color="gray" size="2">
XXX旅行有限公司<br>
版权所有 Copyright 2000-2019 ©
</font>
</td>
</tr>
</table>
</body>
</html>
结果:
扫一扫
1645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
