网页制作知识点归纳

HTML全称 Hyper Text Markup Language，它不是一款编程语言，而是属于标记语言的一种，用于描述超文本中内容的显示方式，但必须通过浏览器的解释和翻译才能正确显示所标记的内容。 HTML元素包括：标题、段落、列表、表格及各种嵌入对象。其基本结构如下：

一个完整的HTML文档必须包含 3 部分：

：文档版本信息；

：文档头部；

：文档主体。

文档头部标记中通常包含的标记有：

标题标记：、

样式：、

脚本：、

元信息标记：。

元信息标记可以对页面信息的说明、关键字、刷新等进行设置，这些信息不会显示在页面中。一个网页中可以有多个meta元素。meta的属性有name和http-equiv，其中name用于描述网页，以便于搜索引擎查找、分类。name的部分使用方式如下：

设置页面关键字：

设置页面说明：

定义编辑工具：

添加作者信息：

http-equiv的部分使用方式如下:

设置网页文字及语言：

设置网页的定时跳转：

HTML中采用对文档进行注释。标题字标记：，n∈{1, 2, 3, 4, 5, 6}，n越大，标题的级别越低。标题字对齐属性：align，用法：；取值：左对齐left、右对齐right、居中center。段落标记

：可以没有

代表开始一个新的段落。换行标记：将文本强制换行；不换行标记：不允许浏览器对文本自动换行。水平线：在对应的位置上放置水平线。 段落中的其他常用标记：

URL：Uniform Resource Locator，统一资源标识符。绝对路径：包括服务器在内的完全路径。优点：与链接的源端点无关；缺点：测试时必须在Internet服务器端进行，不利于站点的移植。相对路径：与原端点的位置相关，即源端点与目标端点之间的相对位置。目标文件在同一目录下：文件名称；在当前目录的子级目录下：子级路径+文件名称；在当前位置的父级目录下：用“..”符号表示当前的父级目录，该符号可以使用多次来表示更高的父级目录。 链接分为内部链接、外部链接、锚点链接。目标窗口：设置链接的打开方式。target一共有四个值，分别为在当前页面打开链接（-self）、在全新的空白窗口打开连接（-blank）、在顶层框架中打开链接（-top）、在当前框架的上一层打开链接（-parent）内部链接：指向同一个网站中的资源。用法：触发对象。锚点链接：指向网页中的锚点。用法：创建锚点；链接锚点。也可以链接到其他文件中的锚点，用法：。 锚点常用于内容庞大繁杂的网页，便于查找定位某些资源的位置。外部链接：指向外部网站或者其他网络。通常分为：

插入图像标记img，相关属性：源文件src、提示文字alt、宽度和高度width和height、边框border、垂直间距vspace、水平间距hspace、对齐align、设定avi文件的播放dynsrc、设定avi文件的循环播放次数loop、设定avi文件循环播放延迟loopdelay、设定avi文件播放方式start、设定低分辨率图片lowsrc、映像地图usemap。 src用于指定图像源文件的路径；alt有两个作用，一是正常显示图像时，鼠标指针置于其上会出现提示文字，二是未成功加载图像时，图像的位置会显示提示文字；width、height用于指定图像在网页中的宽度和高度。 例：

图像热区连接：将图像分成多个热点区域，每个区域链接不同的网页。使用的标记为usemap。Dreamweaver能更加方便地设置热区连接。usemap的使用方式为：

列表是一种数据排列工具，它可以清晰直观的形式显示数据。HTML中一共有3种列表：有序列表、无序列表、定义列表。有序列表，在列表中将每个元素用数字或字母标号。可以设置序号类型type和起始数值start。type共有五种类型值，分别为：数字1，小写英文字母a，大学英文字母A，小写罗马数字i，大写罗马数字I；有序列表默认从1开始，start可以用来设置有序列表的起始数值，对英文字母与罗马数字同样起作用，但start的设定值只能是数字。语法如下：

无序列表，项目排列没有顺序，并以符号作为分项标识。使用作为无序列表的开头和结束。type的值有三种：默认的黑色实心圆disc，空心圆环circle，正方形square。 定义列表，由定义条件和定义描述组成。语法格式为：

