网站首页 > 技术文章正文

JavaWeb基础

hmc789 2024-11-25 12:47:22 技术文章 2 ℃

HTML

HTML是超文本标记语言。HTML就是普通的文本文件,只不过在文本中的内容如果被一些特殊的标签进行包裹就有了特殊的含义,这些被那些标签标记文本,就成了超文本。

网页的组成

HTML 用于展示需要显示的信息

CSS 用来美化我们写的页面

JavaScript 是页面具有一定的交互效果

根据内容的划分,可以将网页划分为静态页面和动态页面

静态页面就是编写以后在浏览器中不再改变的网页,如HTML ；
动态页面就是可以根据不同的情况显示不同的内容,如jsp,php,动态页面也是在HTML的基础上添加的一些内容；

HTML的结构

HTML不需要编译，可以直接用浏览器阅读
扩展名为 .html 或者 .htm
由标签组成

标签不分大小写
单标签：如< img/>
双标签：如 <p> 双标签 </p>

内容结构

<!-- dtd声明,这个为HTML5的声明--> 
<!DOCTYPE html> 
<!-- 页面的根标签-->
<html>
    <!-- 头标签,一般用于引入脚本,样式导入,设置 编码,定义标题等信息--> 
    <head>
        <!--设置网页编码格式--> 
        <meta charset="utf-8"> 
        <title>Hello World</title>
    </head> 
    <!-- 体标签,设置网页显示内容区域--> 
    <body>中华人民共和国万岁 
    </body>
</html>

HTML中的常用标签

注释标签
h 系列定义标题1-6 ，由大到小，独占一行（不建议使用H1）
p 标签段落标签,会单独占据一行
hr 标签分割线标签,显示一条分割线 size属性:水平线的高度
span 标签显示文本的,不会单独占据一行
font 标签

设置文本的大小颜色等信息,不会独占一行
size属性:1- 7,默认是3
color属性:可以是#xxxxxx表示3原色,也可以是 red.blue,green等

b 标签粗体标签,不会独占一行
i 标签斜体标签,不会独占一行
br 标签换行标签
img 标签

显示图片的标签,不会独占一行
src属性:路径,注意路径问题
alt属性:图片无法显示的时候显示的文字
width属性:设置宽,可以使像素值,也可以是百分比
height属性:设置高,可以使像素值,也可以是百分比
title属性:鼠标移上去后显示名字

a 标签

超链接标签,不会独占一行
href属性,指定点击后跳转的路径(url),如果需要点击后没有反应,需要写为: javascript:void(0)
target属性:指定跳转模式, blank表示新建窗口, self表示当前页,默认是_self

ol 标签

有序列表,是组合标签,ol内部嵌套li标签
type属性:取值范围,”A”,”a”,”I”,”i”,”1”

ul 标签

无序列表,是组合标签,ul内部嵌套li标签
type属性:取值范围是,disc(实心圆),circle(空心圆),square(方块)

iframe 标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
name属性:指定iframe的名称,如果 a 标签的中的
target 属性值是其 name 属性的时候,点击a标签,对应的链接内容会出现在 iframe 中
src属性:指的是iframe中显示的内容的连接
frameborder属性:取值为 0(不显示边框) 和 1(显示边框)
scrolling属性:取值为 yes(可以滚动) no(不能滚动)auto(自动)
width属性:表示宽度
height属性:表示高度

table 标签

表格标签,是组合标签,内置有很多子标签

table标签的组成

table 是父标签，相当于表格容器
<caption> 表格的标题,写在 <table> 内的第一行, 用于指定表格的标题,会显示的表格正上方
<tr> 表示表格一行
<th> 表格每一列的标题,写在 <tr> 内
<td> 表格的每一个单元格,写在 <tr> 内

table标签的属性

border:表格边框的宽度
width:宽度,可以是像素也可以是百分比
height:高度,可以是像素也可以是百分比
align:水平对齐方式常用left center right
valign:垂直对齐方式常用top middle bottom
cellspacing:外边距,单元格与单元格之间的距离
cellpadding:内边距,单元格内容与单元格之间的距离
bgcolor:背景颜色

table属性注意点

