零：
HTML是互联网成功的根基。
1.HTML 与 HTML
HTML 诞生于20世纪90年代初，HTML 5是前版本的自然延续，继承了大部分特性，向后兼容。增加了大量新的功能。比如：用于描述内容的辅助元素(如article、main、figure等) ;还有一些用来协助创建强大Web应用程序的新功能则较为复杂。只有牢牢掌握了创建网页的技能，才能去学习HTML5更复杂的功能。
2.CSS与CSS3
1996年，CSS3比CSS早期版本更为强大，它引入了大量的视觉效果，如阴影、圆角、渐变等。
W3C的网站是业内Web标准规范的主要信息来源。
由于种种原因，另- 一个组织，Web超文本应用技术工作组(WHATWG)在负责开发HTML5规范的大量内容。
HTML5 (W3C)
http://www.w3.org/TR/htm15/
HTML5.1 (W3C)
http://www.w3.org/TR/htm151/
开发中的HTML标准(WHATWG)
http://www. whatwg.org/specs/web-apps/ current- work/ multipage/
万维网的普适性-万维网上的信息应该能被所有人访问。
渐进增强(progressiveenhancement)的理念能帮助你构建具有普适性的网站。这不是一门语言，而是一种建站方法，它由Steve .Champeon于2003年提出。
· HTML构建，CSS加入设计，JavaScript添加额外的行为。
· 渐进增强背后的涵义是共赢。
一：
网页的构造块
一个网页主要有三个部分：文本内容（text content）
对其他文件的引用（references to other files）
标记 （markup）
1.1 HTML思想
想象生活场景，对你家里的物品贴上便利贴。注意是标记的、描述的是内容，不是控制的外观。
1.2 基本的HTML页面
每个网页都包含DoCTYPE、html、head和body元素，它们是网页的基础。
大部分有开始和结束标签，有的没有结束标签，如meta 。
网页的顶部和头部，<!DOCTYPE html> 告诉浏览器是HTML5页面，始终位于第一行。
代码的缩进与显示没有任何关系，为了阅读方面最好进行缩进。
1.3标签
1.元素 <>xxx</>
空元素 <img src=”blue.jpg” width=”300”/> : img是元素名，不推荐使用大写字母；src、width是属性,用空格间隔。
2.属性-值 有的可以接受任何值，有的有限制。最常见的是预定义值（枚举值）如：<link rel=”stylesheet” media=”screen” href=”style.css”> 其中screen是预定义值，style.css是非预定义值。其他的：数字、布尔、URL（引用）。
3.父子元素类似家谱的结构
1.4 文本内容： 把多个空格/制表符换成单个空格。回车/制表符换成单个空格。
特殊字符：© 等
推荐指定UTF-8 或 utf-8
1.5 处理链接和图像没问题；HTML5之前没有内置处理视频和音频的方法，现在有audio 和 video 元素。
1.6 文件名和文件夹名全部使用小写字母，单词用-间隔，用html作为扩展名。
1.7 URL(Uniform Resource Locator, 统一资源定位符)
http://www.site.com/tofu/index.html
模式 主机名 目录 文件名
默认文件index.html
例外“mailto:somename@somedomain.com”
常用：http/https 、 mailto、ftp
绝对路径与相对路径
引用上层目录的文件： ../xxx.html
<!doctype html>
<html >
<head>
<meta charset='utf-8'>
</head>
<body>
<article>
<h1>我的demo-h1</h1>
<img src="leaf.png" width='200' height="200" alt='Blue Flex'>
<p> I am 张三<em>amazed</em> at the beautiful,delicate<a href="http://xxx/jj.png" rel='external' title="Learn more">Blue Flex</a>That some took hold </p>
</article>
</body>
</html>
标题 h1~h6
图像 img
段落 p；嵌套：强调 em；链接 a，表示“锚”anchor
HTML 中有100多种，常用的只是少量的核心元素。
二：处理网页文件
2.1 规划网站 内容、访问者、结构、内容、一致的命名
2.2创建新的网页: 任意文本编辑期 -> 保存html文件 -> 打开
三：基本HTML结构
两部分：head：页面标题<title>、加载样式表、js文件
和body：文本、图像、表单、音视频
3.5创建页眉 <header>
如果h1-h6可以满足的不用header
与h1-h6不可互换
不能在header中嵌套footer或另header
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
</head>
<body>
<!-- 开始页面级页眉-->
<header role='banner'>
<!--站点标识可以放在这里-->
<!--全站导航-->
<nav role="navigation">
<ul>
<li><a href="#gaudi">Barcelona </a></li>
<li lang="en"><a href="#sa">LA Sagda</a></li>
<li><a href="#park">Park</a></li>
</ul>
</nav>
</header>
<!--开始i主要内容-->
<main role='main'>
<article>
<!-- <h1>我的demo-h1</h1> -->
<h1 id="gaudi" > Arts </h1>
<p>some took hold </p>
</article>
</main>
<!--开始附注栏-->
<aside role="complementary">
<!--次级导航-->
<nav role="navigation">
<ul>
<li><a href="/arts/movies">
--> Movies</a></li>
<li><a href="/arts/music">
--> Music</a></li>
</ul>
</nav>
</aside>
<!--开始页面级页脚-->
<footer role="contentinfo">
<!--辅助性链接并未包在nav中-->
<ul> ...我是页脚... </ul>
</footer>
</body>
</html>
main 是HTML5新添元素，一个页面就一个
若创建web应用，使用main包围主要功能
main不能放在article aside . footer . header 中
role=“main” 可以帮助屏幕阅读其定位页面主要区域。
用article创建文章
3.9 定义区块
section 代表文档或应用的一个一般区块。页面的特定区域，而div则不传达任何语义。
如果只是出于添加样式的原因要对内容添加一个容器，应使用div而不是section。
section本质上组织性结构性更强，article代表是自包含的容器。
3.14
为元素添加唯一ID。 id=‘name’
为元素制定类别 class=“name anothername“
页面中每一个id是唯一的，一个class名称可以分配个任意数量的元素，可有多个
class和id的名称，通常用 - 分割多个单词
<title="label"> 元素添加标签，
四：文本
重要的文本 <strong>
强调的文本 em
元素简介 <i> 斜体
图 ：figure
small
术语定义 ： dfn
上标 <sup>
下标 <sub> .
添加地址：address
插入文本：ins
删除：del
标记不准确文本：s
标记代码 。 <code>
预格式化文本 。 pre - -- 代码中什么样，页面中就显示什么样。
突出：mark
换行：br 或 <br/>
span元素没有任何语义，只是包围字词或短语， 而div适合包含块级内容
下划线 u
进度 。 progress
五： 图像
jpeg适用于彩色照片，一种有损的格式。png和gif是无损的格式。
格式用法颜色索引色透明alpha透明
jpeg大多数照片1600万以上-------
png-8适用于标识，重复的图案以及其他颜色较少的图像或具有连续颜色的图像256支持支持
png-24与png-8相似，支持颜色更多的图像1600万以上支持---
png-32与png-24相似，不过支持alpha透明1600万以上---支持
GIF用法与png-8类似，在大多数情况下应使用png-8256支持---·
WebP图像格式，是谷歌建立的一种格式。
对于图标，256色够了。照片等最好jpeg，数字图片用像素为单位，打印机的每英寸点数（dpi）通常比显示器的每英寸像素数（ppi）要多，这就是为什么相同的图像在显示器看要大得多。
对于SVG（可缩放矢量图形）图像语言创建的图像，无论放大和缩小都不会影响其质量。无论页面中显示的尺寸多大，其文件大小总是恒定的。
png做透明度较好，让边缘变得平滑，不产生锯齿。
动画可以保存为gif，但是现在这样做越来越少了，通常使用css动画，js、Canvas、SVG和flash创建动画，得益于web技术和浏览器的支持程度的提高。Flsh创建的动画也在减少，是由于iOS不支持。
RGB - 三原色
Cyan、Magenta（品红）、Yellow、black - CMYK模式-印刷四分色
img标签内显示，alt=“”
除了为Retina显示屏准备的图像，用width和height属性改变图像在浏览器中的大小是一种快捷但有些丑陋的做法。比较好的做法是用图像编辑器改变尺寸。
网站图标：ico格式，favicon.ico ，16x16，Retina -32x32; iOS设备上会用到 apple-touch-icon
网友评论