Html相关知识点

web 基础的课程

html

css

javascript--js

后续

服务器端技术

jquery.ajax

静态页面(客户端技术)

html:页面的内容用适当的元素显示

CSS:设置页面元素的外观/样式

Js:页面元素添加动态的显示效果

开发环境:记事本,文本编辑器

运行环境: 浏览器

动态页面,服务器端技术:提交

JSP

PHP

ASP.NET

html课程

1/什么是html

hypertext markup language超(超级链接)文本标记语言,编写网页,后缀为.html/.htm的文件,用浏览器解释运行

   解释:如果错误,试图解释,带来不可预料的结果

注意拼写正确

2 html的基础语法:用一对尖括号表示页面内容

元素:<标记名称>

有些是成对出现

有些是单标记

最早版本:有些标记可以没有结束

最新版本:要求必须有结束

属性:<标记名称 属性名称="值">

注释:

 

click me

xian

 

3 构建一个html 文件

保证页面都能正常显示,书写标准规范的代码

标准格式(掌握):

版本信息(了解)

包含整个文档相关

显示的内容

 

4 head中:整个文档的定义

title:文档的标题

meta:元数据--单标记

定期刷新:例如留言论坛

--旧

--新

文档的编码定义

link:引入外部资源,如样式等

style:定义样式

script:定义脚本代码

5 body:显示的页面的主体内容

文本标记

图像和超级链接

表格

表单

列表

框架

 

6 关于浏览器:IE/Firefox/Chrome/Safari

 

7 文本标记:文本默认显示

各级标题:

-

段落:

段落文本

---行间距较大

换行:
--单标记,回车

练习2:实验文本标记的使用,区别

分区/组元素:div/span

span:同一行元素中的分组,不影响其他元素的布局

div:多行元素的分组,分组后,前后换行

练习3:实验span和div的使用,区别

aaaaaaaaaaaaaa

bbb

bbbb

bbbbbbb

 

段落1

段落2

段落3

 

8.超级链接a:点击的文本/去往的url

href属性用于指定路径:相对/绝对

click me

click me

target属性:指定新页面打开的方式

_self

_blank

click me

 

name属性:定义锚点--页面的不同的部分之间的跳转

1.使用a元素带有name属性定义一个锚点---目标位置

2.使用a元素带有href属性定义点击完去往某个位置---#锚点的名称

To Top

练习4:实验超级链接和锚点的使用

9.图像

添加一个图像:img元素--单标记

 

为整幅图像添加链接

为一个图像添加多个链接

--单标记

 

练习5:一副图像多个链接

 

 

 

10.表格

最初的目的用于显示结构化的数据(网格),后期用于实现页面的布局

基本结构:table/tr/td

常用属性:

 table元素

:border/width/height/cellpadding(内边距)/cellspacing(边框之间的距离)

 

td元素

:width/height/align(left/right/center)/valign(top/middle/bottom)

 

表格的完整结构

caption:为表格定义标题,出现在table标记里,作为第一个子元素存在

行分组:thead/tbody/tfoot

 

练习6:定义一个2X2的表格,实验常用属性

 

不规则表格:td的属性

rowspan

colspan

 

练习7:定义两个不规则的表格

 

表格的嵌套

table元素只能嵌套在td里

属性

练习8:表格的嵌套

 

11 表单:收集用户录入(选择)的数据,提交给服务器

form元素:承载页面的控件,以表单为单位,将当前表单中的数据提交给服务器

常用属性:action method

   form中可以包含控件:

input元素:单标记,根据type属性的不同取值定义不同类型的输入框

type属性的取值:

text:文本框

password:密码框

checkbox:多选/核选框

radio:单选框

按钮相关

submit:提交型

reset:重置,恢复到初始值

button:普通按钮,依靠onclick

另外两种

file:文件

hidden:隐藏域,常用于记载那些不需要被用户看见却需要提交的关键信息

name属性

对于checkbox和radio而言,用于实现分组

value 属性

对于文本框和密码框:设置初始文本

对于单选和多选框:设置关键数据,往往是id的数据

对于按钮类型:定义按钮上的文本

 

checked属性:针对于单选和多选框

 

非input元素

textarea元素:多行文本框

rows/cols属性

select元素:下拉框/列表框

size属性:默认为1,下拉框;设置为其他值,列表框

包含option元素:代表每一个选项

fieldset:输入域分组,结合legend元素定义组标题

legend:出现在fieldset里,作为第一个子元素

 

12 列表

有序列表:ol

无序列表:ul

列表项:li

王 [email protected]

13 框架

iframe:浮动框架,在一个html页面上引入(嵌入)另一个html页面,常用于实现广告页面的效果

 

14 课后练习

tts的练习

