Javaweb基础知识介绍- HTML、CSS、JavaScript

顺晟科技

2021-10-06 09:58:22

292

Java Web，是用Java技术来解决相关web互联网领域的技术总和。web包括：web服务器和web客户端两部分。Java在客户端的应用有java applet不过现在使用的很少，Java在服务器端的应用非常的丰富，比如Servlet，JSP和第三方框架等等。Java技术对Web领域的发展注入了强大的动力。

HTML部分

HTML是最基础的网页开发语言。全称是Hyper Text Markup Language（超文本标记语言）

超文本使用超链接的方法，将个找那个不同空间的文字信息1组织在一起的网状文本。

HTML是一种标记语言，由标签构成的语言。<标签名>如html,xml等

标记语言不是编程语言。

HTML语言语法：

在HTML文档的后缀名为“.html”或“.htm”

标签分为围堵标签和自闭合标签。

围堵标签：有开始标签和结束标签，如<html></html>

自闭合标签：开始标签和结束标签在一起。如<br/>

在标签中是可以嵌套的，但是需要正确嵌套，不能“你中有我，我中有你”

错误嵌套格式：<a><b></a></b>

正确嵌套格式：<a><b></b></a>

在开始标签中可以定义属性，属性是由键值对构成，值需要用引号（单双都可以）引起来。

在HTML中，是不区分大小写的，但是建议使用小写。

在HTML中标签分为文件标签，文本标签，图片标签，列表标签，链接标签，表格标签。

文件标签：是构成HTML的最基本的标签。

　　HTML：是HTML文档的根标签。

　　head：头标签。用于指定HTML文档的一些属性。引入外部的资源。

　　title：标题标签。

　　body：体标签。

　　<! DOCTYPE HTML>：HTML5中定义该文档是HTML文档。

文本标签：和文本有关的标签。

　　注释：<! -- 注释内容-->

　　<h1>-<h6>:标题标签。

　　　　h1-h6的字体大小逐渐递减。

　　<p>：段落标签。

　　<br>:换行标签。

　　<hr>:展示一条水平线。

　　　　属性：

　　　　　　color:颜色。

　　　　　　width:宽度。

　　　　　　size:高度。

　　　　　　align:对齐方式。

　　　　　　　　center：居中。

　　　　　　　　left：左对齐，

　　　　　　　　right：右对齐。

　　<b>:字体加粗

　　<i>：字体斜体

　　<font>:字体标签

　　　　属性：

　　　　　　color：颜色

　　　　　　size：大小

　　　　　　face：字体

　　　　属性定义：

　　　　　　color：

　　　　　　　　英文单词：red,green,blue。

　　　　　　　　rgb值：值的范围：0-255。如（0，255，255）

　　　　　　　　#值1值2值3：值的范围：00-FF之间。如：#FF00FF

　　　　　　width:

　　　　　　　　数值：width=’23‘，数值的单位默认是px（像素）

··　　　　　　　数值%：占比相对于父元素的比例。

图片标签：img

　　在web中，以“./”开头的路径代表当前目录；以“../"开头的路径代表上一级目录。

列表标签：

　　有序列表：

　　　　ol:列表

　　　　li:列表项

　　无序列表：

　　　　ul:列表

　　　　li:列表项

链接标签：

　　a：定义一个超链接。

　　　　属性：

　　　　　　href:指定访问资源的URL（统一资源定位符）

　　　　　　target：指定打开资源的方式。

　　　　　　　　_self:默认值，在当前页面打开。

　　　　　　　　_blank:在空白页面打开。

div和span：

　　div：每一个div占满一整行。块级标签。

　　span：文本信息在一行展示，行内标签，内联标签。

语义化标签：html5中为了提高程序的可读性，提供了一些标签。

　　<header>:页眉　　　　<footer>:页脚

表格标签：

　　table：定义表格。

　　　　width：宽度　　border:边框　　cellpadding：定义内容和单元格的距离

　　　　cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条。

　　　　bgcolor：背景色　　align：对齐方式

　　tr:定义行

　　　　bgcolor:背景色　　align：对齐方式

　　td:定义单元格

