一：JavaWeb
1.javaWeb技术体系
2.HTMl 超文本标记语言 （超文本的意思就是除了可以包含文字之外，还可以包含图片链接音乐视频等。。。）
2.1 HTML网页的组成 （结构：HTML 表现：CSS 行为：Ja vaScript JQuery）
2.2 常用HTML标签
1）： html 根标签
2）： head 头标签
3）： body 体标签
4）： h 标题标签
5）： a 超链接
6）： table 表格
7）： form 表单 表单的method如果是get那么在浏览器的地址栏会有详细信息，如果是post则没有
1. HTML代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!-- 设置当前页面使用的字符集，同时也告诉浏览器使用该字符集进行解码 -->
5 <meta charset="UTF-8" />
6 <!-- 设置浏览器标签页中显示的标题 -->
7 <title>Hello World</title>
8 </head>
9 <body>
10 <!-- 注释快捷键是ctrl + shift + / -->
11 <!--行注释的快捷键是Ctrl+shift+c -->
12 我的第一个网页
13 写完记得保存
14 </body>
15 </html>
hello world
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用标签</title>
</head>
<body>
<!--标题标签 一共6个 -->
<h1> 一级标签</h1>
<h2> 二级标签</h2><br/>
<!-- 标题与换行，<br>是换行 -->
<h3> 三级标签</h3>
<h4> 四级标签</h4>
</body>
</html>
常用标题以及换行br
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6
7 <!-- 统一修改当前页面链接的跳转方式 如果后续链接没有单独设置的话 -->
8 <base target="_self">
9 </head>
10 <body>
11 <!--使用a标签创建一个超链接
12 href属性：用来设置要跳转的页面的路径
13 target属性：用来设置跳转的页面在何处打开
14 _self:默认。在当前标签页打开
15 _blank：在新的标签页打开
16 -->
17 <a href="./tag.html">hello</a><br>
18 <a href="./tag.html" target="_self">hello world</a>
19 <!-- -->
20 </body>
21 </html>
超链接于属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this is label HTML</title>
</head>
<body>
<!-- 通过table标签创建一个标签表格 -->
<table border="1">
<!-- 表格中的行使用tr标签表示 -->
<tr>
<!-- 表格中的表头使用th标签表示 -->
<th>姓名</th>
<th>职业</th>
<th>阵营</th>
<th>武器</th>
</tr>
<tr>
<td rowspan="2">liubei</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<!-- 跨行合并单元格 -->
<td >guanyu </td>
<td>a1</td>
<!-- 跨列合并单元格 以及居中--> <td colspan="2" align="center">b1</td> </tr>
</table>
</body>
</html>
表格的跨行列合并于居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 使用form标签创建一个表单
action属性：指定服务器的地址
method属性：指定表单的请求方式
get：默认值，发送一个get请求，用户的数据通过浏览器的地址栏进行传输
post：发送一个post请求名用户输入的数据通过请求体
-->
<form action="taget.html" method="post">
<!-- 表单中的表单项使用input表示，不同的表单项通过type属性指定 -->
<!-- 用户输入的数据通过name属性值进行携带，并以键值对的形式发送到服务器，多个键值对之间使用&符号分隔
例如：user=admin&psd=123456 -->
用户名：<input type="text" name="user"><br>
密码：<input type="password" name="psd"><br>
<!-- 通过value来指定按钮上显示的文字 -->
<input type="submit" value="login">
</form>
</body>
</html>
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>古诗词</title>
<style type="text/css">
/* 标签选择器 */
h1 {
color:red
}
h2 {
background-color: red
}
/*ID选择器
格式：#id属性值
*/
#p1{color:green} /*类选择器
格式：.class (该处的点class不能忽略点)
*/
.p2{color:blue}
/*分组选择器
格式：将各个选择器之间使用逗号分隔 */
#p1,.p2{font-size:30px}
</style>
</head>
<body>
<h1>静夜思</h1>
<h2>唐。李白</h2>
<p id="p1">hi mygirfrined</p>
<p class="p2">hi my boy frined</p>
<p class="p2">hi my boy frined</p>
<p class="p2">hi my boy frined</p>
<p>hi my boy frined</p>
<div>我是div标签，默认占用浏览器的一整行，我是用来布局的</div>1111
</body>
</html>
选择器设置字体颜色等css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>古诗词</title>
<style type="text/css">
/* 标签选择器 */
h1 {
color:red
}
h2 {
background-color: red
}
/*ID选择器
格式：#id属性值
*/
#p1{color:green} /*类选择器
格式：.class (该处的点class不能忽略点)
*/
.p2{color:blue}
/*分组选择器
格式：将各个选择器之间使用逗号分隔 */
#p1,.p2{font-size:30px}
</style>
</head>
<body>
<h1>静夜思</h1>
<h2>唐。李白</h2>
<p id="p1">hi mygirfrined</p>
<p class="p2">hi my boy frined</p>
<p class="p2">hi my boy frined</p>
<p class="p2">hi my boy frined</p>
<p>hi my boy frined</p>
<div class="p2">我是div标签，默认占用浏览器的一整行，我是用来布局的</div>1111
<!--
颜色表达方式：
1.使用英文单词表示
例如：红色：red
2.使用rgb值表示
例如：rgb（255,255,255）
3.使用十六进制数
例如红色：#FF0000
--> </body>
</html>
颜色表达方式
一：JavaWeb的更多相关文章
- 从啥也不会到可以胜任最基本的JavaWeb工作，推荐给新人的学习路线（二）
在上一节中,主要阐述了JavaScript方面的学习路线.先列举一下我朋友的经历,他去过培训机构,说是4个月后月薪过万,虽然他现在还未达到这个指标. 培训机构一般的套路是这样:先教JavaSE,什么都 ...
- JavaWeb——Servlet
一.基本概念 Servlet是运行在Web服务器上的小程序,通过http协议和客户端进行交互. 这里的客户端一般为浏览器,发送http请求(request)给服务器(如Tomcat).服务器接收到请求 ...
- JavaWeb——Listener
一.基本概念 JavaWeb里面的listener是通过观察者设计模式进行实现的.对于观察者模式,这里不做过多介绍,大概讲一下什么意思. 观察者模式又叫发布订阅模式或者监听器模式.在该模式中有两个角色 ...
- .JavaWeb文件上传和FileUpload组件使用
.JavaWeb文件上传 1.自定义上传 文件上传时的表单设计要符合文件提交的方式: 1.提交方式:post 2.表单中有文件上传的表单项:<input type="file" ...
- javaWeb应用打包
在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下:
- JavaWeb——tomcat安装及目录介绍
一.web web可以说,就是一套 请求->处理->响应 的流程.客户端使用浏览器(IE.FireFox等),通过网络(Network)连接到服务器上,使用HTTP协议发起请求(Reque ...
- 做JavaWeb开发不知Java集合类不如归家种地
Java作为面向对象语言对事物的体现都是以对象的形式,为了方便对多个对象的操作,就要对对象进行存储.但是使用数组存储对象方面具有一些弊端,而Java 集合就像一种容器,可以动态地把多个对象的引用放入容 ...
- JavaWeb基础学习体系与学习思路
对于JAVAWEB的学习,首先一定要明确的是学习整体框架和思路,要有一个把控.对于WEB,很多人认为是做网页,简单的把静态网页与JAVAWEB与网页设计一概而论. 拿起一本JS就开始无脑的学习,学了一 ...
- Eclipse下配置javaweb项目快速部署到tomcat
用惯了VS,再用Eclipse,完全有一种从自动挡到手动挡的感觉啊. 很多同学在Eclipse下开发web项目,每一次修改代码,看效果的时候都有右键项目->Run as -> Run on ...
- javaweb学习笔记之servlet01
一.Servlet概述 A servlet is a small Java program that runs within a Web server. Servlets receive and re ...
随机推荐
- day26 Pyhton 面向对象复习
一 class 类名(): pass 对象 object 对象 = 类名() class Person: pass print(Person)#<class '__main__.Person'& ...
- CentOS 7操作系统目录结构介绍
CentOS 7操作系统目录结构介绍 操作系统存在着大量的数据文件信息,相应文件信息会存在于系统相应目录中,为了更好的管理数据信息,会将系统进行一些目录规划,不同目录存放不同的资源. 根下目录结构说明 ...
- 【思维】Luogu P3941 入阵曲
题目大意 洛谷链接 给出一个矩阵和 \(K\) ,问有多少子矩阵中的元素和能整除 \(K\). 数据范围 \(2\leq n,m\leq 400\),\(0\leq K\leq 10^6\). 思路 ...
- 【不知道怎么分类】CF 819B Mister B and PR Shifts
题目内容 洛谷链接 定义一个全排列\(p_i\)的偏移值为\(\sum_{i=1}^{n}|p[i]-i|\). 给你一个全排列,你可以从后面拿\(k\in[0,n-1]\)个数放在前面,使得该全排列 ...
- Linux给特定进程单独指定DNS
Linux本身只能通过/etc/resolv.conf设置全系统的DNS.这里有一种给特定进程单独设置DNS的方法,通过免root的mount namespace达成.使用脚本只需要一条简洁的命令就可 ...
- WebFlux快速上手
一.新建项目 示例使用IDEA快速创建基于SpringBoot的工程. springboot 2.3.1 java 8 WebFlux 必须选用Reactive的库 POM 依赖 <depend ...
- gin框架使用orm操作数据库(转)
简介:orm俗称关系对象模型,用来映射数据库SQL和对象的工具 ,相当于mongodb里面的mongoose库,Java里面的mybatis ibatis Golang GORM使用 https: ...
- centos8平台给sudo配置日志
一,sudo日志的用途: 我们可以记录下来用户账号在哪个时间进行过sudo 这样不需要再从secure日志中查找用户的sudo记录 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://w ...
- 【认知服务 Azure Cognitive Service】使用认知服务的密钥无法访问语音服务[ErrorCode=AuthenticationFailure] (2020-08时的遇见的问题，2020-09月已解决)
问题情形 根据微软认知服务的文档介绍,创建认知服务(Cognitive Service)后,可以调用微软的影像(计算机视觉,人脸),语言(LUIS, 文本分析,文本翻译),语音(文本转语音,语音转文本 ...
- Vue踩坑日记-Element this.$message 找不到模块
在使用Vue.js的 Element框架时,无法使用Message组件 浏览器提示:找不到组件 原始写法: this.$message({ message: '恭喜你,这是一条成功消息', type: ...