HTML、CSS、JavaScript基础知识

来源：互联网发布：邮件大师 mac 编辑：程序博客网时间：2024/05/21 10:50

一、Web前端

1、Web前端包括：PC端页面、移动端页面

2、Web前端解决的问题：解决用户体验的问题

1）优美的界面展示；

2）良好的用户交互体验

二、认识网页

1、网页主要由文字、图片、按钮等元素组成，还可包含音频视频及Flash等。

三、Web标准

1、W3C 万维网联盟组织：用来制定web标准的机构

2、Web标准：制作网页要遵循的规范

3、Web标准规范分类：结构标准（相当于人的身体骨骼）、表现标准（相当于人的衣服）、行为标准（相当于行为）

4、结构：html

表现：css

行为：javascript

5、网页制作三剑客：HTML（制作网页）、CSS（美化网页）、JS（让网页动起来）

四、浏览器

1、浏览器是网页运行的平台，常用的有IE、火狐、谷歌、Safari、Opera等。

五、浏览器与服务器

1、请求与响应

浏览器通过http协议向服务器发出请求，服务器接收请求并作出响应，将结果返回给浏览器。

六、URL

1、http协议：超文本传输协议，浏览器和服务器端的网页传输数据的约束和规范。

2、url协议：平时写的网址就是url地址，规定url地址的格式。

3、scheme：//host.domain:port/path/filename

1）scheme：定义因特网服务类型，常见的是HTTP

2）host：定义域主机

3）domain：定义因特网域名

4）：port ：定义端口号，网页默认端口号为80

5）path：网页在服务器的路径

6）filename：文件名称

七、HTML语言

1、HTML简介

html（Hyper Text Markup Language）超文本标记语言，主要是通过html标记对网页中的文本、图片、声音等内容进行描述。

Html之所以称为超文本标记语言，不仅是因为它通过标记描述网页内容，同时也因为文本中包含了“超级链接”，通过超链接可以实现网页的跳转，从而构成了丰富多彩的Web页面。

2、HTML结构

3、HTML基本文档格式

1） – html根标签

<html>称为根标记，告诉浏览器这是一个网页文件，<html>标志着html文档的开始，</html>标志着文档的结束，在他们之间的是文档的头部和主体内容。

<html lang=”en”> “en”表示告诉搜索引擎语言为english ，“cn”为中文。

2）-head头标签：用于定义HTML文档的头部信息，标记网页的头部、声明信息，如编码格式、标题、搜索引擎搜索关键字、使用的链接文字等，紧跟在<html>标记之后。一个html文件只能有一个head标签。

3）-title 网页的标题，定义在<head>标签之中

基本格式：<title>网页名称</title>

4）-body 主体标签：具体显示在网页中的内容（文字、图片、按钮、音频视频等）一个html文档只能有一对<body>标记，且必须位于<html>之中，<head>之后。

4、HTML基本文档标签之间的关系

嵌套关系（父级和子级）、并列关系（类似兄弟间的关系）

5、HTML标签分类

1）双标记

双标记也称体标记，是指由开始和结束两个标记组成的标记，基本语法格式：<标记名></标记名>

2）单标记

<标签名 />

6、HTML特殊标记

空格符： 

小于号：<

大于号：>

和号：&

人民币：¥

版权：©

注册商标：®

摄氏度：°

正负号：±

乘号：×

除号：÷

平方二：²

立方三：³

7、具体的标签

1）字体标记（了解）

<sub>下标

<sup>上标

<strike>画线删除

由于开发HTML文档中标签语义化的规范，不通过html来设置字体的大小、粗细等，一般用CSS设置。

标签语义化：关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，语义化的主要目的就是让大家直观的认识标签（markup）和属性（attribute）的用途和作用。是HTML5的重要革新之一。

语义化网页的好处：有良好的结构和语义，容易被搜索引擎抓取。

2）特殊标记（转义字符）

空格：&nbsp；

大于：&gt；

小于：&lt；

版权©：&copy；

商标®：&reg；

乘号：&times；

除号：&divide；

3）无序清单

<ul>

</ul>

list-style-type属性常用取值：square（实心方块）、circle（空心小圈）、disc（默认）、none。

