javaweb学习(1)

JavaWeb学习(1)

HTML

表格

用到的标签有：

//

表格专用标签

行：可加入的属性设置：

width 表格高度

border 表格像素大小，边框粗细

cellpadding 单元格间距

cellspacing 单元格填充

单元格中元素居中使用 align=“center”

列：可加入的属性设置：

rowspan 合并列

colspan 合并行

表单

用到的标签有：

表单专用标签

<input type=“text” 表示文本框，其中name属性必须指定，不然到时候服务器接收不到数据

<input type=“password” 表示密码框

<input type=“radio” 表示单选按钮，需要注意的是name属性保持一致，这样才会有互斥的效果，可以通过checked设置默认

<input type=“checkbox” 表示复选框，name属性建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组

//<select 表示下拉列表 每一个选项是option 其中value属性是发给服务器的值，selected表示默认选中

//<textarea 表示多行文本框 他的value就是开始结束标签之间的内容

<input type=“submit” 表示提交按钮

<input type=“reset” 表示重置按钮

<input type=“button” 表示普通按钮

总结

1.HTML是解释型的语言，不区分大小写

2.标签有html,head(头部文件),title(标题),meta,body(身体部分),br(换行),ul(有序列表),ol(无序列表),li(list item),h1-h6(标题字体大小),a(超链接),img(图片),u,i,b,sup(上标),sub(下标)(-&-nbsp;)(空格),p(段落),div(模块部分),span(标记)

2-1 table,tr,th,td

2-2 form(action=“谁”,method=“post”)//发送给谁,input type=“text,passwprd,radio,checkbox,submit,button,reset”,//,//

CSS

CSS最基本的分类:

标签样式表：

标签{

}

ID样式表：

#标签id{

}

类样式表：

.标签class{

}

还有组合样式类似于：

div p{
color: blue;
}

div .f32{
font-size: 32px;
font-family:“黑体” ;
}

css从位置上的分类:

嵌入式样式表：写在一个标签的内部，以一个属性的方式存在，优先级高于在style标签中的设置，就近原则

内部样式表，外部样式表

CSS盒子模型

主要使用：

1.border 边框设置
2.margin 间距
3.padding 单元格填充

CSS布局

postion:absolute – 绝对定位 需要配合left，top

postion:relative – 相对定位，一般会和float，margin，padding…配合使用

问题

<link rel="stylesheet" href="../css/css01.css" >

Refused to apply style from ‘http://localhost:63342/SGGjavawebdemo/js/css/css01.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

在创建css文件后，导入HTML文件路径发生错误，使得样式无法加载，在这种情况下，将绝对路径变成相对路径就可以了，在href的路径前面加上…/变成相对路径

JavaScript

js是一个在客户端（浏览器端）运行的脚本语言，是一个弱类型的语言，类似于java

基本类型

number 数字型：

JavaScript 中的正数、负数、小数等 统一称为 数字类型，JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认Java是强数据类型 例如 int a = 3 必须是整数

string字符串型：

通过单引号（ ‘’） 、双引号（ “”）或反引号( ` )包裹的数据都叫字符串，无论单引号或是双引号必须成对使用，单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）必要时可以使用转义符 \，输出单引号或双引号

boolean布尔型：

表示肯定或否定时在计算机中对应的是布尔类型数据。它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

undefined 未定义型：

只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined

null 空类型：

null 表示 值为 空

null 和 undefined 区别：

1.undefined 表示没有赋值

2.null 表示赋值了，但是内容为空

函数

function hello(var num){

}

参数列表中得参数和参数类型都可以不使用，根据实际情况来判断传参

DOM技术

DOM全拼为Document Object Model（文档对象模型）是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。

为了增加DOM树结点与页面主题信息相关程度的语义信息，计算结点内容的重要度，将HTML标签的类别(Category)、非链接文字数(WordNum)、超链接数(LinkNum)、属性集(Attibution)和影响度因子(Influence)等属性添加到结点中，扩展其语义。HTML标签依据其作用可分为5类:

• 描述标题及页面概要信息的标签:如〈title〉、〈meta〉等。

• 规划网页布局的标签:如〈table〉、〈tr〉、〈td〉、〈p〉、〈div〉等，其作用是描述网页内容的布局结构。

• 描述显示特点的标签:如〈b〉、〈I〉、〈strong〉、〈h1〉-〈h6〉等，其作用是强调重点内容，引起人们注意。

• 超链接相关的标签，表示网页间的内容相关性信息。

• 其他标签，如设置图像的标签〈img〉，在文本提取时将忽略这类标签。

• 根据HTML标签在刻画网页特征时的语义功能，将DOM树结点分为6种类别:标题类(TITLE)、正文类(CONTENT)、视觉类(VISION)、分块类(BLOCK)、超链类(LINK)和其他类(OTHER)，不同类的结点对Web信息提取的重要度不同。

• 标题类(TITLE):指HTML文档中标题标签的专有类别。

• 正文类(CONTENT):指包含网页正文内容的标签类别，如包含文字的〈td〉标签。

• 视觉类(VISION):指描述页面显示特性的标签类别，如〈b〉、〈strong〉等。

• 分块类(BLOCK):指用于网页内容分块的标签类别，如〈table〉、〈tr〉等。

• 超链类(LINK):指包含超链接的标签类别，如〈a〉。

• 其他类(OTHER):指不属于以上5种类别的标签类型。

接口（主要）

Node接口：它是文档中节点的基类型。定义了基本的访问和改变文档结构的方法。

Document接口：它代表整个文档。可创建文档中的各种节点(元素、注释、处理指令等)，创建的节点中带有一个OwnerDoculnent属性表示创建它们的Document对象。

DocumentFragment接口：它代表文档树的子树，相当一个小型文档。

Attr接口：它代表元素节点的属性。有意思的是它并不认为是该元素节点的子节点，不构成DOM树的一部分。同时也不是DocumentFragment节点的直接子节点。

CharacterData接口：它维护了DOMsitrgn字符串并提供读写操作的接口。但不直接对应文档的某种类型节点。

Text接口：它从CharacterData继承而来。代表元素或属性的一段连续的文本内容。它有一个派生的接口CDATAsection，目的是：CDATASeciton节点的内容将不会作任何转化;使用Node中的nomraliez方法时相邻的Text节点会合并成一个节点，但使用CDATASeciton可避免合并。

Comment接口：它也从CharacterData继承而来。代表注释中的文本内容。

• NodeList接口：用于管理有序的节点集。
• Entity接口：它代表实体;EntityReference代表实体的引用。
• NamedNodeMap接口：用于管理无序的节点集。
• DOMImplementation接口：它提供与DOM模型的实例无关的接口。CreateDocument可创建一个Document对象;haseFature可判断DOM实现是否支持某一模块。
• Notation接口：它代表文档中的符号定义。
• ProcessingInstruction接口：它代表处理指令。
• DOMException接口：异常处理。由于程序中的逻辑错误、数据丢失或DOM实现本身不稳定引起的错误。在程序处理过程中，由方法返回一个错误值

ssg讲述的部分dom技术

• onmouseover 鼠标悬浮，onmouseout 鼠标离开，onclick鼠标点击，onblur 失去焦点
• parentElement 父元素节点