跳至主要內容
历史发展

历史发展

  • 1965 年左右,Ted Nelson 提出
  • 1990 年,Tim-Berners-Lee,对 Web 的远见,提出 Hypertext 超文本概念
    • Hypertext,包含了指向其他文本的链接,而不是像小说中的单一线性流
  • 1991 年,在 SGML 基础上,将 Hypertext 定义为一个标记语言
    • SGML:Standard Generalized Markup Language ,标准通用标记语言
      • ISO ,国际标准化组织,所定义,用来规范宣告式标记语言的标准
      • Web 环境中,XML、XHTML、HTML4 都是以 SGML 为基础的语言
      • HTML5 开始,HTML 有了自己的解析规则,不再以 SGML 为基础语言
  • 1993 年,IETF,正式开始制定 HTML 规范
  • 1994 年,Tim-Berners-Lee 为了 Web 发展,成立了 W3C
  • 1995 年,经历了几个版本后,发布了 HTML2.0
  • 1996 年,W3C 接管 HTML 的标准化工作
  • 1997 年,W3C 发布 HTML3.2
  • 1999 年,HTML4.0 发布
  • 2000 年,HTML4.0 成为 ISO 标准
  • 之后,W3C 几乎放弃了 HTML 而转向 XHTML
  • 2004 年,WHATWG,小组成立
    • WHATWG:Web Hypertext Application Technology Working Group,超文本应用技术工作组
  • WHATWG 小组转回参与制定 HTML5 标准
  • 2008 年,W3C 和 WHATWG 发布了 HTML5 第一份草案
  • 2014 年,发布了 HTML5 标准的最终版

路漫大约 1 分钟HTMLHTML历史发展
文档结构

文档结构

完整的 HTML 文本基本结构

  • DTD:Document Type Definition
  • html 根元素
  • metadata 文档元数据
  • body 文档内容
  • 注释 <!-- -->
  • 实体引用:转义字符

HTML 文件扩展名,通常为 .html.htm

  • 用户可以从 Web 服务器中下载
  • 并使用 Web 浏览器来解析和显示

路漫小于 1 分钟HTMLHTML文档结构
网站的信息架构

网站的信息架构

规划整个网站,页面的拆分、组合、相互连接,提升用户体验

通用结构

  • 页眉
  • 导航菜单
  • 主内容
  • 侧边栏
  • 页脚
    • 联系方式
    • 版权声明
    • 超链接
      • 术语
      • 状态
      • 站点语言选择
      • 无障碍访问策略

路漫小于 1 分钟HTMLHTML网站架构
DTD

DTD

  • DTD:Document Type Declaration 文档类型声明
  • <!DOCTYPE html>(H5 标准模式)
- [DTD](!https://developer.mozilla.org/zh-CN/docs/Glossary/DTD)

历史发展

第一次浏览器大战,两个主要阵营

  • 网景(Netscape)的浏览器(Navigator)
  • 微软(Microsoft)的浏览器(Internet Explorer,IE)

路漫大约 2 分钟HTMLHTMLDTD
a

a

被点击访问过的超链接样式不在具有 hover 和 active 了

解决方法是改变 CSS 属性的

排列顺序: L-V-H-A(link,visited,hover,active)

a:link{}
a:visited{}
a:hover{}
a:active{}

路漫小于 1 分钟HTMLHTMLlink
iframe

iframe

常用属性

| 属性 | 说明 | | ----------- | -------------------------------------------------: | --- | ------- | | name | frame 的名称 | | width | 设置 frame 的宽度 | | height | 设置 frame 的高度 | | src | 设置在 frame 中显示的页面 | | frameborder | 是否显示 frame 的边框(0:不显示边框 1:显示边框) | | scrolling | 是否显示 frame 中的滚动条( yes | no | auto ) |


路漫大约 1 分钟HTMLHTMLlink
img

img

常用的图片类型

png-8

png-24

jpeg

gif

svg

webp

谷歌(google)开发的一种旨在加快图片加载速度的图片格式。

图片压缩体积大约只有 JPEG 的 2/3,并能节省大量的服务器带宽资源和数据空间。

Facebook、Ebay 等知名网站已经开始测试并使用 WebP 格式。

在质量相同的情况下,WebP 格式图像的体积要比 JPEG 格式图像小 40%。


路漫小于 1 分钟HTMLHTMLlink
link

link

link 元素,属于外部资源链接元素,规定了当前文档与外部资源的关系

<link > 使用总结整理

rel

命名链接文档与当前文档的关系

rel.stylesheet

一、加载 CSS


wangzhijie大约 3 分钟HTMLHTMLlink
基本介绍

基本介绍

HTML:HyperText Markup Language,超文本标记语言

  • 不是一门编程语言,是标记语言/描述语言
  • 用来描述网页结构
  • 用来告知浏览器如何组织页面的标记语言
  • 指明,标题、段落、文本、超链接、图片、列表、表单

路漫小于 1 分钟HTMLHTML介绍