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. 推荐算法之： DeepFM及使用DeepCTR测试

    算法介绍 左边deep network,右边FM,所以叫deepFM 包含两个部分: Part1: FM(Factorization machines),因子分解机部分 在传统的一阶线性回归之上,加了 ...

  2. docker启动服务---------------kafka+zookeeper

    docker run -d --name zookeeper -p 2181:2181 wurstmeister/zookeeperdocker run -d --name kafka -p 9092 ...

  3. Ambari仓库安装教程

    Ambari仓库安装教程 如果用户需要后续使用Ambari server进行安装Hadoop则必须搭建一个内部的yum源,否则直接下载速度将会很慢,当然该服务仅要搭建一个即可,可以一直使用. 一.Ce ...

  4. Linux用户和组管理命令-切换用户su

    切换用户或以其他用户身份执行命令 su: 即 switch user,命令可以切换用户身份,并且以指定用户的身份执行命令 格式: su [options...] [-] [user [args...] ...

  5. git学习(九) idea git stash操作

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

  6. win7下安装docker

    为了支持老版本的windows系统,docker官方提供了docker toolbox,让用户可以在windows10以前版本的操作系统上来体验docker. 一,安装 下载msi安装文件,一路nex ...

  7. thinkphp数组给js赋值 tp模板把数组赋值给js变量

    var arr=transArr({$array|json_encode=true}); function transArr(obj) { var tem=[]; $.each(obj, functi ...

  8. 线程池ScheduledThreadPool

    定时线程池 public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle ...

  9. 撤销rebase与git原理

    git对象 git是面向对象的,对象存储在.git/objects文件夹中.此文件夹中,一个对象就是一个文件,文件名就是对象的id 提交commit的时候,每个文件都是一个数据对象,一个树对象会用来维 ...

  10. shell脚本之编程基础介绍

    1.shell脚本简介 1.1 shell是什么? shell是一个命令解释器,它在操作系统的最外层负责直接与用户对话,把用户的输入解释给操作系统:并处理各种各样的操作系统的输入,将结果输出到屏幕返回 ...