Javaweb基础-HTML，CSS，JS
一.HTML
HTML主要用于网页主体结构搭建；由一系列标签组成；
基础结构：
文档声明：
根标签：其它标签放在里面
头部元素：
其它头部元素放入其中eg：meta标签指定字符集主体元素：
浏览器显示的内容定义在里面注释：
语法规则：
- 根标签是有且只能有一个；
- 无论是双标签还是单标签都需要正确关闭;
- 标签可以嵌套但不能交叉嵌套;
- 注释语法为，注意不能嵌套;
- 属性必须有值，值必须加引号，H5中属性名和值相同时可以省略属性值;
- HTML中不严格区分字符串使用单双引号（若嵌套交替使用）;
- HTML标签不严格区分大小写，但是不能大小写混用;
- HTML中不允许自定义标签名，强行自定义则无效;
HTML常见标签：（HTML 元素 (w3school.com.cn)）
标题标签：
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
段落标签：
换行标签：单纯实现换行的标签是br，如果想添加分隔线，可以使用hr标签
列表标签（可嵌套）：
//有序
- xxx
//无序
- xxx
超链接标签：
相对路径本地资源连接
/*
href中可以使用绝对路径，以/开头，始终以一个固定路径作为基准路径作为出发点（默认服务器地址ip+端口号）
href中也可以使用相对路径，不以/开头，以当前文件所在路径为出发点，./开头表示当前路径../表示上一层路径;
href中也可以使用完整的URL;
target用于定义链接打开的方式:
_blank在新窗口中打开目标资源;o_self 在当前窗口中打开目标资源;
*/多媒体标签：
图片img：src属性用于定义图片的连接。title属性用于定义鼠标悬停时显示的文字。alt属性用于定义图片加载失败时显示的提示文字。
音乐audio/视频video：src属性用于定义目标声音资源。autoplay属性用于控制打开页面时是否自动播放。controls属性用于控制是否展示控制面板。loop属性用于控制是否进行循环播放。
表格标签：
- table标签代表表格;
- thead标签代表表头，可以省略不写;
- tbody标签代表表体，可以省略不写，浏览器解析DOM时会自动添加;tfoot标签代表表尾，可以省略不写;
- tr标签代表一行;
- td标签代表行内的一格（rowspan属性实现上下跨行；colspan属性实现左右跨列）
- th标签自带加粗和居中效果的td;
表单标签：可以实现让用户在界面上输入各种信息ٴ提交的一种标签，是向服务端发送数据主要的方式之一
form标签:表单标签，其内部用于定义可以让用户输入信息的表单项标签。
action属性:用于定义信息提交的服务器的地址。
method属性:用于定义信息的提交方式。
get值:get方式提交，数据会缀到url后，以?作为参数开始的标识，多个参数用&隔开。
post值: post方式提交，数据会通过请求体发送，不会在缀到url后。
input标签:主要的表单项标签，可以用于定义表单项。
name属性:用于定义提交的参数名。（text和password缺少则无法提交）
type属性:用于定义表单项类型。
- text：文本框
- password：密码框
- submit：提交按钮
- reset：重置按钮
- radio：单选框（name属性相同的radio为一组，组内互斥;当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器;设置checked="checked"属性设置默认被选中的radio，如果属性名和属性值一样的话，可以省略属性值，只写checked即可;显示文本部分）
- checkbox：复选框（name属性相同的checkbox为一组，组内多选；增加checked则默认选上，显示文本部分）
- hidden：隐藏域-通过表单隐藏域设置的表单项不会显示到页面上，用户看不到，但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据
- file：文件标签
select标签：下拉框（下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项;name属性在select标签中设置，value属性在option标签中设置;option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值;通过在option标签中设置selected="selected"属性实现默认选中的效果;）
button标签：属性type-button/reset/submit；（普通按钮:点击后无效果，需要通过JavaScript绑定单击响应函数;重置按钮:点击后将表单内的所有表单项都恢复为默认值;提交按钮:点击后提交表单;）
多行文本框标签：textarea-textarea没有valueً属性，如果要设置需要写在开始和结束标签之间。
布局相关标签：
div标签：用于划分页面结构，占完整的行
span标签：用以划分元素范围，配合css作元素样式的修饰
特殊字符（HTML 字符实体 (w3school.com.cn)）
二.CSS：
引入方式：
- 行内式:通过元素开始标签的style属性引入，语法为 style="样式名:样式值;样式名:样式值;"
- 内嵌式:在head标签中通过style标签引入，这里要使用选择器确定样式的做作用位置
- 连接式/外部样式表:将CSs代码单独放入css样式文件，在head标签中通过link标签引入外部样式表
选择器：
元素选择器：根据标签名确定样式的作用范围;语法为:元素名（标签名）{}；样式只能作用到同名标签上，其他标签不可用;相同的标签未必需要相同的样式，会造成样式的作用范围太大;
id选择器：根据元素id属性的值确定样式的作用范围;语法为:#id值{};id属性的值在页面上具有唯一性，所以id选择器也只能影响一个元素的样式;
class选择器：根据元素class属性的值确定样式的作用范围;语法为: .class值{};class属性值可以有一个，也可以有多个，多个不同的标签也可以是使用相同的class值（多个之间空格相隔）;多个选择器的样式可以在同一个元素上进行叠加;
CSS浮动（float：样式（left，right，none-默认））：使元素脱离文档流，按照指定的方向(左或右发生移动)，直到它的外边缘碰到包含框或另一个浮动框的边框为止。-可以实现多个div同行，浮动后文字一定不会被挡住
CSS定位：（position：样式（absolute，fixed，relative，static-默认））：
绝对定位absolute，通过top left right bottom指定元素在页面上的固定位置，定位后元素会让出原来位置,其他元素可以占用；
相对定位relative，相对于自己原来的位置进行地位，定位后保留原来的站位，其他元素不会移动到该位置；
固定定位fixed，始终在浏览器窗口固定位置，不会随着页面的上下移动而移动，元素定位后会让出原来的位置,其他元素可以占用；
静态定位static，不设置的时候的默认值就是static，静态定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列；
CSS盒子模型（边距margin；边框border；填充padding；实际内容content）：
- Margin(外边距)-清除边框外的区域，外边距是透明的;
- Border(边框)-围绕在内边距和内容外的边框;
- Padding(内边距)-清除内容周围的区域，内边距是透明的;
- Content(内容)-盒子的内容，显示文本和图像;
三.JavaScript：
引入方式：
内部脚本方式：在页面中，通过一对script标签引入Js代码;script代码放置位置有一定的随意性，一般放在head标签中;（格式：function 函数名（）{}）
外部脚本引入：可以将脚本放在独立的js文件中，通过script标签引入外部脚本文件;
一对script标签要么用于定义内部脚本，要么用于引入外部js文件，不能混用;一个html文档中，可以有多个script标签;（）
JS数据类型和运算符（大致类似Java）：
/在除O时，结果是Infinity，而不是报错;%在模O时，结果是NaN，意思为not a number，而不是报错;
==-符号，如果两端的数据类型不一致，会尝试将两端的数据转换成number，再对比number
'123’这种字符串可以转换成数字;true会被转换成1， false会被转换成0;
=== 符号，如果两端数据类型不一致，直接返回false，数据类型一致再比较是否相同。
if()中的非空字符串会被认为是true;if()中的非零数字会被认为是true;
迭代数组时，括号中的临时变量表示的是元素的索引，不是元素的值。不在使用:分隔，而是使用in关键字。
函数声明：函数没有权限控制符。不用声明函数的返回值类型，需要返回在函数体中直接return即可，也无需void关键字。参数列表中，无需数据类型。调用函数时，实参和形参的个数可以不一致。声明函数时需要用function关键字。J函数没有异常列表。
声明对象：对象名 = new object（）/ 对象名 = {}；
JSON语法：JSON的语法: var str="{'属性名∵属性值;属性名'∵'属性名∵属性值∵;属性名'∵'值1值1;值3'])";
JSON字符串一般用于传递数据，一般都是用对象的属性表示数据，所以在此不研究对象的函数，只看对象的属性;
通过JSON.parse()方法可以将一个JSON串转换成对象;
通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串;
事件：
鼠标事件：
| 属性 | 描述 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 |
| onmouseleave | 当鼠标指针移出元素时触发 |
| onmousemove | 鼠标被移动。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseup | 鼠标按键被松开。 |
键盘事件 ：
| 属性 | 描述 |
|---|---|
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
表单事件：
| 属性 | 描述 |
|---|---|
| onblur | 元素失去焦点时触发 |
| onchange | 该事件在表单元素的内容改变时触发( , |