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. 很多人都搞不清楚C语言和C++的关系！今天我们来一探究竟为大家解惑~

    最近,身边有许多小伙伴已经开始学习编程了,但是呢,学习又会碰到许多的问题,其中作为新手小白提到最多的问题就是编程语言的选择. 每次遇到这种问题,看起来很简单,但是又有很多小伙伴搞不清编程语言之间的关系 ...

  2. doment ready事件和load事件的区别及实现

    从2017年9月至今工作中大部分使用react,前端渲染的一些基础性知识记忆不是很深刻了.面试**公司的时候,碰到"document ready和load的区别,以及document rea ...

  3. IntelliJ IDEA 15款 神级超级牛逼插件推荐（超赞，谁用谁知道）

    满满的都是干货  所有插件都是在 ctrl+alt+s 里的plugins 里进行搜索安装 1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的敲击 ...

  4. 一个例子"入坑"布谷鸟算法(附完整py代码)

    布谷鸟是比较新的启发式最优化算法,但其与传统的遗传算法,退火算法等相比,被证明收敛速度更快,计算效率更高! 文章目录 本文诞生的缘由 布谷鸟算法思想简介 更新位置的方式 莱维飞行 局部随机行走 抛出个 ...

  5. 尝试从零开始构建我的商城 (一) :使用Abp vNext快速一个简单的商城项目

    尝试从零开始构建我的商城 (一) :使用Abp vNext快速搭建一个简单的项目 前言 GitHub地址 https://github.com/yingpanwang/MyShop 此文目的 本文将尝 ...

  6. Bitmap缩放(一)

    使用矩阵进行压缩,通过缩放图片尺寸,来达到压缩图片的效果,和采样率的原理一样.先用位图的option将位图压缩一半,再用matrix缩放0.3f public class MainActivity e ...

  7. 干货分享：一键网络重装系统 - 魔改版（适用于Linux / Windows）

      简介 一键网络重装系统 - 魔改版,它可以通过Internet重新安装Linux和Windows以及常见的操作系统.例如:Linux(CentOS,Debian,Ubuntu.etc..),Win ...

  8. 打爆你的 CPU

    打爆你的 CPU Intro 今天来尝试写一段代码,把 CPU 打满,让所有处理器的 CPU 使用率达到 100% 如何提高 CPU 使用率 想要提高 CPU 的使用率就是要让 CPU 一直在工作,单 ...

  9. ThreadLocal内存泄漏需要注意的

    前段时间在网上看到了一篇关于ThreadLocal内存泄漏的文章 于是个人也研究了下ThreadLocal 对象,其原理是: ThreadLocal 定义的变量值 会存储在当前线程的一个map集合中 ...

  10. JavaScript监听滚动条的进度条

    <style type="text/css"> *{ margin: 0; padding: 0; } .g-box{ width: 100%; height: 400 ...