　　　　colspan:合并列

　　　　rowspan:合并行

　　th:定义表头单元格

　　　　<caption>:表格标题

　　　　<thead>:表示表格的头部分

　　　　<tbody>:表示表格的体部分

　　　　<tfoot>：表示表格的脚步分

表单标签：适用于采集用户输入的数据的，用于和服务器进行交互。

form：用于定义表单，可以定义一个范围，范围代表采集用户数据的范围。

属性:

　　action:指定提交数据URL

　　method:指定提交方式

　　分类：一共分为7种，2种比较常用。

　　　　GET：请求参数会在地址栏中显示，会封装到请求行中

　　　　　　　请求参数大小是有限制的

　　　　　　　不太安全

　　　　POST:请求参数不会在地址栏中显示。会封装到请求体中。

　　　　　　　请求参数的大小没有限制。

　　　　　　　较为安全·。

表单项中的数据想要被提交，必须具有name属性。

表单项标签：

　　input：可以通过type属性值，改变元素的样式。

　　　　type属性：

　　　　　　text：文本输入框，默认值。

　　　　　　　　placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。

　　　　　　password：密码输入框。

　　　　　　radio：单选框

　　　　　　　　注意：要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一致。

　　　　　　　　　　　　一般会给每一个单选框提供value属性，指定其被选中后提交的值。

　　　　　　　　　　　　checked属性,可以指定默认值。

　　　　　　checkbox:复选框。

　　　　　　file：文件选择框。

　　　　　　hidden：隐藏域，用于提交一些信息。

　　　　　　按钮:

　　　　　　　　submit：提交按钮，可以提交表单

　　　　　　　　button：普通按钮

　　　　　　　　image：图片提交按钮

　　　　　　　　　　src属性指定图片的路径

　　　　　　label：指定输入项的文字描述信息。

　　　　　　　　注意：

　　　　　　　　　　label的for属性一般会和input的id属性值对应，如果对应了，则点击label区域，会让input输入框获取焦点。

　　　　　　select：下拉列表。

　　　　　　　　子元素：option，指定列表项

　　　　　　textarea:文本域。

　　　　　　　　cols:指定列数，每一行有多少字符。

　　　　　　　　rows：默认多少行。

CSS部分·

css用于页面美化和布局控制

css全称：Cascading Style Sheets　　层叠样式表

　层叠：即多个样式可以作用在同一个html的元素上，同时生效

好处：功能强大，将内容展示和样式控制分开可以降低耦合度，解耦·；让分工协作更容易；提高开发效率。

css的使用：css与HTML的结合方式

　　内联方式：

　　　　在标签内使用style属性指定css代码，如：<div style="color:red;">hello css</div>

　　内部样式：

　　　　在head标签内·，定义style标签，style标签的·标签体内容就是css代码。

　　　　如:

　　　　<style>

　　　　　　　div{

　　　　　　　　　　color:blue

　　　　　　　　}

　　　　</style>

　　　　<div>hello css</div>

　　外部样式：

　　　　定义css资源文件，在head标签内，定义link标签，引入外部资源文件。

注意：三种方式，css的作用范围越来越大。

　　　种方式不常用，二三种较为常用。

　　第三种方式格式可以写为：

　　　　<style>

　　　　　　@import"css/a.css";

　　　　</style>

css语法：

　　格式：

　　　　选择{

　　　　　　属性1：属性值1；

　　　　　　属性2：属性值2；

　　　　　　属性3：属性值3；

　　　　　　...

　　　　}

选择器：筛选具有相似特征的元素。

注意：

　　每一对属性需要使用”；“隔开，最后一处属性可以不加；

选择器：筛选具有相似特征的元素。

分类：

基础选择器：

　　id选择器：选择具体的id属性值的元素，建议在一个HTML页面中id值

　　　　语法#id属性值{}

　　元素选择器:选择具有相同标签名称的元素

　　　　语法：标签名称{}

　　　　注意：id选择器优先级高于元素选择器

　　类选择器：选择具有相同class属性值的元素

　　　　语法：class属性值{}

　　　　注意：类选择器优先级高于元素选择器

