一、HTML
1、HTML简介
HTML全称 Hyper Text Markup Language，它不是一款编程语言，而是属于标记语言的一种，用于描述超文本中内容的显示方式，但必须通过浏览器的解释和翻译才能正确显示所标记的内容。
HTML元素包括：标题、段落、列表、表格及各种嵌入对象。其基本结构如下：
<!doctype html>
<html> <!--文件开始标记-->
<head> <!--文件头开始标记-->
······文件头内容
</head> <!--文件头结束标记-->
<body> <!--文件主体开始标记-->
······文件主体内容
</body> <!--文件主体结束标记--></html> <!--文件结束标记-->2、基本标记
一个完整的HTML文档必须包含 3 部分：
-
<html>：文档版本信息；
-
<head>：文档头部；
-
<body>：文档主体。
文档头部标记<head>中通常包含的标记有：
-
标题标记：<title>、
-
样式：<style>、
-
脚本：<script>、
-
元信息标记：<meta>。
元信息标记可以对页面信息的说明、关键字、刷新等进行设置，这些信息不会显示在页面中。一个网页中可以有多个meta元素。meta的属性有name和http-equiv，其中name用于描述网页，以便于搜索引擎查找、分类。name的部分使用方式如下：
-
设置页面关键字：<meta name="keywords" content="具体的关键字" />
-
设置页面说明：<meta name="description" content="页面说明" />
-
定义编辑工具：<meta name="generator" content="采用的编辑器" />
-
添加作者信息：<meta name="author" content="作者姓名" />
http-equiv的部分使用方式如下:
-
设置网页文字及语言：
<!-- 在charset中设置语言的编码方式，如英文：ISO-8859-1 --> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> -
设置网页的定时跳转：
<!-- 默认计时为秒 --> <meta http-equiv="refresh" content="跳转的时间; URL=跳转的地址" />
HTML中采用<!--注释的内容-->对文档进行注释。
标题字标记：<hn></hn>，n∈{1, 2, 3, 4, 5, 6}，n越大，标题的级别越低。
标题字对齐属性：align，用法：<hn align="值"></hn>；取值：左对齐left、右对齐right、居中center。
段落标记<p>：可以没有</p>，每个新的<p>代表开始一个新的段落。
换行标记<br />：将文本强制换行；不换行标记<nobr />：不允许浏览器对文本自动换行。
水平线<hr />：在对应的位置上放置水平线。
段落中的其他常用标记：
| 空格 | " | & | < | > | × | § | © | ® | ™ |
| | " | & | < | > | × | § | © | ® | ™ |
3、超链接
URL：Uniform Resource Locator，统一资源标识符。
绝对路径：包括服务器在内的完全路径。优点：与链接的源端点无关；缺点：测试时必须在Internet服务器端进行，不利于站点的移植。
相对路径：与原端点的位置相关，即源端点与目标端点之间的相对位置。目标文件在同一目录下：文件名称；在当前目录的子级目录下：子级路径+文件名称；在当前位置的父级目录下：用“..”符号表示当前的父级目录，该符号可以使用多次来表示更高的父级目录。
链接分为内部链接、外部链接、锚点链接。
目标窗口：设置链接的打开方式。target一共有四个值，分别为在当前页面打开链接（-self）、在全新的空白窗口打开连接（-blank）、在顶层框架中打开链接（-top）、在当前框架的上一层打开链接（-parent）
内部链接：指向同一个网站中的资源。用法：<a href="innerFile.html">触发对象</a>。
锚点链接：指向网页中的锚点。用法：创建锚点<a name="a_name"></a>；链接锚点<a href="#a_name"></a>。也可以链接到其他文件中的锚点，用法：<a href="链接的文件地址#锚点名称"></a>。
锚点常用于内容庞大繁杂的网页，便于查找定位某些资源的位置。
外部链接：指向外部网站或者其他网络。通常分为：
| HTTP协议链接 | E-mail链接 | FTP链接 | Telnet链接 | 文件下载链接 |
| href="http://······" | href="mailto:邮件地址" | href="ftp://ftp地址" | href="telnet://telnet地址" | href="下载文件地址" |
4、使用图像
插入图像标记img，相关属性：源文件src、提示文字alt、宽度和高度width和height、边框border、垂直间距vspace、水平间距hspace、对齐align、设定avi文件的播放dynsrc、设定avi文件的循环播放次数loop、设定avi文件循环播放延迟loopdelay、设定avi文件播放方式start、设定低分辨率图片lowsrc、映像地图usemap。
src用于指定图像源文件的路径；alt有两个作用，一是正常显示图像时，鼠标指针置于其上会出现提示文字，二是未成功加载图像时，图像的位置会显示提示文字；width、height用于指定图像在网页中的宽度和高度。
例：
<img src="地址" alt="提示文字" width="宽度" height="高度" align="center" />图像热区连接：将图像分成多个热点区域，每个区域链接不同的网页。使用的标记为usemap。Dreamweaver能更加方便地设置热区连接。usemap的使用方式为：
<img src="图像地址" usemap="映射图像名称" />
<map name="映射图像名称">
<area shape="热区形状" coords="热区坐标" href="链接地址">
</map>5、使用列表
列表是一种数据排列工具，它可以清晰直观的形式显示数据。HTML中一共有3种列表：有序列表、无序列表、定义列表。
有序列表，在列表中将每个元素用数字或字母标号。可以设置序号类型type和起始数值start。type共有五种类型值，分别为：数字1，小写英文字母a，大学英文字母A，小写罗马数字i，大写罗马数字I；有序列表默认从1开始，start可以用来设置有序列表的起始数值，对英文字母与罗马数字同样起作用，但start的设定值只能是数字。语法如下：
<ol type="a" start="a">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>无序列表，项目排列没有顺序，并以符号作为分项标识。使用<ul></ul>作为无序列表的开头和结束。type的值有三种：默认的黑色实心圆disc，空心圆环circle，正方形square。
定义列表，由定义条件和定义描述组成。语法格式为：
<dl>
<dt>待释名词</dt>
<dd>名词解释</dd>
</dl>菜单列表，显示效果与无序列表相同，标记为<menu></menu>。
6、使用表格
表格常用于排列数据或者布局定位。
表格由行、列和单元格三部分构成，一般通过3个标记来创建，分别是表格标记<table></table>、行标记<tr></tr>以及单元格标记<td></td>。
在<table></table>之间可以利用caption标记设置表格的标题。格式为：<caption>表格的标题</caption>。
表头是单元格的变体，常常指的是表格的第一行或第一列，用来表明这一行或列的内容属性。一般情况下浏览器会自动以粗体加居中的方式显示表头内容。表头的使用格式为：<th>表头内容</th>。
宽度、高度和对齐方式是表格的三个主要基本属性。语法格式为：<table width="宽度" height="高度" align="对齐方式"></table>。
表格的边框设置有：边框宽度border、边框颜色bordercolor、内框宽度cellspacing、表格内文字与边框间距cellpadding。这四个属性放在<table>中设置。其中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的属性设置。
表格的结构，具体分为首、主体、尾。表格结构的划分，有利于对表格属性进行统一设置。
表首采用的标记是<thead></thead>，它可以设置的属性有背景颜色、文字对齐方式、文字的垂直对齐方式等。往往将表格的第一行或者前几行作为表首。
表主体采用的标记是<tbody></tbody>。
表尾采用的标记是<tfoot></tfoot>。表格结构的设置示例：
<table 表格属性值设置>
<thead 表首属性设置>
<tr>
<td>姓名</td>
<td>性别</td>
<td>学历</td>
</tr>
</thead>
<tbody 表主体属性设置>
<tr>
<td>张三</td>
<td>男</td>
<td>本科</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>专科</td>
</tr>
</tbody>
<tfoot 表尾属性设置>
<tr>
<td colspan="3">这是表尾</td>
</tr>
</tfoot>
</table>7、使用表单
表单主要用来收集客户端提供的相关信息，使网页具有交互功能。使用<form></form>创建表单，在<form>中设置表单的基本属性。表单的处理程序action以及传送方法method是必不可少的参数。
action用于指定表单数据提交到的目标地址。
name用于为表单命名，不是表单的必要属性。
method用于指定在把数据提交到服务器时使用的HTTP提交方法，取值为get或post。其中get作用是把数据提交到action属性指定的URL后，再将这个新的URL送到处理程序上；post将数据包含到表单主体中，然后送到处理程序上。
enctype用于设置表单信息提交的编码方式，取值有默认的application/x-www-form-urlencoded与用于上传文件的multipart/form-data等。
上面四个属性的使用示例如下：
<form action="mailto:957419821@qq.com" name="a_form" method="post" enctype="application/x-www-form-urlencoded">
</form>表单对象通常包括：文字字段text、密码域password、按钮、文件域file。按钮又细分为单选按钮radio、复选框checkbox、普通按钮button、提交按钮submit、重置按钮reset、图像按钮image。隐藏域中的数据是不显示在浏览器中的，这种需要提交的数据用hidden设置。
text的语法：
<input name="控件名称" type="text" value="文字字段的默认取值" size="控件长度" maxlength="最长字符数" />密码域只能让周围的人看不到输入的文本，并不能使数据安全，想要让数据安全需要在浏览器与服务器之间建立一个安全链接。password的语法：
<input name="控件名称" type="password" value="文字字段的默认取值" size="控件长度" maxlength="最长字符数" />在单选按钮中必须设置value的值，同一个选择列表中的所有单选按钮的name值及value值必须相同，并且只能有一个按钮被设为checked。radio的语法：
<input name="单选按钮名称" type="radio" value="单选按钮的取值" checked="checked" />复选框可以选择多个选项，并且通过对某一个框设置checked对选择列表进行默认选项设置。checkbox的语法如下：
<input name="复选框名称" type="radio" value="复选框取值" checked />普通按钮一般需要脚本的配合，value的值是按钮上要显示的文字。普通按钮的使用方法：
<input name="按钮名称" type="submit" value="按钮取值" onclick="处理程序" />提交按钮用于实现表单的提交，重置按钮用来清除用户在页面中输入的信息。两者的使用方式如下：
<input name="按钮名称" type="submit" value="按钮取值" />
<input name="按钮名称" type="reset" value="按钮取值" />图像按钮用于将指定的图像设定为按钮，它需要src设置目标图像。用法如下：
<input name="图像域名称" type="image" src="图像路径"/>设置隐藏域只需将提交按钮中的type属性改为hidden即可。
文件域用于浏览器查找硬盘中的文件路径，然后通过表单将选中的文件上传到服务器中。file的语法如下：
<input name="文件域名称" type="file" size="控件长度" maxlength="最长字符数" />菜单与列表项主要用来选择给定答案中的一种，都是通过<select>与<option>标记来完成。
下拉菜单的宽度由<option>中最长文本的宽度来决定。语法如下：
<select name="下拉菜单名称">
<option value="选项值" selected>选项显示内容</option>
···
</select>列表项可以显示出几条信息，当条目超出一定数量后，列表项会显示滚动条。size用于设置在页面中显示的最多列表级数，语法如下：
<select name="l列表项名称" size="显示的列表项数" multiple>
<option value="选项值" selected>选项显示内容</option>
···
</select>文本域用于提交多行文本，使用<textarea>标记实现。不能使用value设置默认显示的初始值。语法如下：
<textarea name="文本域名城" cols="列数" rows="行数">文本域内显示的文本</textarea>id用来表示页面中的唯一元素。
8、添加多媒体
多媒体包括动画、声音、视频等媒体元素。
滚动标记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。
滚动效果的一个示例：
<marquee direction="up" behavior="alternate" scrollamount="3" scrolldelay="400" loop="10" width="300" height="400" bgcolor="#ff9966" hspace="50" vspace="40">
我在滚动
</marquee>
采用embed标记插入Flash动画、声音文件和视频文件。语法如下：
<embed src="文件地址" width="宽度" height="高度"></embed>
9、HTML 5 入门基础
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”时，可以将属性值设为属性名称本身，也可以设为空字符串，甚至只需写出该属性而不用设置，如：
<!--以下的checked属性值皆为true-->
<input type="checkbox" checked >
<input type="checkbox" checked="checked" >
<input type="checkbox" checked="" >iii、省略属性的引用符
只要属性值不包含“空格”、“<”、“>”、“ ' ”、“ " ”、“=”、“ ` ”等符号，都可以省略属性的引用符。如：
<!--以下的type属性值皆为text-->
<input type="text" >
<input type='text' >
<input type=text >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 还新增并废除了一些属性。
10、HTML 5 的结构
主体结构元素：article、section、nav、aside
非主体结构元素：header、hgroup、footer、address
article具有独立的结构，可以作为独立的内容项，例如论坛帖子、杂志文章、博客文章、用户评论、插件等。该元素可以将信息各部分进行任意分组。可以包含<header><footer>等标签。
一个网页中可能有多个独立的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可以单独用于整个页面的页脚，也可以作为一个内容区块的页脚，如<section>、<article>。
address用于放置联系信息，如作者、站点链接、电子邮件、电话号码等，通常放置在文档末尾，这部分内容在浏览器中会以斜体显示。
11、HTML 5 补充
- 视频video
支持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"。
一个例子：
<video width="500" height="240" controls autoplay loop poster="某个图片地址">
<source src="xxx.mp3" type="video/mp3">
<source src="xxx.ogg" type="video/ogg">
<source src="xxx.webm" type="video/webm">
</video>- 音频audio
audio同样可以利用source插入多个音频源。当audio标记中不包含controls属性时，页面将不会显示播放器，这时应将音频播放的方法放在页面的onload事件中。
可以被audio触发的事件有：onClick、onMouseMove、onFocus、onPlay、onPause、onEnded等，故可用JavaScript实现交互。
一个例子:
<script>
function showpicture(){
document.getElementById("musicstaff").style.visibility="visible";
}
function hidepicture(){
document.getElementById("musicstaff").style.visibility="hidden";
}
function thanks(){
document.getElemenById("thanks").innerHTML="<h2>Thanks for listening</h2>";
}
</script>
<div id="thanks"></div>
<audio id="audio1" controls onplay="showpicture()" onpause="hidepicture()" onended="thanks()">
<source src="某个音频地址" type="audio/格式">
</audio>
<img src="某个图片地址" width="376" height="262" id="musicstaff" style="visibility:hidden;">- 画布canvas
canvas可以直接在HTML上进行图形操作。它可以控制指定矩形区域当中的每一个像素。canvas必须包含width与height属性。需要使用JavaScript。
两个应用方式：
线性渐变：通过document获得canvas元素，得到canvas中的context，利用得到的context创建线性渐变linearGradient，在渐变中设置颜色点及该点的颜色，用最后的渐变设置context的style，设置context的rect。
方法createLinearGradient(x1, y1, x2, y2)设置渐变的区域和方向。
一个例子：
<script>
var myCanvas = document.getElementById("this_is_a_canvas");
var myContext = myCanvas.getContext("2d");
var myGradient = myContext.createLinearGradient(30, 30, 300, 300);
myGradient.addColorStop("0", "#CC3");
myGradient.addColorStop(".40", "#FF0");
myGradient.addColorStop(".57", "#390");
myGradient.addColorStop(".82", "#90C");
myGradient.addColorStop("1.0", "#9FF");
myContext.fillStyle = myGradient;
myContext.fillRect(0, 0, 400, 400);
</script>径向渐变：从一个点向外围扩散，可以使用createRadialGradient()方法创建，该方法拥有6个参数，每3个为一组，每组定义一个圆的原点和半径。与创建线性渐变的过程相似，不同的是要用createRadialGradient()方法替代createLinearGradient()方法。例如：
var myGradient = myContext.createRadialGradient(200, 200, 10, 300, 300, 300);- 可缩放矢量图形SVG
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属性，语法为：<polyline points="坐标1,坐标2, ···" fill="none" stroke="#000" />。
polygon使用方式与polyline相同，但在最后会自动闭合线条。
在同一个svg标记下的图像元素会依次重叠，文本不能自动换行，各个图像可以使用fill及stroke属性设置图像的内部填充颜色及笔画的颜色及宽度。stroke-width及stroke-linecap用来设置线条宽度和线段端点的形状，stroke-linecap的取值有：butt、square、round。
svg支持animate标记来实现动画，一个例子：
<svg width="8cm" height="3cm" viewBox="0 0 800 300">
<desc>基本动画元素</desc>
<rect x="1" y="1" width="798" height="298" fill="none" stroke="blue" stroke-width="2" />
<rect id="RectElement" x="300" y="100" width="300" height="100" fill="rgb(255, 255, 0)">
<animate attributeName="x" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="0"/>
<animate attributeName="y" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="800" />
<animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" />
</rect>
<g transform="translate(100, 100)">
<text id="TextElement" x="0" y="0" font-family="Verdana" font-size="35.27" visibility="hidden">
动画播放!
<set attributeName="visibility" attributeType="CSS" to="visible" begin="3s" dur="6s" fill="freeze" />
<animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze" />
<animate attributeName="fill" attributeType="CSS" from="rgb(0, 0, 255)" to="rgb(128, 0, 0)" begin="3s"dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="3s" dur="6s" fill="freeze" />
</text>
</g>
</svg>
8238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
