零:
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
Arts
some took hold
- ...我是页脚...
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