宽度和高度可以设置table标签和td标签
1.1 table设置width和height设置表格宽度和高度
1.2 td设置width和height,只会影响当前单元格,不会影响表格的宽高

水平对齐
2.1 水平对齐可以设置table tr td
2.2 table设置align,可以控制表格在水平方向的水平对齐方式
2.3 tr设置align,可以控制当前行所有单元格内容的水平对齐方式
2.4 td设置align,设置之前按照tr的对齐方式,设置后是控制当前单元格内容在水平方向的对齐方式

垂直对齐
3.1 垂直对齐可以设置tr td
3.2 tr设置valign,可以控制当前行所有单元格内容的垂直对齐方式
3.3 td设置valign,设置之前按照tr的对齐方式,设置后是控制当前单元格内容在垂直方向的对齐方式

单元格和单元格之间的距离叫外边距
4.1 外边距cellspacing只能给table设置,默认情况下外边距是2px

单元格内容和单元格之间的距离叫做内边距
5.1 内边距cellpadding只能给table设置,默认是 1px

背景颜色
6.1 table tr td 都可以设置
6.2 table设置整个表格背景颜色,tr设置当前行,td设置单元格
6.3 如果都进行设置,采用就近原则

细线表格

去掉边框
设置表格背景颜色为black
设置单元格背景颜色为white
设置外边距为1px

单元格的合并,对于td而言

水平方向上占据的列数 colspan
垂直方向上占据的行数 rowspan

HTML中的表单标签

form 标签一般用于向服务器提交的时候将form标签中的数据进行提交

action属性表示请求路径,表单提交到服务器的具体url
method属性表示请求方式一般取值为POST和GET
GET是默认值,提交的数据会追加到请求路径上, 如../..sevrvlet?username=tom&password=123,数据以这种格式进行提交多个数据用&连接,因为请求路径长度有限制,所以GET请求提交的数据有限 POST,提交的数据会追加到路径上

input 标签用来获取用户输入信息的标签

type属性有很多中,并且不同的属性显示的样式不同

text:文本框,输入文本
password:密码框
radio:互斥的单选按钮checkbox:复选框
submit:提交按钮,将表单数据提交到服务器
file:上传文件组件
image:图片提交按钮,通过src设置图片
reset:重置按钮,恢复表单
hidden:隐藏字段,数据会发送给服务器,浏览器页面中不会显示,一般可用于发送用户的id
button:普通按钮,一般和js结合使用（不建议使用）

name属性,表单数据提交到服务器必须提供name属性
value属性,设置默认值
checeked属性:单选按钮或者复选框被选中
readonly:是否只读
disabled:是否可用
size:大小,一般用于设置文本框的大小
maxlength:允许输入的最大长度,一般用于显示文本框中文本内容的长度
placeholder:占位符属性,常用于设置文本框的占位符

select标签

下拉列表常用于单选和多选,是组合标签,需要子标签 <option> ,不会独占一行。
name属性,发送给服务器的名称
multiple属性,不写默认单选,取值为multiple表示多选, 一般我们只使用单选
size属性,可见选项的数目

option标签

selected属性,表示勾选当前选项
value属性,发送给服务器的选项值；
注意:
1.如果使用多选,那么选择的时候需要按住ctrl键进行选择.
2.size属性我们一般情况下不去设置
3.selected属性如果不设置的时候默认是列表中的第一个被选中
4.value属性如果不设置的时候,发送给服务器的时候value值默认是 <option> 文本值 </option> 文本值,如果设置了就是value属性值,一般情况下都需要进行设置

textarea标签

文本域,用于多行输入文本
cols属性,文本域的列数
rows属性,文本域的行数
name属性,发送给服务器的名称
value属性,textarea的内容

关于表单标签总结

需要提交到服务器中的数据,必须都要放在form表单中,否则是提交不过去的

最后提交的形式就是 name=value&name=value&name=value

form中不需要的提交的内容,不设置name属性,如按钮本身就是作为提交功能的触发,所以就不需要设置name属性

div标签

就是普通的标签,独自使用没有任何效果,主要用于网页中区域的划分,会单独占据一行.

网站首页 > 技术文章 正文