不规则表格的练习

CSS的课程

1/什么是CSS

使用统一的方式定义页面的外观,实现页面数据和显示的分离

 

2/解决的问题:

各个元素关于样式定义的属性不统一

没有实现数据和表现的分离,可维护度差

 

3/定义CSS

CSS的基本语法:将多对样式的声明(样式名称:值)用分号隔开

font-size:20pt;color:red;--统一定义的问题

选择器{样式声明}--分离

 

4/使用css的方式:

内联方式:将css的样式定义写在元素的style属性中,没有实现分离,难以重用和维护

内部样式表:将css的样式定义写在 head 元素中的 style 元素中,样式定义必须有选择器---分离不够彻底,只能当前页面重用

外部样式表:将样式定义在单独的 .css 的文件里,使用它时,页面的head里使用link元素(href/type/rel)引入

 

5/三种方式的优先级----就近原则

可以共用,建议使用外部样式表

内联>内部/外部(取决于位置)

位置:相同的级别下,重复定义,以最后一次定义的优先

 

练习1:创建一个html页面,实验内联方式/内部样式表/外部样式表,控制页面的外观

 

 

6/选择器

元素选择器:以html中元素的名称作为选择器,如h1 {color:red;}

使用方便,对于同一种元素实现定义;不能解决跨元素的统一定义,不能解决同一种元素里的细分

类选择器:

定义  .className{}

使用 <元素 class="className"

 

分类选择器:同一种元素里的细分

定义 元素名.className{}

使用 <元素名 class="className"

 

元素id选择器:专属于某个元素使用

定义 #名称 {}

使用 <元素 id="名称"

 

派生选择器:根据元素的层次位置定义样式,常用于对于一堆相同的元素实现统一定义

定义   选择器1 选择器2 选择器3{}

使用  

 

群组选择器:为多个选择器定义相同的外观部分

定义   选择器1,选择器2,选择器3{}

使用

a,h1,input.textbox,#pageTitle {}

 

伪类:根据不同的状态定义不同的外观,常用于实现超级链接的效果,hover状态除外,所有元素都可用

a:link---没有点击过的

a:active--激活,按下

a:hover--鼠标悬停

a:visited--访问过的

 

 

练习2:创建一个html页面,外部样式表文件,使用类选择器

 

input {}

7/各种样式属性--声明样式

尺寸的单位:pt(磅)/px(像素)  cm mm in %

颜色的单位:单词 #FFFFFF  #FFF

尺寸的样式:width height

 

8/边框的属性:

简写方式:宽度 线型 颜色

border:1px solid red;---4个

border-top:1px dashed blue

border-bottom

border-right

border-left

单一定义

border-width:1px;

border-style:solid;

border-color:red;

border-top-width:2px;

 

9/display属性:设置元素的显示方式,常和js一起,修改元素是否显示

none:元素不可见,且不占用页面的位置--常用于设计那些页面刚初始化时不可见的元素

inline

block

 

行内元素:可以和其他元素位于同一行,如span/input/a;高度和宽度设置无效

块级元素:独占一行,如div/p/table/h1

 

10/position 属性:默认用流模式显示页面,使用该属性改变布局的方式(多层)

static

absolute:绝对定位,相对于父元素

relative:相对定位,相对于原有的位置

 

11/偏移属性:设置元素左上角的坐标位置

left:50px;

top:20px;

bottom:

right:

 

12/堆叠顺序:层的顺序

z-index:

 

13/文本属性:定义文本的字体相关的样式

color

font-size

font-weight:normal/bold;

font-style:italic;

 

14/背景属性

background-color:red;

background-image:url(a.jpg);

background-repeat:repeat/no-repeat/repeat-x/repeat-y;

background-position:left top;--背景图像的偏移,小背景图像的居中;截取背景图像中的一部分

background-attachment:scroll(默认设置)/fixed(水印);---背景图像的付着方式,常用于实现类似于水印的效果

 

15 边距属性

box模型

padding:内边距

padding:10px;---4个方向,left和top优先(小);撑开(大)

padding-top/left/right/bottom:10px;

margin:外边距,定义相同

 

16 浮动属性:脱离原有的流模式的布局,左边框向左浮动,直到遇到一个边框停靠---将多个块级元素位于同一行

float:left/right;

clear:left/right/both;--清除周围浮动元素的影响,因为某个元素设置了浮动属性后,可能会对后续的元素带来影响

 

17 列表的样式

list-style-type:none;

list-style-image:;

day03

html构建页面的结构

CSS 美化页面

js 添加动态的效果

jsp 服务器端的交互

 

web--浏览器--netscape---javascript

Microsoft---JScript

JS

 

