JavaWeb笔记

html的简介

#  什么是html?
    HyperText Markup Language:超文本标记语言,网页语言
    超文本:超出文本的范畴,使用html可以轻松实现这样的操作
    标记:html所以的操作都是通过标记实现的,标记就是标签,<标签名称>
    网页语言:
    第一个html程序
      创建java文件.java
        先编译,然后再运行(jvm)
        html后缀是.html  .htm
        直接通过浏览器就可以运行

html的规范

 1.一个html文件开始标签和结束的标签  
   定义一个java方法 { }
 2.html包含两部分内容
   (1)设置相关信息
   (2)显示在页面上的内容都写在body里面
 3.html的标签有开始标签,也有结束标签
  
 4.html的代码不区分大小写的
 5.有些标签,没有结束标签,在标签内结束
   比如 换行 
单线

html的操作思想

网页中有很多数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签吧要操作的数据包起来(封装起来)

通过修改标签的属性值实现标签内数据样式的变化。

一个标签相当于一个容器,想要修改容器内数据的样式,只需要改变容器的属性值,就可以实现容器内数据样式的变化

html中常用的标签

1、文字标签和注释标签

   文字标签:修改文字的样式
 
 属性:
     size:文字的大小  取值范围 1-7,超出了7,默认是7
     color:文字颜色
       两种表示方式:
         英文单词:red  green  blue  black  white  yellow  gray ...
         使用十六进制数表示 #ffffff : RGB
           通过工具实现不同颜色#00ff33

 注释标签:
   html的注释:

2、标题标签、水平线标签和特殊字符

标题标签
    

......
从h1到h6,大小是依次变小的,同时会自动换行 水平线标签
属性 size:水平线的粗细 取值范围 1-7 color:颜色 代码:
特殊字符 想要在页面上显示这样的内容 :是网页的开始 需要对特殊字符进行转义 < : < > : > 空格: &: &

3、列表标签

比如现在显示这样的效果
        财务部
        学工部
        人事部
:表示列表的范围 在dl里面
:上层内容 在dl里面
:下层内容 代码
XX公司
财务部
学工部
人事部
想要在页面上显示这样的效果 1.财务部 2.学工部 3.人事部 a.财务部 b.学工部 c.人事部 i.财务部 ii.学工部 iii.人事部
    :有序列表的范围 属性 type:设置排序方式 1(默认) a i 在ol标签里面
  1. 具体内容
  2. 代码
    1. 财务部
    2. 学工部
    3. 人事部
    想要在页面上显示这样的效果 特殊符号(方框)财务部 特殊符号(方框)学工部
      :表示无序列表的范围 属性:type:空心圆circle 实心圆disc 实心方块square 默认disc 在ul里面
    • 代码
      • 财务部
      • 学工部
      • 人事部

      4、图像标签

      ![](图片的路径)
          src:图片的路径
          width:图片的宽度
          height:图片的高度
      
          alt:图片上显示的文字,把鼠标移动到图片上,停留片刻显示内容
              有些浏览器下不显示(没有效果)
      

      5、路径的介绍

      分类:绝对路径 、 相对路径

      6、超链接标签

      链接资源
           显示在页面上的内容
              href:链接的资源的地址
              target:设置打开的方式,默认是在当前页面打开
                  blank:在一个新窗口打开
                  self:在当前页打开 默认
          当超链接不需要到任何的地址 在href里面加#
              这是一个超链接2
      
      定位资源
          如果想要定位资源:定义一个位置
              顶部
              回到这个位置
              回到顶部
      
              引入一个标签pre: 原样输出
      

      7、表格标签(重要的标签)

      可以对数据进行格式化,使数据显示更加清晰
      
      
      :表示表格的范围 border:表格线 bordercolor:表格线颜色 cellspacing:单元格直接的距离 width:表格的宽度 height:表格的高度 在table里面 设置对齐方式 align: left center right 在tr里面 设置显示方式 align: left center right 使用th也可以表示单元格 表示可以实现居中和加粗 代码 画图分析表格的写法 首先定义一个表格的范围使用table 定义一行使用 tr 定义一个单元格使用 td 操作技巧: 首先数有多少行,数每行里面有多少个单元格 表格的标题 合并单元格 rowspan:跨行 colspan:跨列

      8、表单标签(重点要会)

      可以提交数据到开心网的服务器,这个过程可以使用表单标签实现
      
      
      :定义一个表单的范围 属性 action:提交到地址,默认提交到当前页面 method:表单提交方式 常用的有两种:get和post,默认的是get请求

      面试题:get和post区别

      1、get请求地址栏会携带提交的数据,post不会携带(在请求体里面)

      2、get请求安全级别较低,post较高

      3、get请求数据大小的限制,post没有限制

      enctype:一般请求下不需要这个属性,做文件上传时需要设置这个属性

      输入项:可以输入内容或者选择内容的部分

          大部分输入项使用 
      
          **再输入项里面需要有一个name属性**
      
          普通输入项:
          密码输入项:
          单选输入项:
              在里面需要属性 name
              name的属性值必须要相同
              必须有一个value值
      
              实现默认选中的属性
              checked="checked"
      
              复选输入项:
              在里面需要属性 name
              name 的属性值必须要相同
              必须有一个value值
      
              实现默认选中的属性
              checked="checked"
      
              文件输入项(在后面上传时用到)
              
      
              下拉输入项(不是在input标签里面的)
              
      
              实现默认选中的属性
              selected="selected"
      
              文本域
              
      
              隐藏项(不会显示在页面上,但是存在于html代码里面)
              
      
              提交按钮
              
              
      
              使用图片提交
              
      
              重置按钮:回到输入项的初始状态
              
      
              普通按钮
              
      

      案例:使用表单标签实现注册页面

      使用表格实现页面效果
      超链接不想要他有效果 href="#"
      如果表格里面的单元格没有内容,使用空格作为占位符  
      使用图片提交表单 
      

      9、html中的其他的常用标签的使用

      b:加粗
      s:删除线
      u:下划线
      i:斜体
      
      
      :换行
      :分割线 pre:原样输出 sub:下标 sup:上标 p:段落标签 比br标签多一行

      10、html的头标签的使用

      html两部分组成 head和body

      在head里面的标签就是头标签

      title标签:表示在标签上显示的内容
      标签:设置页面的一些相关的内容
          
          
      base标签:设置超链接的基本设置
          可以统一设置超链接的打开方式
          
      link标签:引入外部文件
      

      11、框架标签的使用

      
          rows:按照行进行划分
              
      
          cols:按照列进行划分
              
      
          具体显示的页面
              
      
      使用框架标签时,不能写在body里面,使用了框架标签,需要把body去掉
      
            //把页面划分成上下两部分
              //上面页面
      
                //把下面部分划分成左右两部分
                 //左边的页面
                    //右边的页面
          
      
      

      如果在左边的页面超链接,想让内容显示在右边的页面中

      设置超链接里面属性target值设置成名称
          超链接1
      

      12、a标签的扩展(了解)

      百度是网络资源
      当a标签里面访问网络资源时候,必须要加一个协议http:表示一个网络的公共协议,
      如果加上http协议后,自动识别访问资源是一个网络资源

      当浏览器里面找到相关协议,首先看这个协议是不是公共协议http
      如果是公共协议,会去本地电脑找支持这个协议的应用程序

      你可能感兴趣的:(JavaWeb笔记)

      人员信息