day001 HTML&CSS知识合辑及实战案例—01

《HTML1.0基础教程》

一．简介

（1）HTML（Hyper Text Markup Language 超文本标记语言）是一种用来描述网页、制作网页的超文本标记语言，它不是编程语言，而是标记语言，是最基础的网页开发语言。标记语言有一套标记标签，我们使用标记标签来描述网页。

（2）HTML标记标签简称HTML标签，它是由尖括号包围关键字、成对出现的，我们称标签对中的第一个标签为开始标签（开放标签），第二个标签为结束标签（闭合标签）。

（3）HTML文档是指文档的文本类型(扩展名、后缀名)为“.html”或者“.htm”,该文档包含纯文本和HTML标签，用于描述网页，即“HTML文档=网页”。浏览器的作用是读取HTML文档，并以网页的形式显示该文档。浏览器不会显示HTML标签，只会通过HTML标签解释（表达）网页内容。

（4） html是根元素，标签之间的文本描述网页；body标签之间的文本是可见的内容；h1标签之间的文本是标题；p标签之间的文本是段落。

 

二．编辑器

（1）可以使用很多专业的HTML编辑器来编写HTML文档，也可以使用简单的文本编辑器编写HTML文档。

（2）无论何种方式编写的HTML文档，都可以使用“右击文件—打开方式—选择浏览器”的方式对网页效果进行实时模拟。

 

三．基础

（1）学习HTML最好的方式是边学习边实验

（2）标题是由h1~h6标签进行定义的，不同数字代表标题级数（大小），请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。

（3）段落是由p标签进行定义的。

（4）链接是由标签a进行定义的，href属性指定链接的地址。

（5）图像是由img标签进行定义的， 属性src指定图片的文件路径。

 

四．元素

（1）HTML元素是从开始标签到结束标签的所有代码。包含开始标签、结束标签、两者之间的元素内容。HTML文档是由HTML元素组成的。

（2）某些HTML元素不具有元素内容，结束方式为在开始标签中加反斜杠，称其为空元素(单标签、自闭合标签)。换行元素br、水平线元素hr、元数据元素meta、外链资源元素link、图片标签img、输入框标签input

（3）HTML元素内可以包含其他的HTML元素，形成嵌套的HTML元素，HTML文档是由HTML元素组成的的，具体来说是由嵌套的HTML元素构成的。不过需要正确嵌套，不能你中有我，我中有你。

（4）不要去纠结元素、标签、节点的具体区别具体区别，因为表达的含义是很相似的。同理，单标签、自闭合标签、空元素也表示相同的含义。

 

五．属性

（1）大多数HTML元素可以拥有各自的属性，属性为HTML元素提供更多的附加信息。

（2）属性总是以“属性名（name）=属性值（value）”的形式在开始标签中进行定义，并且始终为属性值加引号(单双都可)处理。

 

六．标题

1.HTML标题是由标签

~

来定义的，

定义最大的标题（一级标题），

定义最小的标题（六级标题）。HTML会为块级元素（标题、段落）的前面自动添加空行。

2.标题的定义很重要，因为搜索引擎会通过你网页的标题为你的网页结构编制索引，而网友则会通过标题快速浏览你的网页。

3.标签

---

可以定义水平线，实现网页内容的分隔。

4.标签可以定义注释，注释使代码更具可读性，更易被他人所理解。浏览器不会显示你的注释。

5.查看一个网页源代码的方式为对准网页——右击——查看网页源代码。

 

七．段落

1.HTML段落是由标签

来定义的，可以实现HTML文档内容的分段。不要使用没有内容的段落标签实现换行，请使用
标签换行。

2.浏览器（HTML）会自动为块级元素（标题、段落）前面添加空行。

3.标签
可以实现换行，该元素是一个空元素。

4.HTML、XHTML、XML中不允许出现没有结束标签的HTML元素。

5.显示网页时，浏览器会自动移除多余的空行和空格，连在一起的空行和空格显示为一个空格。

 

八．样式

1.style属性的作用：提供了一种改变所有HTML元素样式的通用方法。

2.样式：HTML 4.0引入的，它是一种新的首选的改变HTML 元素样式的方式。通过HTML 样式，能够通过使用style 属性直接将样式添加到HTML 元素中（内联样式），或者间接地在独立的样式表中( CSS 文件)进行定义（外联样式）。

3.在HTML4.0提出之后，部分属性与标签被废弃了，即HTML不再支持被废弃的属性与标签，请避免使用这些被废弃的属性与标签。

4.样式实例—背景颜色：background属性代替原来的bground来定义背景颜色。

5.样式实例—文本对齐：text-align属性代替原来的align属性来定义文本对齐。

 

九．格式化

1.格式化文本相对纯文本，具有排版、风格等信息，比如：字体（黑体、斜体）、颜色等。

2.HTML提供很多使文本格式化输出的标签。如：大/小号、粗/斜体、着/加重体，上/下标、删除/插入。

3.HTML提供很多供计算机代码输出的标签。如：预格式文本、变量、键盘码等。

4.HTML提供很多引用和引用术语的标签。如：长/短引用、缩写、文字方向、地址。

 

十．引用

1.短引用标签,对文本加双引号。

2.长引用标签

,对文本进行缩进。

3.缩略词标签,指向缩写词时显示其全称。

4.定义标签,对文本进行定义。

5.联系信息标签，对文本进行斜体显示。

6.著作标题标签,对文本进行斜体显示。

7.双向重写标签,覆盖当前文本方向。

 

十一．计算机代码元素

1.HTML通常使用可变的字母尺寸和字母间距，但是在显示计算机代码时，使用固定的字母尺寸和字母间距。

2.标签定义键盘输入;标签定义计算机代码输出示例；标签定义编程代码示例；标签定义数学变量。

