首页 > 编程语言> > HTML+Css+JavaScript知识点汇总

HTML+Css+JavaScript知识点汇总

2019-07-01 09:48:49 作者：互联网

HTML 部分

HTML基础知识

1、 HTML简介

HTML(Hypertext Markup Language)，超文本标记语言，HTML利用各种标记来标识文档的结构以及标识超链接的信息。它是从SGML(Standard Generalized Markup Language，标准通用标识语言)中的一个子集演变而来的。

2、 HTML的标记组成

HTML用于描述功能的符号称为“标记”。标记在使用时必须用尖括号“<>”括起来，而且是成对出现的，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。如<body></body>、<p></p>等

1) 单标记：有些标记能完整的表达标记里的意思，只须在尖括号中输入标记名即可，这类标记叫单标记。XHTML中要求单标记也必须闭合，即在标记“>”前添加斜杠。常见的单标记如<br />、<hr />等。

2) 双标记：双标记有头有尾，且前面的标记与后面的标记保持一致，但在后面的标记前有斜线，语法形如：<标记>内容</标记>。例如：<p>段落</p>

3) XHTML要求所有标记均为小写，且所有标记属性必须添加双引号

4) 标记对不能交叉

3、 HTML基本结构

<html>

<head>

</head>

<body>

</body>

</html>

1) <title>标记对不能放在<body>标记对中，同理，其它表示内容的标记也不能放在<head>标记对中

2) <html></html>表示HTML语言，在<html></html>里面包含头部(<head></head>)和内容体(<body></body>)。

3) HTML注释表示为

html文字与图像

1、设置文字字体、大小与颜色

语法：<font face=”宋体” size=”1” color=”red”>文字</font>

1) 设置文字的字体、大小、颜色需要使用<font>标签

2) Face属性设置文字字体，多种字体用逗号隔开

3) Size属性设置文字大小

4) Color属性设置文字颜色，参数值可以是RGB颜色值，如#000000，也可以用颜色的单词表示，如red

2、设置正文的标题

语法：<h#>主题文字</h#>，其中“#”代表数字1-6中的任意一个，从数字1到数字6，标题大小排列由大到小(数字越大，标题字号就越小)。

3、设置段落

语法：<p>这里表示段落</p>

4、强制换行与不换行

1) 强制换行：<br />

2) 强制不换行：<nobr />

5、字体标记

1) 物理字体

<b>…</b> 设置成粗体 <i>…</i> 设置成斜体

<u>…</u> 增加下划线 <s>…</s> 增加删除线

<sup>…</sup> 设置成上标字体 <sub>…</sub> 设置成下标字体

<tt>…</tt> 设置成打字机字体

2) 逻辑字体

<em>…</em> 强调文字 <strong>…</strong> 字体加重

<code>…</code> 显示编程代码 <samp>…</samp> 显示救命文字

<kbd>…</kbd> 显示键盘按键文字 <small>…</small> 缩小文字

<big>…</big> 放大文字

6、文字对齐

1) 文字对齐使用标签的align属性，例如：<p align=”#”>对齐文字</p>，其中“#”代码表示方位，可选择”left”(向左)、”right”(向右)、”center”(居中)。Align属性可用于<p>、<div>、<table>、<td>等标签。

2) 居中对齐可使用<center>标签，例如：<center>居中文字</center>

7、列表

1) 无序列表

</ul>

Type=”#”取值可为disc(默认，实心黑点)、square(实心黑方块)、circle(空心圆)

2) 有序列表

</ol>

Type=”#”取值可为A、a、I、i、1等

3) 定义列表

<dl>

</dl>

<dt>标签定义了定义列表中的项目，<dd>标签在定义列表中定义条目的定义部分，可以理解为对定义条目进行特征描述。

4) 无序列表、有序列表、定义列表间可以相互嵌套，但一定要注意嵌套时不能交叉

8、其它方式修饰文本

1) 欲格式化文本：<pre>…</pre>

2) 代码样式斜体字渲染：<var>…</var>

3) 表示它所包含的文本对某个参考文献的引用：<cite>…</cite>

9、图像

1) 插入图像基本语法：<img src=”#” />，其中#代表图像的URL路径，示例：<img src=”c.jpg” />

2) 图像无法显示时的提示信息，使用alt属性，如：<img src=”c.jpg” alt=”风景” />

3) 图像的大小：<img src=”c.jpg” width=”400px” height=”300px” />，width属性定义图像的宽度，height属性定义图像的高度

