HTML与javascript语法

来源：互联网发布：知乎有趣的回答编辑：程序博客网时间：2024/05/29 06:47

1.1 Tip：Html:超文本标记语言。

Html语言中是由标签组成的。

Html中的数据都会封装在标签中，因为可以通过标签中的属性值对封装内数据进行操作。

确定html代码范围。<html></html>

在该范围内中可以定义两部分内容，一部分是头，一部分是体。

Head：网页中的一些属性信息，比如：标题

Body：网页中中显示的数据。

2.标签特点：对于数据进行封装，那么就有开始标签和结束标签

但是也有一些标签和只有单一功能，所以不需要结束标签，规范中要求标签必须要结束标签，所以这样的标签在内部结束。

如<bt/> <hr/> <img /> <input />

3.标签格式：<标签名属性名=”属性值”.>数据</标签名>

<标签名属性名=”属性值”>

4.创建标签：

字体：<font>

特殊部分：如果要在页面实现一些特殊符号，需要进行转义。

< ：&lt ; > ： > &: & 空格： 

标题：<h1> <h2> <h3>…..<h6>

5.列表标签：<dl></dl>

上层项目：<dt>

下层项目：<dd>

项目符号标签：

<ul>圆圈，圆点

<ol>数字，字母，罗马符号

这两个标签中的列表项都由<li>标签封装。

6.图像标签：<img>

7.表格标签：<table>

表格由行所组成，行由单元格组成，没有列的概念

表格中默认都由一个tbody标签。

8.标题标签:<caption>

<tableborder=”1” bordercolor=”red” width=”%60” cellpadding=”10” (单元格的内边距) cellspacing=”0”(单元格之间的距离)>

表格是最常用的标签，用于对数据进行格式化

9.超链接：<a>

当被点击后，会启动引擎所对应解析程序，去找指定的主机。

1. 去找本地主机的hosts文件，如果没有找到该主机对应的ip地址

2. 去公网DNS服务器上找相应的ip地址

超链接的另一个作用：

定位标记：

<a href=”#top”>获取指定位置</a>

10.表单标签：

该标签是可以和服务端进行交互的。

<form>

表单标签中的元素

<input>:该标签取决于type属性值。

Type：

1. text:文本框，输入的文本可见。

2. password：密码框，输入的文本不可见。

3. radio：单选框，注意：要被选中，必须要给单选框定义一个属性值name

当有多个单选框时，只能有一个被选中，那么这些单选框的name值必须相同

4. checkbox：复选框，当对多个数据进行同时选中时。

5. file：可以进行文件选择的组件，通常用于附件，或者文件上传

6. hidden：隐藏组件，该组件的不会在页面上显示，但是其定义的name和value可以被提交到服务端。

7. button：按钮组件：自定义一个按钮默认是没有任何效果的，可以通过注册时间并自定义效果

8. reset：重置按钮，将组件中被操作的效果还原到初始状态。

9. submit：提交按钮：将组件中添加的数据提交到直指定的目的地。

10. img：图像组件：通过src属性连接一个图片，完成提交动作，美化按钮。

下拉菜单：<select>

每一个下拉菜单项都由option进行封装。

</select>

表单组件通常都需要定义name和value属性，因为要将数据发送到服务端，服务端只有知道该name的值才可以对提交的数据进行分别获取。

1.2 Tip：Form标签中常见的属性：

Action：指定数据提交的目的地，

method：提交方式，两种常用值get和post。get为默认提交方式。

Get和post方式的区别：

Get:会将提交的数据显示在地址栏上。

Post：不会将数据显示在地址栏上

Get:提交数据的体积受地址栏的限制。

Post：可以提交大体积的数据

Get:对于敏感信息不安全。

Post：对于敏感信息安全

Get:会将提交信息封装在请求行，也就是http消息头之前。

Post:会将提交信息封装在数据体中，也就是http消息头之后的空行后

对于服务端而言：

表单提交尽量用post，因为涉及到编码问题，因为tomcat服务端默认的解码是ISO8859-1

对于post提交的中文，在服务端可以直接使用setCharacterEncoding（”gbk”）就可以解决

对于get提交的中文，在服务端只能通过IOS8859-1将数据解码一次，再通过指定的码表GBK解码

使用表单的组件不一定要定义form标签，只有需要将数据进行服务端的提交的时候才会用到form标签，因为其中有action可以指定目的地

1.3 Tip： CSS层叠样式表

将网页中的样式分离出来，完全由css来控制

增强样式的复用性以及可扩展性

格式

选择器{属性名：属性值；属性名：属性值……}

Css和html代码相结合的四种方式：

1. 每一个html都有一个style属性。

2. 当页面有多个标签相同样式时，可以进行反复使用。

<style>

Css代码

</style>

3、当有多个页面中的标签的样式相同时，还可以将样式单独封装成一个css文件。

通过在每个页面中定义

<style>

@importurl(“1.css”);

</style>

4.、通过html中head标签中的link标签连接一个css文件

技巧：

为了提高相同的样式的复用性以及可扩展性，可以将多个标签样式进行单独封装

p.css，div.css….