3.标签不保留多余空行和空格，如想保留，请使用预格式文本标签

。
 
  
 
 
  
十二．HTML 注释
 
  
1.注释标签用于在HTML文档中添加注释，使文档更具可读性，代码更易被团队成员所理解。
 
  
2.浏览器不会显示添加的注释.
 
  
 
 
  
十三．HTML CSS 
 
  
1.HTML4.0发布后，所有格式化代码可移除HTML文档而独立成一个样式表，当计算机读到这个样式表时，就会对相应的HTML元素进行格式化，插入样式表的方式有三种：
 
  
2.外部样式表：当样式需要被用到很多个页面的时候，使用外部样式表，起到牵一发而动全身的效果；
 
  
3.内部样式表：当样式被用到整个HTML文档（页面），使用内部样式表；
 
  
4.内联样式：当样式被使用到某个HTML元素，使用内联样式。起到精雕小酌的效果。
 
  
 
 
  
十四．HTML 链接
 
  
1.超链接元素的内容可以是字、词、句子、图片；实现从一个文档（网页）到另一个文档（网页）的跳转，或跳转到当前网页的其他部分。
 
  
2.当鼠标光标指向超链接时，箭头会变成小手。
 
  
3.链接创建方式为使用链接标签定义,herf属性指定链接地址，target属性定义链接打开方式，name属性定义锚的名称。
 
  
4.使用方式为使用herf属性指定访问资源(页面)的URL(统一资源定位符)实现跳转至另一个文档（网页），或使用name属性在同一网页内相当于书签一样跳转。
 
  
 
 
  
十五．HTML图像
 
  
（1）图像由标签定义，src属性指定图像的URL地址，即存储位置。
 
  
（2）gif和jpg文件均可用作HTML的图像背景，如果图像小于页面，图像会进行重复，通过改变width和height属性的值实现放大和缩小图像，插入动画图像的语法与插入普通图像的语法是一样的。
 
  
（3）align属性定义图像与文本的对齐方式（上中下左右），bottom（底部）是默认属性值。
 
  
（4）无法显示的图像或鼠标指针移到能显示的图像上时，会显示文本替换属性alt定义的图像文本
 
  
图像也可以作为链接的内容。
 
  
（5）map标签实现图片中内容的位置确定功能，即定义图像地图，usemap属性就相当于id属性或class属性，area标签定义图像地图中可点击的区域，实现细节的展示 。
 
  
 
 
  
十六．HTML 表格
 
  
（1）border属性定义表格边框的厚度，未定义或值为0均无边框，cellpadding属性定义数据内容与内边框的距离， cellspacing属性定义内边框与外边框的距离。
 
  
（2）caption标签是表格的标题标签 。
 
  
（3）这是横向的表头（table heading），想想如何定义纵向的表头。表头自带粗体居中的效果， align属性定义表头数据内容的居左居右居中。
 
  
（4）colspan属性定义横向表头横跨多列的表格，row属性定义纵向表头竖跨多列的表格，注意数据个数与定义列数相对应。
 
  
（5）bgcolor属性定义单元格的背景颜色，background属性定义单元格的背景图像，两者均可在table标签中定义一整个表格的背景。
 
  
（6）no-breaking 空格是一个字符实体，是以和号&开始，然后是nbsp；以分号；结尾。空格占位符能使得没有内容的空格显示出边框。
 
  
（7）table标签定义表格、tr标签定义行、td标签定义数据单元格单元格、th标签定义表头单元格、caption标签定义表格标题、thead定义表格头部分、tbody定义表格体部分、tfoot定义表格脚部分。
 
  
 
 
  
十七．HTML 列表
 
  
（1）HTML可以创建无序、有序、自定义列表。
 
  
（2）无序列表是一个项目的列表，使用小黑圆圈进行标记，列表由标签ul进行定义，列表项由标签li进行定义，列表项内容可以是文本、图片、链接、表格等元素形成嵌套。
 
  
（3）有序列表也是一个项目的列表，，使用数字进行标记，列表由标签ol进行定义，列表项由标签li进行定义，列表项内容可以是文本、图片、链接、表格、列表等元素形成嵌套。
 
  
（4） type属性定义列表的标记方式，start属性定义有序列表开始计数初始值 。
 
  
（5）自定义列表不仅仅是一个项目的列表，更是项目及其注释的组合。自定义列表由标签dl定义，每个自定义列表项由标签dt定义，每个自定义列表项的定义由标签dd定义，列表项内部可以包含图片、链接、列表、表格等等元素形成元素的嵌套。
 
  
 
 
  
十八．HTML < div >和< span >
 
  
（1）大多数HTML元素被定义为块级元素（block level element）或内联元素（inline element），浏览器会自动在块级元素添加空行，不会在内联元素前后添加空行。
 
  
（2）块级元素：h1、p、ul、table、div；内联元素(行内标签)：a、big、img、span。可以通过div标签和span标签将元素组合起来。每一个块级元素会占满一整行并进行换行。而多个内联元素会在一行内展示，直至占满该行才换行。
 
  
（3）div元素是块级元素，可用作组合其他HTML元素的容器，div元素没有特定的含义，当与CSS连用时，div元素可用于为大的内容块设置样式属性。
 
  
（4）span元素是内联元素，可用作文本的容器，span元素没有特定的含义，当与CSS连用时，span元素可用于为文本设置样式属性。
 
  
 
 
  
