茂名石油化工学院H5实训 2Word格式.docx

茂名石油化工学院H5实训 2Word格式.docx

《茂名石油化工学院H5实训 2Word格式.docx》由会员分享，可在线阅读，更多相关《茂名石油化工学院H5实训 2Word格式.docx（58页珍藏版）》请在冰豆网上搜索。

div>

..<

/div>

span>

…<

/span>

p>

/p>

br/>

h1>

/h1>

h6>

/h6>

表单元素标签:

form>

/form>

inputtype=”button”value=”XXX”>

……………..

预格式化标签

在一个文本信息中，如果希望将原有的段落、换行、空格保留，则需要使用<

pre>

标签。

!

DOCTYPEhtml>

html>

<

head>

<

metacharset="

utf-8"

/>

title>

/title>

/head>

body>

Hello

world,

UCAI!

/pre>

/body>

/html>

忽略HTML代码的标签

如果要在一个HTML页面中，将原有的HTML格式的标签正常的显示在页面上，那么使用<

xmp>

UTF-8"

>

<

aa>

我是一个文本<

/aa>

/xmp>

块标签、行内标签

●块标签

常见:

、<

ul>

….

特性：

每个块标签都是在一行的位置开始，独立的占据了一行的位置。

是有宽度和高度的设置。

style>

.div{

border:

1pxsolidred;

width:

200px;

height:

}

/style>

divclass="

div"

我是一个文本信息

●行内标签

在一个元素的行内是允许其他的元素标签出现的。

a>

br>

img>

lable>

。

特点：

行内标签是允许有其他的标签出现在同一行内的。

行内标签在默认的情况下设置高度和宽度是没有意义的。

