HTML和CSS

Web语言

1.虚线边框

border:2px dotted black;

2.设置左右外边距分别占页面的20%

margin-left:20%

margin-right:20%

3.相对路径

子级文件访问父级文件：../文件（上行两级文件夹../../文件）

父级文件访问子级文件：下级文件夹名称/文件

4.web通用分割符

对于Mac、Windows、Linux还是其他操作系统，在HTML的路径都要使用斜线"/"

5.引用元素

<q>表示短引用，内联(inline)元素，作为现有段落的一部分，部分浏览器会在节点两边增加双引号。

<blockquote>表示长引用，块(block)元素，需要单独显示

6.换行元素

<br>:无结束标记，无其他内容的void元素

7.列表元素

<li>：显示列表项

<ol>或<ul>：包围列表项，其中，<ol>将作为有序列表显示，<ul>将显示为一个无序列表。（unordered list = ul,ordered list = ol,list item = li）

可以在列表中嵌一个列表，在<li>元素中嵌套，称为嵌套列表。

还有另外一类列表：定义列表

<dt>：定义术语

<dd>：定义描述

8.使用字符实体

当遇到某个字符在编辑器无法输入（如<、>、或者版权符号）时使用

<：&lt

>：&gt

&：&amp

版权符号：&copyright

9.其它元素

<code>：用来显示计算机程序代码

<em>：用来标记想用不同方式展示的文本，比如想强调一个要点

<time>：用来告诉浏览器这个内容是一个日期或时间，或者同时包含日期和时间

<strong>：用来标记希望特别强调的文本

<pre>：当希望浏览器按你输入的方式原样显示文本时，使用这个元素来指定文本的格式。

10.页面创建过程

画出草图—创建略图—写出HTML

使用与内容含义最接近的元素，如使用列表就不要使用段落元素

11.<a>的title属性

提供链接信息，一般鼠标悬浮显示内容。不要使用类似“单击这里”或“这一页”之类的无意义链接标签。

12.使用id属性为<a>创建目标

当需要链接目标页的指定位置时，可以在链接中加入#和目标标识符来定位，如

<a href="index.html#chai">See Chai Tea</a>

可以在长文档的顶部定义一个"top"，然后再下面定义一个"Back to top"，如

<a href="#top">Back to top</a>

13.<a>的target属性

target="_blank"：浏览器总是打开一个新窗口来显示页面

当指定了相同的target名称，会在同一个弹出窗口中打开。

14.在网页中使用图像

web上最常用的是3种格式：JPEG 、PNG和GIF

JPEG：照片和复杂图像使用

最适合连续色调图像，如照片
可以表示包含多达1600万种不同颜色的图像
是一种“有损”格式，因为缩小文件大小时会丢掉图像的一些信息
不支持透明度
文件比较小，以便web页面更高效地显示
不支持动画

PNG或GIF：单色图像、logo和几何图形使用

PNG最适合单色图像和线条构成的图像（如logo、剪贴画和图像中的小文本）
PNG可以表示包含上百万种不同颜色的图像，有3种：PNG-8、PNG-16、PNG-32，取决于需要表示多少种颜色
PNG会压缩文件来缩小文件大小，不过不会丢掉信息，是“无损”格式
允许设置为“透明”，使图像下面的东西可以显示出来
与相应的JPEG文件相比会更大一些，不过取决于使用的颜色数，可能比相应的GIF文件小，也可能更大

类似于PNG,GIF最适合单色图像和线条构成的图像（如logo、剪贴画和图像中的小文本）
GIF可以表示最多256种不同颜色的图像
GIF也是一种“无损”的格式
GIF也支持透明度，不过只允许一种颜色设置为“透明”
GIF文件往往比相应的JPEG文件大
支持动画

<img>是内联元素，不会在前面或后面插入换行。并且也是void元素。

alt属性可以显示提示内容，如果图像未能显示，则使用这个文本来代替，如

<img src = "http://www.baidu.com" alt = "百度一下">

width和height属性控制页面中显示图像的宽度和高度，使用像素数指定，不需要px，如果通过这两个属性来调整图片大小，仍会下载原图，占用网络资源

CSS像素：1英寸的1/96（96ppi），对于一个3''宽X3''高的图像，要使用96（像素）X3（英寸）=288*288像素

标准及其他

1.发展

HTML1.0~2.0：1989~1991，页面不好看，已经支持超文本，没有人关心表现。

HTML3：1995，浏览器战争在Netscape和Microsoft之间展开，通常必须写两个单独的页面，一个用于Netscape，一个用于IE。

HTML4：1998，战争结束，万维网协会成立（World Wide Web Consortium），创建了唯一一个HTML标准，结构和表现分离。

HTML4.0.1：1999，只是做了一些修补。

XHTML1.0：2001，XML与HTML的结合体，XHTML承诺由于其严格，再加上提供的一些新方法，只要遵循这个标准，Web争端就可平息。但是大多数人很讨厌。

HTML5：2009~2012，支持HTML4.0.1标准的大部分特性，还提供了一些新特性，如支持类似博客的元素、新的视频和图形功能，HTML5注定成为标准。

2.doctype

<!DOCTYPE html PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml111/DTD/xhtml111.dtd">
<!doctype html>

html:表示<html>是页面的根元素

PUBLIC：表示HTML4.01标准时公共可用的

"-//W3C//DTD HTML 4.01//EN"：表示我们在使用HTML4.01版本，另外这个HTML标记用英语编写

"http://www.w3.org/TR/html4/strict.dtd"：指向一个文件，标识这个特定的标准

3.浏览器适用版本

HTML2012：可用于IE9,chrome17,Firefox10,Safari5,Opera11

HTML2012+：可用于以上所有浏览器以及它们各自的新版本