html5与css3基础,HTML5与CSS3基础-01

零：

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 。

网页的顶部和头部， 告诉浏览器是HTML5页面，始终位于第一行。

代码的缩进与显示没有任何关系，为了阅读方面最好进行缩进。

1.3标签

1.元素 <>xxx>

空元素   : img是元素名，不推荐使用大写字母；src、width是属性,用空格间隔。

2.属性-值 有的可以接受任何值，有的有限制。最常见的是预定义值(枚举值)如：  其中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, 统一资源定位符)

模式      主机名        目录  文件名

默认文件index.html

例外“mailto:somename@somedomain.com”

常用：http/https 、 mailto、ftp

绝对路径与相对路径

引用上层目录的文件： ../xxx.html

我的demo-h1

I am 张三amazed  at the beautiful,delicateBlue FlexThat some took hold

标题 h1~h6

图像 img

段落 p；嵌套：强调 em；链接 a，表示“锚”anchor

HTML 中有100多种，常用的只是少量的核心元素。

二：处理网页文件

2.1 规划网站  内容、访问者、结构、内容、一致的命名

2.2创建新的网页:  任意文本编辑期 -> 保存html文件 -> 打开

三：基本HTML结构

两部分：head：页面标题

、加载样式表、js文件

和body：文本、图像、表单、音视频

3.5创建页眉

如果h1-h6可以满足的不用header

与h1-h6不可互换

不能在header中嵌套footer或另header

• Barcelona
• LA Sagda
• Park

Arts

some took hold

• --> Movies

• --> Music

• ...我是页脚...

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的名称，通常用 - 分割多个单词

  元素添加标签，

四：文本

重要的文本

强调的文本 em

元素简介 斜体

图 ：figure

small

术语定义 ： dfn

上标

下标  _.

添加地址：address

插入文本：ins

删除：del

标记不准确文本：s

标记代码 。

预格式化文本 。 pre  - -- 代码中什么样，页面中就显示什么样。

突出：mark

换行：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