JavaWeb系列之一（Html与CSS的简介）

来源：互联网发布：ipad pro淘宝编辑：程序博客网时间：2024/05/21 16:47

1.html的简介

超文本标记语言

超文本：超出文本的范畴

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

网页语言

2.写html程序是的规范

（1）html程序以<html>开始，以</html>结束，

（2）在<html>范围里面包含两部分，<head>设置html一些相关的信息</head>和<body>在页面上显示的内容都写在body里面

（3）html的标签不区分大小写

（4）如果想要对数据样式变化，需要使用标签把数据包起来，而标签相当于容器，修改容器的属性值，可以实现容器内样式的变化

3.html常用的标签

（1）文字标签：<font></font>

color:文字的颜色

使用英文单词：red，blue

使用十六进制进行表示#ffffff，RGB，直接使用工具

size：字体的大小

使用1-7，到7之后就一样了

（2）标题标签

自动换行，从h1到h6字体大小依次变小

（3）水平线标签

<hr/>

color:水平线颜色

size：水平线粗细，使用值1-7字体大小

（4）特殊字符

< : &lt

>:&gt

&:&

空格：&nbsp

（5）注释标签

java中有三种注释：单行注释// 多行注释/**/ 文档注释/** */

html的注释

（6）列表标签

1.1<dl></dl>表示列表的范围内

在dl标签里面<dt></dt>上层内容，<dd></dd>下层内容

2.1<ol></ol>表示有序列表

type属性里面的值是 1 a i

在ol里面使用<li>写具体的内容</li>

3.1无序列表

表示无序列表的范围 type属性：使用什么符号

空心圆circle 、实心圆disc 、实心方块square ，默认disc

（7）图像标签

可以在页面中显示图片

3.路径的介绍

绝对路径

相对路径：（1）同级目录直接写名字，（2）上层目录 . ./ （3）下层目录imge/

5.常用的标签2

超链接标签：一般实现两个功能

第一个功能：链接资源

默认方式是在当成页面打开_self是在当前页，_blank是空白页

第二个功能：定位资源

引入标签

<pre></pre>原样输出

表格标签

对数据进行格式化

技巧：首先数表格里面有多少行，数每行有多少单元格

<table></table>表示表格的范围

border表格线1-7

cellspacing :设置单元格之间的距离

cellpadding 设置内容与单元格之间的距离

width:表格的宽度

height:表格的高度

<tr></tr>每一行

align:left center right

align:left center right

表示单元格时候，除了使用td之外<th></th>

居中和加粗

合并单元格的操作

rowspan跨行

colspan 跨列

标题标签<caption></caption>

6.html的表单标签

使用表单提交的时候

要求一：在每个输入项里面必须有一个name值

要求二：在单选框，下拉框，复选框里面必须有value，

<form></form>表单的范围内

如果不设置，默认提交到当前页面

使用form里面的属性，action设置提交到页面

属性method：设置表单的提交方式，在默认情况下是get和set

表单提交方式get和post区别

get请求在地址栏里会携带数据，但是post请求不会携带数据

get请求安全性很低，post请求安全性很高

get请求数据的大小会有限制，post的请求大小没有限制

输入项的使用

（1）普通输入项：<input type="text" />

（2）密码输入项：<input type="possword"/>

（3）单选输入项：<input type="radio" />

要求：必须有属性name，同时name的属性值必须相同

默认选中，checked="checked"

文件上传：<input type="file" />

提交按钮：<input type="submit">

提交操作使用图片

重置按钮:<input type="reset" value="">回到输入的初始状态

隐藏项：<input type="hidden" name="hid" value="aaaa" />

下拉选择项

</select>

文本域：不能使用input标签

8.html 中的其他的标签的使用

b：加粗

u：下划线

i：斜体

p：段落标签

s：在文字上显示删除线

sub：下标

sup：上标

span：在一行显示

9.html的头标签的使用

头标签需要写在<head>

</head>里面

base:设置超链接的信息

mate:设置页面的一些信息

link：引入外部资源文件

html的框架标签（会用）

<frameset>:页面划分方式

两个属性rows：上下划分。cols左右划分

</frameset>

这个标签不能在body里面也不能在body外面

有一个快捷键：无缓存刷新 ctrl f5

11.扩展a标签

a标签里面访问一个网络资源，这个时候，这个时候必须写协议

如果不写协议到本地文件夹里面去找

比如下载迅雷资源，这个时候启动迅雷软件，浏览器不支持的协议

如果访问时候，会到本地系统里面去找，找支持这个协议的软件

1.css的简介

*层叠样式表

**样式表：有很多的属性和属性值

**层叠：一层一层。优先级

第一个：把样式和html分开显示

第二个：html属性很少，css里面样式很强大

2.css和html的结合方式

*有四种方式

*第一种结合方式：在每一个html都有一个属性style，在style属性写css代码

**代码

**<div style="background-color:red; color:black;">css代码</style>

**第二种结合方式：使用html的标签实现，<style tyle="text/css"></style>

**代码

div{

background-color:black;

color:white;

}

background-color:green;

}

</style>

*第三种结合方式

**首先创建css文件，在css文件里面写css代码

**其次使用html的标签实现，<style type="text/css">@import url(css路径);</style>

**问题：在某些浏览器下面，@import方式会有问题

*第四种方式：引入外部的资源文件，使用投标签是link标签

**在html中使用头标签link因为外部的css文件

**<link rel="stylesheet" type="text/css" href="css路径"/>

**优先级：在一般的情况下，由上到下，由外到内。优先级由低到高

**后加载的优先级。

*css里面的注释和java的多行注释相同，/**/

3.css的基本选择器

*选择器：要对哪一个标签里面的数据进行样式的修改

*有三种基本选择器

*第一种：标签选择器

**把标签名称作为选择器的名称

**代码

div{

background-color:orange;

color:white;

}

*第二种:class选择器

**每个html标签上面都有一个属性class，通过class属性值作为选择器的名称

*代码

.haha{

background-color:green;

color:white;

}

*第三种：id选择器

**每一个html标签都有一个属性是id属性，通过id属性的值作为选择器的名称

**代码

#hehe{

background-color:green;

color:white;

}

4.css的扩展选择器

*关联选择器

*在一个标签里面嵌套一个标签，设置标签里面的嵌套的样式

**代码

div p{

background-color;green;

}

*组合选择器

*设置不同的标签具有相同的属性

**代码

div,p{

background-color:red;

}

*伪元素选择器

*可以实现一些简单的动态的效果

*比如超链接，有哪些状态

**原始状态鼠标放上去的状态点击状态点击之后

：link ：hoven :active :visited

**记忆方法 lv ha

6.css的盒子模型

*首先需要把数据封装到一块区域中，这个区域一般都使用div进行封装

*边框

*使用属性border，统一border：border-width||border-style||border-color

*有上下左右四条的属性border-top bottom left right 分别设置四条边的样式‘

*内边距

*使用属性padding，统一设置，分别设置padding：length

*外边距

*使用属性margin，统一设置，分别设置margin:length

7.css的布局（漂浮）

*css的属性float

**left：表示当前设置这个属性的div的位置居左，后面的标签飘到右面

**right：表示当前设置这个属性的位置居右，后面的标签飘到左面

8.css的布局（定位）

*position：absolute和relative

**absolute：讲对象的文档流中拖出去

**relative：不会将对象的文档流拖出去

0 0