扩展选择器：

　　选择所有元素：

　　　　语法：*{}

　　并集选择器：

　　　　选择器1，选择器2{}

　　子选择器：筛选选择器1元素下的选择器2元素

　　　　语法:选择1 选择器2{}

　　父选择器：筛选选择2的父元素选择器1

　　　　语法：选择器1 > 选择器2{}

　　属性选择器：选择元素名称，元素=属性值的元素

　　　　语法：元素名称[属性名=“属性值”]{}

　　伪类选择器：选择一些元素具有的状态

　　　　语法：元素：状态{}

　　　　如：<a>

　　　　　　状态：

　　　　　　　　Link：初始化的状态

　　　　　　　　visited：被访问过的状态

　　　　　　　　active：正在访问的状态

　　　　　　　　hover：鼠标悬浮状态

属性：

　　字体、文本：

　　　　font-size：字体大小　　color:文本颜色　　text-align：对齐方式　　line-height：行高

　　背景：

　　background:

　　边框：

　　border：设置边框，符合属性

　　尺寸：

　　width：宽度

　　height：高度

　　盒子模型：

　　　　margin：外边距　　padding：内边距

　　　　对内边距，默认情况下会影响整个盒子的大小。

　　　　box-sizing：border-box；设置盒子的属性，让width和height就是最终盒子的大小

　float：浮动

　　left:左浮动

　　right：右浮动

JavaScript部分

JavaScript和HTML，CSS不一样，它是一门编程语言，具有逻辑性。

JavaScript是一门客户端脚本语言

运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎。

作为脚本语言，是不需要编译的，直接就可以被浏览器解析执行。

JavaScript可以用来增强用户和HTML页面的交互性，可以来控制HTML元素，让页面有一些动态的效果，增强用户的体验。

JavaScript=ECMAScript+JavaScript自己特有的东西（BOM+DOM）

EMACScript:客户端脚本语言的标准。

基本语法：

　　与HTML结合方式：

　　　　内部JS：定义<script>,标签体内容就是js代码。

·　　　　外部JS：定义<script>，通过src属性引入外部的js文件。

　　注意：<script>可以定义多个，同时可以定义在页面的任何地方，但是定义的位置会影响执行的顺序。

注释：

　　在JavaScript的注释有多行注释和单行注释。

　　单行注释：//注释内容

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

数据类型：

　　数据类型分为原始数据类型（基本数据类型）和引用数据类型

　　原始数据类型（基本数据类型）：

　　　　number：数字。包括整数、小数、NaN（Not a Number　　一个不是数字的数字类型）

　　　　string：字符串。字符串/字符　　“adsd" "sd"等

　　　　boolean：true和false

　　　　null：一个对象为空的占位符

　　　　undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

　　引用数据类型：对象

变量：

　　变量实质上是一小块存储数据的空间

　　Java语言是强类型语言，而Javascript是弱类型语言

　　　　强类型：在开辟变量存储空间时，定义了将来存储的数据是数据类型。只能存储固定类型的数据。

　　　　弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意数据类型的数据。

　　语法：var 变量名 = 初始化值；

typeof运算符：获取变量的类型

　　注意：null运算后得到的时object，这是历史遗留问题，不是错误

运算符：

　　一元运算符：只有一个运算数的运算符

　　++，--，-（负号），+（正号）等

　　算术运算符：+，-，*，/，%等

　　赋值运算符：=，+=，-=等。

　　比较运算符：>,<,<=,>=,==,===(全等于)

　　　　对于全等于符号，在比较之前，先判断数据类型，若是数据类型不一样，则结果为false

　　逻辑运算符：&&，||，！

　　　　其他类型转Boolean”：

　　　　　　number：0或NaN为假，其他为真。

　　　　　　string：除了空字符串（""），其他都是true

　　　　　　null&undefined：都是false

　　　　　　对象：所有对象都为true

　　三元运算符：？：

　　　　　　？：表达式

　　　　　　语法：表达式？值1：值2；

　　　　　　判断表达式的值，如果时true则取值1，如果时false则取值2；

流程控制语句：

