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的更多相关文章

  1. 从啥也不会到可以胜任最基本的JavaWeb工作,推荐给新人的学习路线(二)

    在上一节中,主要阐述了JavaScript方面的学习路线.先列举一下我朋友的经历,他去过培训机构,说是4个月后月薪过万,虽然他现在还未达到这个指标. 培训机构一般的套路是这样:先教JavaSE,什么都 ...

  2. JavaWeb——Servlet

    一.基本概念 Servlet是运行在Web服务器上的小程序,通过http协议和客户端进行交互. 这里的客户端一般为浏览器,发送http请求(request)给服务器(如Tomcat).服务器接收到请求 ...

  3. JavaWeb——Listener

    一.基本概念 JavaWeb里面的listener是通过观察者设计模式进行实现的.对于观察者模式,这里不做过多介绍,大概讲一下什么意思. 观察者模式又叫发布订阅模式或者监听器模式.在该模式中有两个角色 ...

  4. .JavaWeb文件上传和FileUpload组件使用

    .JavaWeb文件上传 1.自定义上传 文件上传时的表单设计要符合文件提交的方式: 1.提交方式:post 2.表单中有文件上传的表单项:<input type="file" ...

  5. javaWeb应用打包

    在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下:

  6. JavaWeb——tomcat安装及目录介绍

    一.web web可以说,就是一套 请求->处理->响应 的流程.客户端使用浏览器(IE.FireFox等),通过网络(Network)连接到服务器上,使用HTTP协议发起请求(Reque ...

  7. 做JavaWeb开发不知Java集合类不如归家种地

    Java作为面向对象语言对事物的体现都是以对象的形式,为了方便对多个对象的操作,就要对对象进行存储.但是使用数组存储对象方面具有一些弊端,而Java 集合就像一种容器,可以动态地把多个对象的引用放入容 ...

  8. JavaWeb基础学习体系与学习思路

    对于JAVAWEB的学习,首先一定要明确的是学习整体框架和思路,要有一个把控.对于WEB,很多人认为是做网页,简单的把静态网页与JAVAWEB与网页设计一概而论. 拿起一本JS就开始无脑的学习,学了一 ...

  9. Eclipse下配置javaweb项目快速部署到tomcat

    用惯了VS,再用Eclipse,完全有一种从自动挡到手动挡的感觉啊. 很多同学在Eclipse下开发web项目,每一次修改代码,看效果的时候都有右键项目->Run as -> Run on ...

  10. javaweb学习笔记之servlet01

    一.Servlet概述 A servlet is a small Java program that runs within a Web server. Servlets receive and re ...

随机推荐

  1. MeteoInfoLab脚本示例:FY-3C全球火点HDF数据

    FY-3C全球火点HDF数据包含一个FIRES二维变量,第一维是火点数,第二维是一些属性,其中第3.4列分别是火点的纬度和经度.下面的脚本示例读出所有火点经纬度并绘图.脚本程序: #Add data ...

  2. MeteoInfoLab脚本示例:加载图片和透明图层

    MeteoInfoLab的georead函数提供了读取shape文件.image文件(JPG.PNG等,需要有相应的地理定位文件)文件生成图层的功能(事实上shaperead也是同样的功能,不过函数名 ...

  3. 【循环矩阵乘优化DP】BZOJ 2510 弱题

    题目大意 有 \(M\) 个球,一开始每个球均有一个初始标号,标号范围为 \(1\) - \(N\) 且为整数,标号为 \(i\) 的球有 \(a_i\) 个,并保证 \(\sum a_i = M\) ...

  4. HTML <big> 标签

    HTML <big> 标签 什么是<big> 标签? <big> 标签呈现大号字体效果. 使用 <big> 标签可以很容易地放大字体.这简直不能再简单了 ...

  5. C# 获取两点(经纬度表示)间的距离

    #region 获取两点(经纬度表示)间的距离 /// <summary> /// 获取两点(经纬度表示)间的距离 /// </summary> /// <param n ...

  6. 1-1Java概述

    001_Java语言发展史 Sun公司:Stanford University Network  002Java跨平台原理 平台:指的是操作系统Windows,Mac,Linux等. 总结:在需要运行 ...

  7. 【线上排查实战】AOP切面执行顺序你真的了解吗

    前言 忙,是我这个月的主旋律,也是我频繁鸽文章的接口----蛮三刀把刀 公司这两个月启动了全新的项目,项目排期满满当当,不过该学习还是要学习.这不,给公司搭项目的时候,踩到了一个Spring AOP的 ...

  8. c++ 遍历目录下文件、文件夹

    BOOL GetDirFiles(const char* pszDir, char* pszFileType, std::vector<std::string>& vtFileLi ...

  9. git学习(八) git stash操作

    git stash命令的作用就是将目前还不想提交的但是已经修改的内容进行保存至堆栈中,后续可以在某个分支上恢复出堆栈中的内容.git stash作用的范围包括工作区和暂存区中的内容,没有提交的内容都会 ...

  10. 接收某项课程id,通过axios发起get请求,由于携带params出现的问题(已解决)

    问题:在最新课程页面(NewBook.vue)点击某一项课程,通过传递该课程的 id 跳转至课程详情页(Bookdetail.vue),采取的跳转方式是声明式导航,即 <router-link  ...