Web基本概念

Web技术体系

HTML

HTML的基本标签

head标签代表页面的“头”

标签总结

超链接标签

块标签

实体字符(了解)

表格标签

表单标签(重要)

CSS(了解)

Web基本概念
客户端：与用户进行交互，用于接收用户的输入(操作)、展示服务器端的数据以及向服务器传递数据。
服务端：与客户端进行交互，接收客户端的数据、处理具体的业务逻辑、传递给客户端其需要的数据。

服务器的作用：与客户端进行交互，接收客户端的数据、处理具体的业务逻辑、传递给客户端其需要的数据；

“服务器”是一个非常宽泛的概念，从硬件而言:服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机（如PC机、智能手机、ATM等终端甚至是火车系统等大型设备）提供计算或者应用服务。从软件而言:服务器其实就是安装在计算机上的一个软件，根据其作用的不同又可以分为各种不同的服务器，例如应用服务器、数据库服务器、Redis服务器、DNS服务器、ftp服务器等等

常见的服务器操作系统：

Linux系统: 使用最多的服务器系统，安全稳定、性能强劲、开源免费（或少许费用）。

Unix系统: 和硬件服务器捆绑销售，版权不公开，用法和Linux一样。

Windows Server系统: 源代码不开放，费用高昂，漏洞较多，性能较差，运维成本高。

常见的服务器软件：Tomcat(应用服务器)、MySQL(数据服务器)、Redis、FastDFS、ElasticSearch。

虚拟机服务器：虚拟的电脑（模拟器）

业务

业务就是服务器应用程序中的各个功能，例如商城里面的: 注册、登录、添加购物车、提交订单、结算订单等等都称之为业务。

请求(request)：将客户端的数据发送到服务端，比如将用户的信息发送到服务端

响应(response)：服务端的数据反馈到客户端注册成功注册失败

Web技术体系
客户端技术：

HTML、CSS、JavaScript、Vue、Ajax、Axios

服务器端技术：

Tomcat、Servlet、Request、Response、Cookie、Session、Filter、Listener、Thymeleaf

持久层技术(数据库技术已学)：

MySql、JDBC、连接池、DBUtils

网页的组成
html：超文本标记语言网页的框架毛坯房
js: js文件将静态网页变为动态网页能交互
css: 样式美化网页，精装房

HTML

HTML：Hyper Text Markup Language『超文本标记语言』。一门计算机语言，它的作用是搭建网页结构，在网页上展示内容。超文本：可以展示多种资源。标记语言：由一系列『标签』组成的，每个标签都有它固定的含义和确定的页面显示效果。
(

开始标签

结束标签)

html基本结构

  
     
            给浏览器看的
                文档编码格式
            Title      文档的标题
            
            展示数据
           HelloWorld     内容

基本语法规则

文档声明: HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本。
根标签:html标签是整个文档的根标签，只能有一个。其他标签必须放在html标签里面。
头部:head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。
主体:body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。
注释:HTML注释的写法是：
标签名不区分大小写但建议使用小写
根标签有且只能有一个。其他标签必须放在html标签里面。
无论是双标签还是单标签都必须正确关闭
标签可以嵌套但不能交叉嵌套，注释不能嵌套
属性必须有值，值必须加引号，单引号或双引号均可。如果属性名和属性值一样，可以省略属性值。

HTML的基本标签

head标签代表页面的“头”

内部标签

说明

