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.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3 <head>
  4.  4     <!-- 设置当前页面使用的字符集，同时也告诉浏览器使用该字符集进行解码 -->
  5.  5     <meta charset="UTF-8" />
  6.  6     <!-- 设置浏览器标签页中显示的标题 -->
  7.  7     <title>Hello World</title>
  8.  8 </head>
  9.  9 <body>
  10. 10     <!-- 注释快捷键是ctrl + shift + / -->
  11. 11     <!--行注释的快捷键是Ctrl+shift+c -->
  12. 12     我的第一个网页
  13. 13     写完记得保存
  14. 14 </body>
  15. 15 </html>

hello world

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>常用标签</title>
  6. </head>
  7. <body>
  8.     <!--标题标签 一共6个  -->
  9.     <h1> 一级标签</h1>
  10.     <h2> 二级标签</h2><br/>
  11.     <!-- 标题与换行，<br>是换行 -->
  12.     <h3> 三级标签</h3>
  13.     <h4> 四级标签</h4>
  14. </body>
  15. </html>

常用标题以及换行br

  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3 <head>
  4.  4 <meta charset="UTF-8">
  5.  5 <title>Insert title here</title>
  6.  6
  7.  7 <!-- 统一修改当前页面链接的跳转方式  如果后续链接没有单独设置的话 -->
  8.  8 <base target="_self">
  9.  9 </head>
  10. 10 <body>
  11. 11     <!--使用a标签创建一个超链接
  12. 12             href属性：用来设置要跳转的页面的路径
  13. 13             target属性：用来设置跳转的页面在何处打开
  14. 14                 _self:默认。在当前标签页打开
  15. 15                 _blank：在新的标签页打开
  16. 16              -->
  17. 17         <a href="./tag.html">hello</a><br>
  18. 18         <a href="./tag.html" target="_self">hello world</a>
  19. 19         <!--  -->
  20. 20 </body>
  21. 21 </html>

超链接于属性

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>this is label HTML</title>
  6. </head>
  7. <body>
  8. <!-- 通过table标签创建一个标签表格 -->
  9.     <table border="1">
  10.     <!-- 表格中的行使用tr标签表示 -->
  11.         <tr>
  12.             <!-- 表格中的表头使用th标签表示 -->
  13.             <th>姓名</th>
  14.             <th>职业</th>
  15.             <th>阵营</th>
  16.             <th>武器</th>
  17.         </tr>
  18.         <tr>
  19.             <td rowspan="2">liubei</td>
  20.             <td>a</td>
  21.             <td>b</td>
  22.             <td>c</td>
  23.         </tr>
  24.         <tr>
  25.         <!-- 跨行合并单元格 -->
  26.             <td >guanyu </td>
  27.             <td>a1</td>
  28.             <!-- 跨列合并单元格 以及居中-->
  29.  
  30.             <td colspan="2" align="center">b1</td>
  31.  
  32.         </tr>
  33.     </table>
  34. </body>
  35. </html>

表格的跨行列合并于居中

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8.     <!-- 使用form标签创建一个表单
  9.         action属性：指定服务器的地址
  10.         method属性：指定表单的请求方式
  11.             get：默认值，发送一个get请求，用户的数据通过浏览器的地址栏进行传输
  12.             post：发送一个post请求名用户输入的数据通过请求体
  13.     -->
  14.     <form action="taget.html" method="post">
  15.         <!-- 表单中的表单项使用input表示，不同的表单项通过type属性指定 -->
  16.         <!-- 用户输入的数据通过name属性值进行携带，并以键值对的形式发送到服务器，多个键值对之间使用&符号分隔
  17.             例如：user=admin&psd=123456 -->
  18.         用户名：<input type="text" name="user"><br>
  19.         密码：<input type="password" name="psd"><br>
  20.         <!-- 通过value来指定按钮上显示的文字 -->
  21.         <input type="submit" value="login">
  22.     </form>
  23. </body>
  24. </html>

