Html相关知识点

最新推荐文章于 2021-12-31 21:17:57 发布

十年呵护

最新推荐文章于 2021-12-31 21:17:57 发布

阅读量785

点赞数

分类专栏：技能点

本文链接：https://blog.csdn.net/zzhuan_1/article/details/84720091

版权

技能点专栏收录该内容

28 篇文章 0 订阅

订阅专栏

web 基础的课程

html

css

javascript--js

后续

服务器端技术

jquery.ajax

静态页面(客户端技术)

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

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

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

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

运行环境: 浏览器

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

JSP

PHP

ASP.NET

html课程

1/什么是html

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

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

注意拼写正确

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

元素:<标记名称>

有些是成对出现

有些是单标记

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

最新版本:要求必须有结束<br/>

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

注释:

<a href="a.html">click me</a>

3 构建一个html 文件

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

标准格式(掌握):

版本信息(了解)

<html>

<head>

包含整个文档相关

</head>

<body>

显示的内容

</body>

</html>

4 head中:整个文档的定义

title:文档的标题

meta:元数据--单标记

定期刷新:例如留言论坛

文档的编码定义

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

style:定义样式

script:定义脚本代码

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

文本标记

图像和超级链接

表格

表单

列表

框架

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

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

各级标题:<h1>-<h6>

段落:<p>段落文本</p>---行间距较大

换行:<br>--单标记,回车

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

分区/组元素:div/span

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

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

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

aaa<span>aaaa</span>aaaaaaa

bbb<div>bbbb</div>bbbbbbb

<div>

</div>

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

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

<a href="http://www.tarena.com.cn">click me</a>

<a href="images/other.html">click me</a>

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

_self

_blank

<a href="http://bbs.baidu.com.cn" target="_blank">click me</a>

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

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

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

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

9.图像

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

为整幅图像添加链接

为一个图像添加多个链接

<area shape="rect" coords="x1,y1,x2,y2" href="">--单标记

</map>

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

10.表格

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

基本结构:table/tr/td

<table>

<tr>

</tr>

<tr>

</tr>

</table>

常用属性:

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>

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

王 wangcm@tarena.com.cn

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

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

2/语言的特征

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

3/哪些现象用js实现

验证数据录入的格式

动态效果

浏览器的交互

4/包含的内容

基础语法和常用内置对象

DOM

BOM--browser object model

实现数据的封装

5/如何书写脚本代码

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

script代码块:

<head>

在元素的事件中调用

js文件

6/基础语法--大小写敏感

标识符:字母/数字/下划线/$符号组成,不能以数字开头

语句:以分号结束

注释:// /**/

变量: var s1 = "mary";

var n1 = 123;

运算符:>> << ++ -- ?:

== 数值,内容

===严格相等内容和类型

控制语句

if/else switch/case

for while

错误控制台

7 数据类型

js是一种松散类型的语言:底层的数据存储格式一样的,代码编写过程,关心数据类型

内置数据类型

String/Number/Boolean/null/undefined

复杂数据类型

Object(Array/Math/Date/Regex..)

8/ 内置数据类型

声明变量的时候,不能确认数据类型;以赋值为准

string:文本字符串

number:数值,不区分整数和小数

bool:true/false----1/0

9/ 数据类型之间的转换

隐式

string + number---string

number + bool---number

string + bool---string

bool + bool ---number

显式 (使用一些转换方法)

转换为数值类型:parseInt/parseFloat---如果有数字,转换;NaN

转换为字符串:toString

var n = 133;

n.toString().length

判断string是否可以转换为数值

isNaN()---is not a number

110 常用内置对象的用法

js提供了一些常用的对象,利用它们的成员实现功能

String/Array/Math/Date/Error/Regex/...

11 string对象:表示字符串

创建: var s = "content";

var s = new String("content");

特殊字符:特殊的字符按照字符本身的意义显示---转义符

\' \" \n \\

汉字:

s.length---长度

s.substring(start,end)--子字符串,end是结束位置的下一个

s.charAt(index)

s.indexOf("子字符")--第一次出现的位置>=0

s.lastIndexOf

s.toUpperCase/toLowerCase

s.split("拆分用的字符")

s.search("子字符"/正则表达式)---index

s.replace("子字符"/正则表达式,newstring)--result

s.match()---匹配的数组结果

正则表达式:结合string对象的方法实现对于字符串的操作

/表达式/匹配标识符(g/i)

12 数组对象

创建:可以没有长度

var a = new Array();

赋值:

a[0] = "mary";

a[1] = 123;

a[2] = true;

简写方式:

var a = ["mary",123,true];

属性

length

方法

toString()---1,2,3

join(";")---10;20;30

array1.concat(array2)--两个数组加

array1.slice(start,end)--从数组中截取一部分,得到一个小数组

reverse--翻转

sort--排序,默认按照字符串的大小比较

sort(排序的function对象)--自定义的排序规则