a{

background:

red;

100px;

display:

block;

ahref="

#"

我是一个链接<

/a>

XXXXX

三、CSS基础

在一个HTML页面中，使用了HTML+css+javaScript技术构成的，但是这些技术页面里面作用是什么？

HTML：

写页面结构和组成部分

CSS：

美化页面

JS：

实现对页面的动态控制、服务器进行交互（ajax）

1、选择器

1）id选择器

ID选择器的使用规则：

在一个页面中只能有一个元素使用唯一的一个ID。

选择完成以后的结果是只有一个元素。

/*通过ID选择器来选择元素*/

#div1{

2pxsolidblack;

#div2{

blue;

divid="

div1"

div2"

2）标签选择器

选择了在当前页面中所有对应的标签的元素，选择结果是一对元素

div{

链接<

3）类选择器

如果一堆标签添加了class属性，而且是相同的，则会全部选择。

选择结果是一堆元素

.div1{

11<

22<

33<

44<

55<

66<

注意问题：

选择器的优先级别：

Id选择器>

类选择>

标签选择器

#d1{

coral;

id="

d1"

2、CSS样式设置方式

1）行间样式

就是把样式写在标签的sytle属性中

divstyle="

background:

blue;

"

aa<

2）内联样式

将样式文件写入在html页面中。

3）外部样式

将所有的样式文件写入在一个独立的CSS文件中。

在HTML页面中导入这个文件。

linkrel="

stylesheet"

href="

css/style.css"

样式优先级别问题：

行间样式>

内部样式>

外部样式

3、选择器的种类

1）组合选择器

就是把页面中多个选择器使用,好来进行分隔，标识这些元素都被选择上。

/*使用组合选择器来选择我们页面中的标签，一堆元素*/

div,p,a{

color:

/*p{

}*/

width:

height:

div1<

段落<

div2<

2）关联选择器

是将选择器使用空格进行分隔，标识前一个选择器内部的元素。

.box2.inner{

box1"

inner"

我是第一个div

box2"

我是第二个div

3）伪类选择器（遗留问题？

？

）

/*.menu{

200px;

1pxsolidred;

a:

hover{

显示菜单<

--<

menu"

<

li>

aaa<

/li>

/ul>

-->

4、盒子模型

●在实际的项目开发过程中，经常是需要在一个DIV元素中嵌入其他的元素，那么这些元素之间就构成了盒子模型。

●在盒子模型中，需要进行设置距离次序是marginborderpaddingcontent

●在盒子模型中，元素的高度和宽度是不含外边据的。

●在盒子模型中，如果要让内层的元素在外层的元素中居中（水平方向上的居中使用使用）margin:

0auto;

.box{

500px;

.inner{

2pxsolidblue;

/*margin-left:

100px;

margin-top:

50px;

*/

/*设置文本的信息到中间位置*/

padding-left:

30px;

padding-top:

30px;

/*让元素在外层div位置居中*/

margin:

0auto;

box"

aaa

问题：

1、垂直方向怎么居中，红色的div在蓝色div内。

2、蓝色DIV中怎么让内容在垂直方向上是居中。

5、浮动

浮动就是让页面中的元素给脱离文档流，提升了一个层次，如果设置过程中使用的left,right那么就会按照方向进行移动。

300px;

float:

left;

.div2{

700px;

.div3{

yellow;

div3"

6、定位

相对定位：

相对自己的原始位置进行定位。

position:

relative;

left:

1px;

top:

抖一下<

绝对定位：

相对自己的外层元素并且存在定位的方式的元素进行定位。

如果外层元素是没有定位的方式，则默认的按照body元素进行定位。

50px;

right;

50px;

20px;

absolute;

-10px;

相对定位和绝对定位设置元素的的位置属性值主要是left,right,buttom,top四个属性。

四、JavaScript

案例1：

126邮箱登录的效果

chocolate;

none;

script>

window.onload=function（）{

//获取lable标签

varoLable=document.getElementById（"

info"

）;

//获取的元素是唯一的。

//获取div元素

varoDiv=document.getElementById（"

//增加鼠标移入的事件

oLable.onmousemove=function（）{

oDiv.style.display='

block'

;

}

//增加鼠标移除的事件

oLable.onmouseout=function（）{

none'

/script>

lableid="

保存密码，自动登录<

/lable>

请注意使用！

案例2：

全部选择的实现

varoP=document.getElementById（"

checkall"

varaInput=document.getElementsByTagName（"

input"

//选择到一堆元素，返回类型数组

//alert（aInput.length）;

//遍历数据，对每个input元素修改属性值，然后处于被选择的状态

oP.onclick=function（）{

for（vari=0;

i<

aInput.length;

i++）{

aInput[i].checked='

true'

}

pid="

全部选择<

inputtype="

checkbox"

如果当前checkbox处于没有被选择状态，点击就可以全选，但是如果全部处于选择状态，点击就要取消所有的选择状态。

1、JS中组成部分

●ECMAScript：

一些语法定义、解释器（翻译的问题，没有兼容问题）

●DOM：

JS中封装的document元素对象、标签对象，JS中还会内置一些DOM元素为程序员变成提供方便。

（兼容问题的，但是兼容问题是可以解决的。

●BOM：

浏览器中封装的window对象。

（没有兼容问题，因为在BOM对象中，出了widnow对象，其他的都不兼容。

2、JS中数据类型

●可以使用typeof运算符类判断当前变量中所包含的数据的类型。

●JS是一个弱类型语言，如果我定义一个变量，则我可以给变量任意类型值。

●JS中数据类型主要有：

⏹Number：

数值类型

⏹String:

字符串类型

⏹Object:

对象类型

⏹Function:

函数类型

⏹Undefine:

没有定义的数据类型

⏹数组实际就是Object类型。

//vari=1;

//数值类型

//i='

ucai'

//i=true;

//vari=12;

//vari="

abc"

//vari=document.getElementById（"

//vari=function（）{};

vari=[1,2,3];

alert（typeofi）;

3、数据类型的转化

1）隐式的数据类型转化

就是系统会自动根据数据类型进行转化满足我们程序员开发程序的需求。

vara="

12"