</td><td>定义网页的标题</td></tr><tr><td><meta></td><td>定义网页的基本信息（供搜索引擎）</td></tr><tr><td><style></td><td>定义CSS样式</td></tr><tr><td><link></td><td>链接外部CSS文件或脚本文件</td></tr><tr><td><script></td><td>定义脚本语言</td></tr><tr><td><base></td><td>定义页面所有链接的基础定位（用得很少）</td></tr></tbody></table> <h3 id="%E6%A0%87%E7%AD%BE%E6%80%BB%E7%BB%93">标签总结 <table><thead><tr><th >标签</th><th >说明</th><th >语义</th></tr></thead><tbody><tr><td >~</td><td >标题</td><td >header</td></tr><tr><td ><p></td><td >段落</td><td >paragraph</td></tr><tr><td ><br> (单标签)</td><td >换行</td><td >break</td></tr><tr><td ><hr></td><td >水平线</td><td >horizontal rule</td></tr><tr><td ></td><td >分割（块元素）</td><td >division</td></tr><tr><td ></td><td >区域（行内元素）</td><td >span</td></tr><tr><td > </td><td >加粗</td><td ></td></tr><tr><td ><i> </i></td><td >倾斜</td><td ></td></tr><tr><td >align="center"</td><td >居中</td><td ></td></tr><tr><td >align="right"</td><td >居右</td><td ></td></tr><tr><td ></td><td ></td><td ></td></tr><tr><td >列表标签</td><td ></td><td ></td></tr><tr><td ><li></td><td >标记列表</td><td ></td></tr><tr><td ><ul></td><td >无序列表</td><td ></td></tr><tr><td ><ol></td><td >有序列表</td><td ></td></tr><tr><td></td><td></td><td></td></tr><tr><td>超链接标签</td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td >target=" "</td><td > <p>在哪里打开跳转的页面</p> <p> _blank:新建一个空白页打开<br /> _self:在当前页打开</p> </td><td ></td></tr><tr><td > </td><td >图片标签</td><td ></td></tr><tr><td >src = "图片资源地址"</td><td >图片资源地址，本地文件地址或网络地址</td><td ></td></tr><tr><td >alt = "未找到"</td><td >图片没有加载成功的提示信息</td><td ></td></tr><tr><td >width = 100xp</td><td >设置图片的宽单位xp(像素)</td><td ></td></tr><tr><td >height = 100xp</td><td >设置图片的高</td><td ></td></tr><tr><td ></td><td ></td><td ></td></tr><tr><td>块标签</td><td></td><td></td></tr><tr><td><hr></td><td>水平线</td><td>horizontal rule</td></tr><tr><td></td><td>分割（块元素） </td><td>division</td></tr><tr><td></td><td>区域（行内元素）</td><td>span</td></tr><tr><td></td><td></td><td></td></tr></tbody></table> <pre class="brush:java;toolbar:false"> <body>  <h1 align ="center">一级标题  <h2 align ="right">二级标题  三级标题  四级标题五级标题六级标题 <p>会当凌绝顶一览众山小</p>  <p>穷则独善其身达则兼济天下</p> 12345  <i>67890</i> <br>  <i>汗滴禾下土</i>    <ul> <li>有序1</li> <li>有序2</li> </ul>  <ol> 看书  <li>无序1</li> <li>无序2</li> </ol>  <ul> <li>你好</li> <li>你好</li> </ul> </body></pre> <h3 id="%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE%C2%A0">超链接标签 <table><tbody><tr><th >标签</th><th >说明</th><th >语义</th></tr><tr><td ></td><td >超链接标签</td><td ></td></tr><tr><td >href="资源地址"</td><td >资源地址，本地或网络地址</td><td ></td></tr><tr><td >target=" "</td><td > <p>在哪里打开跳转的页面</p> <p> _blank:新建一个空白页打开<br /> _self:在当前页打开</p> </td><td ></td></tr><tr><td ></td><td ></td><td ></td></tr><tr><td > </td><td >图片标签</td><td ></td></tr><tr><td >src = "图片资源地址"</td><td >图片资源地址，本地文件地址或网络地址</td><td ></td></tr><tr><td >alt = "未找到"</td><td >图片没有加载成功的提示信息</td><td ></td></tr><tr><td >width = 100xp</td><td >设置图片的宽单位xp(像素)</td><td ></td></tr><tr><td >height = 100xp</td><td >设置图片的高</td><td ></td></tr><tr><td ></td><td ></td><td ></td></tr></tbody></table> <p> 路径问题：</p> <ol><li>相对路径：相对自身资源而言，会在本级文件夹查找 <br /><br /> 向上跳转一级 ../</li><li>绝对路径：从服务器的根目录开始查询，具有明显的标识 /开头 (推荐使用)<br /><br /> /:服务器的根目录 http://localhost:63342</li></ol> <pre class="brush:java;toolbar:false"><body> <h1 aligen = "center">超链接标签  百度一下 <br>  跳转到2.各种标签页面  百度空白页百度当前页   相对路径访问   绝对路径访问      </body></pre> <h3 id="%E5%9D%97%E6%A0%87%E7%AD%BE%C2%A0">块标签 <table><tbody><tr><th >标签</th><th >说明</th><th >语义</th></tr><tr><td ></td><td >块标签进行页面布局，会换行</td><td>division</td></tr><tr><td ></td><td >包裹内容，不会换行</td><td>span</td></tr><tr><td ></td><td ></td><td ></td></tr></tbody></table> <pre class="brush:java;toolbar:false"><head> <meta charset="UTF-8"> <title>块级标签你好世界