13 Math对象:提供数学计算用的常量和方法

常量:Math.PI

方法:max/min/round/pow(x,y)/ceil/floor/random--小数(0=< < 1)

1到10之间的整数(包含下限,不包含上限)

random() * 10---0=< 小数 < 10--floor---0--9

3到15之间的

floor( random() * 12) + 3

14 Date对象:获取或者操作时间和日期...

15 Function对象

声明方法 function Name(x,y,z){.. return ;}

调用方法 Name(12,34);

var r = Name(4,true);

局部变量和全局变量

方法的重载:没有方法的重载

方法重名,即使参数不同,依然以最后一次定义的为准

arguments:代表当前方法的所有参数值组成的数组,实现类似于重载的效果

function M()

{

...

}

课后练习:

模拟机选一注双色球彩票的号码

6个红球:6个1到33(都包含)之间的整数,不能重复(产生一个号码,判断是否出现过存入数组;否则继续)

1个蓝球:1个1到16(都包含)之间的整数

显示在界面时(将产生的结果使用代码写在页面):

机选一注

红球为:1,3,6,23,25,32--排序,逗号隔开

蓝球为:12

16 DOM--document object model

将html文档作为一个节点树的结构,查询和修改,实现页面的动态修改---document 代表整个文档树

常和正则表达式一起实现页面输入的验证

a)找到节点

找到单个节点:document.getElementById()

找到一类(多个)节点:document.getElementsByTagName("input")

根据元素的相对位置找节点:

xxx.childNodes/parentNode/firstChild/lastChild

b)关心节点的信息:将html标记对象化---将标记中的属性标记作为节点对象的属性;将标记中间的文本内容,作为innerHTML

单个标记属性,如value/href/src--class--className

集合属性,如style,将集合属性中的每个子内容作为style的子属性存在 obj.style.color

如果修改的样式属性过多,单个修改将代码难以维护,建议:将样式声明放到单独的CSS文件中,用样式类维护;js中,xx.className = "";

<input type="text" > 文本框.value

<a href="">click me</a> a节点对象.innerHTML

a节点对象.href = "";

<img> 图像对象.src = "";

.value

.innerHTML

c)修改节点的信息;关心节点的信息

常用的实例:

页签

二级菜单

实现页面的录入验证

正则表达式:实现对于文本的匹配,如\d{3}

在js环境下:

使用方式一:用在string对象的search/replace/match方法里,实现对于文本的操作

使用方式二:声明正则表达式对象,调用 test 方法,测试string 是否符合表达式的声明,bool

var reg = /^\d{3}$/;

reg.test(string)----bool

onxxxx = "return false;"---取消事件

d)添加新节点

var o = document.createElement("input")--返回新创建的元素对象

o.value = "dd";

o.type = "text";

XXX.appendChild(o);

选择性的将新节点放入某个位置

XXX.insertBefore(newNode,refNode)---XXX是refNode的父节点,操作完毕后,newNode作为XXX的子节点

XXX.insertBefore(a,XXX.firstChild)

XXX.insertBefore(a,XXX.childNodes[1]);

e)删除节点

XXX.removeChild(node)---node为XXX的子节点

//id="txt1"的节点

$("txt1").parentNode.removeChild($("txt1"));

-----是W3C的标准

-----第三方封装,常用的标准操作封装起来

-----表现为各种公开的js文件

-----有些常用的封装,浏览器默认支持,比如:

</select>

createElement("option");

o.innerHTML = "";

o.value = "";

改建为: var o = new Option("text","value");

---这种封装:HTML DOM

下拉框的联动效果

onchange---当元素的值发生变化时

selectedIndex---当前所选中项的索引

封装:selObj.options.length = 0;

var o = new Option(text,value);

selObj.options[i] = o;

表格的动态创建:js的客户端技术/服务器端技术

动态的为表格添加新行,行中有单元格

<tr>

</tr>

</table>

标准的dom操作

封装的HTML DOM的操作:

tableObj.rows

tableObj.insertRow(index)---返回新产生的 tr 对象(行对象)

tableObj.deleteRow(index)

rowObj.insertCell(index)---返回新产生的 td 对象(单元格对象)

.deleteCell(index)

tdObj.innerHTML = "";

+++js中的对象

function checkPwd(){

var name = $("txtPwd").value;

var reg = /^\d{6}$/;

if(reg.test(name))

$("pwdInfo").innerHTML = "";

else

$("pwdInfo").innerHTML = "密码格式错误";

//返回密码验证是否通过

return reg.test(name);

}

//验证所有的录入:返回true或者false

function checkData() {

//收集所有的验证结果并返给调用方,以决定是否取消事件

var result = checkName() && checkPwd();

return result;

}

++++

详细见day02

</select>

*******

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:

<a href=""></a>---静态

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个数字,背景色也会变化(当前顺序的数字的背景色高亮显示)

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

十年呵护

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录