javaweb-HTML和CSS

Java Web

Javaweb是用Java技术来解决相关web互联网领域的技术栈。
web包括:web服务端和web客户端两部分。
Java在客户端的应用有Java Applet,不过使用得很少,
Java在服务器端的应用非常的丰富,比如Servlet,JSP、第三方框架等等。
Java技术对Web领域的发展注入了强大的动力。

WEB概述
在这里插入图片描述
在这里插入图片描述
HTML

1.概念
a.HTML(Hyper Text Markup Language 超文本标记(标签)语言 )

b.本质是文本

2.HTML语法组成结构
第一部HTML的声明
第二部分HTML组成内容

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>这是第一个页面</title>
头标签:存储需要加载资源, 比如配置文件等等
</HEAD>
<BODY>
体标签:存储页面组成内容
</BODY>
</HTML>

注意:

1.标签是由起始标签和结束标签来组成

2.如果标签里没有内容可以使用自闭标签来表示

3.不区分大小写

4.当页面中出现多个空格、制表符空格以及换行在页面展示中都是一个空格

5.转义字符
在这里插入图片描述

6.标签身上可以通过 属性名="属性值"这种形式来给标签来设置属性,在页面当中可以展示标签特点

属性值的双引号和单引号都可以设置属性值

3.HTML常用标签

1.字体标签

属性
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
7.表单标签

提交数据到服务器的方式

a.在地址栏中来拼接参数值发送给服务器。如果要发送的参数值比较复杂且量多,在拼接的时候导致拼接效率降低以及和服务器进行交互的效率也会降低。

b.可以把要发送给的服务器的参数值放到表单里通过表单进行集中的拼接,发送给服务器,效率比较高。
在这里插入图片描述

提交方式一共有7种,常用的有get和post(默认提交方式就是get提交)

get提交方式

在地址栏拼接参数值

不安全

地址栏拼接参数值大小一般不要大于1KB

post提交方式

在底层来提交数据

相对安全

底层根据流来传输数据,不限制传输数据大小
在这里插入图片描述
在这里插入图片描述
8.下拉框

在页面展示一个可以有多个选项来进行选择
在这里插入图片描述
在这里插入图片描述

<!--下拉框-->

<select name="city">

<option  value="bj">北京</option>

<option  value="cq">重庆</option>

<option  value="hn">海南</option>

<option  value="sh">上海</option>

<option   selected="selected">大理</option>

</select>

9.文本域
在这里插入图片描述

CSS

1.层叠样式表

页面中可能会有大量的元素(标签)需要去设置相同样式,每个元素身上单独设置样式,造成大量的代码有冗余,降低开发效率。为了解决这个问题在页面中来批量设置样式,由一门技术来解决—CSS(批量来选中元素(标签),再设置样式)

2.div+CSS

div 盒子模型

在使用table标签来布局页面时比较复杂且不灵活,引入盒子模型就可以进行灵活的布局,可以满足页面多样的需求。
在这里插入图片描述
在这里插入图片描述
CSS选择器

基本选择器和扩展选择器

基本选择器

id选择器

#id{

}

类选择器

.class{

}

元素选择器

元素{

}

扩展选择器

后代元素选择器

div span{

} 选择div中所有的元素名span(子级、孙子级别以及更多级别)

子元素选择器

div>span{

}

只能选择到儿子级别

相邻兄弟选择器

div+span{

}只能选择下一个相邻的兄弟元素来设置样式

属性选择器

div[name]{

}

选择div中有那么属性的这些div

div[name=“d”]{

}

选择div中name属性值为“d”的div

分组选择器(多元素选择器)

#div1,.class1,div+span{

}把多个选择器用逗号隔开,可以进行多样的选择

伪元素选择器

其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。

:link 未点击的状态

:visited 被点击过的状态

注:在不设置visited状态时active生效,否则会出现visited覆盖active效果

:hover 鼠标移动到元素之上但是仍然未点击的状态

:active 被鼠标点击着的状态

注意:

1.距离标签越近的CSS代码,越优先生效

2.当CSS代表设置的越具体越优先生效

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值