在一个css文件中使用css的import将多个标签样式文件导入

然后再html页面上，使用link标签导入这个总的css文件即可

1.css

@import url(”p.css”）;

@import url(“div.css”);

1.4 选择器：其实就是样式要作用的标签容器

当样式分离后，html作用在于用标签封装数据，然后将css加载到指定的标签上。

选择器的基本分类；

1. 标签选择器：其实就是html中的每一个标签名。

2. 类选择器：其实就是每一个标签中的class属性，用‘.’的形式表示。

3. ID选择器：其实就是每一个标签中的ID属性，但是要保证ID唯一性。

ID不仅可以被css所使用，还可以被javascript所使用。

选择器优先级：ID>class>标签

扩展选择器：

1. 关联选择器：其实就是对标签中的标签进行样式定义，选择器选择器…

2. 组合选择器：对于多个选择器进行相同样式定义。将多个选择器通过‘，’隔开的形式。

3. 伪元素选择器：其实就是元素的一种状态。

a:link : 超链接被点前状态。

a:visited : 超链接点击后的状态

a:hover : 悬停在超连接上。

a:active : 点击超链接时。

在定义这些状态时有一个顺序：L V H A

P:first-letter

P:first-line

网页设计时：div+css。

div:行级区域

span：块级区域

p:行级区域。（两个P之间有空行），P中不要嵌套div

1.5 Tip：javascript

是Netscape公司语言，基于对象和事件驱动。

和java不同之处：

1. 所属公司不一样，java是sun公司，现在是Oracle公司

2. js是基于对象，java是面向对象

3. js是由浏览器解释并执行，java是由jvm解释并进行。

4. js是弱类型，java是强类型。（没有将数据分成不同的类型进行存放）

5. js是非严谨的，java是严谨的。

6. javascript运行在客户端。

Javascript需要被浏览器所解释执行，就必须要将代码和html相结合。

结合方式：

1. 通过定义<script>标签将代码存入其中，并制定type属性，方便于浏览器启动指定的解析引擎。

2. 也可以通过<script>标签，使用src属性连接一个指定的js文件进来。

1.6 Tip：Javascript的基本语法：

1. 变量。

通过var关键字定义变量，该变量可以赋予不同类型的常量。

特殊的常量：undefined

2. 语句

if,switch,while,do while ,for.

使用逻辑运算符进行布尔表达式连接的时候需要使用短路与和短路或。&&，||

因为在js中，非0即为true，0为false，非null为true，null为false

Js特有语句：

With()：可以确定对象所使用的范围，在范围内，可以直接使用指定对象的属性和行为，而不用：“对象.属性” 的形式调用，

简化了对象的操作。

3. 数组

对于js的数组特点在于，该数组的长度是可变的，相对于java中的集合。

该数组中可以存放的元素类型可以是不同的。

定义格式：

var arr = {3,true,”abc”};

var arr = new Array（）‘

操作形式和java一样，都是通过for进行遍历，同时也使用了指针思想。

4. 函数

通过function关键字定义函数。

A 一般函数。

B,动态函数

使用的function对象

var show = new function(“x”,”y”,”returnx+y”);

动态函数的特点：可以讲参数列表，和方法体作为参数传递。

C匿名函数

一般函数的简写形式：

function（）{}

匿名函数通常可以用于事件的处理的

如:

window.onload = function( ){ }

在使用函数时需要注意的部分：

function show(){

return“show run”;

}

var method =show();

var method =show;

两句代码都是正确的。

第一句表示的是show方法运行后的结果赋值给method变量。

第二句表示的是将show指向的对象的地址赋值给method。那么method也指向了该对象，那么就可以通过method（）；的形式来调用这个show方法。

Javascript中的已经定义好的一些对象

1. String，Math，Date，Array，Function

这些对象都由一个属性叫做prototype原型。

Prototype可以获得指定的对象引用

可以通过该引用给自己已有的对象赋予一些新的功能。

那么在使用该对象时，可以直接调用定义好的新功能。

function getMax（）{

var max =0；

for(var x=1; x<this,length;x++){

if（this[x] > this[max]）

Max = x;

}

return this[max];

}

var arr ={1,5,3,7,2}

arr.sort( );//直接调用Array对象的sort方法对数组进行排序

Array.prototype.getMax= getMax；

var x =arr.getMax();

str.bold();

//模拟String中fontcolor方法。

functionmycolor(color){

return “<font color = ‘”+color +”’>”+this+”</font>”;

}

String.prototype.color= mycolor;

Str.color(“red”)；

//给字符串对象定义一个新功能，去掉字符串两端空格

functiontrim（）{

var start，end;

start= 0;

end.= this.length -1;

while(start<=end&& this.charAt(start)==” “)

start++;

while(start<=end&& this.charAt(end)==” “)

end--;

returnthis.substring(start,end+1);

}

String.prototype.trim= trim;

常见的全局方法：

paseInt（number，[radix]）;//将数字格式的字符串装成正数。

Varnum = parstInt（“110”，2）；

Varx=8;

Alert(x.toString(2));//获取8对应的二进制表现形式。