HTML+JS+CSS+xml快速入门

一. HTML

1.HTML是什么
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，由开发者编写的HTML文件会在浏览器中被加载和解析，然后通过一个页面表现给使用者。
HTML 不是一种编程语言，而是一种标记语言 (markup language)。
HTML 使用标记标签来描述网页

浏览器加载和渲染html的顺序

IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
JS、CSS中如有重定义，后定义函数将覆盖前定义函数

HTML Parser 生成的 DOM 树（文档对象模型）和CSS Parser 生成的 Style Rules ，生成一个新的对象，也就是我们常说的 Render Tree 渲染树，结合 Layout 绘制在屏幕上，从而展现出来。

2. HTML常用标签
HTML详细教程请参考：https://www.w3cschool.cn/html/
基本结构

<html>                             ----根控制标记<head>                             ---头控制标记<title>这是标题</title>       ----标题标记</head>                            ----头控制标记<body>----- 主体内容</body>
</html>                            ----根控制标记

骨架标签

页面中最大的标签, 称为根标签. 文档的头部文档的标题文档的主体, 页面内容基本都放到body中文档类型声明：作用是告诉浏览器使用html5来显示网页，必须写在最前面 lang语言种类：en为英语, zh-CN为中文. 字符集：在标签内, 通过标签的charset属性来规定.

常用标签

标题

 <h1>一级标题</h1><h1>标题一共六级选,</h1><h2>文字加粗一行显.</h2><h3>由小到大依次减,</h3><h4>从重到轻随之变.</h4><h5>语法规范书写后,</h5><h6>具体效果刷新见.</h6>

段落

<p> 段落标签 </p>

把标签内的文字显示出来，一个标签一段

换行

<br />

文本格式

<strong>加粗</strong><em>倾斜</em><del>删除线</del><ins>下划线</ins>

div和span标签

<div> div单独占一行, 大盒子 </div>
<span> 一行能放多个, 小盒子 </span>

超链接标签

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>

href用于指定链接目标的url地址, 是必须属性.
target用于指定链接的打开方式, _self为默认值(当前窗口打开), _blank(新建窗口打开)

表格标签

<table></table>用于定义表格的标签.
<tr></tr>用于定义表格中的行, 必须嵌套在<table>中
<td></td>用于定义表格中的单元格, 必须嵌套在<tr>中.
<th></th>表头单元格内容加粗并居中显示

    <table><tr><th>表头1</th><th>表头2</th></tr><tr><td>文字11</td><td>文字12</td></tr><tr><td>文字21</td><td>文字22</td></tr></table>

输出：

表单标签
组成: 一个完整的表单由表单域, 表单控件(表单元素)和提示信息三部分构成.
作用: 收集用户信息, 并提交
1.表单域
作用：
标签用于定义表单域, 以实现用户信息的收集和传递.
语法格式：

<form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件
</form>

常用属性：

表单控件
input: 输入表单元素
select: 下拉表单元素
textarea: 文本域表单元素.
1.input

<input type="属性值" />

属性：

其他属性：
name: 自定义表单的名字(单选按钮和复选框要有相同的name值)
value: 自定义input元素的值
checked=“checked” 规定次input元素首次加载时应被选中(主要针对单选按钮和复选框)

        <form action="#" method="post">用户名: <input type="text" name="username" value="请输入用户名" />性别: 男<input type="radio" value="man" name="sex" checked="checked"/> 女<input type="radio" value="woman" name="sex"/>爱好: 羽毛球<input type="checkbox" value="eat"/>篮球<input type="checkbox" value="sleep"/>乒乓球<input type="checkbox" value="beat"/><input type="submit" value="提交">  <input type="reset" value="重置"/></form>

2.select
多个选项让用户选择

<select><option>选项1</option><option selected="selected">选项2</option>...
</select>

selected="selected"表示预先锁定该选项

3.textarea文本域元素
用于定义多行文本输入空间, 常见留言板, 评论等.

<textarea row="3" cols="20">文本内容
</textarea>

4.label标签

<label>标签为input元素定义标注.
<label>标签用于绑定一个表单元素, 当点击<label>标签内文本时, 浏览器会自动将光标转到对应表单元素上, 以此增加用户体验.
<label>标签中for属性应对应<input>标签中id属性

<label for="tex" /> 用户名: <input type="text" id="tex" /><label for="man" /> 男 </label> <input type="radio" id="man" />

二. JS

而JavaScript是页面的行为。

概念 :一门客户端脚本语言
- 运行在客户端浏览器中的,每一个浏览器都有一个JavaScript的解析引擎。
- 脚本语言:不需要编译,直接就可以被浏览器解析执行了。
功能:
- 可以用来增强用户和html页面的交互过程,用来控制html元素,让页面有一些动态效果,增强用户的体验。

JS解析过程：JS也是由浏览器进行解析，当浏览器运行整个页面文档时（html文件），遇到

1、预解析阶段

这个阶段，JS解析器从上到下搜索代码，只去寻找一些关键字如var，function这些内容，找到这些内容后，相关的所有的变量都会被先赋值为undefined（这也就是变量提升为啥值会是undefined的具体原因），所有的函数变量都为函数块。

如果这个阶段遇到变量重名的问题，有以下规则：

变量和函数声明重名了，只留下函数；
函数和函数重名了，根据代码的上下文顺序，留下最后一个。

2、逐行解读代码。

这个阶段的变量赋值表达式可以修改上一步预解析的值。

如果有多个表达式对相同的变量多次赋值，那么除过函数声明不能修改上次的赋值，变量赋值和函数表达式都可以修改这个变量的值。

使用

JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到中
把JavaScript代码放到一个单独的.js文件，然后在HTML中通过引入这个文件

JavaScript数据类型

JavaScript数据类型有2大分类：一是“基本数据类型”，二是“特殊数据类型”。

其中，基本数据类型包括以下3种：

（1）数字型（Number型）：如整型，浮点型；
（2）字符串型（String型）；
（3）布尔型（Boolean型）：true或fasle；
特殊数据类型有3种：

（1）空值（null型）；
（2）未定义值（undefined型）；
（3）转义字符；（如\n、’、"）

注释

//单行注释内容
/*多行注释内容*/

定义变量的几种方式
js中三种定义变量的方式const， var， let
1.const定义的变量不可以修改，而且必须初始化。
2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。

1和2都比较容易理解，对于let，我们通过代码来进一步了解他