十九．HTML 类
 
  
（1）对HTML元素进行分类，使我们能够为元素的类设置CSS样式，为相同的类设置相同的样式，为不同的类设置不同的样式，从而极大提供工作效率。
 
  
（2）将块级元素进行分类的是div元素，div元素是块级元素且是其他HTML元素的容器，设置div元素的类，使我们能够为相同的div元素设置相同的样式。
 
  
（3）将行内元素进行分类的是span元素，div元素是行内元素且是文本的容器，设置span元素的类，使我们能够为相同的span元素设置相同的样式。
 
  
素的类，能够在为相同的< span >元素设置相同的样式。
 
  
 
 
  
二十.HTML 布局
 
  
（1）网站常常以多列形式显示内容，div元素常用来创建多列布局，因为能够轻松的通过CSS对其进行定位。
 
  
 
 
  
二十一.HTML 响应式Web 设计
 
  
（1）响应式web设计（Responsive Web Design）简称“RWD”，能够以可变的尺寸传递网页，这种设计对于平板和移动设备是必须的。
 
  
（2）使用bootstrap创建响应式设计有待仔细研究。
 
  
 
 
  
二十二.HTML 框架
 
  
（1）框架结构标签frameset定义如何将窗口进行分割成小页面，每个frameset定义一系列的行（rows）和列（cols），rows和cols的值规定了每行每列占据屏幕的面积。
 
  
（2）框架标签frame定义放置在每个框架的HTML文档。
 
  
（3）通过使用框架，你可以在同一个浏览器窗口显示多个页面，每份HTML文档（页面）为一个框架（HTML文档=网页=框架），框架之和为一个窗口，框架之间是相互独立的，
 
  
（4）更多类型的框架有待研究明白
 
  
 
 
  
二十三.HTML 内联框架( inline frame)
 
  
（1）iframe标签用于定义大网页中的小网页，src属性指定小页面的URL地址。width属性和height属性定义小网页窗口的宽度和高度，属性值可以是确确的数字，也可以是百分比。
 
  
（2）frameborder属性定义小网页的边框厚度，属性值为0则移除边框。链接的target属性引用frame的name属性时，实现iframe用作链接的目标。
 
  
（3）由于链接的target匹配 iframe 的名称，所以链接会在 iframe 中打开。
 
  
 
 
  
二十四.HTML 背景
 
  
（1）背景颜色和文字颜色搭配良好使站点看上去很棒，使页面中的文字易于阅读。
 
  
（2）body标签拥有两个配置背景的属性background和background-color，分别用于将背景配置为图像和颜色，属性值为图像URL地址和颜色名，URL可以是相对地址或绝对地址，颜色名也可以是十六进制数或RGB或英文名称。
 
  
 
 
  
二十五.HTML 脚本
 
  
（1）script标签用于定义客户端脚本，比如JavaScript，JavaScript使HTML页面具有更强的动态和交互性，JavaScript最常用于图片操作、表单验证和内容动态更新。
 
  
（2）script标签可包含脚本语句，也可通过src属性指定外部脚本文件。必备的type属性指定脚本的MIME类型。
 
  
（3）当浏览器不支持脚本或禁用脚本时，noscript标签提供脚本的替代内容，浏览器才会显示该内容，不过，noscript标签可以包含普通HTML页面的body元素中能够包含的所有元素。
 
  
（4）当某未知浏览器读取script标签，发现（老式）无法识别script标签时，script标签所包含的内容将以文本的形式显示在页面上。（新式）正常识别script标签时，将会读懂并执行这些脚本，即使代码被嵌套在注释标签内，而老式浏览器将忽略注释标签中的脚本，所以，应付老式浏览器的办法是将脚本隐藏在注释标签中。
 
  
 
 
  
二十六.HTML 文件路径
 
  
（1）文件路径描述了网站文件夹结构中某个文件的位置，文件路径用于链接外部文件（网页、图像、JavaScript、样式表）
 
  
（2）绝对文件路径：以根开始的路径指向了一个因特网文件的完整URL。
 
  
如：file:///D:/software/b.html https://www.baidu.com/img/bd_logo1.png
 
  
（3）相对文件路径：相对于当前页面文件所在的路径,不是以根开始的路径。“./”代表当前目录、“../”代表上一级目录，指向了相对于当前页面的文件，如果可能，使用相对文件是个好习惯/
 
  
如：images/picture.jpg
 
  
 
 
  
二十七.HTML 头部元素
 
  
（1）head元素是所有头部元素的容器，用于指定html文档的一些属性、引入外部的资源，标签中可包含的头部元素有：文本标题title、链接外部资源link、样式信息style、元数据meta、客户端脚本script、链接默认目标base。
 
  
（2）title元素定义文档的标题，title元素在HTML/XHTML文档中都是必备的元素，title元素定义的标题会显示在浏览器的工具栏、收藏夹、搜索引擎的结果。
 
  
（3）base元素为页面上的所有链接规定默认地址（herf）或默认目标（target）。
 
  
（4）link元素定义文档与外部资源的关系，常用于连接样式表。
 
  
（5）style元素定义HTML文档的样式信息，规定HTML元素在浏览器中的呈现的样式。
 
  
（6）meta元素定义关于HTML文档的元数据，元数据是关于数据的信息。元数据不会显示在页面中，但是机器可读。meta元素规定页面的描述、关键词、作者、最后一次修改时间及其他元数据。meta标签始终位于head元素中，可用于浏览器、搜索引擎、其他web服务。搜索引擎会利用meta元素的name属性，选择属性值为keyword或description，分别定义页面的关键词和描述，再利用content属性来描述页面的内容。
 
  
（7）script标签用于定义客户端脚本，比如JavaScript。
 
  
 
 
  
二十八.HTML 字符实体
 
  
（1）如果你想在页面上显示各种字符，不能直接将字符写进HTML文档，因为浏览器会误读这些直接输入的字符，你应该将字符对应的字符实体的编号或名称写进HTML文档。即将预留字符替换成对应的字符实体，才能正确显示预留字符。
 
  
（2）比如：希望显示10个空格，如果直接在HTML文档中留10个空格，那么浏览器读取HTML文档时会省略9个空格，只显示1个空格。要想显示10个空格，就得在HTML文档中写入10个空格对应的字符实体“ ”，就可以了。
 
  
 
 
  
二十九.HTML 统一资源定位器
 
  
（1）统一资源定位器URL（Uniform Resource Locator）简称网址，URL可以是由单词组成的网址的域名（w3school.com.cn），也可以是由数字组成的因特网协议（IP）地址（192.168.1.253）。
 
  
（2）URL用于定位万维网上的文档（其他数据）。当你点击HTML页面上的某个链接时，对应的链接标签指向万维网上的一个地址。web浏览器通过URL从web服务器请求页面。
 
  
（3）网址：http：//www.W3School.com.cn/html/index.asp遵循以下的语法规则：scheme：//host.domain:Port/path/filename.
 
  
（4）scheme-定义因特网的服务类型，最常用的类型是http；host-定义域主机（http的默认域主机是www）；domain-定义因特网域名，比如：W3School.com.cn:port-定义主机上的端口号（http的默认端口号是80）；path-定义服务器上的路径；filename-定义资源/文档的名称。
 
  
 
 
  
三十.HTML URL 字符编码
 
  
（1）由于URL的组成中常常包含ASCII集合之外的字符，而URL只能使用ASCII字符集来通过因特网进行发送，因此URL中非ASCII字符必须转换成有效的ASCII字符格式。
 
  
（2）起转换作用的就是URL编码，URL编码使用"%"+"两位十六进制数"来替换非SASCII字符。即通过URL编码将URL组成中非ASCII字符格式转换ASCII字符格式，从而实现因特网的传输。
 
  
（3）比如：“%26”替换“&”；URL中不能包含空格，URL编码使用“+”替换空格。
 
  
 
 
  
三十一.HTML Web Server 
 
  
（1）如果希望向全世界发布你的网站，那么你必须把它存放在web服务器上。
 
  
（2）自建服务器：强大的服务器硬件、昂贵的服务器授权、高昂的人工费处理漏洞以及病毒。
 
  
（3）使用因特网服务提供商（ISP）：从ISP上租用服务器很常见，大多数小公司会把网站存放到由ISP提供的服务器上。 因为有众多优势：高速连接、强大的硬件、安全可靠。
 
  
（4）选择ISP时注意事项：24小时支持、每日备份、突增的流量、带宽或内容限制、E-mail功能、数据库访问等。
 
  
 
 
  
三十二.HTML 颜色
 
  
（1）所有的颜色都是由红色（red）、绿色（green）、蓝色（blue）混合而成，颜色的写入有三种方式：RGB（241，181，127）、十六进制符号（#FFFFFF）、颜色名（floralwhite）。
 
  
（2）颜色由一个十六进制符号来定义，这个符号由红色、绿色、蓝色的值组成。每种颜色的最小值为0（十六进制数：#00），最大值为255（十六进制数：#FF）。
 
  
（3）因此共有255×255×255=16581375种颜色。
 
  
 
 
  
三十三.HTML 颜色名
 
  
（1）大多数的浏览器都支持颜色名集合，但是仅有16种颜色名被W3C的HTML4.0标准所支持。
 
  
（2）如果需要使用其他的颜色，就得使用十六进制的颜色值。
 
  
 
 
  
三十四.HTML 文档类型
 
  
（1）web世界里存在许多不同类型的文档，只有了解文档的类型，浏览器才能正确地显示文档。
 
  
（2）对应的，HTML也有许多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全正确地显示出HTML页面。这就是文档类型声明 的用处！
 
  
（3）声明不是HTML的标签，它用来告诉浏览器一项信息（声明），即HTML是用什么版本编写的，从而帮助浏览器正确的显示页面。
 
  
（4）从web早期诞生至今，已经发展出多个HTML版本：HTML（1991）、HTML+（1993）、HTML2.0（1995）、HTML3.2（1997）、HTML4.01（1999）、XHTML（2000）、HTML5（2012）、XHTML（2013）。
 
  
（5）HTML5声明：
 
  
 
 
  
三十五.HTML 速查手册
 
  
（1）来自w3school的HTML快速参考手册，可以打印出来！
 
  
（2）除此之外，还有众多参考手册，不要去记忆哦，要自己理解知道怎么使用就行了！
 
  
 
 
  
 
 
  
《HTML5基础教程》
 
  

1.简介
 
  
（1）HTML5是HTML规范、XHTML、HTML DOM的最新版本，之前的一个版本还停留在1999年，而这20年间网页发生了巨大的变化。
 
  
（2）W3C（World Wide Web Consortium，万维网联盟，专注于XHTML2.0）与WHATWG（Web Hypertext Application Technology Working Group，Web超文本应用技术工作组，专注于Web表单和应用程序）于2006年决定合作创建一个新版本的HTML，合作的结果就是HTML5问世。
 
  
（3）HTML建立的一些新规则：新特性应该基于HTML、CSS、DOM以及JavaScript；减少对外部插件的需求（比如Flash）；更优秀的处理错误；更多取代脚本的标记；开发进程公开透明；HTML5应该独立于设备。
 
  
（4）HTML具有一些有趣的新特性：用于绘画的Canvas元素；用于媒介回放的video和audio元素；新的特殊内容元素：header、nav、section、article、footer；新的表单控件：calendar、time、date、url、email、search；对本地离线存储更好的支持。
 
  

2.视频
 
  
（1）许多时髦的网站都提供视频，HTML5提供了一种通过video元素展示视频的标准方法。
 
  
（2）当前video元素支持三种视频格式：ogg（MPEG4、WebM）=带有Theora（H.264、VP8）视频编码和 Vorbis（ AAC、Vorbis ）音频编码的ogg（MPEG4、WebM）文件。
 
  
（3）src属性定义要播放视频的URL；width和height属性定义播放器的宽度和高度；autoplay属性定义视频在就绪后马上播放；controls属性定义播放暂停音量等控件；loop属性定义媒介文件播放完再次播放；preload属性定义视频在页面加载时开始加载并预备播放（当定义了autoplay属性时忽略此属性）。
 
  
（4）video标签之间插入的内容是供不支持video元素的浏览器显示的，当然，也可以将src属性放在标签之间用source标签来进行定义，且支持定义多个source标签，实现链接多个视频文件，浏览器将使用第一个可识别格式。
 
  

3.视频/DOM
 
  
(1)HTML5
 
  
（2）大多数浏览器支持的视频方法：play（）、pause（）、load（）、canPlayType。
 
  
（3）大多数浏览器支持的视频属性：videoWidth、videoHeight、width、height、currentSrc、currentTime、duration、ended、error、paused、muted、seeking、volume。注意：在所有的属性中，只有videoWidth属性和videoHeight属性是立即可用的，其他的属性必须等视频元数据加载后才是可用的。
 
  
（4）大多数浏览器支持的视频事件：play、pause、progress、error、timeupdate、ended、abort、empty、emptied、waiting、loadmetadata。
 
  

4.音频
 
  
（1）HTML5提供了一种通过audio元素来展示音频的标准方法，audio元素能够播放声音文件和音频流。
 
  
（2）当前audio元素支持三种音频格式：Ogg Vorbis、MP3、Wav。
 
  
（3）src属性定义要播放音频的URL；autoplay属性定义音频在就绪后马上播放；controls属性定义播放暂停音量等控件；loop属性定义媒介文件播放完重新开始播放；preload属性定义音频在页面加载时开始加载并预备播放（当定义了autoplay属性时忽略此属性）。
 
  
（4）audio标签之间插入的内容是供不支持audio元素的浏览器显示的，当然，也可以将src属性放在标签之间用source标签来进行定义，且支持定义多个source标签，实现链接多个音频文件，浏览器将使用第一个可识别格式。
 
  

5.拖放
 
  
（1）拖放（抓取对象后放置到另一个位置）是一种常见的特性。拖放(drag和drop)是HTML5标准的组成部分，任何元素都可以拖放。drag：抓取；drop：放置。
 
  
（2）draggable属性设置为true即设置元素为可拖放；
 
  
（3）ondragstart属性调用了一个函数drag（event），该函数规定了被拖动的数据（即当元素被拖动时，元素会发生什么）；ev.dataTransfer.setData()方法设置被拖数据的数据类型和值。
 
  
（4）ondragover属性调用了一个函数allowDrop(event)，该函数规定在何处放置被拖动的数据，因为默认情况下无法将元素/数据放置到其他元素中，所以如果需要实现数据放置，我们必须设置阻止对元素的默认处理方式。即通过调用函数allowDrop(event)的ev.preventDefault（）方法来实现。
 
  
（5）ondrop属性调用了一个函数drop(event)，当放置拖动数据时，会发生drop事件。
 
  

6.画布
 
  
（1）HTML5的canvas元素通过Javascript在网页上绘制图像，canvas元素本身是没有绘画能力的，它仅仅用于创建一张画布，所有的绘制工作都必须在JavaScript内部完成，即通过canvas元素创建画布；通过JavaScript绘制画布。
 
  
（2）画布是一块矩形区域，你可以控制它每一点的像素，canvas拥有多种绘制路径、圆形、矩形、字符、添加图形的方法。
 
  

7.SVG
 
  
(1)SVG(英文名称：Scalable Vector Graphics，中文名称：可伸缩矢量图形)定义用于网络的基于矢量的图形；使用XML格式定义图形，SVG是万维网联盟的一个标准。
 
  
(2)SVG图像格式的优势：①SVG图像在伸缩、放大、改变尺寸的情况下其图像质量均不会有损失;②SVG图像可通过文本编辑器来创建和修改；③可被搜索、索引、脚本化和压缩；④可在任何分辨率下被高质量的打印。
 
  

8.画布 vs SVG
 
  
（1）canvas是通过JavaScript来绘制2D图形，它是逐像素进行渲染的。
 
  
（2）在canvas中，一旦图形被绘制成功，它将不会继续受到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
 
  
（3）SVG是一种使用XML描述2D图形的语言。它基于XML，这意味着SVG DOM中的每一个元素都是可用的，你可以为每个元素添加JavaScript事件处理器。
 
  
（4）在SVG中，每个被绘制的图形都被视为对象，如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。
 
  
（5）canvas与SVG的比较：canvas依赖分辨率，不支持事件处理器，较弱的文本渲染能力，能够以.png和.jpg格式保存结果图像；最适合图像密集型的游戏，其中的许多对象会被频繁重绘。
 
  
（6）SVG不依赖分辨率，支持事件处理器，最适合带有大型渲染区域的应用程序（谷歌地图），复杂度高会减慢渲染速度，不适合游戏应用。
 
  

9.地理定位
 
  
（1）HTML5 geolocation（地理定位）API用于定位用户的地理位置。由于该特性侵犯用户的隐私，一般需要经过用户的许可，才能获取用户位置信息。
 
  
（2）使用getCurrentPosition（）函数获取用户的地理位置，showPosition（）函数获得并显示精度和纬度，shoeError（）函数用于处理错误和拒绝，
 
  
（3）watchPosition() 函数返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。clearWatch() 函数用于停止 watchPosition() 函数。
 
  

10.Web存储
 
  
（1）HTML5提供了两种在客户端存储数据的方法：localStorage（没有时间限制的数据存储）和sessionStorage（针对一个session的数据存储）
 
  
（2）数据存储之前由cookie来完成，但是cookie不适合存储大量数据，因为数据由每个对服务器的请求来传递，这使得cookie速度很慢且效率不高。
 
  
（3）在HTML中，数据不是由每个对服务器的请求来传递，而是只有在请求时使用数据。能实现不影响网站性能且存储大量数据。HTML使用JavaScript来存储和访问数据。
 
  
（4）localStorage方法存储的数据没有时间限制，第二天、第二年，数据仍然可用。
 
  
（5）sessionStorage方法针对一个session进行数据存储。当浏览器窗口被用户关闭后，数据会被删除。
 
  

11.应用缓存
 
  
（1）HTML5引入应用程序缓存（Application Cache），这意味着web应用可进行缓存，并在没有因特网连接时进行访问
 
  
（2）应用程序缓存为web应用带来几个优势：离线浏览（用户可在应用离线时使用它们）、速度（已缓存资源加载的更快）、减轻服务器负载（浏览器将只在服务器下载更新过或修改过的资源）
 
  
（3）使用HTML，通过创建ache manifest文件，可以轻松地创建web应用的离线版本。
 
  
（4）如需启用应用程序缓存，应在html标签中添加manifest属性，每个指定了manifest属性的页面在用户对其访问时都会被缓存，如果没有指定manifest属性，页面将不会缓存。manifest文件的文件扩展名为“.appcache”.
 
  
 (5)manifest文件必须在web服务器上配置正确的MiMe-type，即“text/cache-manifest”。
 
  
（6）manifest文件是简单的文本文件，它告知浏览器被缓存的内容和不缓存的内容，该文件可分为三个部分：CACHE-MANIFEST、NETWORK、FALLBACK分别表示：在此标题下列出的文件（将在首次下载后进行缓存、需要与服务器的连接且不会被缓存、规定当页面无法访问时的回退页面比如 404 页面）
 
  
（7）CACHE-MANIFEST小节是必需的，当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
 
  
（8）NETWORK小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的。
 
  
（9）FALLBACK小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件。第一个 URL 是资源，第二个是替补。
 
  

12.Web Workers
 
  
（1）当HTML页面在执行脚本时，页面的状态是不可响应的，直到脚本加载完成。web worker是运行在后台的JavaScript，独立于其他的脚本，不会影响页面的性能。你可以做任何事情：点击、选取内容等，而web workers在后台运行。
 
  
（2）web worker位于外部文件中，无法访问下列JavaScript对象：indows对象、document对象、parent对象。
 
  

13.服务器发送事件
 
  
（1）HTML5服务器发送事件（sever-sent event）是指网页自动获得来自服务器的更新，是一种单向的信息传递。
 
  
（2）上例中使用 onmessage 事件来获取消息。不过还可以使用其他事件：onopen（当通往服务器的连接被打开时）、onmessage（当接收到消息）、onerror（当发生错误）。
 
  

14.输入类型
 
  
（1）HTML5拥有多个新的表单输入类型，包括：email、url、number、range、Date pickers、search、color。这些新特性提供了更好的输入控制和验证。
 
  
（2）email（url）类型用于应该包含email（url）地址的输入域，提交表单时，会自动验证email（url）域的值。
 
  
（3）number类型用于应该包含数值的输入域，你还能够设定对所接受的数字的限定。range类型用于包含一定范围的数值的输入域，你还能够设定对所接受的数字的限定，range类型显示为滑动条。
 
  
（4）HTML5拥有多个可供选取日期和时间的新输入类型：date（选取年、月、日）、month（选取年、月）、week（选取年、周）、time（选取小时、分钟）、date-time（选取年、月、日、小时、分钟，即UTC时间）、datetime-local（选取年、月、日、小时、分钟，即本地时间）。
 
  
（5）search类型用于搜索域，比如站点搜索，search搜索域显示为常规的文本域。
 
  

15.表单元素
 
  
（1）HTML5拥有若干涉及表单的元素和属性，先介绍HTML5中新的表单元素：datalist、keygen、output。
 
  
（2）datalist元素规定输入域的选项列表，列表是通过datalist元素内的option元素创建的，option元素必须设置value属性，如想把datalist绑定到输入域，请用输入域的list属性引用datalist的id属性的值。
 
  
（3）keygen元素的作用是提供一种验证用户的可靠方法，keygen（key-pair generator）元素是密匙对生成器，当提交表单时，会生成两个键，私匙和公匙。
 
  
（4）私匙（private key）存储于客户端，公匙（public key）被发送到服务器。公匙可用于之后验证用户的客户端证书（client certificate）。目前浏览器对该元素糟糕的支持度不足以使其成为一种有用的安全标准。
 
  
(5)output元素用于不同类型的输出，比如计算机或脚本输出。
 
  
(6)常用的表单项有：text(文本输入框)、password(密码输入框)、radio(单选框，多个单选框的name属性值必须一样)、checkbox(复选框)、textarea(文本域)、file(文件选择框)、submit(提交按钮)、button(普通按钮)、select(下拉列表)、hidden(隐藏域)。
 
  
 
 
  

16.表单属性
 
  
表单是用于采集用户输入的数据进而与服务器进行交互。 form标签可以定义表单采集用户数据的范围。表单项中的数据要想被提交：必须指定其name属性
 
  
（1）再介绍涉及form元素和input元素的新属性。新的form属性：autocomplete、novalidate，新的input属性：autocomplete、autofocus、form、form overrides、height和width、list、min和max和step、multiple、pattern、placeholder、required。
 
  
（2）autocomplete属性规定form或input域应该拥有自动完成功能，当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。在某些浏览器中，你可能需要启用自动完成功能，以使该功能生效。
 
  
（3）novalidate属性：规定在提交表单时不应该验证form或input域。
 
  
（4）autofocus属性规定在页面加载时，域自动地获得焦点，该属性适用于所有类型的input元素。
 
  
（5）form属性：规定输入域所属的一个或多个表单，该属性必须引用所属表单的id值，如需引用多个表单，就使用空格分隔列表。
 
  
（6）form overrides属性：表单重写属性允许你重写form元素的某些属性设定。表单重写属性有：formaction（method、target、enctype、novalidate）分别重写表单的action（method、target、enctype、novalidate）属性。表单重写属性只适用于image和submit类型的input标签。
 
  
（7）height和width属性：规定只适用于image类型的input标签的图像高度和宽度。
 
  
（8）list属性：规定输入域的datalist，datalist是输入域的选项列表。
 
  
（9）min、max和step属性：用于为包含时间和日期的input类型规定约束，该属性只适用于number、range、date pickers三种类型的input标签。
 
  
（10）multiple属性：规定输入域中可选择多个值，该属性只适用于email和file两种类型的input标签。
 
  
（11）pattern属性：规定用于验证input域的模式（pattern），模式（pattern）是正则表达式。
 
  
（12）placeholder属性：提供一种提示（hint），描述输入框期待的值，提示（hint）会在输入框为空时显示出现，会在输入框获得聚焦时消失。
 
  
（13）required属性：规定必须在提交之前填写输入框，不能为空。
 
  
（14）action属性指定提交数据的URL。
 
  
（15）method属性指定提交方式，提交方式一共有7中，常用的有2种：
 
  
 get：请求参数会在地址栏中显示，会封装到请求行中；请求参数大小是有限制(2KB)的；不太安全。
 
  
post：请求参数不会再地址栏中显示。会封装在请求体中;请求参数的大小没有限制;较为安全。
 
  
 
 
  
17.HTML语义化
 
  
HTML语义化：用正确的标签（代码语义化）做正确的事情（内容语义化）！HTML语义化有多项优势：
 
  
1.HTML语义化即让页面的内容结构化，结构更清晰，便于浏览器、搜索引擎对其进行解析；
 
  
2.即使在没有CSS样式的情况下也能以文档的格式显示，并且容易阅读；
 
  
3.搜索引擎的爬虫依赖于HTML标记来确定上下文和各个关键词的权重，利于SEO；
 
  
4.使阅读源代码的人对网站更容易将网站分块，便于团队开发和维护，便于阅读维护理解。
 
  
 
 
  
 
 
  
《XHTML基础教程》
 
  

1.简介
 
  
（1）XHTML（英文名称：Extensible Hyper Text Markup Language，中文名称：可扩展超文本标记语言）。
 
  
（2）XHTML于2006年成为W3C标准，W3C将XHTML定义为最新的HTML版本，XHTML将逐渐取代HTML，XHTML是更严格更纯净的HTML版本。
 
  
（3）XHTML几乎与HTML4.01相同，它是作为一种XML应用被重新定义的HTML。
 
  

2.Why
 
  
（1）万维网上存在许多具有糟糕HTML代码的页面，糟糕体现在：有些HTML代码明明没有遵循HTML规则，却能够很好的运行在计算机的浏览器上，而移动设备的浏览器没有能力和手段正常的解释糟糕的标记语言。
 
  
（2）XML（Extensible Markup Language）是一种标记语言，该语言编写的文档都必须要正确的标记，以产生形式良好的文档。XML用于描述数据，HTML用于显示数据。
 
  
（3）因此，将HTML4.01和XML（可扩展标记语言）结合，就得到了XHTML，XHTML包含了所有与XML语法结合的HTML4.01元素。
 
  
（4）XHTML可被所有能读取XML的设备读取，XHTML使我们有能力编写出结构良好的文档。
 
  

3.vs HTML
 
  
（1）从现在开始严格的编写HTML代码，差不多就能达到XHTML的标准。
 
  
（2）XHTML与HTML的差异主要体现在：XHTML比HTML更为严格与规范。具体表现：XHTML元素必须被正确的嵌套；元素（包含空元素）必须含有结束标签；标签名和属性必须使用小写字母。XHTML文档必须含有根元素。
 
  

4.语法
 
  
（1）编写XHTML代码需要更纯净的HTML语法、更多的XHTML语法规则：①属性名称必须小写、②属性值加双引号、③属性不能简写、④用id属性代替name属性。
 
  
（2）还有：⑤在“/”符号前面添加额外的空格，以使你的XHML文档与现在的德浏览器相兼容。
 
  
（3）还有：⑥语言属性lang几乎应用于所有的XHTML元素中，它定义元素的内部的内容的所用语言类型，如果在元素中使用lang属性，必须添加“XML：lang="属性值"”（与前者属性值相同）。
 
  
（4）还有：⑦所有XHTML文档必须进行文档类型声明（DOCTYPE declaration）。⑧在XHTML文档中必须含有html、body、head元素，而title元素必须位于head元素内部。
 
  
（5）还有：⑨根元素html的标签中必须含有xmlns属性，其属性值也是固定的。
 
  

5.DTD
 
  
（1）DTD（英文名称：Document Type Definition；中文名称：文档类型定义）。
DTD规定了使用通用标记语言的网页的语法，诸如HTML这样的通用标记语言应使用DTD来规定应用于某种特定文档的标签的规则，这些规则包括一些元素和实体的声明。
在通用标记语言的文档类型声明或DTD中，XHTML被详细地进行了描述。XHTML使用精确的能被计算机读取的语言来描述合法的XHTML标记的语法和句法。（？）
 
  
（2）XHTML定义了三种类型的文档类型声明，分别是：strict（严格类型）、transitional（过渡类型、使用最普遍）、frameset（框架类型）。
 
  
（3）一个XHTML文档必须包含DOCTYPE、html、head、title、body，
 
  

6.HowTo
 
  
（1）将文件类型声明添加至每页的首行。
 
  
（2）由于XHTML对大小写敏感且仅接受小写的HTML标签和属性名，因此使用搜索和替换命令将大写的标签和属性名替换成小写。
 
  
（3）所有的属性值必须加上引号。
 
  
（4）不要忘记结束标签，空标签的结束方式为在开始标签中加反斜杠，且反斜杠前面加空格。
 
  
（5）使用W3school Validator 根据官方的XHTML DTD对所有修改过的页面进行验证，可能还会有少数的错误被发现，逐一对错误进行手工的修改。
 
  

7.验证
 
  
（1）XHTML文档是根据文档类型声明（DTD）进行验证的，只有将正确地DTD添加到首行，XHTML才会被正确的验证。
 
  
（2）严格DTD包含没有被反对使用的、不出现在框架结构中的元素和属性；
 
  
（3）过渡DTD包含严格DTD中的一切，外加一些不赞成使用的元素和属性；
 
  
（4）框架DTD包含过渡DTD中的一切，外加框架。
 
  

8.模块
 
  
（1）XHTML是简单而庞大的语言，XHTML包含网页开发者所需要的大多数功能。但是对于某些特殊的用途，XHTML太大且复杂了；对于其他的功能，XHTML又太简单了。
 
  
（2）通过将XHTML分成若干模块，W3C已创造出了数套小巧且定义良好的XHTML元素(W3C已将XHTML定义成了28套模块)。这些元素既可以被独立应用于简易设备，又可以与XML结合并入大型复杂应用程序。
 
  
（3）通过使用模块化的XHTML，产品和软件设计者可以。
 
  
①选择被某种设备所支持的元素；
 
  
②在不打破XHTML标准地情况下，使用XML对XHTML进行扩展；
 
  
③比如：针对小型的设备，对XHML简化；针对复杂的应用，通过添加新的XML功能（SVG、多媒体）对XHTML进行扩展；
 
  
④定义XHTML框架，比如XHTML BASIC（针对移动设备的XHTML子集）。
 
  

9.属性
 
  
（1）HTML标签拥有各自的特殊属性，都列在标签的描述中，下面列出一些通用于大多数标签的核心属性和语言属性。
 
  
（2）核心属性：class（元素的类）、id（元素的标识）、style（元素的内联样式）、title（显示于提示工具的文本）（注：html、base、head、title、meta、style、script、param等元素的相应标签不具有以上的属性）
 
  
（3）语言属性：dir（设置文本的方向）、lang（设置文本语言）（注：base、script、param、frame、frameset、iframe、br、hr等元素相应的标签不具有以上的属性）
 
  
（4）键盘属性：accesskey（设置访问某元素的键盘快捷键）、tabindex（设置某元素的tab次序）
 
  

10.事件
 
  
（1）HTML4.0的新特性之一就是使HTML事件触发浏览器的行为，即当用户点击一个HTML元素时启动一段相应的JavaScript，以下就是可以插入被HTML标签以定义事件行为的一系列属性。
 
  
（2）窗口事件：Onload、Onunload（当文档被载入、被卸下时执行脚本）（注：仅在body、frameset标签中有效）
 
  
（3）表单元素事件：onchange、onreset、onsubmit、onselet、onblur、onfocus（当元素改变、表单被重置、表单被递交、元素被选取、元素失去焦点、元素得到焦点时执行脚本）（注：仅在表单元素中有效）
 
  
（4）键盘事件：onkeyup、onkeydown、onkeypress（当键盘被松开、按下、按下后由松开时执行脚本）（注：iframe、frameset、frame、base、script、param、title、html、head、meta、style、bdo、br等元素中无效）
 
  
（5）鼠标事件：onclick、ondblclick、onmouseup、onmousedown、onmouseout、onmousemove、onmouseover（当鼠标被单机、被双击、按钮被松开、按钮被按下、指针移出某元素、指针移动、指针悬停于某元素之上时执行脚本）
 
  
（注：iframe、frameset、frame、base、script、param、title、html、head、meta、style、bdo、br等元素中无效）
 
  
 
 
  
11.web概念概述
 
  
* 软件架构：
 
  
1. C/S: Client/Server 客户端/服务器端
 
  
* 在用户本地有一个客户端程序，在远程有一个服务器端程序，如：QQ，迅雷...
 
  
* 优点：用户体验好
 
  
* 缺点：开发、安装、部署、维护麻烦
 
  
2. B/S: Browser/Server 浏览器/服务器端
 
  
* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
 
  
* 优点：开发、安装，部署，维护 简单
 
  
* 缺点：如果应用过大，用户的体验可能会受到影响，对硬件要求过高
 
  
 
 
  
* B/S架构详解
 
  
* 资源分类：
 
  
1. 静态资源：使用静态网页开发技术发布的资源。
 
  
特点：所有用户访问，得到的结果是一样的。如：文本、图片、音频、视频,、HTML(用于展示页面的内容)、CSS(用于美化页面，布局页面)、JavaScript(控制页面元素，增强页面交互效果).....
 
  
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。
 
  
2. 动态资源：使用动态网页技术发布的资源。
 
  
特点：所有用户访问，得到的结果可能不一样。如：jsp/servlet,php,asp...
 
  
如果用户请求的是动态资源，那么服务器会将动态资源转换为静态资源，再发送给浏览器。
 
  
 
 
  
day001 HTML&CSS知识合辑及实战案例—02