HTML-01-总纲

以A与B两条线索学习前端。A以用户视觉进行描述，B以程序员视觉进行描述。

 

 

A.1什么是网页

网页：网上流通，如纸一页，表示信息的元素的集合。

元素：用于传递给用户信息，如文字元素，图片元素。

文档：以代码形式记录元素的文件。

 

B.1什么是网页

网页是由HTML代码+元素构成的集合。

HTML：创建网页文档和元素，并赋予元素属性的语言。用各种标签引入元素，用标签的属性描述元素。

例1：引入网页文档：<html>文档内容</html>

例2：引入文字元素：<p>文字</p>

例3：通过标签中的属性赋予元素属性:<p style="color:red;">文字</p>

 

 

A.2网页的结构

第一层-整体信息

第二层-区域信息

第三层-具体信息

第一层-整体信息：一张网页视为一个整体。类似把房屋看成一个整体，描述它的名字，所属人等信息。

第二层-区域信息：一张网页由多个区域构成。类似房屋分为卧室，客厅等，描述各区域的面积，位置等信息。

第三层-具体信息：每个区域的具体构成。类似卧室有电视机，床等构成。

 

B.2网页的结构

第一层-整体信息

1.语言版本:网页用的HTML是哪个版本 

2.标题　　:网页的标题　

3.元信息　:网页的概述，关键字，作者，编码等信息 

4.内部样式表：文档内部的样式表，用于改变元素外观。

5.内部脚本表：文档内部的脚本表，用于改变元素动作。

6.文档的链接：文档到外部样式文档或脚本的链接。

7.超链接的基准：文档中超链接相对URL的默认的地址与默认目标。

 

第1.5层：图层信息   

相对定位：参考系为原图层位置。

绝对定位：参考系为前辈元素且需要指明。指明方式理论为：position:reference frame;，后来只有进行定位声明即为参考系

固定定位：参考系为视图窗口

 

第二层：区域信息

整个区域信息

多个分区信息：独立区域-框架 和 非独立区域-DIV等

独立区域-框架

  1. 基础框架:左右或上下<frameset></frameset>
  2. 混合框架：左右加上下<frameset><frameset></frameset></frameset>
  3. 内联框架：<iframe></iframe>

非独立区域：使用文档流与浮动分区

 

  1. div
  2. header
  3. footer
  4. nav
  5. article
  6. section

 

第三层：具体信息

  1. 区域
  2. 文字 连续的字母看成一个文字元素比如 dsfadffsfsf看成<text value="dsfadffsfsf"/> 而单词和汉字每一个看成一个元素。word-wrap: break-word;可换行
  3. 语义
  4. 图片
  5. 图像
  6. 列表
  7. 表格
  8. 表单
  9. 多媒体
  10. 插件
  11. 赋予特殊属性：超链接<a>、图标库<i>

 

元素的种类：

一层：文档信息元素

非一层：

  1. 块元素
  2. 行内元素：被当做文字对待，所以可以使用text-align来对齐
  3. 组合元素：同上。元素只要进行浮动或图层定位就自动转为该类型
  4. 行元素：虚拟的包围行的块元素，仅通过line-height控制

1和3的框为块框。2的框为行内框。4的框为行框。

posted on 2016-10-14 22:17  limpidstar  阅读(73)  评论(0)    收藏  举报

导航