认识HTML_html/css_WEB-ITnose

基本框架：

 1   2   3  4  5  6  7 
 8 
 9 
10 11 
12 13 

注释：

和告诉浏览器文件的内容是HTML

被和包围的首部（head）告诉浏览器关于web页面的信息

head标记中放入title标记，title出现在浏览器窗口

页面的主体包括和标记以及他们之间的所有内容，是浏览器中看到的部分

元素 = 开始标记 + 内容 + 结束标记

style，CSS

 1                      2      3          4     14 

注释：

style指定样式为CSS

background-color ：背景色

margin-left，margin-right：左右外边距分别占页面的20%

border：页面周围边框为虚线，颜色为黑色

padding：在页面主体周围创建一些内边距

font-family：定义文本使用的字体

HT（hypertext）

1  elixirs 2  cnblogs jj-kelion 3  RETURN 4  

注释：

使用从一个页面链接到另一个页面

的属性指定了链接的目标文件

元素的内容是链接的标签。默认的，这个标签有下划线，指示可以单击的

文字和图像都可以用作链接的标签

使用“..”可以链接到源文件的上一层文件夹的一个文件，".."代表父文件夹。

“/”用来分隔路径的图像

示图：

,

1 
2     Passing cars, 
3     when you can't see, 
4     A glimpse, 
5 
6 7 
8      passing car ,when you can't see.9 

注释：

：双引号，短引号，作为现有段落的一部分

：较长引用，单独显示，为块元素

：换行符

，

，

 1 
 2     
 one 
 3     
 two 
 4     
 three 
 5     
 four thing  6         
 7             
 one 
 8             
 two 
 9             
 three 
10         
11     
12 

注释：

：ordered list 有序

: unordered list 无序

： 用来标识每个元素

和
1. 或者
   和
   • 总是要一起使用

   URL

    1 URL: 2     http://www.cnblogs.com/JJ-kelion/ 3          4      cnblogs jj-kelion 5          6      7     
    Chai Tea 
      8      9      Chai tea 10     11      cnblogs jj-kelion    

   注释：

2. URL：域名，用来唯一标识网站
3. 为了便于访问，在元素中使用title元素
4. 使用target属性在另一个浏览器窗口中打开链接。

使用图像：

幕后步骤：

1. 浏览器从服务器获取文件“jj-kelion.html”
2. 读取“jj-kelion.html”，发现有n个图像需要获取
3. 从服务器逐个得到图像，从第一开始，显示完后，转向下一个图

常用图片格式：

5. JPEG
6. PNG
7. GIF

格式分析：

8. JPEG：适合连续色调图像，可以表示千万种颜色，有损格式，不支持透明和动画
9. PNG：适合单色和线条构成图，是一种无损格式，允许透明，
10. GIF：最适合单色图和线条图，最多256种颜色，支持透明，无损格式，支持动画。

总结：

11. JPEG和PNG擅长表示logo和文本图像；
12. JPEG擅长照片
13. 需要透明和多种颜色：选择PNG



1 
2 
3 
4 
5  

注释：

14. src不只是用于相对链接，还可以放入URL
15. 相同网站上的链接和图像，最好使用相对链接
16. 如果图像未能显示，就会用alt属性指定的描述图像的文本代替图像

创建缩略图步骤：

1. 为缩略图创建一个目录
2. 将各个分辨率降低后的照片存入文件夹中
3. 将页面中的各个元素的src设置为缩略版的
4. 增加从缩略图到一个新页面显示大图的链接

HTML5

指南：

17. 首行
18. alt属性为必要的
19. 指定字符编码，在首部中的首行，
20. 验证代码工具：http：//validator.w3.org