Java / HTML与CSS

HTML,超文本标记式编程语言,是一种专门在浏览器编译与执行的编程语言。用于通知浏览器将接收的数据以指定方式在窗口展示;控制浏览器请求行为。CSS则用于定位浏览器中HTML标签并对定位的HTML标签中【样式属性】进行统一管理。

HTML语法规范

  • 所有命令都是声明在标签中,比如<br>
  • 不区分英文字母大小写,比如<BR>,<br>, <Br> 都是合法命令
  • 命令开发时主要通过对命令中属性进行赋值实现开发目的。

属性赋值时内容可以包含在""中,也可以包含在'',也可以省略双引号与单引号,此时属性之间必须采用空格进行隔离。

1
2
3
<input type="text" name="one"/>
<input type='text' name='one'/>
<input type=text name=one/>
  • 命令根据书写方式分为:双目标签命令与单目标签命令

双目标签命令书写命令分别出现在开始标签与结束标签,比如 <tr></tr>,结束标签不能省略
单目标签命令书写命令出现一个标签之内,比如<br/>
单目标签命令用于表示结束”/“可以省略不写,比如 <br/>, <br> 这两个都是合法单目标签命令

浏览器发送请求三要素

控制浏览器发送请求地址;请求方式;携带请求参数

控制浏览器发送请求地址

超链接标签命令

  • 格式: <a href="请求地址">提示信息</a>
  • 原理: 超链接标签命令不会被浏览器自动执行。在用户使用鼠标单击超链接标签命令时,命令才会执行,执行要求浏览器立刻按照href属性地址发送请求

表单标签命令

  • 格式

    1
    2
    3
    <form action="请求地址">
    <input type="submit"><!--提交按钮-->
    </form>
  • 原理:表单标签命令不会被浏览器自动执行。在用户单击提交按钮时,此时表单标签命令被触发执行。执行时要求浏览器立刻按照action属性地址发送请求

控制浏览器发送请求采用请求方式

请求方式:决定浏览器在发送请求时行为特征
浏览器可以选择请求方式:7种,目前为止只考虑【POST请求方式】和【GET请求方式】

GET请求方式:
要求浏览器发送请求时,携带的【请求参数数量】不能超过4K;必须在浏览器地址栏上将【请求参数信息】展示出来;必须将请求参数信息保存在Http请求协议包中【请求头】;要求浏览器在接收到服务器返回的资源文件内容后,必须将资源文件内容保存在浏览器的缓存

POST请求方式:
要求浏览器发送请求时,可以携带任意数量的【请求参数】;必须在浏览器地址栏上隐藏请求参数信息;必须将请求参数信息保存在Http请求协议包中【请求体】;禁止浏览器将服务器返回资源文件内容进行保存【阅后即焚】

控制浏览器发送请求时采用GET请求方式

  • 超链接标签命令在执行时,要求浏览器必须采用GET方式发送请求
  • 表单标签存在一个method属性,通过这个属性可以要求浏览器采用对应请求方式发送请求
1
2
3
4
<form action="请求地址" method="get">
<form action="请求地址" method="post">
<!--method属性默认值是GET-->
<form action="请求地址">

控制浏览器发送请求时采用POST请求方式

1
<form method="post"></form>

请求方式适用场景

考虑到POST请求方式,用户可以将【病毒文件内容】发送到服务器上进行攻击。因此绝大多数门户级网站拒绝接收POST请求,日常开发过程绝大多数请求都是GET。在某些特殊场景下必须使用POST:

  • 文件上传
  • 发起登录验证请求
  • 索要服务器中实时变化数据时(股票价格,车票数量……)

控制浏览器发送请求携带请求参数

方法运行时需要实参,需要由用户通过浏览器以请求参数方式提供。如http://www.baidu.com?n1=100&n2=200 [n1=100&n2=200]就是浏览器发送请求参数。

