版权声明：文章为作者自己原创文章，转载请注明出处。 https://blog.csdn.net/qq_37128049/article/details/84567984
HTML的前言：
1. 什么是javaWeb?
* 使用Java语言开发基于互联网的项目
2. 软件的架构？
1. C/S: Client/Server
1. 解释：客户端/服务器端,在用户本地有一个客户端程序，在远程有一个服务器端程序
2. 例子：QQ，迅雷
3. 特点：
* 优点： 用户体验好。
* 缺点：开发，安装，部署，维护都比较麻烦。
2. B/S: Browser/Server 浏览器/服务器端
1. 解释：只需要一个浏览器，用户通过不同的网址（URL），可以访问远程不同的服务器端程序。
2. 特点：
1 优点：开发，安装，部署，维护都比较简单
* 缺点：
1. 如果应用过大，用户的体验可能会受到影响
2. 对硬件要求过高
3. 有些效果在网页上无法做出来
3. B/S架构详解：
1. 资源分类
1.静态资源
* 使用静态网页开发技术发布的资源
* 特点：
1. 所有用户访问，得到的结果是一样的。
2. 如：文本，图片，音频，视频，HTML，CSS,JavaScript
3. 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器，浏览器中内置了静态资源的解析引擎，可以展示静态资源。
2.动态资源（JAVA开发的重点）
* 使用动态网页开发技术发布的资源
* 特点：
1.所有用户访问，得到的结果是不一样的。
2.如：jsp/servlet，php，asp...
3.如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源再发送给浏览器。
3.注意： 我们要学习动态资源，必须先学习静态资源！
4. 静态资源三元素：
* HTNL：用于搭建基础网页，展示页面的内容
* CSS： 用于美化页面，布局页面。
* JavaScript：控制页面的元素，让页面有一些动态的效果。
* 注意：
* javascript的动态效果在所有用户登录所看到的都是一样的，所以它也是静态页面，只是能动而已。动态页面是指每个人看到的不一样的。
* 简单来说，动态页面，就是根据场景的区别会对数据进行动态的处理。
HTML的概念和入门
1.概念：
1. Hyper Text Markup Language： 超文本标记语言
2. 超文本：
* 超文本是用超链接的方法，将各种不同的文字信息组织在一起的网状文本
* 有的人也叫做超级文本，因为它里面可以放文字，放图片，放音频，视频等普通文本所完成不了的效果。
3. 标记语言：
* 由标签构成的语言。<标签名> 如 html，xml
* 标记语言不是编程语言
4. HTML ：由一些特定的标签组成的语言，可以用来在网页上展示数据。因为老版本的CPU只能解析文件后面三个字符，所以只能解析到htm，实际上这两个没有任何区别。
2.快速入门：
* 语法：
1. html文档后缀名 .html 或者.htm
2. 标签分为两类：
* 围堵标签：有开始标签，结束标签。 如：<html> </html> 根标签
* 自闭合标签：开始标签和结束标签在一起。如<br/> 反斜线在后面
3. 标签可以嵌套：
* 需要正确嵌套，不能你中我有，我中有你。每个开始标签和结束标签需要一一对应。
4. 在开始标签中可以定义属性。属性时由键值对构成，值需要用引号引起来，单双引都可以，建议都用单引或者双引。
5. html的标签不区分大小写，但是建议使用小写。
* 常用标签：
<html> </html>
<head> </head>
<body> </body>
<title> </title>
<font> </font>
<br/>
* 注意： HTML语法不严谨，所以在使用过程中如果写错了不会报错，也可以运行，在运行解析中，错误的部分只是不会显示出来。
HTML标签基础：
1. 文件标签：构成html最基本的标签
* html：html文档的根标签
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签，指定网页页面的标题。
2. body：体标签
* <!DOCTYPE html>: 定义文档类型
* <meta charset='utf-8'> 指定文档编码字符集
* <p>: 段落标签 相对于br标签，它的上下行间隔更大一点。
* <hr>：水平线标签 显示一条水平线
* ：空格
3. 文本标签：和文本有关的标签
* <!-- 注释内容--> ：此为html的注释方法,不会在浏览器上展示具体的内容。 ctrl+shift+/ 快捷键
* <h1> to <h6>:标题标签
4. 字体大小逐渐递减
* <p>:
* <br>:换行标签 <br/> 或者<br>
* <hr>:
5.属性：
* color： 颜色
* width： 宽度
* size ： 高度
* align： 对齐方式
6.方位：
* center：居中
* left：左对齐
* right： 右对齐
7. 文本:
* <b>:让文本加粗显示
* <i>: 让文本显示成斜体
* <font>:字体标签，配置字体大小，字体，颜色等。
* <center>:让文本居中显示
HTML标签进阶：
1.图片标签：
* <img>: 指定图片的路径 ：相对路径 /url
相对路径：相对于当前的html页面，
如果下一级目录：下一级目录名/图片名
如果上一级目录： ../图片名
* alt：如果图片不能正常显示，那么则会显示着串提示文字。
* width：指定宽度
* height：指定高度
2.列表标签：
<ol>有序列表
<type>指定样式
<li>
<ul>无序列表
3.链接标签：
1. a定义一个超链接
2. 属性：
herf：统一资源定位符
target:指定打开资源的方式
target="_self":默认值，在当前页面打开
target="_black"：新建页面打开超链接窗口
4.块标签:
* <span>:文本信息默认情况下在一行展示，称为行内标签，内联标签。
* <div>:没有任何样式，默认换行，每一个div占满一行。
* 这两种是非常常用的标签，常与css结合使用。
5.语义化标签：html5中为了提高程序的可读性，提供了一些标签
1.<header>
2.<footer>
6.表格标签：
1. table:定义表格
* width：宽度
* border： 边框
* cellpadding：定义内容和单元格之间的距离。
* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条。
* bgcolor：背景色
* align：对齐方式
* tr：定义行
2. td：定义单元格[该行的某列]
3. tr: 定义行
4. 扩展：
* th：定义表头单元格（会默认加粗，居中）
* caption：表格标题
* thead：表格的头部分
* tbody：表格的体部分
* tfoot： 表格的脚部分
5. 注意：
* 合并的时候从上往下第一个改变的设置属性。
* colspan：合并行，占列 （colspan="2" 这里代表合并行内的两列）
* rowspan：合并列，占两行，合并两行的同一列
注意：浏览器中如果没有看到页面的具体的编码方式，默认以GBK编码进行解析，但是由于我们的项目是默认UTF-8，所以会造成乱码。