4）有序清单

<ol>

</ol>

start属性，设置属性开始的位置（无论type是什么类型start都是第几个，用数字形式设置例：type=“A” start=“5”）；

type属性，设置排序的类型；

5）图片标签

<img />

src属性：设置显示的图片。取值：图片网址、图片的存储路径（HTML文档与图片的存储层级：上一级目录存储：../文件夹名/图片名；下一级目录存储：/文件夹名/图片名；同一级目录：图片名）、图片的绝对路径(E://………..)

alt属性：当图片无法显示时出现的代替文字；

title属性：当鼠标悬停在图片上时显示的文字；

图片的命名规范：（多设备兼容、跨平台使用）全小写字母，可以有数字但尽量不要用数字开头，多个单词使用下划线分开。

6）超链接标签

href属性：设置超链接跳转的位置或网页；还有一个锚点的功能

name属性：设置锚的名称，用href=“#name”跳转

target属性：在何处打开目标网页

_blank：浏览器总在一个新打开、未命名的窗口中载入目标文档；

_self：默认值，使得目标文档载入并显示在相同的框架或者窗口中作为源文档，这个目标是多余且不必要的，除非和文档标题<base>标签（该标签为网页上的所有链接规定默认地址或默认目标）中的target属性一起使用；

top:使得文档载入包含这个超链接的窗口，用_top目标会清除所有被包含的框架并将文档载入整个浏览器窗口；

parent:使得文档载入父窗口或者包含该超链接引用的框架的框架集。如果这个引用是在窗口或在顶级框架中，那么他与_self等效；

_search:在浏览器的搜索区装载文档（这个功能只能在IE5或者更高版本中适用）。

7）表格标签

<table>标签定义HTML表格。简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。至少包含<table>标签、<tr>和<td>

a、<table>

b、<caption>表头（在线外），必须紧跟在<table>标签之后，且一个table只有一个

c、<tr>元素定义表格行

d、<th>元素定义表头（在线内），加粗且居中。

使用方法：<tr>

<tr> //行表头

或者：<tr>

<tr> //列表头

e、<thead>用于定义表格的头部，必须位于<table></table>标记之中，一般包含网页的logo和导航等头部信息。

f、<td>元素定义表格单元

g、<tfoot>用于定义表格的页脚，位于<table></table>标记之中，<thead></thead>标记之后，一般包含网页底部的企业信息等。

h、<tbody>用于定义表格的主体，位于<table></table>标记之中，<tfoot></tfoot>标记之后，一般包含网页中除头部和底部之外的其他内容。

表格的属性：border：表格的宽度（默认为0，没有边框）

cellpadding：单元格填充（文字与边框的间距）

cellspacing：单元格间距

bgcolor：背景颜色（适用于table与td）

frame：框架属性，规定外侧边框的哪个部分是可见的（取值：void：不显示外侧边框、

below：显示下部的外侧边框、

hsides：显示上部和下部的外侧边框、

vsides：显示左边和右边的外侧边框、

lhs：显示左边的外侧边框、

rhs：显示右边的外侧边框、

box、border：在所有四个边上显示外侧边框）

align：文字对齐方式

8）表单<form>（用于向服务器提交信息）

name属性：定义表单的名称

method属性：定义表单结果从客户端传到服务器的方式，POST方法、GET方法；默认参数为get

action：用来指定表单处理程序的位置（服务器端脚本处理程序）

fieldset：把表单分组

legend：分组名称

<input>标签：

type属性：text：文本框

radio：单选按钮（name属性值相同为一组）

file：文件域，上传文件

password：密码

checkbox：复选框

button：普通按钮

submit：提交按钮

reset：重置按钮

image：图像形式的提交按钮

hidden：隐藏域

name属性：控件的名称

value属性：input控件中的默认文本值

size属性：正整数，input控件在页面中的显示宽度

readonly属性：取值为readonly时，控件内容为只读

disabled属性：取值为disabled时，第一次加载页面时禁用该控件（显示为灰色）

checked属性：取值为checked时，定义选择控件默认被选中的项

maxlength属性：正整数，定义控件允许输入的最多字符数

9）文本域

rows属性：限制行数

cols属性：设定每行字符数（相当于宽度）

10）下拉选

</select>

select的属性：

name属性：选择菜单的名字；

disabled属性：可用或禁用；

multiple属性：规定可选择多个选项；

size属性：规定可见选项的数目；

option的属性：selected：取值selected表示被选中

11）下拉组选

</ optgroup>

<optgrouplabel=”hehe”>

</ optgroup>

</select>

label属性：组名；

12）<meta>标签

属性有两种：name和http-equiv；

name属性主要用于描述网页，对应于content（网页内容）

a.<meta name=”Generator”content=””>用以说明生成工具

b.<meta name=”keywords”content=””>向搜索引擎说明网页的关键词

c.<meta name=”description”content=””>告诉搜索引擎本站点的主要内容

d. <meta name=”author” content=”你的名字”>告诉搜索引擎站点的制作者

设定为all：文件将被检索，且页面上的链接可以被查询；

设定为none：文件将不被检索，且页面上的链接不可以被查询；

设定为index：文件将被检索；

设定为follow：；页面上的链接可以被查询；

设定为nofollow：文件将被检索，页面上的链接不可以被查询；

设定为noindex：文件将不被检索，但页面上的链接可以被查询；

http-equiv属性：

<metahttp-equiv=”Content-Type” contect=”text/html” charset=”gb2312”>

<metahttp-equiv=”Refresh” contect=”5” url=””>网页重定向

8、link标签

1）引用外部CSS 例：<linkrel=”stylesheet” type=”text/css” href=”” />

2）引用title图片(icon) 例：<linkrel=”icon” href=”1.icon”>

9、script标签

引用外部JS代码。例：<script type=”text/javascript” src=””></script>

10、字符集（charset）

1）utf-8：是目前最常用的字符集编码方式

2）gb2312：简单中文

3）GBK：包含全部中文字符繁体

4）BIG5：繁体中文

5）UTF-8：包含全世界所有国家需要用到的字符

11、标签语义化

概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

意义：内容结构合理；有利于seo和搜索引擎建立良好沟通；方便其他设备解析；便与团队开发和维护

SEO（Searching Engine Optimization，搜索引擎优化）：指对网站进行站内优化和修复（网站Web结构调整、网站内容建设、网站代码优化和编码等）和站外优化，从而提高网站的网站关键词排名以及公司的产品曝光度

12、如何做到标签语义化

1）尽可能少使用无语义标签<div>和<span>；

2）在语义不明显时，即可以使用<div>或者<p>时，尽量用<p>，因为<p>在默认情况下有上下间距，对兼容特殊终端有利；

3）不要使用纯样式标签，如b、font等，改用CSS设置；

4）需要强调的文本，可以包含在<strong>或<em>标签中，<strong>默认样式是加粗（不要用<b>）,<em>是斜体（不要用<i>）

八、CSS语言

1、CSS的起源：Web的衰落、一片混乱（HTML是一个结构化语言，但又开始描述外在表现）。在Web早期（1990-1993），html是一个很局限的语言，只能描述网页结构化元素，但随着万维网的出现（用户交互体验的加强），对html的要求越来越多，迫于压力，html开始出现<font>等标签，但是html是一种结构化语言，也开始描述外在表现了，几年之后这种随便的做法暴露出严重的问题：由于html既写结构又写样式，导致页面缺乏结构性，降低了网页的可访问性；页面维护越来越困难。

CSS（Cascading Style Sheets 层叠样式表），与html相比，CSS支持更丰富的文档外观，CSS可以为任何元素的文本和背景设置颜色；允许在任何元素外围设置边框，允许改变文本的大小、装饰（如下划线），间隔，甚至可以确定是否显示文本。

2、什么是CSS

层叠样式表 Cascading Style Sheets，用来设置外观显示样式，控制页面布局和样式，以HTML为基础提供了丰富的功能，可以针对不同的浏览器设置不同的样式。CSS就是控制页面布局和样式。

3、HTML与CSS关系

HTML结构层：负责从语义的角度搭建页面结构

CSS表现层：负责从审美的角度美化网页

4、CSS语法结构

选择器{

属性：值；

}

5、选择器

1）选择器：实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素一一对应，实现一对一或一对多的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

2）选择器的分类

基础选择器：标签选择器、ID选择器、类选择器；

复合选择器：后代选择器、子元素选择器、相邻兄弟选择器、属性和值选择器；

6、如何编写CSS文件

行内样式（内联式）、内嵌、外部式

7、标签选择器

就是html中的标签

CSS简单属性：width、height、color、background-color、font-size

8、类选择器

对HTML标签中的class属性进行选择，选择符是“ . ”。

一个标签中的class属性可以写多个类，不同的类用空格隔开,即多类选择器，例：<p class=”class_a class_b class_c”>

9、ID选择器

ID选择器和类选择器用法基本一样，区别是在同一个HTML页面中不能有相同的ID名称（使用相同的ID选择器浏览器不会报错，但是不符合W3C标准了，所以ID选择器必须要有唯一性）。ID选择器的选择符是“#”

10、 ID选择器与类选择器的区别

1）类选择器，可被多个标签使用；

2）ID选择器，具有唯一性，只能被单个标签使用；

3）类选择器可以结合使用，ID选择器不能；

4）一般多使用类选择器，但若是要结合JS使用，则用ID选择器

11、通配符选择器

通配符选择器用“*”表示，是所有选择器中使用最广的，能匹配页面中所有的元素

例：*{

font-size：20px；

}

12、选择器的命名

常见结构命名：头header、内容content/container、尾footer、导航nav、侧栏sidebar、标志logo、广告banner、页面主体main。

规范：最好不用汉字、拼音及html标签去命名一个选择器；不能用数字开头；在名称内部可以出现特殊符号，如下划线和中横线

13、 CSS常用属性

Width

宽

Height

高

Color

前景色，一般用于设置文字颜色

Background-color

背景色

Font-size

字体大小，单位为px像素

Text-align

设置位置，取值：center、left、right等

Font-family

设置字体样式

Font-weight

设置字体加粗，normal默认，bold加粗

Font-style

设置字体风格，normal默认，italic斜体

14、元素标签分类

HTML中根据显示模式不同，将标签分为几类：块级标签、行内标签、行内块标签。

15、块级标签

在HTML中div、p、h1-h6、form、ul、li等是块级标签。

特点：独占一个自然段。

1）一个块级元素独占一行；

2）元素的高度、宽度、行高及边距（外边距不计入宽度）都可设置；

3）在不设置宽度的情况下，为充满父容器（即父容器宽度的100%），除非设定一个宽度。

16、行内元素

在html中a、span、br、i、em、strong、label等等属于行内元素。

行内元素三大特点：

1）和其他元素在同一行内；

2）元素的高度、宽度、行高及顶部和底部边距（外边距不计入宽度）都不可设置；

3）元素的宽度就是他包含的文字或图片的宽度，不可改变

17、行内元素转换为块元素

行内元素不可设置上下边距，但可以转换为块级元素：

display：block；

转换之后就可以设置元素的高度、宽度、行高及边距等。

18、行内块元素（inline-block）

html中<img>、<input>标签就是这种内敛块标签。

特点：同时具有内联元素、块状元素的特点。

19、行内元素转行内块元素

display：line-block；行内元素转行内块元素；

display：inline；转换为行内元素

20、 div与span

无语义标签，没有具体的含义和样式。

div：可以理解为一个容器，如果想对网页中某一些元素组成一个区域整体去设置CSS样式，可以将这些元素放入一个容器div中。

span：文字，如果有一些文字没有任何标签包裹进行说明描述，想要对其设置CSS样式，通过span包裹文字，设置类或ID选择器进行设置。

21、 CSS语法合写

1）文字属性合写

语法：

选择器{

font：font-style font-weightfont-size/line-height font-family

}

必须按照顺序去写，必须设置字体大小和字体

22、复合选择器

复合选择器室友是由两个或多个基础选择器通过不同的方式组合而成。具体有标签指定式选择器、后代选择器（包含选择器）、并集选择器

23、标签指定式选择器

标签制定式选择器（既…又…），又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为类选择器或ID选择器，两个选择器之间必须有空格。例：h3 .class1 、h3 #id1。

24、后代选择器（使用广泛）

后代选择器（也叫包含选择器），用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分开，当标记发生嵌套时，内层标记就成为外层标记的后代。例：.title input{}

25、并集选择器

使用逗号“，”隔开多个选择器，对多个标签进行统一的设置，可以是具体的标签，也可以是ID和class。任何形式的选择器都可以作为并集选择器的一部分。

26、专门用于input的选择器

通过type去区分每个input标签。

语法：input[type=button]{…} (没有空格！！！)

27、样式分类

1）内联式（行内样式）

不可重用，作用于当前行，一般只用于个人学习和测试。

2）内嵌式

写在head标签中，定义style

3）外联式

单独定义CSS文件，通过link连接。

28、 CSS特性

1）层叠性：所谓层叠性是指多种CSS样式的叠加（不冲突就可叠加）

2）继承性：

29、 CSS优先级

内联样式 > ID选择器 >类选择器 > 标签选择器

内联样式的优先级最高，ID选择器的优先级仅次于内联样式，类选择器优先级低于ID选择器，标签选择器低于类选择器。

30、 CSS伪类

:link{属性：值} 链接默认状态；

:visited{属性：值} 链接访问之后的状态；

:hover{属性：值} 鼠标放到链接上显示的状态；

:active{属性：值} 链接激活的状态；

:focus{属性：值} 获取焦点

31、背景background

background-color 设置背景颜色；

background-image 设置背景图片；例：background-image：url(url地址)；

background-repeat 设置背景平铺，取值：no-repeat不平铺 repeat-x横向拉伸，repeat-y纵向拉伸；

background-position 设置背景位置，取值：left、right、center、top、bottom；

background-attachment 设置背景是否固定

背景连写格式：没有先后顺序，都是可选的。

background：red url(“1.jpg”) no-repeat 30px 40px scroll;

32、 CSS行高

CSS行高：浏览器默认字体行高

1）浏览器默认的字体大小：16px

2）浏览器默认的字体行高：18px

3）行高=上边距+字体大小+下边距

行高单位：

1）px（像素）

2）em（字符）=文字大小*行高值

3）%

4）无

33、 CSS盒子模型

所谓盒子模型就是把HTML页面中的元素看做一个矩形的盒子，也就是一个盛装内容的容器，每个矩形都有元素的内容、内边距（padding）、边框（border）和内边距（margin）组成。

行内元素上下margin和padding会被忽略，左右margin和padding会起作用。

1）边框 border

语法：

border：border-width(宽度) border-style(边框的样式) border-color(边框的颜色)

常用边框样式：dotted 圆点

dashed 长方形点

solid 描边实线

double 双线

padding:10px; 上下左右距离都为10px

padding:10px 40px; 上下10px，左右40px

padding:10px 40px 20px; 上10px，左右40px，下20px

padding:10px 20px 30px 40px; 上、右、下、左

margin同

margin:0 auto auto设置为相对边的值（常用于居中）

34、 CSS布局

1）float 浮动

float：left/right

浮动的特点：

a、浮动找浮动，不浮动找不浮动；

b、浮动只影响后面的元素；

c、浮动以元素顶部为基准对齐；

d、浮动可实现模式转换（span设置浮动可以设置宽高）；

e、让块级元素在一行显示

2）clear属性

规定元素的哪一侧不允许其他浮动元素

取值：left：在左侧不允许浮动元素

right：在右侧不允许浮动元素

both：在左右两侧均不允许浮动元素

none：默认值，允许浮动元素出现在两侧

3）margin外边距的总结

a、 margin：设置四个方向的外边距

margin：top right bottom left；

b、对上右下左四个方向分别设置

margin-top，margin-right，margin-bottom，margin-left

c、 margin：20px 20px；

第一个20px代表上下，第二个20px代表左右

d、margin：20px auto；

auto表示自适应，类似于在父容器居中

35、新人快速工作方法总结（画网站）

1）不要拿来就做，要思考，规划；

2）根据原型图做出模块分布图；

要设计好结构（多思考会出现的冲突）

为每一个模块做好命名，规划等；

3）将每个模块以border或背景的形式展示出来

4）具体的填充每一个模块

36、原型图

一般由设计/美工使用ps制作，根据产品需求设计界面，在原型图中要规定出颜色、大小、位置等信息，必要图标要单独切图。

开发人员根据项目原型图去设计完成代码。

37、 overflow的使用

overflow属性规定当内容溢出元素框时发生的事情。

1）overflow：visible 默认值，内容不会被修剪，会呈现在元素框之外；

2）overflow：hidden 内容会被修剪，并且其余内容是不可见的；

3）overflow：scroll 内容会被修剪，但浏览器会显示滚动条以查看其余的内容；

4）overflow：auto如果内容被修剪，浏览器会显示滚动条以查看其余的内容

38、定位position

1）定位分类

static：静态定位，默认值，没有定位，元素出现在正常的流中（忽略top、bottom、right、left或者z-index声明）支持padding、margin、float等属性。

absolute：绝对定位

relative：相对定位，以自身位置为基准进行定位。

fixed：固定定位

2）绝对定位 absolute

a、绝对定位以浏览器左上角为基准设置；

b、当一个盒子包含在另一个盒子中，父盒子未设置定位，子盒子以浏览器左上角为基准设置位置；当父盒子设置定位，子盒子以父盒子左上角为基准设置位置

c、绝对定位绝对不占空间位置（与浮动一样）

d、绝对定位可以实现模式转换

3）相对定位

a、相对定位以自身位置为基准设置位置

b、相对定位占位置

c、一般子元素设置相对定位

4）固定定位

固定定位不占位置，都是以浏览器为参考进行定位的。

九、JavaScript（JS）语言

由网景公司（NetScape）在1995年发布

1、特点：

1）借鉴C语言的基本语法；

2）借鉴Java语言的数据类型和内存管理；

3）借鉴Scheme语言将函数提升到“第一等公民”（first class）的地位；

4）借鉴Self语言，使用基于原型（prototype）的继承机制

借鉴了众多语言，为了让JS可以让更多人熟悉，可以很快地上手开发。

2、面试提升的知识点

1）面向过程与面向对象

面向对象：封装、继承、多态

封装和继承都是为多态服务的，几乎半数以上的设计模式都是针对多态操作的。

2）封装的实现

类（set/get方法）、内部类、抽象类、使用继承建立连接关系、接口、枚举、泛型、反射等，尽量减少类型的出现；类型数量减少，内部建立连接关系，高内聚，从而达到少而精的目的。

最终目的：修改和维护更加方便，内存的管理更加轻松。

架构设计

在Java中通过多态简化类型的概念，让某个类具有多种表现形态。

JavaScript弱化了Java的强类型概念，JS是弱类型的语言，var可以代表所有类型

3）内存管理

Java的弱引用、强引用、虚引用、软引用，都是针对垃圾回收机制，操作垃圾回收机制操作内存

采取某种引用机制，当对象不被使用时，会根据引用机制判断去采取垃圾回收，将该对象占据的内存空置出来。

3、认识JavaScript

1）JavaScript是一种网页编程技术；

2）JavaScript是一种基于对象和事件驱动，并具有安全性能的脚本语言；

3）JavaScript可以被嵌入到HTML文件中，不需要经过Web服务器就可以对用户操作作出响应

4、JavaScript的组成

ECMAScript：JavaScript的语法标准；

DOM：JavaScript操作网页上的元素的API（JS操作HTML）文档对象模型；

BOM：JavaScript操作浏览器的部分功能的API（JS操作浏览器：浏览历史、打开新窗口、书签等）浏览器对象模型

5、JavaScript的特点

1）简单易用

可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序

2）解释执行（解释语言）

事先不编译，逐行执行，无需进行严格的变量声明

3）基于对象

内置大量现成对象，编写少量程序可以完成目标

6、JavaScript的使用范围

客户端数据计算、客户端表单合法性验证、浏览器对象的调用、浏览器事件的触发、网页特殊显示效果制作。

7、JavaScript语法规范

1）与CSS类似，嵌入HTML的<head>标签；

2）单独文件，在<head>标签中引用；

8、通过JS代码向HTML文档中写入文字

1）document.write()

document指的是当前HTML文档

2）有两个div，分别向里面写文字

步骤：

a、为div设置ID；

b、在JS代码（写在body标签中，用<script></script>标签括起来）中通过documen.getElementById的方式获取到div对象；

c、innerHTML（覆盖、替换）：单独写入文字，也可写入HTML标签

innerText（覆盖、替换）：写入文本内容

3）外部链接JS文件

9、JS执行原理

html页面中出现<script>标签，就会让页面暂停等待脚本的解析和执行，无论当前脚本是内嵌式还是外联式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续，这在页面的生命周期中是必须的。

10、通过JS与网页进行交互

1）警告框alert

a、直接弹出

alert（“直接弹出”）；

会根据浏览器的不同显示出不同的样式

b、结合点击事件出现

步骤：定义标签，设置ID；在JS代码中提供点击函数；在标签描述中设置点击事件onclick为该点击函数。

2）confirm()函数

确认函数：点击确定返回true，点击取消，返回false。

3）prompt（）函数

输入函数

点击确定，返回值为输入内容；点击取消，返回null。

判断是否输入了用length属性,length为0则没输入。

11、命名规范

1）变量名必须以字符或者下划线”_”开头，变量可以包含数字、从A至Z的大小字母；

2）JavaScript严格区分大小写；

3）禁止使用JS的保留关键字作为变量名

12、 JavaScript中的数据类型

（Java有八大基本数据类型：int、short、long…）

简单（基本、值）数据类型：Number、String、Boolean、Undefine、Null；

复杂（引用）数据类型（暂时了解）：Object、Array、Data等

13、查看当前变量的数据类型

typeof name

typeof（name）

NaN：Not a Number不是一个数；

isNaN(x)：判断是不是一个数时使用；

14、数字类型转换

1）将数字类型转换为字符串类型：

隐式类型转换；

强制类型转换：String()，变量.tostring()

2）将字符串转换为数字类型

隐式类型转换；

强制类型转换：Number()，Number.parseInt()，Number.parseFloat()

转换过程中哪里出错哪里停止

例：Number.parseInt(“123123aa12”)，结果为123123

3）将其他数据类型转换为Boolean类型

数字0转换为false

15、逻辑运算符

1）&&：逻辑与，一假即假；

||：逻辑真，一真即真；

！：逻辑非，当前结果取反

2）逻辑运算符的短路问题：

A与B，A为false，B不执行；

A或B，A为true，B不执行

3）&与&&、|与||的区别

&&与||具有短路的功能

4）与、或、非运算的优先级

非 > 与 >或

！> & > ^ > | > && > ||

16、等号运算符，逗号运算符

== ：等于，比较的是内容；

=== ：全等，比较的是内容和数据类型；

！= ：不等于，判断的是内容；

！== ：不全等于，比较的是内容和数据类型

17、函数

函数就是可重复执行的代码块。

JS中没有重载

1）函数的两种定义方式

2）匿名函数

18、 BOM（Browser Object Model浏览器对象模型）

1）window对象：是JavaScript中的顶级对象，所有定义在全局作用域中的对象都会变成window对象的属性和方法。window对象下的属性和方法调用的时候可以省略window。

2）系统对话框

警告框alert（）；不同浏览器的外观是不一样的

确认框confirm（）；

输入框prompt（）；

3）window的方法

a、打开窗口window.open(url,target,param)

url 要打开的地址；

target 新窗口的位置，取值：_blank、_self、_parent;

param 新窗口的一些设置

返回值：新窗口的句柄

b、window.close（）关闭

c、window.onload()

在页面加载完成之后自动执行

19、 a标签的操作

1）打开新窗口

functionopenNewWin(){

window.open(“index.html”,”_blank”);

}

2）图片切换

var image = document.getElementById(“image”);

function func(){

image.src = “2.jpg”;

}

</script>

20、定时器

1）循环执行（等待时间过去之后执行）

var timerId =setInterval(code, interval);

clearInterval(timerId);

间隔时间执行，不是特别精确。

参数1：执行的代码，可以是function函数；

参数2：间隔的时间，毫秒为单位

2）定时执行（立刻执行）

var timerId =setTimeOut(code, interval);

clearTimeOut(timeId);

21、 JS获取html标签对象的方式

1）document.getElementById(“id”);

2）document.getElementsByTagName(“TagName”);

若同时有几个标签，则返回一个数组，通过索引访问。

例：document.getElementsByTagName(“button”)[0];

3）document.getElementsByClassName(“ClassName”);

同TagName，返回的是数组

4）document.getElementByName(“Name”);

通过name属性获取

22、动态灵活的onclik设置方式

1）匿名函数

xx.onclick =function(){//点击事件的代码…};

23、 location对象

window.location

相当于浏览器的地址栏，可以将url解析成独立的片段。

属性：href

hash：返回url中#后面的内容，包括#

host：主机名，包括端口

hostname：主机名

pathname：url中的路径部分

protocol：协议，一般是http、https

search：查询字符串

通俗：在JS代码中想要获取访问网址的主机，端口号，协议，搜索字段等，通过location获取

用户统计分析（产品统计数据）

例：window.location.host

24、 location对象的方法

1）location.assign()：改变浏览器地址栏的地址，并记录到历史中（设置location.href就会调用assign()，一般使用location.href进行页面的跳转）

2）location.replace()：替换浏览器地址栏的地址，但不记录到历史中

3）location.reload()：重新加载

25、 navigator对象

window.navigator

获取客户端的信息，如浏览器型号、操作系统型号

例：window.navigator.platform（浏览器支持的系统）;

window..navigator.userAgent（系统，浏览器）

26、 history对象

历史记录、历史记录管理

1）后退

history.back()

history.go(-1) 0是刷新

2）前进

history.forword()

history.go(1)

27、 DOM（document Object Model文档对象模型）

又称文档树模型，是一套操作HTML与XML文档的API。DOM可以把HTML和XML描述为一个文档树，树上的每一个分支都可以视为一个对象，通过DOM可以添加、修改和移除文档上的一部分。

document对象：指HTML或XML文件

节点（Node）：HTML文档中的所有内容都可以称之为节点

元素（Element）：HTML中的标签可以称之为元素

文档元素（根元素）：文档中的第一个元素，HTML文档中的文档元素就是<html>

文本节点：

属性节点：

28、 DOM可以做什么

1）找对象（元素）

2）设置元素（标签）的属性和样式

a）设置样式：xx.style.position等

b）设置属性：img.src等

3）动态创建和删除元素

4）事件——触发响应

a、事件源（事件的触发者）

b、事件名称

c、事件响应程序

29、 DOM对象的属性

DOM对象的属性和HTML的标签属性几乎是一致的，例：src、href、className、title

innerHTML：会把内容解析到DOM树上

获取标签之间的内容、设置标签之间的内容

innerText（FF中textContent）：会对内容转义

获取标签之间的内容、设置标签之间的内容

30、 replace()方法

xx.xxx.replace(原属性，替换的属性)

31、事件

JavaScript是事件驱动的。事件源、事件名称、事件处理程序

1）鼠标事件

onclick

ondbclick

onmusedown

onmouseup

onfocus

onblur

onchange（文本内容或下拉菜单中的选项发生变化）

onmouseover（鼠标悬停）

onmouseout（鼠标移出）

事件对象的属性:

clientX/clientY：窗口位置，所有浏览器都支持

pageX/pageY：页面位置

screen/screenY：屏幕位置

shiftKey/ctrlKey/altKey：同时按下组合键

2）键盘事件

onkeyup

onkeydown

onkeypress

事件对象的属性：

keyCode：键盘码，只有数字和字母对应ASCII

charCode：对应ASCII码，只有keypress才有效

3）其他事件

onload（网页文档加载事件）

onunload（网页关闭）

onsubmit（表单提交）

onreset（重置表单）

32、动态创建元素的三种方式

1）document.write()

2）innerHTML()

3）createElement()

appendChild()

removeChild()

insertBefort()

replaceChild()

阅读全文

0 0