4) 图像和文字对齐：<img src=”c.jpg” align=”top” />，align属性的取值为top(顶部)、middle(中间)、bottom(默认，底部)

5) 图像的边框：<img src=”c.jpg” border=”0” />，border设置为0时表示图像不显示边框，否则设置成需要的边框大小

10、移动的字体和图片

1) 移动基本语法：<marquee>移动文字或图片</marquee>，默认是向左循环移动，移动范围在其父对象的有效区域内。

2) 文本移动的方向：<marquee direction=”#”>…</marquee>，其中#可以选择left、right、up、down

3) 文本的滚动循环：<marquee behavior=”#”>…</marquee>，其中#可以选择scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。

4) 如果设置文本来回移动，还可以设置循环次数：<marquee loop=”#”>…</marquee>，其中#为代表循环的次数。

5) 文本的移动速度：<marquee scrollamount=”#”>…</marquee>，其中#设置移动的速度，取正整数。数值越大，速度越快。

6) 移动对象的延时：<marquee scrolldelay=”1000”>我走一走，停一停</marquee>，scrolldelay以时间为单位，用毫秒表示。

7) 移动的区域和背景：<marquee width=”100” height=”100” bgcolor=”pink”>…</marquee>

超级链接

1、基本概念

1) 统一资源定位器(URL)：每一个网页的唯一地址，一个URL构成为protocol://machinename[:port]/directory/filename。其中protocol是访问协议，如http、https、ftp等，machinename是存放资源的主机IP地址，通常以域名的形式出现，port是服务器使用的端口，directory和filename是资源的路径和文件名。

2) 绝对路径：HTML绝对路径指带有域名文件的完整路径

3) 文档相对路径：当前文档与在的位置与其他文件或文件夹的关系。用../表示源文件所在目录的上一级目录。

4) 站点根目录相对路径：提供从站点的根文件夹到文档的路径。站点根目录相对路径以”/”开始，表示站点根文件夹。

2、文字链接

语法：<a href=”URL” target=”target”>链接文字</a>

1) href属性表示链接跳转地址

2) target属性定义链接网页的打开方式，其值可以为_blank(新窗口)、_parent(父框架)、_self(当前窗口)、_top(清除所有被包含的框架并将文档载入整个浏览器窗口)

3、链接的注释title属性

4、图片链接

<a href=”URL”><img src=”c.jpg”></a>将链接文字改成插入图像即可

5、锚点链接

定义锚点：<a name=”锚点”></a>

链接锚点：<a href=”#锚点”>链接文字</a>

6、邮箱地址链接mailto

7、图像映射

</map>

1）图像映射实现单击同一图像中的不同位置，出现不同的链接，有矩形、圆形和多边形，分别用rect、circle、poly表示。

2）图像映射有分为两步：

² 在图像标签中使用usemap属性，其值为#号加上map标签的名称，即map标签的name属性（如#map）。

² 定义<map>标签，并使用name属性命名，方便其它地方调用。然后用<area>标签定义图片上的热区形状(shape属性)、位置(coords属性)及链接地址(href属性)。

表单

1、创建表单

语法：<form name=”form” action=”url” method=”post”></form>

Form中的name属性给form表单命名，action属性表示表单提交后发送的URL地址，发送的方式用method属性表示，可选择的参数有Get和Post。Get传输量比较小，Post传输量比较大。

2、文本框和密码框

1) 文本框：<input type=”text” name=”text” size=”6” maxlength=”6” value=”文字” disabled=”disabled” readonly=”readonly” />

说明：name属性给文本框命名，size属性设置文本框的显示大小，maxlength属性设置文本框最大可接受的字符数，value属性设置文本框默认显示值，disabled属性设置文本框是否可用，readonly属性设置文本框是否只读。

2) 密码框：<input type=”password” />

密码框的属性除了type设置成password，与文本框不一致外，其它属性与文本框一致。

3、单选框和复选框

1) 单选框：<input type=”radio” name=”radio” checked=”checked” value=”v” />

说明：设置checked属性表示单选框被选中

2) 复选框：<input type=”checkbox” name=”ck” checked=”checked” value=”v” />

4、下拉列表和文本域

1) 下拉列表：

</select>

说明：select标签的size属性表示下拉列表的可见选项数，默认为1，multiple属性规定可以选择多个选项。Option标签的selected标签表示当前选被默认选中，即在1个可见选项数时下拉列表显示此值。

2) 文本域

说明：textarea标签的rows属性表示文本区内的可见行数，cols属性表示文本区内的可见宽度。

5、按钮

1) 普通按钮：<input type=”button” name=”bt” value=”按钮” />

2) 提交按钮：<input type=”submit” name=”sm” value=”提交” />

3) 重置按钮：<input type=”reset” name=”rs” value=”重置” />

6、图像域与文件域

1) 图像域：<input type=”image” name=”image” src=”c.jpg” alt=”描述” />

2) 文件域：<input type=”file” name=”file” />定义输入字段和浏览按钮，用于文件上传

7、隐藏表单

<input type=”hidden” name=”hi” value=”v” />隐藏表单用于在浏览器与服务器之间传递一些必要的参数或选项，而这些参数或选项不需要显示在页面中。

表格

1、表格的基本语法

</table>

² 在HTML中创建表格使用<table>标签对，可对其设置宽度、高度、边框、背景等。

² <caption>标签为整个表格的标题，它不占用表格行，是位于表格外的一个对整个表格进行说明的大标题，可以使用align属性设置标题相对于表格的位置，值为left、right、top、bottom。

² 使用tr定义表格行，然后用th或td定义表格单元格。

² 可以使用thead定义表头，tbody定义表格主体，tfoot定义表尾，只需要把相应的行（tr和td都需要）放置在标记对中即可。

2、跨多行、多列表元

1) 跨多行表元

² 跨多行表元语法是在th和td上加rowspan表示，rowspan后面的值是数字，数字表示跨多少行表元。

2) 跨多列表元

² 跨多列表元与跨多行表元一样，也是放在th和td上，表示在一行中跨多少列表元，语法是用colspan表示。

3、设置表格大小

1) 设置表格宽度和高度

² 表格宽度用width属性定义，表格高度用height属性定义，其取值可以为像素值或百分比。

2) 设置表格边框

² 表格边框使用table标记的border 属性定义，其后面的值是宽度值，表示对象的边框宽度，数值越大，宽度越大。

4、设置表格背景

1) 设置整个表格背景

² 设置整个表格的背景是定义<table>标签的bgcolor属性，其值可为颜色名、十六进制颜色值或者rgb代码的背景颜色。

2) 设置表格中单元格的背景

² 设置单元格的背景颜色只需在td和th标签上定义bgcolor属性，如果设置某一行的背景颜色，也可以在tr标签中定义bgcolor属性。

5、设置单元格边距

1) 设置单元格与内容之间的距离

² 设置单元格与内容之间的距离只需在td和th标签上定义cellpadding属性，其值为像素值。

2) 设置两个单元格之间的距离

² 定义两个单元格之间的空白在td和th标签上使用cellspacing属性，其值同样为像素值。

6、表格对齐

1）表格内文字对齐

² 文字对齐使用align属性定义，取值可为left、center、right。

² 在表格内，文字对齐有在tr、th、td中对齐，在tr设置对齐方式后，tr内的th和td都按设置的要求对齐，同理在多行中可以设置不同的tr对齐方式，th和td都可以设置其里面的文字或图片的对齐。

2）表格在网页中对齐

² 表格在网页中的对齐是在<table></table>标记对中使用align属性定义。

框架

1、框架基本语法

</frameset>

² 框架的基本语法是由<frameset></frameset>标记对表示，标记对放在<head></head>标记对后面，使用了框架，就不再需要使用<body></body>标记对，即<frameset>与<body>标记对不能同时出现在一个页面中。

² <frame>标记对表示在框架内载入什么文件，用src属性指定。

2、框架分栏

2) 垂直分栏

² 垂直分栏是在<frameset>中使用cols属性表示，后面的数字表示列宽，可用数值、百分比和通配符*（只能用于最后一个数字）表示

3) 水平分栏

² 水平分栏是在<frameset>中使用rows属性表示，注意一个框架不能同时出现垂直分栏和水平分栏，即cols和rows不能同时出现，如果想又有垂直分栏又有水平分栏，可以使用框架嵌套实现

3、框架的常用属性

1）设置不可调节框架大小

² 默认框架大小是可以调节的，如果不需要用户去对框架窗口进行大小调节，必须设置框架的noresize属性

2）浏览器不支持框架

<noframes>对不起，您的浏览器不支持框架！</noframes>

² <noframes>标记对用在<frameset>标记对之外，当浏览器不支持<frameset>标记时，将不显示框架内容，而是显示<noframes>标记对中的内容。

3）设置框架边框

² 框架的边框设置可由frameborder属性来完成，默认有边框，它有两种表示方法，英语表示法：yes(有边框)、no(无边框)，数字表示法：1(有边框)、0(无边框)

