Java Web learning is the need for some basic computer, mainly Java front-end basis and foundation and a certain network infrastructure, the basics still need to have to a certain extent.
Today, let's take a look with the front end was mainly contain HTML (HTML), CSS (Cascading Style Sheets), JavaScript.
First, the front-end knowledge what doubt can go to w3School view, links .
1. HTML -HTML
HTML is the abbreviation of Hyper Text Markup Language, Chinese translated as "HTML", whose main role is to describe the content of the web page text, images and sounds through HTML tags.
HTML is "for the web page creation and in other web browser information see the" Design a markup language . Even now, the rapid development of Web pages, but the show on the browser or HTML-based, front-end development can not be separated HTML, let's take a quick review of knowledge together.
1.1 HTML structure
An HTML page has two parts, the first part is a document type mark the beginning, followed by the root html tags, each substantially come in pairs, such as the <html> </ html>, the root tag there are two portions of the head and body, the content of the page displayed in the main body section. Of course there appears a separate marker, such <br />, <input />.
1.2 Text Control Label
1.3 image tag
Table 1.4 Label
1.5 Form tag
其中method属性用于设置表单数据的提交方式，其取值为GET或POST，其中，GET为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差且有数据量限制，而使用POST提交方式不但保密性好，还可以提交大量的数据，所以开发中通常使用POST方式提交表单。
关于Get和Post的区别，更详细的可以参考下面这篇文章。
type属性为其最基本的属性，取值有多种，用来指定不同的控件类型，主要如下图所示。除type属性外，控件还可以定义很多其他属性，其中，比较常用的如id、name、value、size，它们分别用来指定input控件的ID值、名称、控件中的默认值和控件在页面中的显示宽度。
1.6列表标签
1.7超链接标签
target属性用于指定页面的打开方式，其取值有_self和_blank，其中_self为默认值，意为在原窗口打开，_blank为在新窗口打开。
1.8div标签
div可以说是我们最常用的一种标签了，<div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。在HTML页面中，它以<div>开头，并以</div>结尾，在<div>与</div>之间可以容纳段落、标题、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，并且<div>还可以嵌套多层<div>。
在一个div中，里面的内容可以相对独立，但是如果嵌套的div也可以集成父div的一些样式，并且可以对每个div单独设置样式，学好并用好div是非常有必要的。
2.层叠样式表–CSS
CSS 是 Cascading Style Sheet 的缩写，译作“层叠样式表单”，是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在实际开发中，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。示例如下：
关于css我们主要讲解一些样式属性和选择器（即如何把样式加到目标标签上）。下面是一些常用的样式属性。
对于css选择器主要有id选择器、类选择器、标记选择器和属性选择器：
当然还有其他更多的样式和别的选择器，我们这里因为篇幅有限，只介绍几种最常见的。
还有就是，页面中使用css有三种方式：1.嵌入式，在html中使用style标签包裹，一般写在head中；2.内联式，直接写在标签中，使用style属性，样式之间使用分号分隔；3.链接式，在HTML中使用link标签引入。这三种方式的优先级是内联>嵌入>链接，也符合了就近原则。
3.JavaScript基础
这部分主要分为两部分来介绍，首先介绍文档对象模型（DOM），然后简单的介绍下JS的语法，最后演示下JS的使用。
3.1DOM基础
DOM是Document Object Model（文档对象模型）的简称，是W3C组织推荐的处理可扩展标志语言的标准编程接口，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
W3C中将DOM标准分为3个不同的部分：核心DOM、XML DOM和HTML DOM，其中核心 DOM 是针对任何结构化文档的标准模型，XML DOM是针对XML文档的标准模型，而HTML DOM是针对HTML文档的标准模型。
每个元素被称为一个节点，直接位于一个节点之下的节点被称为该节点的子节点（childNode），直接位于一个节点之上的节点被称为该节点的父节点（parentNode），具有相同父节点的两个节点称为兄弟节点（siblingNode），DOM也称为DOM树，其结构是树状结构。
我们可以通过下列两种方式获得节点。
在页面中可以通过dom获取节点，并控制节点，如获取节点的值、设置节点的值，如下图的操作:
3.2JavaScript基础
页面中引入JS分为两种方式，一是页面上嵌入，使用script标签包裹；而是连接是，通过link标签引入外部js文件。
下图为js中的一些基本数据类型：
但是，js是一种弱类型语言，统一使用var来创建命令，在声明变量时，不需要指定变量的类型，变量的类型将根据变量的赋值来确定。不像Java等强类型，创建一个变量时需要指明变量的类型，但是js这样也会带来一个问题，就是变量值的判断问题，需要前后端做好约束，不能随意更改。其变量定义语法如下：
js中的运算符和别的语言中的一致，主要包含算术运算符（+, -, *, /, ++, --, %等），比较运算符（>, <, ==, ===等），复制运算符（=，+=，-=等），逻辑运算符（!, ||, &&等），位运算符（&, |, ~, ^, >>, <<, >>>等），还有唯一的三元运算符条件运算符（?:）。
js中语法结构也同样是分为三种：顺序结构、条件结构、循环结构。
对于顺序结构我们就不提了，条件语句就是if和else、else if的组合，其语法如下：
- 使用 if 来规定要执行的代码块，如果指定条件为 true
- 使用 else 来规定要执行的代码块，如果相同的条件为 false
- 使用 else if 来规定要测试的新条件，如果第一个条件为 false
其使用实例如下：
条件结构还有switch，其用法和Java基本相同，语法如下：
循环结构也和Java中的语法类似，主要有for、while、do while。我们简单的了解下for的用法：
3.3JS的使用
如果说一个网页页面是一个花园，Html就是花园中信息的载体，比如玫瑰花、月季花、狗尾巴草等；CSS就是一个个神奇的魔法，可以让玫瑰编程白色、红色、紫色等等等；而JavaScript可以说是整个花园的魔法师了，他可以在花园里变出新的花朵，也可以让某些花变得无影踪，还可以通过控制css让红色的花变为粉色，下面让我们看下js的简单用法和强大功能。
首先就是定义函数了，js也可以像Java一样定义函数，供页面中调用。其语法如下：
定义好的函数可以在标间中新增onclick属性绑定，还可以在js中进行调用。
通过js在页面上新增、删除节点：
我们可以通过chrom浏览器的开发者工具（F12或者右击->检查）查看页面上的html结构变化。
也可以通过js来控制标签的样式，语句如下，style后跟的为css的样式属性。
document.getElementById('div').style.color = "red"
又到了分隔线以下，本文到此就结束了，本文内容全部都是由博主自己进行整理并结合自身的理解进行总结，如果有什么错误，还请批评指正。
Java web这一专栏会是一个系列博客，喜欢的话可以持续关注，如果本文对你有所帮助，还请还请点赞、评论加关注。
有任何疑问，可以评论区留言。
