一. 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> ----根控制标记
骨架标签
页面中最大的标签, 称为根标签. 文档的头部常用标签
标题
<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使用的是哪个模式文件。其它的元素都放在之中。
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;
}
结果: