Javaweb_标签_Day1

Day 1

是什么、做什么、怎么做

一、  html简介

1. 什么是html

HyperText Markup Language：超文本标记语言、网页语言

超文本：超出文本的范畴，使用html可以轻松实现这样操作

标记：html所有的操作都是通过标记实现的，标记就是标签

<标签名称>

网页语言

2. 第一个html程序

-JAVA文件后缀：.java

先编译，再运行（虚拟机jvm）

-html文件后缀：.html或者.htm

直接通过浏览器运行

3. html的操作规范

a．   html文件要有开始标签和结束标签

 

b．   html包含两部分内容

--设置相关信息

--显示在页面上的内容都写在body里面

c．   html的标签有开始标签，也要有结束标签，要成对存在

d．   html的代码不区分大小写

e．   有些标签没有结束标签，在标签内加/结束

--换行标签：

--水平线标签：

---

--图像标签：

--输入项标签：

--设置页面的一些相关内容：

4. html的操作思想

网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据封装起来，通过修改标签的属性值来实现标签内数据样式的变化

 

二、  文字标签和注释标签

1．   文字标签

A．   标签：

B．   属性

size：文字大小，取值范围1-7，超出7，默认7

color：文字颜色，两种表示方法

英文单词：red、green、blue、yellow、gray

   十六进制：#ffffff  RGB

2．   注释标签

A．   标签：

B．   属性

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

1. 标题标签

A．   标签：

 

 

…… 

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

B．   属性

2. 水平线标签

A．   标签：

---

B．   属性

size：水平线粗细，取值范围1-7，超出7，默认7

color：水平线颜色，两种表示方法

英文单词：red、green、blue、yellow、gray

   十六进制：#ffffff RGB

3. 特殊字符（需要转义）

<：<

>：>

空格： 

版权符@：©

 

四、  列表标签

需求1：显示下面的效果（列表）

传智播客

   财务部

   学工部

人事部

标签：

表示列表的范围

   --在dl里面

：上层内容

   --在dl里面

：下层内容

 

需求2：显示下面的效果（有序列表）

1.财务部

2.学工部

3.人事部

 

a.财务部

b.学工部

c.人事部

 

i.财务部

ii.学工部

iii.人事部

 

标签：

表示有序列表的范围

属性：type 设置排列方式  1（默认）  a  i

   --在ol里面

--标签：

需求3：显示下面的效果（无序列表）

特殊符号（方框）财务部

特殊符号（方框）学工部

特殊符号（方框）人事部

 

标签：

表示无序列表的范围

属性：type 设置排列方式 

实心圆disc(默认) 空心圆circle 实心方框square

   --在ul里面

--标签：

 

五、  图像标签（在网页显示图片）

标签：

属性

--src：图片的路径

   --width：图片的宽度

   --height：图片的高度

   --alt：图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容，有些浏览器下不显示，兼容性较差

 

六、  路径介绍

1. 绝对路径（简单）

2. 相对路径：一个文件相对于另外一个文件的位置（三种）

--html文件和图片在一个路径下，可以直接写文件名称

--图片在html文件的下层目录

 

src="img\a.jpg"

--图片在html文件的上层目录

 

   src="../c.png"

--图片在html文件的上层的上层目录

src="../../c.png"

 

七、  案例一、列表标签（商品列表）

八、  超链接标签

1. 链接资源

标签：

属性

--href：链接到资源的路径

   --target：设置打开方式

      _blank：在一个新窗口打开

      _self：在当前页面打开（默认）

显示在页面上的内容

   当超链接不需要到任何的地址，在href里面加#

显示在页面上的内容

 

2. 定位资源（从网页的底部直接回到顶部）

首先要定义一个位置

   顶部

   然后回到这个位置

回到顶部

 

引入一个标签pre：原样输出

 

九、  表格标签

需求1：显示下面的效果

人员信息

姓名	性别	年龄
东方不败	男	20
岳不群	女	30
林平之	男	40

--第一行：3个单元格

--第二行：3个单元格

--第三行：3个单元格

--第四行：3个单元格

 

标签：

表示表格的范围

属性

   --border： 表格线的粗细

      -- bordercolor：表格线的颜色

   --cellspacing： 单元格之间的距离

      --width：表格的宽度

-- height：表格的高度

   --在table里面

--标签： 表格的行

      --属性：align 设置对齐方式

居左left  居中center  居右right

         --在tr里面

--标签： 或者 单元格

属性：align 设置对齐方式

居左left  居中center  居右right

--在table里面

--标签： 表格的标题

 

   首先定义一个表格的范围使用table，然后定义一行使用tr，最后定义一个单元格使用td

需求2：合并单元格

跨列合并（colspan）

人员信息
东方不败	男	20
岳不群	女	30
林平之	男	40

--第一行：1个单元格

--第二行：3个单元格

--第三行：3个单元格

--第四行：3个单元格

人员信息

 

 

跨行合并（rowspan）

东方不败	男	20
岳不群	女
林平之	男

--第一行：3个单元格

--第二行：2个单元格

--第三行：2个单元格

 

十、  表单标签（提交数据到服务器）

标签：

表示表单的范围

属性

--action ="表单提交到的地址"，默认提交到当前页面

   --method="表单提交的方式"

      get（默认）、post

   --enctype：一般请求下不需要这个属性，做文件上传的时候需要设置这个属性

面试题：get和post区别

A．   get请求地址栏会携带提交的数据， post请求地址栏不会携带数据（数据在请求体里面）

B．   get请求安全级别较低，post较高

C．   get请求有数据大小限制（地址栏不能携带过多的数据），post没有限制

   --在form里面，输入项（可以输入内容或者选择内容的部分）

      --标签：大部分的输入项

      --属性：type="输入项的内容"

              输入项一般都有name属性

        普通输入项：

        密码输入项：

        单选输入项：男

                            女

           --在里面需要属性name

           --name属性值必须一样

           --必须要有一个value值

           --属性：checked=" checked" 默认选择

        复选输入项：篮球

                          乒乓球

                            排球

           --在里面需要属性name

           --name属性值必须一样

           --必须要有一个value值

           --属性：checked=" checked" 默认选择

文件输入项：

隐藏项：

   --不会在页面上显示，但是存在于html代码里面

提交按钮：

         

使用图片按钮提交：

重置按钮：

普通按钮：（Day 3）

   --和js一起使用

--标签：下拉输入项

--属性：selected=" selected"默认选择

          

请选择

             

1991

             

1992

             

1993

             

1994

      --标签：文本域

      --属性：cols="列数" rows="行数"

 

 

十一、表单标签案例

十二、html中其他常用标签

：字体加粗

：删除线

：下划线

：斜体

：原样输出

 

：下标
：上标

 

：自动换行

：不会自动换行，一行显示

 

div应用场景

span应用场景

：段落标签，比

标签多一行

 

十三、html头标签

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

 

--标签： 表示在标签上显示的内容

--标签： 设置页面的一些相关内容

经过3秒自动跳转到其他页面

--标签： 设置超链接的基本属性

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

   --标签： 引入外部文件（比如css文件）

更多AI资源请关注公众号：大胡子的AI

欢迎各位AI爱好者加入群聊交流学习：882345565（内有大量免费资源哦！）

版权声明：本文为博主原创文章，未经博主允许不得转载。如要转载请与本人联系。