let c = 3;
document.write("函数外let定义c：" + c +"<br>");//输出c=3
function change(){let c = 6;document.write("函数内let定义c：" + c +"<br>");//输出c=6}
change();
document.write("函数调用后let定义c不受函数内部定义影响:" + c +"<br>");//输出c=3

输出：
与var区别：

可以看到函数内部使用let定义后，对函数外部无影响。

函数

函数，就是一个一系列JavaScript语句的集合，这是为了完成某一个会重复使用的特定功能。在需要该功能的时候，直接调用函数即可，而不必每次都编写一大堆重复的代码。并且在需要修改该功能的时候，也只要修改和维护这一个函数即可。

总之，将语句集合成函数，好处就是方便代码重用。并且，一个好的函数名，可以让人一眼就知道这个函数实现的是什么功能，方便维护。

函数的使用只需要2步：

（1）定义函数；

（2）调用函数；

函数的定义

用function关键字来定义函数。
有（1）不指定函数名的函数；

function(参数1,参数2,….,参数n)
{//函数体语句
}

（2）指定函数名的函数；

function 函数名(参数1,参数2,….,参数n)
{//函数体语句return 表达式;
}

定义函数必须使用function关键字来定义。
函数名必须是唯一的，尽量通俗易懂，并且跟你定义的代码有关。
函数可以使用return语句将某个值返回，也可以没有返回值。
参数是可选的，可以不带参数，也可以带多个参数。如果是多个参数的话，参数之间要用英文逗号隔开。

函数的调用

1.html中选择js文件

    <script type="text/javascript" src="test.js"></script>

2.在js文件中写出函数并执行

//alert("hello world");
var sum=0;
function func1() {for(var i=0;i<=100;i++){sum+=i;}
}
func1();
alert("sum= "+sum);

3.在html中显示出js执行结果

内置函数

在JavaScript中，常用的内置函数有7个：

（1）eval()函数
eval()可以把一个字符串当做一个JavaScript表达式一样去执行它

eval("document.write('<strong>JavaScript入门教程</strong> ')");

就是执行“document.write('JavaScript入门教程 ')”

（2）isFinite()函数

isFinite(number)

isFinite()函数用来确定某一个数是否是一个有限数值
如果该参数为非数字、正无穷数和负无穷数，则返回false；否则的话，返回true。如果是字符串类型的数字，就会自动转化为数字型。

（3）isNaN()函数
isNaN() 函数用于检查其参数是否是非数字值。

123 //这不是NaN值
"123"  //这也不是NaN值，因为“字符串类型的数字”会被自动转换为数字型
"abc123"  //这是NaN值

（4）parseInt()函数和parseFloat()函数
用于数据类型转换

parseInt()  //将字符串型转换为整型
parseFloat()  //将字符串型转换为浮点型

将字符串型转换为整型，前提是字符串一定要是数值字符串，而不能带英文。

（5）escape()函数和unescape()函数
escape()函数主要作用就是对字符串进行编码，以便它们能在所有计算机上可读。
unescape()函数和escape()函数是刚好反过来的，escape()函数是编码，unescape()函数是解码。

document.write(escape("hello lvye!")+"<br>");
document.write(unescape("hello%20lvye%21")+"<br>");

空格符对应的编码是“%20”，感叹号对应的编码是“%21”

参考：https://blog.csdn.net/wuyxinu/article/details/103642800

三. CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

简单来说，CSS可以用于设计网页的外观。

通常CSS的解析会先于html的解析

引入CSS的方式
在html的head里写

`<link href="csstest.css" rel="stylesheet" type="text/css">`

href后面写的是当前目录下新建的css文件
在html的body下写：

        <h1>欢迎来到</h1><h1>第二个标题</h1>

在css文件中写下标签所需要的格式

h1{color: bisque;
}body{background: coral;
}

输出：

CSS常用属性：
文字属性：
color : #999999; /文字颜色/
font-family : 宋体,sans-serif;/文字字体/
font-size : 9pt; /文字大小/
font-style:itelic; /文字斜体/
font-variant:small-caps; /小字体/
letter-spacing : 1pt; /字间距离/
line-height : 200%; /设置行高/
font-weight:bold; /文字粗体/
vertical-align:sub; /下标字/
vertical-align:super; /上标字/
text-decoration:line-through; /加删除线/
text-decoration: overline; /加顶线/
text-decoration:underline; /加下划线/
text-decoration:none; /删除链接下划线/
text-transform : capitalize; /首字大写/
text-transform : uppercase; /英文大写/
text-transform : lowercase; /英文小写/
text-align:right; /文字右对齐/
text-align:left; /文字左对齐/
text-align:center; /文字居中对齐/
text-align:justify; /文字分散对齐/
vertical-align属性
vertical-align:top; /垂直向上对齐/
vertical-align:bottom; /垂直向下对齐/
vertical-align:middle; /垂直居中对齐/
vertical-align:text-top; /文字垂直向上对齐/
vertical-align:text-bottom; /文字垂直向下对齐/

边框空白
padding-top:10px; /上边框留空白/
padding-right:10px; /右边框留空白/
padding-bottom:10px; /下边框留空白/
padding-left:10px; /*左边框留空白

符号属性：
list-style-type:none; /不编号/
list-style-type:decimal; /阿拉伯数字/
list-style-type:lower-roman; /小写罗马数字/
list-style-type:upper-roman; /大写罗马数字/
list-style-type:lower-alpha; /小写英文字母/
list-style-type:upper-alpha; /大写英文字母/
list-style-type:disc; /实心圆形符号/
list-style-type:circle; /空心圆形符号/
list-style-type:square; /实心方形符号/
list-style-image:url(/dot.gif); /图片式符号/
list-style-position: outside; /凸排/
list-style-position:inside; /缩进/

背景样式：
background-color:#F5E2EC; /背景颜色/
background:transparent; /透视背景/
background-image : url(/image/bg.gif); /背景图片/
background-attachment : fixed; /浮水印固定背景/
background-repeat : repeat; /重复排列-网页默认/
background-repeat : no-repeat; /不重复排列/
background-repeat : repeat-x; /在x轴重复排列/
background-repeat : repeat-y; /在y轴重复排列/

指定背景位置
background-position : 90% 90%; /背景图片x与y轴的位置/
background-position : top; /向上对齐/
background-position : buttom; /向下对齐/
background-position : left; /向左对齐/
background-position : right; /向右对齐/
background-position : center; /居中对齐/
CSS连接属性：
a /所有超链接/
a:link /超链接文字格式/
a:visited /浏览过的链接文字格式/
a:active /按下链接的格式/
a:hover /鼠标转到链接/

鼠标光标样式：
链接手指 CURSOR: hand
十字体cursor:crosshair
箭头朝下cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左cursor:w-resize
箭头朝上cursor:n-resize
箭头朝右上cursor:ne-resize
箭头朝左上cursor:nw-resize
文字I型 cursor:text
箭头斜右下cursor:se-resize
箭头斜左下cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}

CSS框线一览表：
border-top : 1px solid #6699cc; /上框线/
border-bottom : 1px solid #6699cc; /下框线/
border-left : 1px solid #6699cc; /左框线/
border-right : 1px solid #6699cc; /右框线/
以上是建议书写方式,但也可以使用常规的方式如下:
border-top-color : #369 /设置上框线top颜色/
border-top-width :1px /设置上框线top宽度/
border-top-style : solid/设置上框线top样式/
其他框线样式
solid /实线框/
dotted /虚线框/
double /双线框/
groove /立体内凸框/
ridge /立体浮雕框/
inset /凹框/
outset /凸框/

CSS表单运用：
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单选项1选项2
八、CSS边界样式：
margin-top:10px; /上边界/
margin-right:10px; /右边界值/
margin-bottom:10px; /下边界值/
margin-left:10px; /左边界值/

CSS 属性：字体样式(Font Style)
序号中文说明标记语法
1 字体样式{font:font-style font-variant font-weight font-size font-family}
2 字体类型{font-family:“字体1”,“字体2”,“字体3”,…}
3 字体大小 {font-size:数值|inherit| medium| large|larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字体风格{font-style:inherit|italic|normal|oblique}
5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6 字体颜色 {color:数值;}
7 阴影颜色{text-shadow:16位色值}
8 字体行高 {line-height:数值|inherit|normal;}
9 字间距 {letter-spacing:数值|inherit|normal}
10 单词间距{word-spacing:数值|inherit|normal}
11 字体变形{font-variant:inherit|normal|small-cps }
12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形 {font-size-adjust:inherit|none}
14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本样式(Text Style)
序号中文说明标记语法
1 行间距 {line-height:数值|inherit|normal;}
2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:数值|inherit}
4 水平对齐{text-align:left|right|center|justify}
5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 书写方式{writing-mode:lr-tb|tb-rl}

背景样式
序号中文说明标记语法
1 背景颜色{background-color:数值}
2 背景图片{background-image: url(URL)|none}
3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定{background-attachment:fixed|scroll}
5 背景定位 {background-position:数值|top|bottom|left|right|center}
6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}

框架样式(BoxStyle)
序号中文说明标记语法
1 边界留白{margin:margin-top margin-right margin-bottom margin-left}
2 补　　白{padding:padding-top padding-right padding-bottom padding-left}
3 边框宽度{border-width:border-top-width border-right-width border-bottom-widthborder-left-width}
宽度值：thin|medium|thick|数值
4 边框颜色{border-color:数值数值数值数值}　　数值：分别代表top、right、bottom、left颜色值
5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 边　　框{border:border-width border-style color}
上边框{border-top:border-top-width border-style color}
右边框{border-right:border-right-width border-style color}
下边框{border-bottom:border-bottom-width border-style color}
左边框{border-left:border-left-width border-style color}
7 宽度 {width:长度|百分比| auto}
8 高度 {height:数值|auto}
9 漂浮{float:left|right|none}
10 清除{clear:none|left|right|both}

分类列表
序号中文说明标记语法
1 控制显示{display:none|block|inline|list-item}
2 控制空白{white-space:normal|pre|nowarp}
3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 图形列表{list-style-image:URL}
5 位置列表{list-style-position:inside|outside}
6 目录列表 {list-style:目录样式类型|目录样式位置|url}
7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

四. XML

可扩展标记语言，标准通用标记语言的子集，简称XML。是一种用于标记电子文件使其具有结构性的标记语言。xml是当前处理结构化文档信息中相当给力的技术，xml有助于在服务器之间穿梭结构化数据，这使得开发人员更加得心应手的控制数据的存储和传输。

XML 的设计宗旨是传输和存储数据，因此可用于配置文件

xml的特点及作用:
特点：

xml与操作系统、编程语言的开发平台都无关；
实现不同系统之间的数据交互。

作用：

配置应用程序和网站；
数据交互；
Ajax基石。

语法规则
XML文件的后缀必须都是xml
XML第一行必须写文档声明

<?xml version="1.0" encoding="UTF-8"?>

XML中有且仅有一个根标签
属性值必须使用引号，单引号、双引号都可以
标签必须正确关闭，要么成对标签，要么自闭合
XML区分大小写

一般的web工程中都会用到web.xml，web.xml主要用来配置，可以方便的开发web工程。web.xml主要用来配置Filter、Listener、Servlet等。但是要说明的是web.xml并不是必须的，一个web工程可以没有web.xml文件。

WEB工程加载web.xml过程

启动一个WEB项目的时候，WEB容器会去读取它的配置文件web.xml，读取和两个结点。
紧接着，会创建一个ServletContext（servlet上下文），这个web项目的所有部分都将共享这个上下文。
容器将转换为键值对，并交给servletContext。
容器创建中的类实例，创建监听器。

web.xml文件元素详解

1、schema
web.xml的模式文件是由Sun公司定义的，每个web.xml文件的根元素中，都必须标明这个 web.xml使用的是哪个模式文件。其它的元素都放在之中。

<?xml version="1.0" encoding="UTF-8"?>

2、上下文参数
声明应用范围内的初始化参数。它用于向 ServletContext提供键值对，即应用程序上下文信息。我们的listener, filter等在初始化时会用到这些上下文中的信息。在servlet里面可以通过getServletContext().getInitParameter(“context/param”)得到。

<context-param><param-name>ContextParameter</para-name><param-value>test</param-value><description>It is a test parameter.</description>
</context-param>

3、过滤器

<filter><filter-name>setCharacterEncoding</filter-name><filter-class>com.myTest.setCharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>UTF-8</param-value></init-param>
</filter>
<filter-mapping><filter-name>setCharacterEncoding</filter-name><url-pattern>/*</url-pattern>
</filter-mapping>

4、servlet
servlet用来声明一个servlet的数据

<servlet-name></servlet-name> 指定servlet的名称
<servlet-class></servlet-class> 指定servlet的类名称
<jsp-file></jsp-file> 指定web站台中的某个JSP网页的完整路径
<init-param></init-param> 用来定义参数，可有多个init-param。在servlet类中通过getInitParamenter(String name)方法访问初始化参数
<load-on-startup></load-on-startup>指定当Web应用启动时，装载Servlet的次序。当值为正数或零时：Servlet容器先加载数值小的servlet，再依次加载其他数值大的servlet。当值为负或未定义：Servlet容器将在Web客户首次访问这个servlet时加载它。
<servlet-mapping></servlet-mapping> 用来定义servlet所对应的URL，包含两个子元素
<servlet-name></servlet-name> 指定servlet的名称
<url-pattern></url-pattern> 指定servlet所对应的URL

五用HTML+JS+CSS完成一个简单的登陆页面

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Login</title><link rel="stylesheet" type="text/css" href="login2.css"/></head>
<body><div id="login"><h1>登陆</h1><form method="post" name="frmLogin"><input type="text" required="required" placeholder="用户名" name="username" ></input><input type="password" required="required" placeholder="密码" name="password" ></input><button class="but" type="submit" onclick="return login()">登录</button></form></div><script type="text/javascript">function login() {var username = document.frmLogin.username.value;var password = document.frmLogin.password.value;if(username == "admin" && password == "123"){alert("登陆成功");}else{alert("登陆失败");}}</script>
</body>
</html>

CSS代码：

html{width: 100%;height: 100%;overflow: hidden;font-style: normal;
}
body{width: 100%;height: 100%;font-family: 'Open Sans',sans-serif;margin: 0;background-color: #4A374A;
}
#login{position: absolute;top: 50%;left:50%;margin: -150px 0 0 -150px;width: 300px;height: 300px;
}
#login h1{color: #fff;text-shadow:0 0 10px;letter-spacing: 1px;text-align: center;
}
h1{font-size: 2em;margin: 0.67em 0;
}
input{width: 278px;height: 18px;margin-bottom: 10px;outline: none;padding: 10px;font-size: 13px;color: #fff;text-shadow:1px 1px 1px;border-top: 1px solid #312E3D;border-left: 1px solid #312E3D;border-right: 1px solid #312E3D;border-bottom: 1px solid #56536A;border-radius: 4px;background-color: #2D2D3F;
}
.but{width: 300px;min-height: 20px;display: block;background-color: #4a77d4;border: 1px solid #3762bc;color: #fff;padding: 9px 14px;font-size: 15px;line-height: normal;border-radius: 5px;margin: 0;
}

结果：