菜单列表，显示效果与无序列表相同，标记为。

表格常用于排列数据或者布局定位。 表格由行、列和单元格三部分构成，一般通过3个标记来创建，分别是表格标记、行标记以及单元格标记。 在之间可以利用caption标记设置表格的标题。格式为：表格的标题。 表头是单元格的变体，常常指的是表格的第一行或第一列，用来表明这一行或列的内容属性。一般情况下浏览器会自动以粗体加居中的方式显示表头内容。表头的使用格式为：表头内容。宽度、高度和对齐方式是表格的三个主要基本属性。语法格式为：。 表格的边框设置有：边框宽度border、边框颜色bordercolor、内框宽度cellspacing、表格内文字与边框间距cellpadding。这四个属性放在中设置。其中cellspacing用于设置每个单元格之间的间距，cellpadding设置单元格内的文字与其边框之间的距离。 表格的背景可以通过背景颜色bgcolor（如：#ffcc99）、背景图像background（图像地址）进行设置。 表格的行属性包括：高度控制height、边框颜色bordercolor、行背景bgcolor与background、水平对齐方式align、垂直对齐方式valign。其中valign的取值范围为：顶部对齐top、中央对齐middle、底部对齐bottom。 表格的单元格属性包括：单元格大小width与height、水平跨度colspan、垂直跨度rowspan、对齐方式align与valign、背景色bgcolor、边框颜色bordercolor、亮边框bordercolorlight、暗边框bordercolordark、背景图像background。默认情况下，单元格的大小会根据内容自动调整；colspan与rowspan用于合并相邻的单元格； tr的属性会覆盖table的属性设置，td的属性会覆盖tr的属性设置。表格的结构，具体分为首、主体、尾。表格结构的划分，有利于对表格属性进行统一设置。表首采用的标记是，它可以设置的属性有背景颜色、文字对齐方式、文字的垂直对齐方式等。往往将表格的第一行或者前几行作为表首。表主体采用的标记是。表尾采用的标记是。表格结构的设置示例：

表单主要用来收集客户端提供的相关信息，使网页具有交互功能。使用创建表单，在中设置表单的基本属性。表单的处理程序action以及传送方法method是必不可少的参数。action用于指定表单数据提交到的目标地址。name用于为表单命名，不是表单的必要属性。method用于指定在把数据提交到服务器时使用的HTTP提交方法，取值为get或post。其中get作用是把数据提交到action属性指定的URL后，再将这个新的URL送到处理程序上；post将数据包含到表单主体中，然后送到处理程序上。enctype用于设置表单信息提交的编码方式，取值有默认的application/x-www-form-urlencoded与用于上传文件的multipart/form-data等。 上面四个属性的使用示例如下：

表单对象通常包括：文字字段text、密码域password、按钮、文件域file。按钮又细分为单选按钮radio、复选框checkbox、普通按钮button、提交按钮submit、重置按钮reset、图像按钮image。隐藏域中的数据是不显示在浏览器中的，这种需要提交的数据用hidden设置。 text的语法：

密码域只能让周围的人看不到输入的文本，并不能使数据安全，想要让数据安全需要在浏览器与服务器之间建立一个安全链接。password的语法：

在单选按钮中必须设置value的值，同一个选择列表中的所有单选按钮的name值及value值必须相同，并且只能有一个按钮被设为checked。radio的语法：

复选框可以选择多个选项，并且通过对某一个框设置checked对选择列表进行默认选项设置。checkbox的语法如下：

普通按钮一般需要脚本的配合，value的值是按钮上要显示的文字。普通按钮的使用方法：

提交按钮用于实现表单的提交，重置按钮用来清除用户在页面中输入的信息。两者的使用方式如下：

图像按钮用于将指定的图像设定为按钮，它需要src设置目标图像。用法如下：

设置隐藏域只需将提交按钮中的type属性改为hidden即可。 文件域用于浏览器查找硬盘中的文件路径，然后通过表单将选中的文件上传到服务器中。file的语法如下：

菜单与列表项主要用来选择给定答案中的一种，都是通过与标记来完成。 下拉菜单的宽度由中最长文本的宽度来决定。语法如下：