表单

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>古诗词</title>
  6. <style type="text/css">
  7.     /* 标签选择器 */
  8.     h1 {
  9.     color:red
  10.     }
  11.     h2 {
  12.         background-color: red
  13.     }
  14. /*ID选择器
  15. 格式：#id属性值
  16. */
  17.     #p1{color:green}
  18.  
  19.     /*类选择器
  20.     格式：.class (该处的点class不能忽略点)
  21.     */
  22.     .p2{color:blue}
  23.     /*分组选择器
  24.     格式：将各个选择器之间使用逗号分隔  */
  25.     #p1,.p2{font-size:30px}
  26. </style>
  27. </head>
  28. <body>
  29.     <h1>静夜思</h1>
  30.     <h2>唐。李白</h2>
  31.     <p id="p1">hi mygirfrined</p>
  32.     <p class="p2">hi my boy frined</p>
  33.     <p class="p2">hi my boy frined</p>
  34.     <p class="p2">hi my boy frined</p>
  35.     <p>hi my boy frined</p>
  36.     <div>我是div标签，默认占用浏览器的一整行，我是用来布局的</div>1111
  37. </body>
  38. </html>

选择器设置字体颜色等css

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>古诗词</title>
  6. <style type="text/css">
  7.     /* 标签选择器 */
  8.     h1 {
  9.     color:red
  10.     }
  11.     h2 {
  12.         background-color: red
  13.     }
  14. /*ID选择器
  15. 格式：#id属性值
  16. */
  17.     #p1{color:green}
  18.  
  19.     /*类选择器
  20.     格式：.class (该处的点class不能忽略点)
  21.     */
  22.     .p2{color:blue}
  23.     /*分组选择器
  24.     格式：将各个选择器之间使用逗号分隔  */
  25.     #p1,.p2{font-size:30px}
  26. </style>
  27. </head>
  28. <body>
  29.     <h1>静夜思</h1>
  30.     <h2>唐。李白</h2>
  31.     <p id="p1">hi mygirfrined</p>
  32.     <p class="p2">hi my boy frined</p>
  33.     <p class="p2">hi my boy frined</p>
  34.     <p class="p2">hi my boy frined</p>
  35.     <p>hi my boy frined</p>
  36.     <div class="p2">我是div标签，默认占用浏览器的一整行，我是用来布局的</div>1111
  37.     <!--
  38.         颜色表达方式：
  39.         1.使用英文单词表示
  40.             例如：红色：red
  41.         2.使用rgb值表示
  42.             例如：rgb（255,255,255）
  43.         3.使用十六进制数
  44.             例如红色：#FF0000
  45.      -->
  46.  
  47. </body>
  48. </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. Flask实现websocket

    from flask import Flask,request user_socket_dict = {} app = Flask(__name__) @app.route("/conn_w ...

  2. JSON,数组根据字段分组

    function GroupbyName(data, Name) { //data数据源,Name 根据什么字段分组 var map = {}, dest = []; for (var i = 0; ...

  3. 利用RNN进行中文文本分类（数据集是复旦中文语料）

    利用TfidfVectorizer进行中文文本分类(数据集是复旦中文语料) 1.训练词向量 数据预处理参考利用TfidfVectorizer进行中文文本分类(数据集是复旦中文语料) ,现在我们有了分词 ...

  4. Java9系列第6篇-Stream流API的增强

    我计划在后续的一段时间内,写一系列关于java 9的文章,虽然java 9 不像Java 8或者Java 11那样的核心java版本,但是还是有很多的特性值得关注.期待您能关注我,我将把java 9 ...

  5. javascript 数字 字母 互转

    var alphabet= String.fromCharCode(64 + parseInt(填写数字); 单个字符转数字: 'a'.charCodeAt(0) 结果: 97 数字转字母: Stri ...

  6. skywalking8.1.0（一） 安装与部署

    skywalking部署 背景介绍 目前公司后端服务全部为微服务并运行在kubernetes集群上,而大量的微服务的背后拥有很复杂的调用关系,纵使你是公司的资深开发也很难理清每一个后端服务之间的依赖关 ...

  7. Phoenix的一些问题

    date: 2020-09-10 13:50:00 updated: 2020-09-14 16:30:00 1. Phoenix索引 全局索引:适合读多写少的场景.写数据时因为索引表分布在不同数据节 ...

  8. windows7 安装配置NodeJS、NPM

    转载自https://blog.csdn.net/dengxw00/article/details/82974808 windows7 安装配置NodeJS.NPM一.安装 NodeJS1.登陆官网( ...

  9. 拖拽编写SVG图形化工具(二)

    getAttributesNs/setAttributesNs element.setAttributeNS(namespace,name,value) namespace 是指定属性的命名空间的一个 ...

  10. Filebeat 根据不同的日志设置不同的索引

    平时在物理机上使用 Filebeat 收集日志时,会编写多个 filebeat 配置文件然后启动多个 filebeat 进程来收集不同路径下的日志并设置相对应的索引.那么如果将所有的日志路径都写到一个 ...