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属性，通过这个属性可以要求浏览器采用对应请求方式发送请求

<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’字符串

<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标签都拥有的属性，是一个非常庞大群体

<!-- 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个大的分类。

<!--CSS选择器语法格式-->
<html>
    <head>
        <!--type='text/css'，-->
        <style type="text/css">
        定位条件{
        "样式属性1"："值1";
        "样式属性2"："值2"
        }
        </style>
    </head>
</html>

<!--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>