请求参数格式:请求地址?请求参数名1=值1&请求参数名2=值2
浏览器发送请求时携带的请求参数来源:

  • 通过超链接标签命令指定请求参数
    <a href="http://www.baidu.com?userName=mike&password=123">百度</a>

  • 通过表单域标签命令指定请求参数
    表单域标签命令,一组声明在form标签内部的标签命令,提示用户填写对应的【请求参数内容】,用于提供相对灵活的请求参数内容
    表单域标签分类:<input /><select></select><textarea></textarea>
    所有的表单域标签都拥有两个属性:name属性声明【请求参数名】;value属性声明【请求参数内容】

value属性默认值
大多数表单域标签value属性默认值是空字符串 userName=’ ‘
对于radio与checkbox来说,value属性默认值’on’字符串

1
2
3
4
<form action="http://www.baidu.com">
<input type="text" name="userName" value="mike"/>
<input type="submit">
</form>

当用户单击submit后,浏览器发送请求信息 http://www.baidu.com?userName=mike

表单域标签作为请求参数条件

对于大多数表单域标签来说,只要同时满足两个条件,就可以作为请求参数:必须声明在form标签内部;必须声明name属性。
对于radio标签与checkbox标签来说在满足上述两个条件同时,radio与checkbox必须在【被选中】的情况下才可以作为请求参数。
如果表单域标签使用disabled来修饰时,失去作为请求参数条件

readOnly与disabled:
readOnly:要求当前标签中value属性只能看但是不能被修改,readOnly不会影响表单域标签作为请求参数条件
disabled:设置当前标签为不可用状态,此时标签中value属性内容不能被修改的。disabled修饰的表单域标签是永远都不能作为请求参数

HTML标签属性分类

基本属性

大多数HTML标签都拥有的属性,是一个非常庞大群体

1
2
3
4
5
6
<!-- id属性,用于区分HTML标签-->
<input type="text" id="one"/>
<input type="text" id="two"/>
<!-- name属性,允许一组标签拥有相同name-->
<input type="text" id="one" name="myText"/>
<input type="text" id="two" name="myText"/>

样式属性

通知浏览器将HTML标签中数据在浏览器中以指定形态展示

1
<div style="background-color:red;color:green;width:300px;height:200px"></div>

工作状态属性

只存在于【表单域标签】中,用于表示【表单域标签】状态。

checked:存在于radio与checkbox中,表示标签是否被选中
disabled:表示标签处于不可用状态
readOny:表示标签处于只读状态
seleteced:存在option标签,表示标签是否被选中

监听属性

监听属性用于监听用户在何时对当前标签进行何种操作,当指定操作产生时,监听属性将会通知浏览器调用对应JavaScript方法处理当前请求。

CSS

通知浏览器将所有满足定位条件的HTML标签进行统一定位;对已经定位HTML标签中样式属性进行集中统一赋值管理。

CSS选择器

CSS选择器,一组定位条件用于定位HTML标签,有9个大的分类。

1
2
3
4
5
6
7
8
9
10
11
12
<!--CSS选择器语法格式-->
<html>
<head>
<!--type='text/css',-->
<style type="text/css">
定位条件{
"样式属性1":"值1";
"样式属性2":"值2"
}
</style>
</head>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--ID选择器,根据HTML标签中ID属性的值进行定位-->
<style type="text/css">
#id编号{
"样式属性1":"值1";
"样式属性2":"值2"
}
</style>

<!--标签类型选择器,根据HTML标签类型进行定位-->
<style type="text/css">
标签类型名{
"样式属性1":"值1";
"样式属性2":"值2"
}
</style>

<!--层级选择器,根据标签之间父子关系或则兄弟关系进行定位-->
<style type="text/css">
定位父标签条件 定位子标签条件{

}
找到指定父标签下满足条件的所有子标签

</style>

<!--自定义选择器-->
<style type="text/css">
.自定义选择器名{
color:red;
}
</style>

<div class="自定义选择器名"></div>
<p class="自定义选择器名"></p>