web概念概述
JavaWeb：
- 使用Java语言开发基于互联网的项目
软件架构
常见的软件结构有下面2种
Client/Server 客户端/服务器端 简称C/S
- 特点：在用户本地有一个客户端程序，在远程有一个服务器端程序 如：QQ，迅雷...等等
- 优点：用户体验好
- 缺点： 开发、安装，部署，维护 麻烦
Browser/Server 浏览器/服务器端 简称B/S
- 特点：只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
- 优点： 开发、安装，部署，维护 简单
- 缺点：如果应用过大，用户的体验可能会受到影响 对硬件要求过高
BS架构详解
客户端访问服务端，访问的是服务端的网络资源。网络资源有分为静态资源和动态资源。
静态资源
- 概念：使用静态网页开发技术发布的资源。
- 特点：所有用户访问，得到的结果是一样的。如：文本，图片，音频、视频, HTML,CSS,JavaScript等等， 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
动态资源
- 概念：使用动态网页及时发布的资源。
- 特点：所有用户访问，得到的结果可能不一样。如：jsp/servlet,php,asp...等等 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
结论：
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
常见的静态资源
- HTML：用于搭建基础网页，展示页面的内容
- CSS：用于美化页面，布局页面
- JavaScript：控制页面的元素，让页面有一些动态的效果
HTML
概念
查询百度百科：HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
总结一下HTML概念
- 是最基础的网页开发语言
- 他是一门标签语言，由标签构成的语言。<标签名称> 如 html，xml
- 标记语言不是编程语言
HTML基础语法
- html文档后缀名 .html 或者 .htm
- 标签的分类
- 围堵标签：有开始标签和结束标签。如 <html> </html>
- 自闭和标签：开始标签和结束标签在一起。如 <br/>
- 标签可以嵌套：需要正确嵌套，不能你中有我，我中有你在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
- 错误：<a><b></a></b>
- 正确：<a><b></b></a>
- html的标签不区分大小写，但是建议使用小写。
- 标签中是可以添加属性，控制样式的。但是不推荐使用，控制样式，我们推荐使用CSS
文件标签
文件标记就是构成HTML最基本的标签，常用的文件标签有下面几种
<!DOCTYPE> 声明
标签定义及使用说明
- <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
- <!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
- 总是给您的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。
HTML标签
标签定义及使用说明
- <html> 标签告知浏览器这是一个 HTML 文档。
- <html> 标签是 HTML 文档中最外层的元素。
- <html> 标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。
head标签
标签定义及使用说明
- <head> 元素是所有头部元素的容器。
- <head> 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。
- 以下列出的标签能被用在 <head> 元素内部：<title> （在头部中，这个元素是必需的）丶<style>丶<base>丶<link>丶<meta>丶<script>丶<noscript>
<title> 标签
标签定义及使用说明
<title> 标签定义文档的标题，在所有 HTML 文档中是必需的。
<title>元素：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时的标题
- 显示在搜索引擎结果中的页面标题
<!--...--> 注释标签
标签定义及使用说明
<!--...--> 注释标签用来在源文档中插入注释。注释不会在浏览器中显示。您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。您也可以在注释内容存储针对程序所定制的信息。在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。一个好的习惯是把注释或样式元素放入注释文本中，这样就可避免不支持脚本或样式的老浏览器把它们显示为纯文本。
举例：
<!DOCTYPE html> <html lang="ch"> <!-- HTML标签中的 属性lang 后面的值 告知我们此页面是中国还是外国的，可以删除，影响不大--> <head> <meta charset="UTF-8"> <!-- 指定字符集为utf-8 支持中文，否则中文会乱码--> <title>第一个HTML页面</title> </head> <body> 武汉，加油 </body> </html>
代码执行后的结果
文本标签：和文本有关的标签
<h1> to <h6>：标签
标签定义及使用说明
- <h1> - <h6> 标签被用来定义 HTML 标题。
- <h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。
<p> 标签
标签定义及使用说明
- <p> 标签定义段落。
- <p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
<hr> 标签
标签定义及使用说明
- <hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。
- <hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。
<br> 标签
标签定义及使用说明
- <br> 标签插入一个简单的换行符。
- <br> 标签是一个空标签，意味着它没有结束标签。
<b> 标签
标签定义及使用说明
- <b> 标签定义粗体的文本。
<i> 标签
标签定义及使用说明
- <i> 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。
- <i> 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
- 在没有其他适当语义的元素可以使用时，请使用 <i> 元素。其他语义的元素如下：<em> （被强调的文本）丶<strong> （重要的文本）丶<mark> （被标记的/高亮显示的文本）丶<cite> （作品的标题）丶<dfn> （一个定义项目）
<font> 标签 - HTML5 不支持
标签定义及使用说明
- HTML5 不支持 <font> 标签。请用 CSS 代替。
- 在 HTML 4.01 中，<font> 元素 已废弃。
- <font> 标签规定文本的字体、字体尺寸、字体颜色。
<center> 标签 - HTML5 不支持
标签定义及使用说明
- HTML5 不支持 <center> 标签。请用 CSS 代替。
- 在 HTML 4.01 中，<center> 元素 已废弃。
- <center> 对其所包括的文本进行水平居中。
特殊字符
当我们要在页面上显示特殊字符的时候要特殊的写法，常用的如下图所示
如我们要在页面上显示3个空格就必须这么写
<img> 标签
标签定义及使用说明
- <img> 标签定义 HTML 页面中的图像。
- <img> 标签有两个必需的属性：src 和 alt。
- 从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。
- 通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。
必须属性：
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片标签</title> </head> <body> <!--展示一张图片 img--> <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/> <!-- 相对路径 * 以.开头的路径 * ./：代表当前目录 ./image/1.jpg * ../:代表上一级目录 --> <img src="./image/jiangwai_1.jpg"> </body> </html>
<ul> 标签
标签定义及使用说明
- <ul> 标签定义无序列表。
- 将 <ul> 标签与 <li> 标签一起使用，创建无序列表。
属性：
type:规定列表的项目符号的类型。
举例：
<!-- 无序列表 ul--> <ul type="disc"> <li>睁眼</li> <li> 看手机</li> <li> 穿衣服</li> <li> 洗漱</li> </ul>
建议使用 CSS 为列表定义样式，不建议使用属性值。
<ol> 标签
标签定义及使用说明
- <ol> 标签定义了一个有序列表. 列表排序以数字来显示。
- 使用<li> 标签来定义列表选项。
属性：
- start ：规定列表中的起始点。
- type：规定列表的类型。不赞成使用。
举例：
<!--有序列表 ol--> 早上起床干的事情 <ol type="A" start="5"> <li>睁眼</li> <li> 看手机</li> <li> 穿衣服</li> <li> 洗漱</li> </ol>
建议使用 CSS 为列表定义样式，不建议使用属性值。
<a> 标签
标签定义及使用说明
- <a> 标签定义超链接，用于从一个页面链接到另一个页面。
- <a> 元素最重要的属性是 href 属性，它指定链接的目标。
在所有浏览器中，链接的默认外观如下：
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
注意：
- 如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。
- 通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。
- 请使用 CSS 来改变链接的样式。
属性
href: 规定链接的目标 URL。
target：规定在何处打开目标 URL。仅在 href 属性存在时使用。常用的值有
- _self:默认值，在当前页面打开
- _blank：在空白页面打开
举例：
<!-- 跳转到百度--> <a href="https://www.baidu.com/?tn=78000241_21_hao_pg">点我</a> <br> <!-- 跳转到百度，并且覆盖当前页面 打开--> <a href="https://www.baidu.com/?tn=78000241_21_hao_pg" target="_self">点我</a> <br> <!-- 跳转到百度，并且在新的空白页面打开--> <a href="https://www.baidu.com/?tn=78000241_21_hao_pg" target="_blank">点我</a> <br> <!-- 跳转到本地指定页面--> <a href="./5_列表标签.html">列表标签</a><br> <!-- 打开本地邮箱--> <a href="mailto:[email protected]">联系我们</a> <br> <!-- 为图片标签添加超链接--> <a href="https://www.baidu.com/?tn=78000241_21_hao_pg"><img src="image/jiangwai_1.jpg"></a>
<div> 标签
div:每一个div占满一整行。块级标签
标签定义及使用说明
- <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
- <div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
- <div> 元素经常与 CSS 一起使用，用来布局网页。
- 默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。
<span> 标签
span：文本信息在一行展示，行内标签 内联标签
标签定义及使用说明
- <span> 用于对文档中的行内元素进行组合。
- <span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
- <span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
- 被 <span> 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。
<header> 标签
语义化标签：
标签定义及使用说明
- <header> 标签定义文档或者文档的一部分区域的页眉。
- <header> 元素应该作为介绍内容或者导航链接栏的容器。
- 在一个文档中，您可以定义多个 <header> 元素。
- <header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
- 语义化标签的一种，没有任何样式。是html5中为了提高程序的可读性，提供了一些标签。
<footer> 标签
标签定义及使用说明
- <footer> 标签定义文档或者文档的一部分区域的页脚。
- <footer> 元素应该包含它所包含的元素的信息。
- 在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
- 在一个文档中，您可以定义多个 <footer> 元素。
- 假如您使用 <footer> 元素来插入联系信息，应该在 <footer> 元素内使用 <address> 标签。
- 语义化标签的一种，没有任何样式。是html5中为了提高程序的可读性，提供了一些标签。
<table> 标签
标签定义及使用说明
- <table> 标签定义 HTML 表格
- 一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
- <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
- 更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。
- 我们可以通过属性来控制表格的样式，但是不推荐使用
属性：
了解不推荐使用
- align：规定表格相对周围元素的对齐方式
- width：规定表格的宽度。
- border：规定表格单元是否拥有边框。
- cellpadding：规定单元边沿与其内容之间的空白。
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgcolor：规定表格的背景颜色。
<tr> 标签
标签定义及使用说明
属性：
了解不推荐使用
- bgcolor：规定表格行的背景颜色。
- align：定义表格行的内容对齐方式。
<td> 标签
标签定义及使用说明
- <td> 标签定义 HTML 表格中的标准单元格。
- HTML 表格有两种单元格类型：<th> 元素中的文本通常呈现为粗体并且居中。
- 表头单元格 - 包含头部信息（由 <th> 元素创建）
- 标准单元格 - 包含数据（由 <td> 元素创建）
- <td> 元素中的文本通常是普通的左对齐文本。
<th> 标签
标签定义及使用说明
<th> 标签定义 HTML 表格中的表头单元格。
- HTML 表格有两种单元格类型：<th> 元素中的文本通常呈现为粗体并且居中。
- 表头单元格 - 包含头部信息（由 <th> 元素创建）
- 标准单元格 - 包含数据（由 <td> 元素创建）
- <td> 元素中的文本通常是普通的左对齐文本。
如果需要将内容横跨多个行或列，请使用 colspan 和 rowspan 属性！
- colspan：规定表头单元格可横跨的列数。
- rowspan：规定表头单元格可横跨的行数。
<caption> 标签
标签定义及使用说明
- <caption> 标签定义表格的标题。
- <caption> 标签必须直接放置到 <table> 标签之后。
- 您只能对每个表格定义一个标题。
- 通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。
为了增强可读性，HTML还增加了一下标签
- <thead>：表示表格的头部分
- <tbody>：表示表格的体部分
- <tfoot>：表示表格的脚部分
.....
他们一般和CSS结合起来使用，如果他们单独使用没有任何效果。