关闭

javaweb学习笔记_day1

281人阅读 评论(0) 收藏 举报
分类:

 

       Javaweb学习笔记

Day1:javaweb的简介以及各种标签语言的介绍

知识点结构图:


一:HTML语言:

1.1 html的简介:( 什么是html)

     hyperText Markup Language :超文本标记语言,网页语言

     超文本:超出文本的范畴,可以使用HTML来轻松实现

     标记:html所有操作都是通过标签来实现的,标记就是标签

     网页:

  第一个html程序

    html后缀是.html,直接通过浏览器就可以实现

1.2html规范:

1:一个HTML文件开始标签和结束标签  <html> </html>

2:html包含两个部分

(1)<html>设置一些信息</html>

 (2)<body>在网页上要显示的内容都放在body里面</body>

 3:html标签有开始标签,有结束标签

 4:html不区分大小写

5:有些标签,没有结束标签,在标签内结束  比如换行<br/><hr/>

1.3html操作思想:

网页中有很多数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把操作

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

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

二:html中常用标签

  2.1文字标签:修改文字样式

  属性:

  *color:文字颜色两种表示方式:1,英文单词:red green  2.使用十六进制数表示#ffff  通过工具实现不同的颜色

  *size:文字大小,取值范围1-7,超出7之后,默认还是7

   2.2注释标签

-html注释:一种  <!--html-->

-java注释:三种

   2.3标题标签,水平标签,和特殊字符

    *标题标签:

      <h1></h1>   ...  <h6></h6>

      从h1到h6,大小依次变小,同时会自动换行

 

    *水平标签

    - <hr/>

    -属性

      **size:大小,取值范围1-7,超出7之后,默认还是7

      **color:

代码:<hr size= "5" color= "red"/>

 

     *特殊字符

    -想要在网页上显示  <html>:是网页的开始

    -需要对特殊字符进行转义

    * <  : &lt;

         *> :  &gt:

         *空格: &nbsp

         *& : &amp

 

    2.4列表标签

     -比如显示这样的效果

      传智播客

          财务部

            学工部

            人事部

    **  <dl></dl>:表示列表的范围

    ** 在dl里面 <dt></dt>:上层内容

    ** 在dl里面 <dd></dd>:下层内容

    -代码

    <dl>

    <dt>传智播客</dt>

     <dd>财务部</dd>

     <dd>学工部</dd>

     <dd>人事部</dd>

    </dl>

 

 

    -想要在页面上显示这样的效果(加排序)

   1. 财务部

   2. 学工部

    3.人事部

 

    a.财务部

    b.学工部

    c.人事部

 

   i:财务部

   ii:学工部

   iii:人事部

 

   **<ol></ol>:有序列表的范围

    -属性:type:设置排序方式 a,i等,默认是1

   **在ol标签里面<li>具体内容</li>

    代码:

<!--有序列表-->

<ol type="i">

<li>财务部</li>

<li>学工部</li>

<li>人事部</li>

</ol>

   --想要在页面上显示这样的效果(无排序)

    特殊符号(方框)财务部

    特殊符号(方框)学工部

 

   **<ul></ul>表示无序列表的范围

    属性:type :空心圆circle ,实心圆disc(默认),实心方块:square,

     在ul里面<li></li>

     代码:

<!--无序列表-->

<ul type="square">

<li>财务部</li>

<li>学工部</li>

<li>人事部</li>

</ul>

 

2.5图像标签(***)重点

<img src="图片路径"/>

属性:

-src:图片路径

-width:图片宽度

-height:图片高度

-alt:图片显示的文字,把鼠标移动到图片上,停留片刻会显示内容(有些浏览器不显示,)

6.路径的介绍

*分类:两类

绝对路径:加盘符的位置

相对路径:一个文件相对于另一个文件的位置

三种:

**html文件和图片文件都在同一个路径下,可以直接写图片文件名称

**图片在html的下层目录

在002.html中,使用img文件夹下面的a.jpg

E:\BaiduYunDownload\javaweb\javaweb笔记\javaweb程序笔记\day1\   002.html

E:\BaiduYunDownload\javaweb\javaweb笔记\javaweb程序笔记\day1\   img\a.jpg

首先找出两张路径相同的部分,可以直接用img\a.jpg路径来表示

**图片在html的上层目录

E:\BaiduYunDownload\javaweb\javaweb笔记\javaweb程序笔记\day1\002.html

E:\BaiduYunDownload\javaweb\javaweb笔记\javaweb程序笔记\day1\a.jpg

可以直接用..\a.jpg表示图片在html文件的上一次目录,如果图片在html文件的上上层目录的话,就多用..\来表示上一层目录

8 ,超链接标签(重点***)

两种: *链接资源

        -<a href="链接到资源的路径">显示在页面上的内容</a>

 

          ** href:链接的资源地址

          **target:设置打开方式(默认为当前页打开)

            --—_blank:在一个新窗口打开

            --—_self:在当前页打开

         当超链接不需要到任何地址,在href中加#

         <ahref="#">这是超链接</a>

      *定位资源

     ** 如果想要定位资源,:定义一个位置

          <a name="top">顶部</a>

          **回到这个位置

          <a href="#top">回到顶部</a>

          **引入一个标签:pre(原样输出)

9.表格标签(很重要的标签****)

可以对数据进行格式化,是数据更加清晰,完整