² 当设置了框架的边框时，可用border属性来设置边框的宽度

4）设置滚动条

² 设置滚动条是在<frame>标签里，用scrolling属性，可取值auto(默认，自动)、yes(有滚动条)、no(无滚动条)

4、框架链接

1）导航框架

</frameset>

<a href=”1.html” target=”myFrame”>导航框架链接</a>

² 导航框架链接是在网页框架的<frame>中加入name属性，表示该<frame>的名称，然后通过用<a>标记的链接，并用target等于<frame>的名称，那所得到的链接地址网页会显示在该<frame>中

2）内联框架（浮动框架）

² 内联框架存在于<body></body>的单个HTML文件中，可以链接其他网页并显示它，即在一个页面中嵌入一个框架窗口来显示另一个页面的内容。

² 浮动框架用<iframe></iframe>标记对或<iframe />表示，可以用width和height属性设置其大小。

网页多媒体

1、插入网页多媒体

基本语法：<embed src=”1.mp3” />，src指定插入网页的多媒体路径

2、设置自动播放

Autostart表示自动播放，可取值true(默认值，自动播放)、false(不自动播放)

3、设置循环播放

Loop属性用来设置多媒体文件的循环播放，可取值true(无限次数)、false(不循环播放)、<数值>(规定循环的次数)

4、隐藏控制面板

Hidden属性用来设置多媒体控制面板的显示与隐藏，可取值true(隐藏)、false(显示)、no(效果与false一样)

5、设置面板大小

6、对齐方式

Align属性可以设置多媒体控制面板的对齐方式，取值为：

² Center：控制面板居中

² Left：控制面板居左

² Right：控制面板居右

² Top：控制面板的顶部与当前行中的最高对象的顶部对齐

² Bottom:控制面板的底部与当前行中的对象的基线对齐

² Baseline：控制面板的底部与文本的基线对齐

² Texttop：控制面板的顶部与当前行中的最高的文字顶部对齐

² Middle：控制面板的中间与当前行的基线对齐

² Absmiddle：控制面板的中间与当前文本或对象的中间对齐

² Absbottom：控制面板的底部与文字的底部对齐

Css 部分

基本格式：

三种格式：（CSS 语法由三部分构成：选择器、属性和值）

例：body {color: blue}

1、派生选择器

例：

Css部分：

strong {

color: red;

}

h2 {

color: red;

}

h2 strong {

color: blue;

}

Html文件部分:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>

<h2>This subhead is also red.</h2>

<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

2、id 选择器（选择器以 "#" 来定义）：

例：

Css部分：

#red {color:red;}

#green {color:green;}

Html 文本：

<p id="red">这个段落是红色。</p>

<p id="green">这个段落是绿色。</p>

3、类选择器

例：

Css部分：

.center {text-align: center}

Html文本：

<h1 class="center">This heading will be center-aligned</h1>

<p class="center">This paragraph will also be center-aligned.</p>

如何插入样式表

1、外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。

<link> 标签在（文档的）头部：

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

2、内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>

<style type="text/css">

  hr {color: sienna;}

  p {margin-left: 20px;}

  body {background-image: url("images/back40.gif");}

</style>

</head>

3、内联样式

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color: sienna; margin-left: 20px">

This is a paragraph

</p>

4、多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 {

  color: red;

  text-align: left;

  font-size: 8pt;

而内部样式表拥有针对 h3 选择器的两个属性：

h3 {

text-align: right;

  font-size: 20pt;

}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color: red;

text-align: right;

font-size: 20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

css背景

1、背景色

background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

例：这条规则把元素的背景设置为灰色：p {background-color: gray;}

2、背景图像

background-image 属性为元素设置背景图像。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

例：如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

3、背景重复

background-repeat属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。

例：

body

{

background-image: url(/i/eg_bg_03.gif);

background-repeat: repeat-y;

}

4、背景定位

background-position 属性改变图像在背景中的位置：

例：在 body 元素中将一个背景图像居中放置：

body

{

background-image:url('/i/eg_bg_03.gif');

background-repeat:no-repeat;

background-position:center;

}

background-position 属性提供值有很多方法

a) background-position属性后面的值可为关键字：

b) background-position属性后面的值可为百分数：

                               例background-position:50% 50%;

c) background-position属性后面的值可为长度值：

                               例：background-position:50px 100px;

5、背景关联

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body

{

background-image:url(/i/eg_bg_02.gif);

background-repeat:no-repeat;

background-attachment:fixed

}

css文本