列表项可以显示出几条信息，当条目超出一定数量后，列表项会显示滚动条。size用于设置在页面中显示的最多列表级数，语法如下：

文本域用于提交多行文本，使用标记实现。不能使用value设置默认显示的初始值。语法如下：

id用来表示页面中的唯一元素。

多媒体包括动画、声音、视频等媒体元素。 滚动标记marquee可以用来移动文字、网页、表格等元素。marquee可以设置的属性有：滚动方向direction、滚动方式behavior、滚动速度scrollamount、滚动延迟scrolldelay、滚动循环loop、滚动范围width和height、滚动背景颜色bgcolor、空白空间hspace和vspace。 滚动方向direction默认情况下是从右向左，取值可以为：向上up、向下down、向左left、向右right。 滚动方式behavior默认效果是循环滚动，取值可以为：循环滚动scroll、仅循环一次slide、来回交替滚动alternate。 滚动速度scrollamount单位是像素，用来设置每次滚动时移动的长度。 滚动延迟scrolldelay单位是毫秒，用来设置相邻两次移动之间的停留时间。 滚动循环loop用来设置滚动的次数，默认情况下为无限循环。 滚动范围width、height默认效果是文字背景与文字同高与浏览器同宽，单位为像素 滚动背景颜色bgcolor设置滚动范围的背景颜色。 空白空间hspace和vspace设置滚动对象到滚动范围上下边框的距离，默认是0。

滚动效果的一个示例：

HTML 5 是一种网络标准，比HTML 4.01 和XHTML 1.0 具有更强的页面表现功能，可以充分调用本地资源。 HTML 5 采用一些新属性替代了部分JavaScript代码，并把部分Div布局代码变得更加语义化，这使得网站前端的代码变得更加精炼、简洁和清晰。它提供了搞笑的数据管理、绘制、视频和音频工具，拥有强大的灵活性，支持开发交互式网站，引入了新标签以及表单控制、API、多媒体、数据库支持等增强性功能。 3个要点： i、省略标签 a、必须写明结束标签的元素： area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、whr b、可以省略结束标签的元素： li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th c、可以省略整个标签的元素： html、head、body、colgroup、tbody ii、取得布尔值的属性 设定属性值为“true”时，可以将属性值设为属性名称本身，也可以设为空字符串，甚至只需写出该属性而不用设置，如：

iii、省略属性的引用符 只要属性值不包含“空格”、“”、“ ' ”、“ " ”、“=”、“ ` ”等符号，都可以省略属性的引用符。如：

HTML 5 与HTML 4 相比，优点是： i、使搜索引擎更加容易抓取和索引 ii、提供更多的功能 iii、可用性提高，提升用户体验 HTML 5 新增的元素和废除的元素： 新增结构元素：章节section、文章头部header、文章底部footer、链接集合nav、文章article 新增块级元素：侧边aside、媒介内容的分组figure、媒介内容的标题说明ficaption、日常对话dialog 新增行内语义元素：标记文本内容mark、日期/时间time、度量meter、运行进度progress 新增嵌入多媒体元素与交互性元素：视频video、音频audio、多媒体embed 新增input元素的type类型：url、email、date、time、datetime 废除能使用CSS的元素 废除frame框架 废除只能部分浏览器支持的元素 废除acronym、dir、isindex、listing、xmp、nextid、plaintext，并分别用abbr、ul、form+input、pre、code、guids、"text/plain"替代。 此外HTML 5 还新增并废除了一些属性。