*<table></table>:表示表格的范围 (表是没有列的概念,只用单元格来表示

属性:

-border:表格线

-bordercolor:表格颜色

cellspacing;单元格之间的距离

width:表格的宽度

height:表格的高度

**在table里面<tr></tr> 有几行就写几个tr

属性:

设置显示方式align:center,left,right

  ***在tr里面<td></td>   单元格(<th></th>也可以表示单元格,表示居中和加粗)

  属性 设置显示方式align:center,left,right

 画图分析表格的方法:

 -首先定义一个表格的范围使用table

    -定义一行使用tr

    -定义一个单元格用td

**表格的标题

<caption></caption>

代码:

<table border="1"bordercolor="#CC9900" cellspacing="0" width="400"height="500">

合并单元格:

-rowspan:跨行

<td colspan="3">人员信息</td>

-colspan:跨列

**<td colspan="3">人员信息</td>

 

 

10表单标签(最重要标签**********):

*可以提交数据到开心网的服务器,这个过程可以使用表单标签来实现

*<form></form>:定义一个表单

属性:

action:提交到的路径,默认是提交到当前页面

method:表单提交方式

常用有两种:get和post。默认是get请求(get请求可以直接看到参数值。post请求不会看到参数值)

面试题目:get和post的区别

1.get会携带提交的参数,而post不会,post参数是在请求体中

2.get安全性较低,而post安全性较高

3.get请求有数据大小的限制。而post无限制

**enctype:一般请求下是不需要这个属性,做文件上传的时候需要设置这个属性(第22天讲文件上传时候有用)

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

  -大部分的输入项,使用<inputtype="输入项的类型"/>

  **普通的输入项:<inputtype="text"/>

  **密码的输入项:<input type="password"/>

  **单选输入项:<input type ="radio"/>

      -在里面需要属性name

      -name属性值必须要相同

      -必须有一个value值

      实现默认选中属性:<checked="checked"/>

  **复选输入项:<inputtype="checkbox"/>

      -在里面需要属性name

      -name属性值必须要相同

       -必须有一个value值

 实现默认选中属性:<checked="checked"/>

  **文件输入项<input type="file"/>  

 

 

 

  **下拉输入项(不是在input标签里面)

 <select name="birth">

    <option value="1993"selected="selected">1993</option>

     <optionvalue="1994">1994</option>

    <option value="1995">1995</option>

    <option value="1996">1996</option>

 </select>

 

  **文本域

    <textarea cols="" rows=""></textarea>

  **隐藏项

   <input type="hidden"/>

  提交按钮:

 <input type="submit" value="注册"/>

 file:///E:/BaiduYunDownload/javaweb/javaweb笔记/javaweb程序笔记/day1/表单标签-1.html?birth=1993

 

 file:///E:/BaiduYunDownload/javaweb/javaweb笔记/javaweb程序笔记/day1/表单标签-1.html?phone=11&password=11&sex=on&love=on&birth=1993

 

  file:///E:/BaiduYunDownload/javaweb/javaweb笔记/javaweb程序笔记/day1/表单标签-1.html?phone=123&password=123&sex=male&love=pp&birth=1993

 ** 输入项都要加属性name,才能将数据提交到

  **?输入项name的值=输入的值&,参数类似于key-value的形式

 **使用图片提交

 <input type="image" src=""/>

 **重置按钮:回到输入项的初始状态

 <input type="reset"/>

 **普通按钮:和明天的js一起有用

 <input type="button"value=""/>

 1.11使用表单标签来实现注册页面

 -使用表格实现页面效果

 -超链接不想要他有效果href= "#"

 -如果表格的单元格没有内容,则用占位符 &nbsp

 -使用图片提交表单,<inputtype="image" src="图片路径"/>

 

1.12.html中其他常用标签

 b,s,u,i,pre,sub,sup,div,span

 b:加粗

 s:加删除线

 u:加下划线

 i:斜体

 pre:原样输出

 sub:下标

 sup:上标

 div:自动换行

 span:不会自动换行,在一行显示

 p:段落标签,比br标签多一行

 1.13 html的头标签使用

 *html组成部分:head和body

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

 **title::表示在标签上显示的内容

 **<meta>标签:设置页面的一些相关内容

设置几秒跳转,跳转到哪个路径

<meta http-equiv="refresh"content="3;url=图像标签-2.html"/>

**base标签:设置超链接的基本设置

可以统一设置超链接的打开方式

<base target="_blank"/>

**link标签:引入外部文件

**明天css,可以使用link标签使用css文件

1.14;框架标签(非重点,会用就行)

<frameset>

属性:

-rows:按照行进行划分

**<frameset rows="80,*">

表示:将页面按行分为两部分,第一行是80,下面所有的都属于第二行

-cols:列

**<frameset cols="80,*">

<frame>

-具体显示的页面

-<frame name="lower_left"src="b.html"

*使用框架标签的时候,不能写在body里面,必须将body删除

<frameset rows="100,*">

         <framename="top" src="aaa.html"/>

   <frameset cols="80,*"/>

   <frame name="left" src="ccc.html"/>

   <frame name="right" src="fff.html"/>

 

</frameset

<body>

<h1>cccc</h1>

<a href="aaa.html"target="right">c超链接1</a>

<a href="aaa.html"target="right">c超链接2</a>

<a href="xxx.html"target="right">c超链接3</a>

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

-设置超链接属性,target值改为右边页面的名称

<a href ="aaa.html" target=""right>chaolianjie</a>

1.15:扩张a标签(了解)

-百度是网络资源

-当a标签里面访问网络资源时候,必须要加一个协议http: 表示一个网络

的公共协议,如果加上http协议之后,自动识别访问资源是一个网络资源

-当浏览器里面找到相关协议,首先看这个协议是不是公共协议。如果不是公共协议,会去

本地电脑找支持这个协议的应用程序

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:82793次
    • 积分:1449
    • 等级:
    • 排名:千里之外
    • 原创:64篇
    • 转载:7篇
    • 译文:0篇
    • 评论:2条