1、文本颜色：text-indent 属性：

例：p {background-color: gray;}

a) 使用负值：

例：{text-indent: -5em;}

注意：在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p {text-indent: -5em; padding-left: 5em;}

b) 使用百分比值

                    例：p {text-indent: 20%;}

2、水平对齐：text-algin属性：

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

3、字间隔：word-spacing 属性

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

p.spread {word-spacing: 30px;}

p.tight {word-spacing: -0.5em;}

<p class="spread">This is a paragraph. The spaces between words will be decreased.</p>

<p class="tight">This is a paragraph. The spaces between words will be increased.</p>

5、字符转换text-transform 属性

text-transform 属性处理文本的大小写。这个属性有 4 个值：none 、uppercase 、lowercase 、capitalize 。

默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。

例：h1 {text-transform: uppercase}

6、文本装饰

text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。

text-decoration 有 5 个值：none 、underline、overline 、line-through、blink。

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

a {text-decoration: none;}

7、direction 属性规定文本的方向 / 书写方向。

该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。

实例：

把文本方向设置为“从右向左”：div { direction: rtl }

CSS 字体

1、 font 属性

解释：简写属性在一个声明中设置所有字体属性。

可以按顺序设置如下属性：

u font-style

u font-variant

u font-weight

u font-size/line-height

u font-family

可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。

实例：

在一个声明中设置所有字体属性：

p.ex1 {

font:italic arial,sans-serif;

}

p.ex2 {

font:italic bold 12px/20px arial,sans-serif;

}

2、 font-family 属性

定义： font-family 属性用于设置字体系列

例：如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：

body {font-family: sans-serif;}

3、 font-style 属性

定义：font-style 属性定义字体的风格

可能值：

normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

实例：

        h1 {font-size:250%;}

4、 font-variant 属性

定义：设置小型大写字母的字体显示文本，这意味着所有的小写字母均换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

可能值：

normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

实例：

p.small

{

font-variant:small-caps;

}

5、 font-weight 属性

定义：设置文本的粗细

可能的值：

normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

实例：

p.normal {font-weight:normal;}

6、 font-size 属性

定义：可设置字体的尺寸

可能的值：

xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

实例：

h1 {font-size:250%;}

7、 line-height 属性

定义：设置行间的距离（行高）

可能值：

normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

实例

p.small {line-height:90%}

CSS 列表

1、设置所有的列表属性

定义：list-style 简写属性在一个声明中设置所有的列表属性。

可能值：

list-style-type	设置列表项标记的类型。参阅：list-style-type 中可能的值。
list-style-position	设置在何处放置列表项标记。参阅：list-style-position 中可能的值。
list-style-image	使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。
inherit	规定应该从父元素继承 list-style 属性的值。

实例：

ul{

list-style:square inside url('/i/arrow.gif');

}

2、 list-style-type 属性

定义：设置列表项标记的类型

可能值：

实例：

ul.circle {list-style-type:circle;}

3、 list-style-position 属性

定义：设置在何处放置列表项标记

可能值：

实例：

ul { list-style-position:inside;}

4、 list-style-image 属性

定义：使用图像来替换列表项的标记

可能值：

实例：

ul { list-style-image:url("/i/arrow.gif");}

CSS 表格

所有属性列表：

1、 border-collapse 属性

定义：设置表格的边框是否被合并为一个单一的边框

可能值：

实例：

table { border-collapse:collapse; }

2、 border-spacing 属性

定义：设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

可能值：

实例：

table { border-spacing:10px 50px; }

3、 caption-side 属性

定义：设置表格标题的位置

可能值：

实例：

caption { caption-side:bottom; }

4、 empty-cells 属性

定义：设置是否显示表格中的空单元格（仅用于“分离边框”模式）

可能值：

实例：

table { empty-cells:hide; }

5、 table-layout 属性

定义：用来显示表格单元格、行、列的算法规则

可能值：

实例：

table { table-layout:fixed; }

CSS 框模型概述

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

CSS 内边距

单边内边距属性：

也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：

例：h1 {

padding-top: 10px;

padding-right: 0.25em;

padding-bottom: 2ex;

padding-left: 20%;

}

CSS 边框

1、 border 简写

定义：属性在一个声明设置所有的边框属性（给4个边框设置相同的值）

可以按顺序设置如下属性：

l border-width

l border-style

l border-color

实例：

p { border:5px solid red;}

2、 4个边框分别设置

以上边框为例：

可以按顺序设置如下属性

l border-top-width

l border-top-style

l border-top-color