　　JS特殊语法：

　　　　语句以“;”结尾，如果一行只有一条语句则可以省略分号

　　　　变量的定义使用var关键字，也可以不使用

　　　　用var定义的，是局部变量；不用var定义的变量是全局变量

基本对象：

　　function：函数对象

　　　　创建：

　　　　　　种：var fun = new function（形式参数列表，方法体）；

　　　　　　第二种：function 方法名（形式参数列表）{

　　　　　　　　　　　　方法体

　　　　　　　　　　　　}

　　　　　　第三种：var 方法名 = function（形式参数列表）{

　　　　　　　　　　　　方法体

　　　　　　　　　　　　}

　　　　方法：无

　　　　属性：

　　　　　　length代表形参个数。

　　　　特点：

　　　　　　方法定义是，形参的类型不用写，返回值类型也不写

　　　　　　方法是一个对象，如果定义名称相同的方法，会覆盖

　　　　　　在JS中，方法的调用只与方法的名称有关，和参数列表无关

　　　　　　在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数

　　　　调用：

　　　　　　方法名称（实际参数列表）；

　　Array：数组对象

　　　　创建·：

　　　　　　种：var arr = new Array（元素列表）；

　　　　　　第二种：var arr = new Array(默认长度)；

　　　　　　第三种：var arr = [元素列表]；

　　　　方法:

　　　　　　join（参数）:将数组中的元素按照指定的分隔符拼接为字符串

　　　　　　push（）：向数组的末尾添加一个或更多个元素，并返回新的长度

　　　　属性：

　　　　　　length：数组的长度

　　　　特点：

　　　　　　在JS中，数组元素的类型可变

　　　　　　在JS中，数组的长度可变

　　Date：日期对象

　　　　创建：

　　　　　　var date = new Date();

　　　　方法：

　　　　　　toLocaleString（）：返回当前date对象对应的时间本地字符串格式

　　　　　　getTime（）：获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差

　　Math;　　数学对象

　　　　创建：

　　　　　　Math对象不用创建，直接使用　　Math.方法名（）

　　　　方法：

　　　　　　random（）：返回0-1之间的随机数。含0不含1

　　　　　　ceil（x）：对数值进行向上舍入

　　　　　　floor（x）:对数值进行向下舍入

　　　　　　round（x）：把数值四舍五入为最接近的整数

　　　　属性：PI

　　RegExp:正则表达式对象

　　　　正则表达式：定义字符串的组成规则

　　　　　　单个字符：[]

　　　　　　两次符号：？表示出现0次或1次；*表示出现0次或多次；+表示出现1次或多次

　　　　　　{m,n}：表示m<=出现次数<=n

　　　　　　　　如果m缺省，{，n}最多n次；如果n缺省，{m,}最少m次

　　　　正则对象：

　　　　　　创建：

　　　　　　　　var reg = new RegExp（"正则表达式"）；

　　　　　　　　var reg = /正则表达式/；

　　　　　　方法：

　　　　　　　　test（参数）：验证指定的字符是否符合正则定义的规范

　　Global:

　　　　特点：全局对象，这个Global中封装的方法不需要对象就可以直接使用，方法名（）

　　　　方法：

　　　　　　encodeURI（）：url编码　　decodeURI（）：url解码

　　　　　　encodeURIComponent（）：url编码，详细上面的方法，该方法编码的字符更多

　　　　　　decodeURIComponent（）：url解码，详细上面的方法，该方法解码的字符更多

　　　　　　parseInt():将字符串转为数字

　　　　　　　　逐一判断每一个字符是否为数字，直到不是数字为止，将前边数字部分转为number

　　　　　　isNaN（）：判断一个值是否为NaN

　　　　　　　　NaN六亲不认，连自己都不认，NaN参与的比较全部为false

　　　　　　eval（）：识别JavaScript字符串，并把它们作为脚本代码来执行。

　　　　URL编码

上一篇：使用[更多]模式框(modal)-B 下一篇：css书写步骤

网站建设

Css

Javaweb基础知识介绍- HTML、CSS、JavaScript

HTML部分

CSS部分·

JavaScript部分