实体字符(了解)

表格标签

标签

说明

语义

表格标签

一行
		表头行的单元格使用，加粗、居中效果
		一个单元格
	文字居中
colspan="?"	合并列，合并?单元格数量
rowspan="?"	合并行，合并?单元格数量

表单标签(重要)

在项目开发过程中，凡是需要用户填写的信息都需要用到表单。它的作用是接收用户的输入信息，并且将用户输入的信息提交给服务器。

在HTML中我们使用form<>标签来定义一个表单。而对于form标签来说有两个最重要的属性：action和method。

① action属性

用户在表单里填写的信息需要发送到服务器端，对于Java项目来说就是交给Java代码来处理。那么在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。

这个地址要写在form标签的action属性中。但是现在暂时我们还没有服务器端环境，所以先借用一个HTML页面来当作服务器端地址使用。

② method属性

『method』这个单词的意思是『方式、方法』，在form标签中method属性用来定义提交表单的『请求方式』。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。

get：请求能够携带的参数较少，大小有限制，会在浏览器的URL地址栏显示数据类容，不安全，但高效。

post：请求能够u携带的参数没有限制，大小没有限制，不会在浏览器的URL地址栏显示数据内容，安全，但不高效。

在用户使用一个软件系统时，需要一次性提交很多数据是非常正常的现象。我们肯定不能要求用户一个数据一个数据的提交，而肯定是将所有数据填好后一起提交。

我们通过『name属性』来给数据起『名字』，通过『value属性』来保存要发送给服务器的『值』。但是名字和值之间既有可能是『一个名字对应一个值』，也有可能是『一个名字对应多个值』。而事实上在服务器端就是使用Map类型来接收请求参数的。具体的是类型是：Map。name属性就是Map的键，value属性就是Map的值。

表单标签共有4个：、、<select>和<option>。其中<select>和<option>是配合使用的。</p> <p>单行文本框:</p> <pre class="brush:java;toolbar:false"><input type="text" name="signal"/><br/></pre> <p>密码框:</p> <pre class="brush:java;toolbar:false"><input type="password" name="secret"/><br/></pre> <p>单选框:</p> <pre class="brush:java;toolbar:false"><input type="radio" name="season" value="spring" />春天 <input type="radio" name="season" value="summer" checked="checked" />夏天 <input type="radio" name="season" value="autumn" />秋天 <input type="radio" name="season" value="winter" />冬天 <br/></pre> <p>多选框:</p> <pre class="brush:java;toolbar:false"><input type="checkbox" name="team" value="German" checked="checked"/>德国 <input type="checkbox" name="team" value="France"/>法国 <input type="checkbox" name="team" value="China" checked="checked"/>中国</pre> <p>下拉框:</p> <pre class="brush:java;toolbar:false"><select name="interesting"> <option value="swimming">游泳</option> <option value="running">跑步</option> <option value="shooting" selected="selected">射击</option> <option value="skating">溜冰</option> </select></pre> <p>按钮:<br /> 只有提交才会上传数据</p> <pre class="brush:java;toolbar:false"><button type="button">普通按钮</button>或<input type="button" value="普通按钮"/> <button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/> <button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/> </pre> <p>隐藏域:<br /> 通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。</p> <pre class="brush:java;toolbar:false"><input type="hidden" name="userId" value="2233"/></pre> <p>多行文本框:</p> <pre class="brush:java;toolbar:false"><textarea name="desc">

文件表单:

头像:

CSS(了解)

Css 层叠样式表美化html页面的

CSS的引入方式：

行内样式：仅对当前标签生效

内部样式：在当前页面的head标签中添加style标签，在style标签中编写css样式代码; 内部样式仅对当前页面生效


    
    Title

外部样式

创建、编辑CSS文件

.two {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin-top: 5px;
}

引入外部文件

CSS选择器

标签选择器、类选择器、id选择器。优先级：id选择器>类选择器>标签选择器。

转载请注明：文章转载自 www.mshxw.com

本文地址：https://www.mshxw.com/it/836759.html

上一篇 Ubuntu18.04中下载安装arm-linux-gcc交叉编译器

下一篇 fastjson出现$ref问题解析，重复引用问题

Linux相关栏目本月热门文章

关于我们文章归档网站地图联系我们

Day51.HTML、标签、表单、CSS

HTML的基本标签

实体字符(了解)

Linux相关栏目本月热门文章