1/什么是 JavaScript:一种基于对象和事件驱动的脚本语言,由浏览器软件解释运行,常用于为页面添加一些客户端的动态效果,嵌入到网页

 

2/语言的特征

内置好了大量对象,数据的简单封装

 

3/哪些现象用js实现

验证数据录入的格式

动态效果

浏览器的交互

 

4/包含的内容

基础语法和常用内置对象

DOM

BOM--browser object model

实现数据的封装

5/如何书写脚本代码

直接定义:οnclick="alert();"

script代码块:

--请选择--

java

php

.net

 

 

*******

17 BOM--browser object model

将浏览器窗口中的各部分封装为对象,树形结构

   window

document  location  history  screen navigator event

 

18 window对象:代表整个窗口,其他作为它的子对象

document.createXXX

window.document.createXXX

 

a)window.open(url)--打开多个,返回新窗口对象

  window.open(url,name)

  window.open(url,name,config)

 

b)window.focus()

 

c)window.alert()

  window.confirm(text)--确认对话框,返回值 bool

  window.prompt()--文本输入的对话框

 

d)定时器的方法

周期性定时器

  window.setInterval(function,time)--time是ms单位,返回定时器对象

  window.clearInterval(定时器对象)

 

一次性定时器:实现类似于倒计时的效果

  window.setTimeout(function,time)--time是ms单位,返回定时器对象

  window.clearTimeout(定时器对象)

 

19 location 对象:浏览器窗口的地址栏

location.href = "url";---产生保留历史记录

location.replace(url);---不会保留页面的历史

相同点:旧窗口中显示新的url

location.reload();//F5

 

去往新的url:

---静态

window.open---打开新的窗口

页面的重定向(跳转):url替换旧的url

20 screen 对象

screen.width/height

screen.availWidth/availHeight

screen.color

 

21 navigator 对象:浏览器软件及其所在操作系统的信息

遍历该对象的所有属性

对象的属性本质是一个属性的数组,如

location.href

location["href"]

navigator.aa

navigator.bb

for(var p in navigator)

{

navigator[p]

}

 

22 event 对象

a) 事件的分类

键盘事件 onkeydown/onkeyup

鼠标事件:onmouseover/onmouseout/onclick

状态事件 onblur/onfocus/onchange/onload/onunload

 

b) 事件的定义

定义在HTML标记里: onxxx = "MM();"---写死

代码动态的为元素定义事件:

obj.onclick = function对象;

 

c) 事件的冒泡机制:父子元素上定义相同的事件,触发事件时,冒泡机制(从最里层的元素开始触发,层层向上)

   取消冒泡:event.cancelBubble = true;

   利用冒泡机制:

大量子元素有相同事件,为父元素定义事件

 

d) event 对象:只要页面发生了事件,将当前事件相关的所有信息封装到 event 对象中

   js代码中使用event 对象

 

e) event 成员:属性代表事件的某个信息

event.x/y/clientX/clientY

event.srcElement/target--元素对象

区分点击的是哪个子元素

event.srcElement---得到引发当前事件的元素对象

信息:元素节点.nodeName--获取元素的标记名称,大写形式

----在html中用event获取事件对象,传入方法里

ie/chrome/opera浏览器中:js或者html代码中获取事件对象,用event 关键字

event.srcElement

 

firefox 浏览器:只能在html里使用event关键字

event.target

 

浏览器兼容  event.srcElement || event.target

 

eval("1+2") --- 3:将参数作为计算表达式进行计算,得到结果

 

23 history:历史访问记录

history.length

history.back()

history.forward()

 

24 js中OO编程

OO:封装/继承/多态

 

数据的封装:数据结构---class

成员:数据(属性)/行为(方法)

 

三种封装方式:

a) 使用 Object 对象实现数据的封装

   var s = new Object();

   s.name = "mary";

   s.age = 18;

   s.isGraduated = true;

   s.方法 = function对象;

优点:简单

缺点:重用性差---简单的数据封装

 

b)自定义对象:封装,重用

声明自定义的对象,构造函数

function Student(n,a,i)

{

this.name = n;

this.age = a;

this.isGra = i;

this.introduceSelf = aaa;

}

 

function aaa()

{

this.name--获取当前对象的成员

}

 

var s1 = new Student("mary",18,true);

var s2 = new Student("tom",45,false);

alert(s1.name);

alert(s2.name);

 

c) JSon 的语法

var s = {"name":"mary","age":18,"isGra":true};

alert(s.name);

 

练习:tts

      走马灯的效果

实现4个图片每3s轮换(1,2,3,4,1,2,..)

下方1-4 4个数字,背景色也会变化(当前顺序的数字的背景色高亮显示)

鼠标移入图片,停止轮换;移走,继续轮换