实例

p {

border-style:solid;

border-top:thick double #ff0000;}

CSS 外边距

margin 属性

定义：属性在一个声明设置所有的外边框属性（给4个边框设置相同的值）

可以按顺序设置如下属性：

实例：

p {margin: 20px 30px 30px 20px;}

Javascript 部分

javascript简介

概念：js是一门基于对象和事件驱动的并且具有安全性能的弱类型脚本语言

作用：处理页面控件的动态效果

处理数据输入以及提交前的数据验证

特点：简单性安全性动态性跨平台面向对象解释执行

跨平台通过浏览实现与操作系统无关

通常被嵌入到html网页中

运行环境：浏览器(firefox ie chrome sufrue opera)

编写js的方式：

①、外部导入式 *.js 语法<script type=”text/jaascript” src=’路径……js’></script>

②、直接嵌入到html标签中

js代码

</script>

js中的输出语句：

document.write(参数或者字符串);

alert(“”);弹出消息框

区别：document.write()会解析html标签

alert()将html当成字符串处理

javascript基本语法

定义变量统一用var关键字

语法：var 变量名称=变量值

标示符：①、由字母数字下划线构成不能以数字开头不能是关键字严格区分大小写

数据类型：

数值型：number

字符串：string

布尔型：boolean

特殊数据类型：undefined 空的未定义的未赋值的

空值：null

引用类型object function

检测参数的数据类型：typeof（）返回该数据类型对应的字符串

两个等号==和三个等号===的用法

==：比较值相等与数据类型无关

===：比较全等与数值和数据类型都有关

布尔环境：遇到if自动转换成布尔值

字符串string中的布尔环境：空为假非空为真

数值number中的布尔环境：0为假非0为真

number与string之间的关系

①、遇到+做拼接操作

②、需要做运算操作时，要把字符串转换成数值型

转换方法1、字符串*1 变成数值型

转换方法2：Number(字符串) 转换成数值型

javascript函数

关键字：function

语法：function 函数名称([参数])

{

函数体

}

无参数无返回值

function f()

{

…………..

}

无参数有返回值

function f()

{

return ‘XXX;

}

有参数无返回值

function f(参数名称){ 函数体 }

有参数有返回值

function f(参数名称)

{

return 返回值;

}

在函数中，当局部变量名称与全局变量冲突时函数体内选用的是局部变量

javascript类型转换

NaN:非数值非number或者undefined与number做运算操作时会返回NaN

isNaN：判断是否是非数值，是非数值返回true 不是则返回false 与参数的数据类型无关

parseInt:解析字符串或者数值转换成一个整数，只能解析以number开头的数值或者字符串

解析以非number类型开头的返回NaN

parseFloat：解析字符串或者数值转换成一个小数，只能解析以number开头的数值或者字符串

解析以非number类型开头的返回NaN

javascript内置对象

数组对象Array 存储任意类型的数据

属性：length属性获取数组的长度

var a = [‘zhangsan’,19,true];

var b = new Array(“”,””,””);

var c = new Array(length) length只能是一个整数

空数组 var d = [] / var d = new Array()

没有赋值的数组元素或者越界访问数组元素值统一为undefined

js中数组长度是可变的，也就是说我们可以任意的去给length赋值

数组的最大下表为length-1 长度为最大下标+1

concat() 数组与数组或者字符串拼接返回一个更长的新数组

join()将数组中的所有元素组成一个长得字符串（将数组转换成字符串的方法）

pop()移除数组的最后一个元素并返回该元素移除之后数组长度-1

push()向数组的尾部追加一个新的元素返回新数组的长度

reverse()数组元素逆序

sort()数组元素值按照ASIIC从小到大排序

字符串对象String

属性:length获取字符串的长度

charAt()根据索引找字符

indexOf()查找字符串第一次出现的位置没有返回-1

lastIndexOf（）查找字符串最后一次出现的位置没有返回-1

substr(a,b)从a索引截取b个字符

substring(a,b)从a索引截取到b索引包括a不包括b

replace(old,new)用新的喜欢旧的直接写的时候只替换第一个

replace(/要替换的内容|ZZ|XXX/gmi ,new)

split()字符串分割返回数组

toLowerCase()转换成小写字母

toUpperCase()转换成大写

数学对象Math

abs()绝对值 max()最大值 min()最小值 ceil()向上取整 floor()向下去整

round()四舍五入 random()随机数 0--1之间的随机小数 sqrt() pow()

日期对象Date

var date = new Date();//获取当前日期

var date = new Date(‘2013/12/21’);

toLocaleString()将格林威治时间格式转换成北京时间格式

getTime()获取从1970年到指定日期之间所经过的毫秒数

getYear()获取年份

getDate()获取日期

getDay()获取星期几返回0--6之间的整数

getMonth()获取月份返回0--11之间的整数

getHours()获取小时数

getMinutes()获取分钟数

getSeconds()获取秒数

javascript之window对象

定时器：

setTimeout:多少秒之后执行一次

语法：setTimeout(“js/函数名称”,毫秒数)

clearTimeout(定时器的名称)

setInterval:每隔多少时间执行一次

语法：setInterval(“js/函数名称”,毫秒数)

clearInterval(定时器)

属性：

name：名称

status：状态栏的信息

方法：

alert()弹出消息框

confirm() 确认对话框

prompt(提示信息,默认值) 输入对话框

open(地址,name, 参数规格设置)弹出一个新的窗口

showModalDialog(地址,name, 参数规格设置)

javascript之window其他窗口对象

location地址对象

属性：href 获取或者设置当前页面的url

方法：

href(地址);跳转到某一个指定的页面

reload()页面刷新

replace(地址)页面替换

history历史对象

go() 去 go(1) 前进 go(0)刷新 go(-1)后退

back()后退 forward()前进跳转

navigator浏览器对象

属性:navigator.appName 获取当前浏览器的名称

navigator.appVersion 获取当前浏览器的版本

screen屏幕对象

screen.width获取分辨率的水平宽度

screen.height获取分辨率的垂直高度

javascript之document文档对象

属性：bgColor背景颜色 title标题

方法：

document.write()输出信息

document.getElementById(‘id’) 根据id找对象返回一个对象 id唯一

document.getElementsByName(“name”)根据name找对象返回对象数组

document.getElementsByName(“name”)[下标] 找到某一个指定的对象

document.getElementsByTagName(“tag”)根据标签名称找对象返回对象数组

document.getElementsByTagName(“tag”)[下标]

javascript之event对象与事件

event对象

event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

event对象的属性

1）clientX或x

返回当事件被触发时，鼠标指针的水平坐标

2）clientY或y

返回当事件被触发时，鼠标指针的垂直坐标

3）keyCode

获取键盘事件发生时键盘的按键值。为一个int型数据。比如字母A的keyCode值为65，回车键的 keyCode值为13。

案例

1）当鼠标在一下区域移动时，在状态栏输出其所在的坐标

查看源代码

2）当按键抬起时，提示除按键码

查看源代码

一般事件

页面事件

1）onload 载入页面事件

2）onunload 卸载页面事件

鼠标事件

1）onclick 鼠标单击事件

2）ondblclick 鼠标双击事件

3）onmousemove 鼠标移动事件

4）onmousedown 鼠标按下事件

5）onmouseup 鼠标抬起事件

6）onmouseover 鼠标移入事件

7）onmouseout 鼠标移出事件

键盘事件

1）onkeydown 键按下事件

2）onkeyup 键抬起事件

表单事件

1）onsubmit 表单提交事件

其他事件

1）onfocus 获得焦点事件

2）onblur 失去焦点事件

3）onchange 内容改变事件

附录一：

HTML标签列表(版本v4.01)

DTD：指示在哪种 XHTML 1.0 DTD 中允许该标签。S=Strict, T=Transitional, F=Frameset.

标签	描述	DTD
<!--...-->	定义注释。	STF
<!DOCTYPE>	定义文档类型。	STF
<a>	定义锚。	STF
<abbr>	定义缩写。	STF
<acronym>	定义只取首字母的缩写。	STF
<address>	定义文档作者或拥有者的联系信息。	STF
<applet>	不赞成使用。定义嵌入的 applet。	TF
<area>	定义图像映射内部的区域。	STF
<b>	定义粗体字。	STF
<base>	定义页面中所有链接的默认地址或默认目标。	STF
<basefont>	不赞成使用。定义页面中文本的默认字体、颜色或尺寸。	TF
<bdo>	定义文字方向。	STF
<big>	定义大号文本。	STF
<blockquote>	定义长的引用。	STF
<body>	定义文档的主体。	STF
<br>	定义简单的折行。	STF
<button>	定义按钮 (push button)。	STF
<caption>	定义表格标题。	STF
<center>	不赞成使用。定义居中文本。	TF
<cite>	定义引用(citation)。	STF
<code>	定义计算机代码文本。	STF
<col>	定义表格中一个或多个列的属性值。	STF
<colgroup>	定义表格中供格式化的列组。	STF
<dd>	定义定义列表中项目的描述。	STF
<del>	定义被删除文本。	STF
<dir>	不赞成使用。定义目录列表。	TF
<div>	定义文档中的节。	STF
<dfn>	定义定义项目。	STF
<dl>	定义定义列表。	STF
<dt>	定义定义列表中的项目。	STF
<em>	定义强调文本。	STF
<fieldset>	定义围绕表单中元素的边框。	STF
<font>	不赞成使用。定义文字的字体、尺寸和颜色。	TF
<form>	定义供用户输入的 HTML 表单。	STF
<frame>	定义框架集的窗口或框架。	F
<frameset>	定义框架集。	F
<h1> to <h6>	定义 HTML 标题。	STF
<head>	定义关于文档的信息。	STF
<hr>	定义水平线。	STF
<html>	定义 HTML 文档。	STF
<i>	定义斜体字。	STF
<iframe>	定义内联框架。	TF
<img>	定义图像。	STF
<input>	定义输入控件。	STF
<ins>	定义被插入文本。	STF
<isindex>	不赞成使用。定义与文档相关的可搜索索引。	TF
<kbd>	定义键盘文本。	STF
<label>	定义 input 元素的标注。	STF
<legend>	定义 fieldset 元素的标题。	STF
<li>	定义列表的项目。	STF
<link>	定义文档与外部资源的关系。	STF
<map>	定义图像映射。	STF
<menu>	不赞成使用。定义菜单列表。	TF
<meta>	定义关于 HTML 文档的元信息。	STF
<noframes>	定义针对不支持框架的用户的替代内容。	TF
<noscript>	定义针对不支持客户端脚本的用户的替代内容。	STF
<object>	定义内嵌对象。	STF
<ol>	定义有序列表。	STF
<optgroup>	定义选择列表中相关选项的组合。	STF
<option>	定义选择列表中的选项。	STF
<p>	定义段落。	STF
<param>	定义对象的参数。	STF
<pre>	定义预格式文本。	STF
<q>	定义短的引用。	STF
<s>	不赞成使用。定义加删除线的文本。	TF
<samp>	定义计算机代码样本。	STF
<script>	定义客户端脚本。	STF
<select>	定义选择列表（下拉列表）。	STF
<small>	定义小号文本。	STF
<span>	定义文档中的节。	STF
<strike>	不赞成使用。定义加删除线文本。	TF
<strong>	定义强调文本。	STF
<style>	定义文档的样式信息。	STF
<sub>	定义下标文本。	STF
<sup>	定义上标文本。	STF
<table>	定义表格。	STF
<tbody>	定义表格中的主体内容。	STF
<td>	定义表格中的单元。	STF
<textarea>	定义多行的文本输入控件。	STF
<tfoot>	定义表格中的表注内容（脚注）。	STF
<th>	定义表格中的表头单元格。	STF
<thead>	定义表格中的表头内容。	STF
<title>	定义文档的标题。	STF
<tr>	定义表格中的行。	STF
<tt>	定义打字机文本。	STF
<u>	不赞成使用。定义下划线文本。	TF
<ul>	定义无序列表。	STF
<var>	定义文本的变量部分。	STF
<xmp>	不赞成使用。定义预格式文本。

标签：知识点,STF,定义,标记,JavaScript,HTML,设置,文本,属性
来源： https://www.cnblogs.com/Xjx-zhenCai/p/11112333.html

HTML+Css+JavaScript知识点汇总

1、派生选择器

2、id 选择器（选择器以 "#" 来定义）：

1、外部样式表

2、内部样式表

3、内联样式

4、多重样式

1、背景色

2、背景图像

3、背景重复

4、背景定位

5、背景关联

1、文本颜色：text-indent 属性：

2、水平对齐：text-algin属性：

3、字间隔：word-spacing 属性

5、字符转换text-transform 属性

6、文本装饰

7、direction 属性规定文本的方向 / 书写方向。

1、 font 属性

2、 font-family 属性

3、 font-style 属性

4、 font-variant 属性

5、 font-weight 属性

6、 font-size 属性

7、 line-height 属性

1、 设置所有的列表属性

2、 list-style-type 属性

3、 list-style-position 属性

4、 list-style-image 属性

1、 border-collapse 属性

2、 border-spacing 属性

3、 caption-side 属性

4、 empty-cells 属性

5、 table-layout 属性

1、 border 简写

2、 4个边框分别设置

margin 属性

1、设置所有的列表属性