主体结构元素：article、section、nav、aside 非主体结构元素：header、hgroup、footer、address article具有独立的结构，可以作为独立的内容项，例如论坛帖子、杂志文章、博客文章、用户评论、插件等。该元素可以将信息各部分进行任意分组。可以包含等标签。 一个网页中可能有多个独立的article元素，每一个article元素都允许有自己的标题与脚注等从属元素，并允许对自己的从属元素单独使用样式。例如对article中的header采用样式设置：article header{color:red;text-align:left;} section元素对于网站或APP中页面上的内容进行分块。通常由内容及标题构成。 nav元素在HTML 5 中用于包裹一个导航链接组，在同一个页面中可以存在多个nav。使用位置：顶部传统导航条、侧边导航、页内导航。 aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。当aside放在article中时，可以作为主要内容的附属信息部分；当aside放在article元素之外时，可以作为页面或站点全局的附属信息部分。 header元素用于放置整个页面或页面内的一个内容区块的标题，包括文字、表格、表单、logo图片等。它常置于页面的开头。每个页面可以有多个header，每个header至少有一个heading元素（h1~h6）。 hgroup用于将标题及其子标题进行分组，一个内容区块的标题及其子标题算一组。当文章只有一个主标题时，不需要hgroup。 footer用于放置脚注信息，如作者、相关阅读、版权信息。可以多次使用。footer可以单独用于整个页面的页脚，也可以作为一个内容区块的页脚，如、。 address用于放置联系信息，如作者、站点链接、电子邮件、电话号码等，通常放置在文档末尾，这部分内容在浏览器中会以斜体显示。

支持OGG、MP4、WEBM3种视频格式，拥有的属性有：src、poster、preload、autoplay、loop、controls、width、height等。 poster：指定视频加载时或用户点击播放按钮前显示的图像。 preload：定义视频是否预加载，一共3个取值：none、metadata、auto，默认为auto。none不载入视频，metadata载入元数据，auto载入整个视频。若使用autoplay属性，则preload被忽略。 autoplay：是否自动播放，接收布尔值。 loop：是否循环播放，接收布尔值。 controls：是否显示控件，接收布尔值。 应用于video元素中的source元素用来插入视频源，并且可以插入多个同一个但不同编码方式的视频，网页会使用第一个浏览器可以识别的格式。source元素只能在video中未设置src时使用。它的属性有3个：源地址src、媒体类型type、媒介选项media。type属性值形式为："video/mp4"或"video/ogg"或"video/webm"，media默认为"all"。 一个例子：

audio同样可以利用source插入多个音频源。当audio标记中不包含controls属性时，页面将不会显示播放器，这时应将音频播放的方法放在页面的onload事件中。 可以被audio触发的事件有：onClick、onMouseMove、onFocus、onPlay、onPause、onEnded等，故可用JavaScript实现交互。 一个例子:

canvas可以直接在HTML上进行图形操作。它可以控制指定矩形区域当中的每一个像素。canvas必须包含width与height属性。需要使用JavaScript。 两个应用方式：线性渐变：通过document获得canvas元素，得到canvas中的context，利用得到的context创建线性渐变linearGradient，在渐变中设置颜色点及该点的颜色，用最后的渐变设置context的style，设置context的rect。 方法createLinearGradient(x1, y1, x2, y2)设置渐变的区域和方向。 一个例子：

径向渐变：从一个点向外围扩散，可以使用createRadialGradient()方法创建，该方法拥有6个参数，每3个为一组，每组定义一个圆的原点和半径。与创建线性渐变的过程相似，不同的是要用createRadialGradient()方法替代createLinearGradient()方法。例如：

SVG是基于XML的一种图形格式，遵从XML语法，并用文本格式的描述性语言来描述图像内容，是一种与图像分辨率无关的矢量图形格式。支持3种类型的图形对象：形状、图像、文本。SVG可以将图形对象分组、样本化、转换和组合到之前呈现的对象中，且具有嵌套转换、剪切路径、alpha蒙板和模板对象。 SVG是动态和交互式的，并支持DOM。 SVG的基本图形有：圆circle、椭圆ellipse、矩形rect、线条line、折线polyline、多边形polygon。 circle的属性：半径r、圆心坐标cx和cy； rect的属性：左上角坐标x和y、宽度和高度width与height、4个圆角的半径rx和ty； ellipse的属性：中心坐标cx和cy、半长轴和半短轴rx和ry； line的属性：起点和终点坐标x1、y1、x2、y2； polyline是相互连接的线段的集合，需要使用points属性，语法为：。 polygon使用方式与polyline相同，但在最后会自动闭合线条。 在同一个svg标记下的图像元素会依次重叠，文本不能自动换行，各个图像可以使用fill及stroke属性设置图像的内部填充颜色及笔画的颜色及宽度。stroke-width及stroke-linecap用来设置线条宽度和线段端点的形状，stroke-linecap的取值有：butt、square、round。 svg支持animate标记来实现动画，一个例子：