Web学习-HTML-CSDN博客

本文链接：https://blog.csdn.net/a124654564/article/details/118546396

本文介绍了JavaWeb中的B/S架构，对比了C/S架构的优缺点。深入讲解了B/S架构中的静态资源与动态资源，重点阐述了HTML的基础概念，包括超文本和标记语言的含义。接着，详细列举了HTML的各种标签，如标题、段落、图像、链接、列表、表格等，并探讨了表单的使用，包括表单的定义、提交方式以及各种表单项标签的应用。

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

一、Web概述

JavaWeb：

  * 使用Java语言开发基于互联网的项目

软件架构：

  1. C/S：Client/Server 客户端/服务器端
   	* 在用户本地有一个客户端程序，在远程有一个服务器端程序
   	* 优点：QQ，迅雷
   	* 缺点：开发、安装、部署、维护麻烦
  2. B/S：Browser/Server 浏览器/服务器端
  	* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序 
  	* 优点：开发、安装、部署、维护简单
  	* 缺点：应用过大易导致用户体验受损，对硬件要求过高

B/S架构详解

  * 资源分类：
  	1. 静态资源：
  		* 使用静态网页开发技术发布的资源
  		* 特点：
  			* 所有用户访问，得到的结果是一样的
  			* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
  	2. 动态资源：
  		* 使用动态网页及时发布的资源
  		* 特点：
  			* 所有用户访问，得到的结果可能不一样
  			* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

静态资源重要内容

  * HTML：用于搭建基础网页，展示页面的内容
  * CSS：用于美化页面，布局页面
  * JavaScript：控制页面的元素，让页面有一些动态的效果

二、HTML

概念：是最基础的网页开发语言

 * Hyper Text Markup Language 超文本标记语言
 	* 超文本：
 		* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
 	* 标记语言
 		* 由标签构成的语言，<标签名称>	如html，xml
 		* 标记语言不是编程语言

快速入门

 * 语法：
 	1.  html文档后缀名	.html或者	.htm
 	2. 标签分为围堵标签和自闭合标签
 	3. 标签可以嵌套
 	4. 在开始标签中可以定义属性。属性由键值对构成，值需要用引号引起来
 	5. html的标签不区分大小写，建议使用小写

标签学习

 1. 文件标签：构成 html 最基本的标签
 	* <html>：html文档的根标签
 	* <head>：头标签。用于指定html文档的一些属性，引入外部的资源。
 	* <title>：标题标签
 	* <body>：体标签
 	* <!DOCTYPE html>：html5中定义该文档是html文档

 2. 文本标签：和文本有关的标签
 	* 注释：<!-- 注释内容 -->
 	* <h1>	to <h6>：标题标签
 		* h1~h6：字体大小逐渐递减
 	* <p>：段落标签
 	* <br>：换行标签
 	* <hr>：展示一条水平线
 		* 属性：
 			* color：颜色
 			* width：宽度
 			* size：高度
 			* align：对齐方式
 				* center：居中
 				* left：左对齐
 				* right：右对齐
 	* <b>：字体加粗
 	* <i>：斜体
 	* <font>：字体标签
 		* 属性：
 			* color:颜色
 			* size:大小
 			* face:字体

 		* 属性定义：
 			* color：
 				1. 英文单词：red，green..
 				2. rgb(值1,值2,值3)：值的范围是0~255
 				3. #值1值2值3：值得范围00~FF之间。
 			* width：
 				1. 数值：默认单位是px(像素)
 				2. 数值%：占比相对于父元素的比例

 3. 图片标签
 	* <img>：展示图片
 		* 属性：
 			* src：指定图片的位置

 4. 列表标签：
 	* 有序列表：
 		* <ol>：定义有序列表
 		* <li>：定义列表行
 	* 无序列表：
 		* <ul>：定义无序列表
 		* <li>：定义列表行

 5. 链接标签
 	* <a>：定义一个超链接
 		* 属性：
 			* href：指定访问资源的URL（统一资源定位符）
 			* target：指定打开资源的方式
 				* _self：默认值，在当前页打开
 				* _blank：在新标签页打开

 6. div和span
 	* <div>：每一个div占满一整行，块级标签。
 	* <span>：文本信息在一行展示，行内标签	内联标签

 7. 语义化标签
 	1. <header>：页眉
 	2. <footer>：页脚

 8. 表格标签
 	* <table>：定义表格
 		* width：宽度
 		* border：边框
 		* cellpadding：定义内容和单元格的距离
 		* cellspacing：定义单元格之间的距离。如果指定为0，则单元格会合为一条
 		* bgcolor：背景色
 		* align：对齐方式
 	* <tr>：定义行
 		* bgcolor：背景色
 		* align：对齐方式
 	* <td>：定义单元格
 		* colspan：合并列
 		* rowspan：合并行
 	* <th>：定义表头单元格
 	* <caption>：表格标题
 	* <thead>：定义表格的头部分
 	* <tbody>：定义表格的体部分
 	* <tfoot>：定义表格的脚部分

表单标签

 * 表单：
 	* 概念：用于采集用户输入的数据的，用于和服务器进行交互。


 	* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。
 		* 属性：
 			* action：指定提交数据的URL
 			* method：指定提交方式
 				* 分类：一共7种，2种比较常用
 					* get：
 						1. 请求参数会在地址栏中显示，会封装到请求行中
 						2. 请求参数大小是有限制的
 						3. 不太安全
 					* post：
 						1. 请求参数不会在地址栏中显示，会封装到请求体中
 						2. 请求参数的大小没有限制
 						3. 较为安全

 		* 表单项中的数据想要被提交，必须指定其name属性


 	* 表单项标签：
 		* input：可以通过type属性值，改变元素展示的样式
 			* type属性：
 				* text：文本输入框，默认值
 					* palceholder：指定输入框的提示信息，当输入框的内容变化时清空提示信息
 				* password：密码输入框
 				* radio：单选框
 					* 注意：
 						1. 要是多个内容实现单选的效果，必须设置多个内容为相同的name属性
 						2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
 						3. checked属性，可以指定默认值
 				* checkbox：复选框
 					* 注意：
 						1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
 						2. checked属性，可以指定默认值
 			* label：指定输入项的文字描述信息
 				* 注意：
 					* label的for属性一般会和input的id属性值对应。对应之后点击label区域会让input输入框获取焦点。

 		* select：下拉列表
 			* 子元素：option，指定列表项

 		* textarea：文本域
 			* cols：指定列数，每一行有多少个字符
 			* rows：指定默认行数，写满自动扩容